流程业务key回显

src/views/flow/create/all.vue

@@ -6,19 +6,19 @@
 				<div class="f2">
 					<span class="center_t" effect="dark" :activeStep="activeStep == 0" @click="activeStep = 0">
 						<span :activeStep="activeStep == 0">1</span>
-						<span>{{ $t('flow.basicInformation') }}</span>
+						<span>{{ $t("flow.basicInformation") }}</span>
 					</span>
 					<span class="center_t" effect="dark" :activeStep="activeStep == 1" @click="activeStep = 1">
 						<span :activeStep="activeStep == 1">2</span>
-						<span>{{ $t('flow.formDesign') }}</span>
+						<span>{{ $t("flow.formDesign") }}</span>
 					</span>
 					<span class="center_t" effect="dark" :activeStep="activeStep == 2" @click="activeStep = 2">
 						<span :activeStep="activeStep == 2">3</span>
-						<span>{{ $t('flow.processDesign') }}</span>
+						<span>{{ $t("flow.processDesign") }}</span>
 					</span>
 				</div>
 				<div class="f3">
-					<el-button type="primary" @click="publish">{{ $t('flow.publish') }}</el-button>
+					<el-button type="primary" @click="publish">{{ $t("flow.publish") }}</el-button>
 				</div>
 			</div>
 			<el-scrollbar height="calc(100vh - 250px)">
@@ -37,7 +37,7 @@
 				<div style="text-align: center">
 					<el-result v-if="validateFlowStep == 3" icon="success" :title="$t('flow.checkSuccess')" :sub-title="$t('flow.checkSubSuccess')">
 						<template #extra>
-							<el-button type="primary" @click="submitFlow">{{ $t('flow.submit') }}</el-button>
+							<el-button type="primary" @click="submitFlow">{{ $t("flow.submit") }}</el-button>
 						</template>
 					</el-result>
 
@@ -63,7 +63,7 @@
 							</div>
 						</template>
 						<template #extra>
-							<el-button type="primary" @click="gotoEdit">{{ $t('common.editBtn') }}</el-button>
+							<el-button type="primary" @click="gotoEdit">{{ $t("common.editBtn") }}</el-button>
 						</template>
 					</el-result>
 				</div>
@@ -73,160 +73,161 @@
 </template>
 
 <script lang="ts" setup>
-import { WarnTriangleFilled } from '@element-plus/icons-vue';
-import { addFlow } from '/@/api/flow/flow';
-import Step1 from './step1.vue';
-import Step2 from './step2.vue';
-import Step3 from './step3.vue';
-import { useFlowStore } from '../workflow/stores/flow';
-import { LocationQuery, LocationQueryValue, useRouter } from 'vue-router';
+import { WarnTriangleFilled } from "@element-plus/icons-vue"
+import { addFlow } from "/@/api/flow/flow"
+import Step1 from "./step1.vue"
+import Step2 from "./step2.vue"
+import Step3 from "./step3.vue"
+import { useFlowStore } from "../workflow/stores/flow"
+import { LocationQuery, LocationQueryValue, useRouter } from "vue-router"
 
-let store = useFlowStore();
-const step1Ref = ref();
-const step2Ref = ref();
-const step3Ref = ref();
+let store = useFlowStore()
+const step1Ref = ref()
+const step2Ref = ref()
+const step3Ref = ref()
 
-const validateErrMsg = ref([]);
+const validateErrMsg = ref([])
 
-const activeStep = ref(0);
-const validateFlowStep = ref(0);
-const validateDialogShow = ref(false);
-const validatingShow = ref(false);
+const activeStep = ref(0)
+const validateFlowStep = ref(0)
+const validateDialogShow = ref(false)
+const validatingShow = ref(false)
 
 const gotoEdit = () => {
-	activeStep.value = validateFlowStep.value;
-	validateDialogShow.value = false;
-};
+	activeStep.value = validateFlowStep.value
+	validateDialogShow.value = false
+}
 const publish = (t) => {
-	validateErrMsg.value = [];
+	validateErrMsg.value = []
 
-	validateFlowStep.value = 0;
-	validateDialogShow.value = true;
-	validatingShow.value = true;
+	validateFlowStep.value = 0
+	validateDialogShow.value = true
+	validatingShow.value = true
 
 	setTimeout(function () {
 		//1
-		checkStep1();
-	}, 500);
-};
-import { useRoute } from 'vue-router';
-import { getFlowDetail } from '/@/api/flow/flow';
-import { useUserInfo } from '/@/stores/userInfo';
-import other from '/@/utils/other';
+		checkStep1()
+	}, 500)
+}
+import { useRoute } from "vue-router"
+import { getFlowDetail } from "/@/api/flow/flow"
+import { useUserInfo } from "/@/stores/userInfo"
+import other from "/@/utils/other"
 
