feat: 工作流模板-完成新增模板

src/assets/resourceCenter/templateIcon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 84</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人资源-工作流模版" transform="translate(-661.000000, -574.000000)">
+            <g id="编组-4" transform="translate(641.000000, 526.000000)">
+                <g id="编组-84" transform="translate(20.000000, 48.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                    <g id="编组-83" transform="translate(3.500000, 2.000000)">
+                        <polyline id="路径" stroke="#1370FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="17 8.19811748 17 4.99985 8.5 0 0 4.99985 0 14.9999 2.37372196 16.396235"></polyline>
+                        <circle id="椭圆形" fill="#1370FF" cx="3" cy="17" r="2"></circle>
+                        <circle id="椭圆形备份-13" fill="#1370FF" cx="17" cy="12" r="2"></circle>
+                        <polyline id="路径-72" stroke="#1370FF" stroke-width="1.5" points="0.283430346 5.19688053 8.5 9.92482816 8.5 19.6575672"></polyline>
+                        <line x1="8.5" y1="9.92482816" x2="17" y2="4.99985" id="路径-73" stroke="#1370FF" stroke-width="1.5"></line>
+                        <polyline id="路径" stroke="#1370FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="6.25871064 18.7359651 8.5 20 17 14.9999 17 12.5168189"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/BusinessComponents/ProductSelect/index.tsx

+import MySelect from "@/components/mui/MySelect";
+import MyDialog from "@/components/mui/MyDialog";
+import { toJS } from "mobx";
+import { useStores } from "@/store";
+import { useEffect } from "react";
+
+interface IProductSelectProps {
+	open: boolean;
+	setOpen: any;
+	productId: string;
+	setProductId: any;
+	okText?: string;
+	onConfirm?: any;
+}
+
+const ProductSelect = (props: IProductSelectProps) => {
+	const {
+		open,
+		productId,
+		setProductId,
+		okText = "下一步",
+		setOpen,
+		onConfirm,
+	} = props;
+	const { productListStore } = useStores();
+
+	useEffect(() => {
+		if (!productId) {
+			setProductId(toJS(productListStore.productList)[0].value);
+		}
+	}, [productId, productListStore.productList, setProductId]);
+
+	const handleChange = (e: any) => {
+		console.log(e);
+		setProductId(e);
+	};
+
+	const handleConfirm = () => {
+		setOpen(false);
+		onConfirm && onConfirm();
+	};
+
+	return (
+		<MyDialog
+			open={open}
+			title="选择产品"
+			okText={okText}
+			onClose={() => setOpen(false)}
+			onConfirm={() => handleConfirm()}
+		>
+			<MySelect
+				value={productId}
+				onChange={(e) => handleChange(e)}
+				options={[...productListStore?.productList] || []}
+				fullWidth
+			></MySelect>
+		</MyDialog>
+	);
+};
+
+export default ProductSelect;

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

@@ -7,22 +7,18 @@ import { useState, useCallback, useEffect, useMemo } from "react";
 import { getOperatorList } from "@/api/project_api";
 import CircularProgress from "@mui/material/CircularProgress";
 import useMyRequest from "@/hooks/useMyRequest";
-import { useStores } from "@/store";
-import { toJS } from "mobx";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
-import { observer } from "mobx-react-lite";
 
 type IProps = {
 	operatorList: ITask[];
 	setOperatorList: any;
 	setInputActive: any;
+	productId: string;
 };
 
