feat: 工作流模板文案同步

src/components/BusinessComponents/ProductSelect/index.tsx

@@ -11,6 +11,7 @@ interface IProductSelectProps {
 	setProductId: any;
 	okText?: string;
 	onConfirm?: any;
+	title?: any;
 }
 
 const ProductSelect = (props: IProductSelectProps) => {
@@ -21,6 +22,7 @@ const ProductSelect = (props: IProductSelectProps) => {
 		okText = "下一步",
 		setOpen,
 		onConfirm,
+		title,
 	} = props;
 	const { productListStore } = useStores();
 
@@ -43,7 +45,7 @@ const ProductSelect = (props: IProductSelectProps) => {
 	return (
 		<MyDialog
 			open={open}
-			title="选择产品"
+			title={title || "选择产品"}
 			okText={okText}
 			onClose={() => setOpen(false)}
 			onConfirm={() => handleConfirm()}

src/components/CommonComponents/VirtuallyTable/index.tsx

+import React from "react";
+import { useCallback, useEffect, useState, useRef } from "react";
+import { Column, Table, AutoSizer } from "react-virtualized";
+import "react-virtualized/styles.css"; // only needs to be imported once
+
+type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
+
+export type sortState = {
+	field: string | null | undefined | ""; // 根据哪个属性来排序
+	order: Order | null | undefined | "";
+};
+
+interface IVirtuallyTableProps {
+	rows: Array<any>; // 表格数据
+	headCells: Array<any>; // 表头配置
+	tableKey?: string; // 表格数据的key
+	loading?: boolean; // 是否正在加载数据
+	hasCheckbox?: boolean; // 是否有复选框
+	selectItems?: Array<any>; // 选中的项
+	setSelectItems?: any; // 设置选中的项
+	// fixedHead?: boolean; // 是否是固定表头
+	noDataText?: string; // 无数据提示文案
+	// hasTableFooter?: boolean; // 是否有分页组件
+	// page?: number; // 当前页
+	// pageChange?: any; // 页码改变
+	// count?: number; // 总页数
+	// totalElements?: number; // 数据总量 不止是列表渲染的长度
+	sortState?: sortState; // 排序状态
+	setSortState?: any; // 设置排序状态
+	// paginationType?: "simple" | "complex"; // 分页组件的类型   simple简洁式  complex复杂、带每页数量切换、总数等
+	// rowsPerPage?: number; // 每页多少条数据
+	// handleChangeRowsPerPage?: any; // 每页多少条数据变化
+	nodataText?: any; // 无数据文案
+	handleRow?: any; // 点击一行
+	activeId?: string; // 选中的一行的id
+	disableFn?: any; // 禁用时根据disableFn来判断是否禁用
+}
+
+const VirtuallyTable = (props: IVirtuallyTableProps) => {
+	const {
+		rows,
+		headCells,
+		tableKey = "id",
+		loading = false,
+		hasCheckbox = false,
+		selectItems = [],
+		setSelectItems,
+		sortState,
+		setSortState,
+		nodataText,
+		handleRow,
+		activeId,
+		disableFn,
+	} = props;
+
+	const virtuallyTableBoxRef: any = useRef(null);
+	const virtuallyTableRef: any = useRef(null);
+
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+
+	// const list = [
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	{ name: "Brian Vaughn", description: "Software engineer" },
+	// 	// And so on...
+	// ];
+	console.log(rows);
+	console.log(headCells);
+
+	// const getCodeWidth = () => {
+	// 	const addEnvironmentCodeElement =
+	// 		document.getElementById("addEnvironmentCode");
+	// 	setCodeWidth(addEnvironmentCodeElement?.offsetWidth || 0);
+	// };
+
+	// useEffect(() => {
+	// 	getCodeWidth();
+	// }, []);
+
+	const getTableWidthHeight = () => {
+		setWidth(virtuallyTableBoxRef?.current?.offsetWidth || 1000);
+		setHeight(virtuallyTableBoxRef?.current?.offsetHeight || 300);
+	};
+
+	useEffect(() => {
+		getTableWidthHeight();
+	}, []);
+
+	window.onresize = () => {
+		getTableWidthHeight();
+	};
+
+	return (
+		<div
+			ref={virtuallyTableBoxRef}
+			style={{ width: "100%", height: "100%", border: "1px solid red" }}
+		>
+			{width && height && (
+				<Table
+					ref={virtuallyTableRef}
+					width={width}
+					height={height}
+					headerHeight={20}
+					rowHeight={30}
+					rowCount={rows.length}
+					rowGetter={({ index }: any) => rows[index]}
+				>
+					{headCells.map((headCell) => {
+						return (
+							<Column
+								key={headCell.id}
+								label={headCell.label}
+								dataKey={headCell.id}
+								width={headCell.width}
+								flexGrow={headCell.flexGrow || 0}
+								cellRenderer={
+									headCell.cellRenderer
+										? (data: any) => {
+												headCell.cellRenderer(data);
+										  }
+										: (data: any) => {
+												return data.cellData;
+										  }
+								}
+							/>
+						);
+					})}
+					{/* <Column label="Name" dataKey="name" width={100} />
+				<Column width={200} label="Description" dataKey="description" /> */}
+				</Table>
+			)}
+		</div>
+	);
+};
+
+export default VirtuallyTable;

src/components/mui/MyTabs/index.tsx

@@ -185,18 +185,16 @@ const Tabs = (props: IProps) => {
 						}}
 					>
 						{title ? (
-							<>
-								<span
-									className={classNames({
-										[styles.titleBox]: true,
-										[titleClass]: titleClass,
-									})}
-								>
-									{title}
-								</span>
-								<div className={styles.titleBoxLine}></div>
-							</>
+							<span
+								className={classNames({
+									[styles.titleBox]: true,
+									[titleClass]: titleClass,
+								})}
+							>
+								{title}
+							</span>
 						) : null}
+						{title ? <div className={styles.titleBoxLine}></div> : null}
 						{tabList
 							?.filter((item) => !item.hide)
 							.map((item, key) => {

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -165,7 +165,7 @@ const SaveOperator = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={description}
 						id="desc"

src/views/Project/components/AddProject/index.tsx

@@ -208,7 +208,7 @@ const AddProject = observer((props: IAddProjectProps) => {
 							</MenuItem>
 						))}
 				</MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={desc}
 						error={descCheck.error}

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.tsx

@@ -545,6 +545,7 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 					<MyButton
 						text="开始构建"
 						onClick={() => handleSubmit()}
+						isLoadingButton={true}
 						loading={loading}
 					></MyButton>
 				</div>

src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.tsx

@@ -34,7 +34,7 @@ const TemplateItem = (props: ITemplateItemPorps) => {
 					</>
 				)}
 				<div className={style.templateTopLine}></div>
-				<div className={style.templateTopItem}>{templateInfo.version}</div>
+				<div className={style.templateTopItem}>v{templateInfo.version}</div>
 				<div className={style.templateTopLine}></div>
 				<div className={style.templateTopItem}>{templateInfo.updatedTime}</div>
 			</div>

src/views/ResourceCenter/UserResources/UserResourcesTemplate/index.tsx

@@ -164,6 +164,8 @@ const UserResourcesTemplate = observer(() => {
 					setOpen={setShowProductSelect}
 					productId={productId}
 					setProductId={setProductId}
+					title="新建自定义模板"
+					okText="确定"
 					onConfirm={() => {
 						setTemplateId("");
 						setShowAddTemplate(true);

src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx

@@ -76,7 +76,7 @@ const WorkflowOperator = observer(() => {
 	}, [searchParams.productId, searchParams.type]);
 
 	return (
-		<>
+		<div>
 			<div className={styles.indexBox}>
 				<div className={styles.headerBox}>
 					<div>
@@ -163,7 +163,7 @@ const WorkflowOperator = observer(() => {
 					pageType={pageType}
 				/>
 			)}
-		</>
+		</div>
 	);
 });
 

src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx

@@ -239,7 +239,7 @@ const SaveCustomTemplate = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={description}
 						id="desc"

src/views/demo/VirtuallyListDemo/index.tsx

 import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
+import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
+import MyButton from "@/components/mui/MyButton";
 
 const VirtuallyListDemo = () => {
 	let listData: Array<any> = [];
@@ -16,10 +18,6 @@ const VirtuallyListDemo = () => {
 		parent,
 		style,
 	}: any) => {
-		// const name = listData[index].name;
-
-		// // const content = isScrolling ? "..." : <div>{name}</div>;
-		// const content = <div>{name}</div>;
 		return (
 			<div key={key} style={style}>
 				<div
@@ -40,32 +38,81 @@ const VirtuallyListDemo = () => {
 			</div>
 		);
 	};
+
+	const rows = [
+		{
+			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
+			b: "werewrw",
+			c: "asdfasf",
+			d: "asdfasdf",
+			e: "asd4534",
+			id: "1",
+		},
+	];
+	for (let i = 0; i < 10000; i++) {
+		rows.push({
+			a: "xcgh",
+			b: "sdf",
+			c: "sdfg",
+			d: "sdfg",
+			e: "wertwe",
+			id: "12" + i,
+		});
+	}
+	const buttonHeadCells = [
+		{
+			id: "a",
+			label: "属性a",
+			width: 150,
+		},
+		{
+			id: "b",
+			label: "属性b",
+			width: 150,
+		},
+		{
+			id: "c",
+			label: "属性c",
+			width: 150,
+			flexGrow: 2,
+		},
+		{
+			id: "d",
+			label: "属性d",
+			width: 200,
+			flexGrow: 2,
+		},
+		{
+			id: "caozuo",
+			label: "操作",
+			width: 150,
+			cellRenderer: (data: any) => {},
+		},
+	];
+
 	return (
 		<div>
 			<div>
-				<VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>;
+				{/* <VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>; */}
 			</div>
-			<div style={{ width: "300px", height: "300px", overflow: "auto" }}>
-				{listData.map((item, index) => {
-					return (
-						<div
-							key={index}
-							style={{
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-							}}
-						>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-						</div>
-					);
-				})}
+			<div style={{ height: "600px" }}>
+				<VirtuallyTable
+					// rows={rows}
+					rows={rows.map((row) => {
+						return {
+							...row,
+							// caozuo: (
+							// 	<MyButton
+							// 		text="删除"
+							// 		onClick={() => {
+							// 			// handleDelete(row.id);
+							// 		}}
+							// 	></MyButton>
+							// ),
+						};
+					})}
+					headCells={buttonHeadCells}
+				/>
 			</div>
 		</div>
 	);