-const route = useRoute();
+const route = useRoute()
 onMounted(() => {
-	const query: LocationQuery = route.query;
+	const query: LocationQuery = route.query
 
-	const groupId = (query.groupId as LocationQueryValue) ?? '';
-	const flowId = (query.flowId as LocationQueryValue) ?? '';
-	const cp = (query.cp as LocationQueryValue) ?? '';
+	const groupId = (query.groupId as LocationQueryValue) ?? ""
+	const flowId = (query.flowId as LocationQueryValue) ?? ""
+	const cp = (query.cp as LocationQueryValue) ?? ""
 
 	if (groupId) {
-		paramGroupId.value = groupId;
+		paramGroupId.value = groupId
 	}
 	if (flowId) {
 		getFlowDetail(flowId).then((res) => {
-			var { data } = res;
+			var { data } = res
 
-			store.step1.adminList = JSON.parse(data.adminList);
-			store.step1.name = data.name;
-			store.step1.logo = data.logo;
+			store.step1.adminList = JSON.parse(data.adminList)
+			store.step1.name = data.name
+			store.step1.logo = data.logo
 			if (!cp || !(parseInt(cp) === 1)) {
 				//复制
-				store.step1.flowId = flowId;
+				store.step1.flowId = flowId
 			}
-			store.step1.remark = data.remark;
-			store.step1.groupId = data.groupId;
+			store.step1.remark = data.remark
+			store.step1.groupId = data.groupId
+			store.step1.businessKey = data.businessKey
 
-			store.setStep2(JSON.parse(data.formItems));
-			step3NodeConfig = JSON.parse(data.process);
-		});
+			store.setStep2(JSON.parse(data.formItems))
+			step3NodeConfig = JSON.parse(data.process)
+		})
 	} else {
 		//新增
-		let userId = useUserInfo().userInfos.user.userId;
-		let name = useUserInfo().userInfos.user.username;
-		let avatar = useUserInfo().userInfos.user.avatar;
+		let userId = useUserInfo().userInfos.user.userId
+		let name = useUserInfo().userInfos.user.username
+		let avatar = useUserInfo().userInfos.user.avatar
 		//清空 store 属性
-		store.clearStep1();
-		store.clearStep2();
+		store.clearStep1()
+		store.clearStep2()
 		store.step1.adminList = [
 			{
 				id: userId,
 				name: name,
 				avatar: avatar,
-				type: 'user',
+				type: "user",
 			},
-		];
+		]
 	}
-});
+})
 
-let step3NodeConfig = reactive({});
+let step3NodeConfig = reactive({})
 