-const OperatorList = observer((props: IProps) => {
-	const { operatorList, setOperatorList, setInputActive } = props; // 流程图中流算子列表
-	const { currentProjectStore } = useStores();
+const OperatorList = (props: IProps) => {
+	const { operatorList, setOperatorList, setInputActive, productId } = props; // 流程图中流算子列表
 	const [list, setList] = useState<ITask[]>([]); // 算子列表
-	const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品ID
 	const [keyword, setKeyword] = useState(""); // 搜索算子列表时的关键词
 	const [dragItem, setDragItem] = useState<any>({}); // 拖拽的算子
 	const [page, setPage] = useState(0); // 算子列表页码
@@ -250,6 +246,6 @@ const OperatorList = observer((props: IProps) => {
 			</div>
 		</div>
 	);
-});
+};
 
 export default OperatorList;

src/views/CustomOperator/index.tsx

@@ -14,10 +14,11 @@ import styles from "./index.module.css";
 type IProps = {
 	setShowCustomOperator: any;
 	initOperatorList: ITask[];
+	productId: string;
 };
 
 const CustomOperator = observer((props: IProps) => {
-	const { setShowCustomOperator, initOperatorList } = props;
+	const { setShowCustomOperator, initOperatorList, productId } = props;
 	const Message = useMessage();
 	const [operatorList, setOperatorList] = useState<ITask[]>(initOperatorList);
 	const [saveFormDialog, setSaveFormDialog] = useState(false);
@@ -168,6 +169,7 @@ const CustomOperator = observer((props: IProps) => {
 						operatorList={operatorList}
 						setOperatorList={setOperatorList}
 						setInputActive={setInputActive}
+						productId={productId}
 					/>
 					<BatchOperatorFlow
 						tasks={operatorList}

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

 import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MyButton from "@/components/mui/MyButton";
 import MySelect from "@/components/mui/MySelect";
@@ -6,24 +7,47 @@ import Add from "@mui/icons-material/Add";
 import CardTable from "@/components/CommonComponents/CardTable";
 import useMyRequest from "@/hooks/useMyRequest";
 import { getWorkflowspecList } from "@/api/resourceCenter";
+// import AddTemplate from "./AddTemplate";
+import templateIcon from "@/assets/resourceCenter/templateIcon.svg";
+import { useStores } from "@/store";
+import { toJS } from "mobx";
+import ProductSelect from "@/components/BusinessComponents/ProductSelect";
+import WorkFlowEdit from "@/views/WorkFlowEdit";
 import style from "./index.module.css";
 
-const UserResourcesTemplate = () => {
+const UserResourcesTemplate = observer(() => {
 	const [title, setTitle] = useState("");
-	const [product, setProduct] = useState("");
+	const [showAddTemplate, setShowAddTemplate] = useState(false);
+	const [showProductSelect, setShowProductSelect] = useState(false);
+	const [templateId, setTemplateId] = useState("");
+	const [product, setProduct] = useState(""); // 搜索列表用
+	const [productId, setProductId] = useState(""); // 新增模板用
 	const [list, setList] = useState([]);
+	const { productListStore } = useStores();
+	console.log(toJS(productListStore));
+	const getProductName = (productId: string) => {
+		let res = "-";
+		toJS(productListStore.productList).forEach((item) => {
+			if (item.value === productId) {
+				res = item.label;
+			}
+		});
+		return res;
+	};
 	const renderItem = (item: any) => {
 		return (
 			<div className={style.templateBox}>
 				<div className={style.templateTop}>
-					<div className={style.templateTopItem}>{item.productId}</div>
+					<div className={style.templateTopItem}>
+						{getProductName(item.productId)}
+					</div>
 					<div className={style.templateTopLine}></div>
 					<div className={style.templateTopItem}>{item.version}</div>
 					<div className={style.templateTopLine}></div>
 					<div className={style.templateTopItem}>{item.updatedTime}</div>
 				</div>
 				<div className={style.templateTitleBox}>
-					<img src="" alt="" />
+					<img src={templateIcon} alt="" />
 					<div className={style.templateTitle}>{item.title}</div>
 				</div>
 				<div className={style.templateDesc}>
@@ -50,19 +74,6 @@ const UserResourcesTemplate = () => {
 			</div>
 		);
 	};
-	//   createdAt
-	// createdTime
-	// creator
-	// :
-	// description
-	// favorited
-	// id
-	// productId
-	// title
-	// updatedAt
-	// updatedTime
-	// updater
-	// version
 
 	// 获取模板列表
 	const { run } = useMyRequest(getWorkflowspecList, {
@@ -73,9 +84,10 @@ const UserResourcesTemplate = () => {
 
 	useEffect(() => {
 		run({
-			productId: "cadd",
+			productId: product === "all" ? "" : product,
+			title,
 		});
-	}, [run]);
+	}, [run, title, product]);
 
 	return (
 		<div className={style.template}>
@@ -92,20 +104,12 @@ const UserResourcesTemplate = () => {
 					<MySelect
 						title="产品类型"
 						isTitle={true}
-						options={[
-							{
-								label: "全部",
-								value: "ALL",
-							},
-							{
-								label: "批式",
-								value: "BATCH",
-							},
-							{
-								label: "流式",
-								value: "FLOW",
-							},
-						]}
+						options={
+							[
+								{ label: "全部", value: "all" },
+								...productListStore?.productList,
+							] || []
+						}
 						value={product}
 						onChange={(e: any) => setProduct(e)}
 						sx={{ width: "150px", height: "32px" }}
@@ -114,7 +118,7 @@ const UserResourcesTemplate = () => {
 				<div className={style.topRight}>
 					<MyButton
 						text="新建自定义模板"
-						// onClick={() => setAddopen(true)}
+						onClick={() => setShowProductSelect(true)}
 						startIcon={<Add />}
 					></MyButton>
 				</div>
@@ -122,8 +126,29 @@ const UserResourcesTemplate = () => {
 			<div className={style.tableBox}>
 				<CardTable data={list} renderItem={renderItem}></CardTable>
 			</div>
+			{showAddTemplate && (
+				<WorkFlowEdit
+					id={templateId}
+					propsProductId={productId}
+					onBack={() => {
+						setShowAddTemplate(false);
+					}}
+				></WorkFlowEdit>
+			)}
+			{showProductSelect && (
+				<ProductSelect
+					open={showProductSelect}
+					setOpen={setShowProductSelect}
+					productId={productId}
+					setProductId={setProductId}
+					onConfirm={() => {
+						setShowAddTemplate(true);
+						setTemplateId("");
+					}}
+				></ProductSelect>
+			)}
 		</div>
 	);
-};
+});
 
 export default UserResourcesTemplate;

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

@@ -32,12 +32,13 @@ import { Base64 } from "js-base64";
 interface IAddOperator {
 	pageType: string;
 	setPageType: (val: string) => void;
+	productId: string;
 }
 
 type IBuildType = "ENVIRONMENT" | "OPERATOR";
 
 const AddOperator = observer((props: IAddOperator) => {
-	const { setPageType } = props;
+	const { setPageType, productId } = props;
 
 	/** 创建类型 BATCH - 批算子;  FLOW - 流算子*/
 	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
@@ -295,6 +296,7 @@ const AddOperator = observer((props: IAddOperator) => {
 								operatorList={operatorList}
 								setOperatorList={setOperatorList}
 								setInputActive={setInputActive}
+								productId={productId}
 							/>
 							<BatchOperatorFlow
 								tasks={operatorList}

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

@@ -133,7 +133,11 @@ const WorkflowOperator = observer(() => {
 				</div>
 			</div>
 			{pageType && (
-				<AddOperator setPageType={setPageType} pageType={pageType} />
+				<AddOperator
+					productId="cadd"
+					setPageType={setPageType}
+					pageType={pageType}
+				/>
 			)}
 		</>
 	);

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

-import { OutlinedInput } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { toJS } from "mobx";
 import cloneDeep from "lodash/cloneDeep";
 
 import { IOperatorItemProps, IOperatorListProps } from "./interface";
@@ -11,7 +8,6 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 import useMyRequest from "@/hooks/useMyRequest";
 import { IResponse } from "@/api/http";
 import { fetchOperatorList } from "@/api/workbench_api";
-import { useStores } from "@/store";
 import noTemplate from "@/assets/project/noTemplate.svg";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 
@@ -158,10 +154,12 @@ const OperatorItem = (props: IOperatorItemProps) => {
 };
 
 const OperatorList = observer((props: IOperatorListProps) => {
-	const { currentProjectStore } = useStores();
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
-	const { templateConfigInfo, setTemplateConfigInfo, showCustomOperator } =
-		props;
+	const {
+		templateConfigInfo,
+		productId,
+		setTemplateConfigInfo,
+		showCustomOperator,
+	} = props;
 	const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
 	const [keyword, setKeyword] = useState<string>("");
 

src/views/WorkFlowEdit/components/OperatorList/interface.ts

@@ -20,4 +20,5 @@ export interface IOperatorListProps {
     templateConfigInfo: ITask[]
     setTemplateConfigInfo: (val: ITask[]) => void
     showCustomOperator: boolean
+    productId: string
 }
\ No newline at end of file

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

@@ -12,11 +12,9 @@ import MyInput from "@/components/mui/MyInput";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useState } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
-import { useStores } from "@/store";
 
 import styles from "./index.module.css";
 import { useMessage } from "@/components/MySnackbar";
-import { toJS } from "mobx";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 interface IProps {
 	saveFormDialog: boolean;
@@ -32,6 +30,7 @@ interface IProps {
 	creator?: string;
 	templateConfigInfo: ITask[];
 	id?: string;
+	productId: string;
 }
 const SaveCustomTemplate = (props: IProps) => {
 	const {
@@ -48,10 +47,9 @@ const SaveCustomTemplate = (props: IProps) => {
 		templateConfigInfo,
 		creator,
 		id,
+		productId,
 	} = props;
-	const { currentProjectStore } = useStores();
 	const Message = useMessage();
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const [titleHelper, setTitleHelper] = useState({
 		// 自定义模板名称错误提示
 		error: false,

src/views/WorkFlowEdit/index.tsx

@@ -45,14 +45,18 @@ const radioOptions = [
 interface IProps {
 	onBack?: () => void;
 	id?: string;
+	propsProductId?: string;
 }
 
 const WorkFlowEdit = observer((props: IProps) => {
-	const { onBack, id } = props;
+	const { onBack, id, propsProductId } = props;
 	const Message = useMessage();
 	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组
 	const [showCustomOperator, setShowCustomOperator] = useState(false); // 是否显示自定义算子
 	const { currentProjectStore } = useStores();
+	const productId = propsProductId
+		? propsProductId
+		: toJS(currentProjectStore.currentProductInfo.id);
 	const zoneId = toJS(currentProjectStore.currentProjectInfo.zoneId);
 	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
 	const [title, setTitle] = useState(""); // 自定义模板名称
@@ -274,6 +278,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 							showCustomOperator={showCustomOperator}
 							templateConfigInfo={templateConfigInfo}
 							setTemplateConfigInfo={setTemplateConfigInfo}
+							productId={productId as string}
 						/>
 					)}
 					{leftContentType !== "list" && (
@@ -333,6 +338,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 					templateConfigInfo={templateConfigInfo}
 					id={id}
 					oldversion={oldversion}
+					productId={productId as string}
 				/>
 			)}
 			{showCustomOperator && (
@@ -341,6 +347,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 					initOperatorList={JSON.parse(
 						sessionStorage.getItem("operatorList") || "[]"
 					)}
+					productId={productId as string}
 				/>
 			)}
 		</div>