-var paramGroupId = ref();
+var paramGroupId = ref()
 
 const checkStep1 = () => {
 	step1Ref.value.validate(function (valid, arr) {
 		if (valid) {
-			validateFlowStep.value = 1;
+			validateFlowStep.value = 1
 
 			setTimeout(function () {
-				checkStep2();
-			}, 500);
+				checkStep2()
+			}, 500)
 		} else {
-			validatingShow.value = false;
+			validatingShow.value = false
 			//错误信息
-			validateErrMsg.value = arr;
+			validateErrMsg.value = arr
 		}
-	});
-};
+	})
+}
 const checkStep2 = () => {
 	step2Ref.value.validate(function (valid, arr) {
 		if (valid) {
 			setTimeout(function () {
-				validateFlowStep.value = 2;
-				checkStep3();
-			});
+				validateFlowStep.value = 2
+				checkStep3()
+			})
 		} else {
-			validatingShow.value = false;
+			validatingShow.value = false
 			//错误信息
-			validateErrMsg.value = arr;
+			validateErrMsg.value = arr
 		}
-	});
-};
+	})
+}
 
 const checkStep3 = () => {
 	setTimeout(function () {
 		step3Ref.value.validate(function (valid, arr) {
 			if (valid) {
-				validateFlowStep.value = 3;
+				validateFlowStep.value = 3
 			} else {
-				validatingShow.value = false;
+				validatingShow.value = false
 				//错误信息
-				validateErrMsg.value = arr;
+				validateErrMsg.value = arr
 			}
-		});
-	});
-};
-const router = useRouter();
+		})
+	})
+}
+const router = useRouter()
 
 const submitFlow = () => {
 	step3Ref.value.getProcessData().then((res) => {
-		let step1 = store.step1;
-		let step2 = store.step2;
+		let step1 = store.step1
+		let step2 = store.step2
 
-		let flow = other.deepClone(step1);
-		flow.formItems = JSON.stringify(step2);
-		flow.process = JSON.stringify(res);
-		flow.adminList = JSON.stringify(step1.adminList);
+		let flow = other.deepClone(step1)
+		flow.formItems = JSON.stringify(step2)
+		flow.process = JSON.stringify(res)
+		flow.adminList = JSON.stringify(step1.adminList)
 
 		addFlow(flow).then((res) => {
-			validateDialogShow.value = false;
-			store.$reset();
-			router.push('/flow/list/index');
-		});
-	});
-};
+			validateDialogShow.value = false
+			store.$reset()
+			router.push("/flow/list/index")
+		})
+	})
+}
 </script>
 <style scoped lang="scss">
 .f2-width {
@@ -278,7 +279,7 @@ const submitFlow = () => {
 	display: inline-block;
 }
 
-.center_t span:first-child[activeStep='true'] {
+.center_t span:first-child[activeStep="true"] {
 	color: white;
 	background-color: var(--el-color-primary);
 }
@@ -288,7 +289,7 @@ const submitFlow = () => {
 	font-size: 18px;
 }
 
-.center_t[activeStep='true'] {
+.center_t[activeStep="true"] {
 	border-bottom: 2px solid var(--el-color-primary);
 	color: var(--el-color-primary);
 }

src/views/flow/form/tools/startFlow.vue

@@ -4,8 +4,12 @@
 			<el-row>
 				<el-col :span="12">
 					<el-form label-position="top">
-						<form-render @addLayoutOneItem="addLayoutOneItem" ref="formRenderRef"
-							@deleteLayoutOneItem="deleteLayoutOneItem" :form-list="currentOpenFlowForm"></form-render>
+						<form-render
+							@addLayoutOneItem="addLayoutOneItem"
+							ref="formRenderRef"
+							@deleteLayoutOneItem="deleteLayoutOneItem"
+							:form-list="currentOpenFlowForm"
+						></form-render>
 					</el-form>
 
 					<div class="flex justify-center mt-4">
@@ -14,53 +18,57 @@
 					</div>
 				</el-col>
 				<el-col :span="12">
-					<flow-node-format :formData="formValue" :selectUserNodeId="selectUserNodeId"
-						:flow-id="currentOpenFlow.flowId" ref="flowNodeFormatRef"></flow-node-format>
+					<flow-node-format
+						:formData="formValue"
+						:selectUserNodeId="selectUserNodeId"
+						:flow-id="currentOpenFlow.flowId"
+						ref="flowNodeFormatRef"
+					></flow-node-format>
 				</el-col>
 			</el-row>
 		</el-dialog>
 	</div>
 </template>
 <script setup lang="ts">
-import FormRender from '/@/views/flow/form/render/FormRender.vue';
-import FlowNodeFormat from '/@/views/flow/form/tools/FlowNodeFormatData.vue';
-import { FormVO } from '/@/api/flow/form/types';
-import { getFlowDetail, startFlow } from '/@/api/flow/flow';
-import other from '/@/utils/other';
-import { ElMessage } from 'element-plus';
+import FormRender from "/@/views/flow/form/render/FormRender.vue"
+import FlowNodeFormat from "/@/views/flow/form/tools/FlowNodeFormatData.vue"
+import { FormVO } from "/@/api/flow/form/types"
+import { getFlowDetail, startFlow } from "/@/api/flow/flow"
+import other from "/@/utils/other"
+import { ElMessage } from "element-plus"
 
-const dialogTableVisible = ref<Boolean>(false);
-const currentOpenFlowForm = ref<FormVO[]>([]);
-const currentOpenFlow = ref<FormVO[]>([]);
-const formRenderRef = ref();
+const dialogTableVisible = ref<Boolean>(false)
+const currentOpenFlowForm = ref<FormVO[]>([])
+const currentOpenFlow = ref<FormVO[]>([])
+const formRenderRef = ref()
 const submitProcess = () => {
-	let validate = flowNodeFormatRef.value.validate();
+	let validate = flowNodeFormatRef.value.validate()
 	if (!validate) {
-		ElMessage.warning('请选择节点执行人');
-		return;
+		ElMessage.warning("请选择节点执行人")
+		return
 	}
 
-	let param = flowNodeFormatRef.value.formatSelectNodeUser();
+	let param = flowNodeFormatRef.value.formatSelectNodeUser()
 
-	currentOpenFlowForm.value.forEach((res) => (param[res.id] = res.props.value));
+	currentOpenFlowForm.value.forEach((res) => (param[res.id] = res.props.value))
 
 	{
 		for (var item of currentOpenFlowForm.value) {
-			param[item.id] = item.props.value;
-			if (item.type === 'Layout') {
-				let subList = item.props.value;
+			param[item.id] = item.props.value
+			if (item.type === "Layout") {
+				let subList = item.props.value
 
-				var d = [];
+				var d = []
 				for (var array of subList) {
-					var v = {};
+					var v = {}
 
 					for (var subItem of array) {
-						let value = subItem.props.value;
-						v[subItem.id] = value;
+						let value = subItem.props.value
+						v[subItem.id] = value
 					}
-					d.push(v);
+					d.push(v)
 				}
-				param[item.id] = d;
+				param[item.id] = d
 			}
 		}
 	}
@@ -68,83 +76,83 @@ const submitProcess = () => {
 	var data = {
 		flowId: currentOpenFlow.value.flowId,
 		paramMap: param,
-	};
+	}
 	formRenderRef.value.validate(function (valid) {
 		if (valid) {
 			startFlow(data).then((res) => {
-				ElMessage.success('提交成功');
-				dialogTableVisible.value = false;
-			});
+				ElMessage.success("提交成功")
+				dialogTableVisible.value = false
+			})
 		}
-	});
-};
+	})
+}
 
 const handle = (row) => {
-	currentOpenFlow.value = row;
+	currentOpenFlow.value = row
 
-	startProcess(row);
-};
+	startProcess(row)
+}
 
-defineExpose({ handle });
+defineExpose({ handle })
 
-const selectUserNodeId = ref<String[]>([]);
+const selectUserNodeId = ref<String[]>([])
 
 const startProcess = (f) => {
 	getFlowDetail(f.flowId).then((res) => {
-		const { data } = res;
+		const { data } = res
 
-		const { formItems } = data;
+		const { formItems } = data
 
-		let formIteamJsonArray = JSON.parse(formItems);
+		let formIteamJsonArray = JSON.parse(formItems)
 
 		for (var fi of formIteamJsonArray) {
-			if (fi.type === 'Layout') {
-				var arr = [];
-				let value = fi.props.value;
-				arr.push(value);
-				fi.props.value = arr;
-				fi.props.oriForm = other.deepClone(value);
+			if (fi.type === "Layout") {
+				var arr = []
+				let value = fi.props.value
+				arr.push(value)
+				fi.props.value = arr
+				fi.props.oriForm = other.deepClone(value)
 			}
 		}
 
-		currentOpenFlowForm.value = formIteamJsonArray;
+		currentOpenFlowForm.value = formIteamJsonArray
 
-		selectUserNodeId.value = data.selectUserNodeId;
+		selectUserNodeId.value = data.selectUserNodeId
 
-		dialogTableVisible.value = true;
-	});
-};
+		dialogTableVisible.value = true
+	})
+}
 
 const formValue = computed(() => {
-	var obj = {};
+	var obj = {}
 
 	for (var item of currentOpenFlowForm.value) {
-		obj[item.id] = item.props.value;
+		obj[item.id] = item.props.value
 	}
-	return obj;
-});
+	return obj
+})
 
 //明细的添加一个
 const addLayoutOneItem = (id) => {
 	for (var item of currentOpenFlowForm.value) {
 		if (item.id !== id) {
-			continue;
+			continue
 		}
-		let value = item.props.value;
-		let oriForm = item.props.oriForm;
-		value.push(other.deepClone(oriForm));
-		item.props.value = value;
+		let value = item.props.value
+		let oriForm = item.props.oriForm
+		value.push(other.deepClone(oriForm))
+		item.props.value = value
 	}
-};
+}
 const deleteLayoutOneItem = (id, index) => {
 	for (var item of currentOpenFlowForm.value) {
 		if (item.id !== id) {
-			continue;
+			continue
 		}
 
-		item.props.value.splice(index, 1);
+		item.props.value.splice(index, 1)
 	}
-};
+}
 
-const flowNodeFormatRef = ref();
+const flowNodeFormatRef = ref()
 </script>