refactor: 针对 审批流程 条件嵌套&审批流程数据改用旧数据 调整

src/api/flow/process.ts

@@ -12,6 +12,7 @@ const api = {
 	launchProcessList: '/v1/process/list-launch', // 发起审批流程列表
 	releaseProcess: '/v1/process/release', // 发布流程
 	processListNodeMap: '/v1/process/list-node-map', // 根据 id 获取节点 map 列表
+	processNodeModel: '/v1/process/node-model', // 根据 id 获取模型
 	processLaunch: '/v1/process/launch' // 发起流程
 }
 
@@ -58,6 +59,13 @@ function processListNodeMapApi(id: string): AxiosPromise {
 		method: 'post'
 	})
 }
+// 有问题 不再使用
+function processNodeModelApi(id: string): AxiosPromise {
+	return request({
+		url: `${api.processNodeModel}?id=${id}`,
+		method: 'post'
+	})
+}
 
 function processLaunchApi(data): AxiosPromise {
 	return request({
@@ -92,6 +100,7 @@ export default {
 	progressDeleteApi,
 	progressListCategoryApi,
 	processListNodeMapApi,
+	processNodeModelApi,
 	processLaunchApi,
 	progressCloneApi,
 	processUpdateStateApi,

src/views/approve/launch/ItemDrawer.vue

@@ -17,38 +17,38 @@
 			<el-divider content-position="left">审批流程</el-divider>
 			<el-timeline class="timeline-wrap">
 				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index">
-					<template v-if="v.conditionNode === 1">
-						<el-radio-group v-model="processChecked[v.name]" size="small">
-							<el-radio-button v-for="c of v.conditionNodeList" :key="c.name" :label="c.name" />
+					<template v-if="v.conditionNodes">
+						<el-radio-group v-model="processChecked[v.local_name]" size="small">
+							<el-radio-button v-for="c of v.conditionNodes" :key="c.local_name" :label="c.local_name">{{ c.nodeName }}</el-radio-button>
 						</el-radio-group>
 					</template>
 					<template v-else>
-						<div style="padding-bottom: 6px">{{ v.name }}</div>
-						<div v-if="assigneeMap[v.name]" style="display: flex; align-items: center; gap: 6px">
-							<template v-if="assigneeMap[v.name].type === 1">
-								<el-tooltip v-if="!assigneeMap[v.name].disabled" content="添加用户" placement="left">
-									<el-button style="width: 32px" @click="selectHandler(v.name, 1)">
+						<div style="padding-bottom: 6px">{{ v.nodeName }}</div>
+						<div v-if="assigneeMap[v.local_name]" style="display: flex; align-items: center; gap: 6px">
+							<template v-if="assigneeMap[v.local_name].type === 1">
+								<el-tooltip v-if="!assigneeMap[v.local_name].disabled" content="添加用户" placement="left">
+									<el-button style="width: 32px" @click="selectHandler(v.local_name, 1)">
 										<svg-icon style="font-size: 18px" icon-class="flow-user-add" />
 									</el-button>
 								</el-tooltip>
-								<FlowNodeAvatar v-for="(item, index) in assigneeMap[v.name].assignees" :key="index" :name="item.name" style="margin-top: 5px" />
+								<FlowNodeAvatar v-for="(item, index) in assigneeMap[v.local_name].assignees" :key="index" :name="item.name" style="margin-top: 5px" />
 							</template>
 							<template v-else>
-								<el-tooltip v-if="!assigneeMap[v.name].disabled" content="添加角色" placement="left">
-									<el-button style="width: 32px" @click="selectHandler(v.name, 2)">
+								<el-tooltip v-if="!assigneeMap[v.local_name].disabled" content="添加角色" placement="left">
+									<el-button style="width: 32px" @click="selectHandler(v.local_name, 2)">
 										<svg-icon style="font-size: 18px" icon-class="flow-group-add" />
 									</el-button>
 								</el-tooltip>
-								<FlowNodeAvatar v-for="(item, index) in assigneeMap[v.name].assignees" :key="index" :name="item.name" style="margin-top: 5px">
+								<FlowNodeAvatar v-for="(item, index) in assigneeMap[v.local_name].assignees" :key="index" :name="item.name" style="margin-top: 5px">
 									<template #avatar>
 										<svg-icon icon-class="flow-group" color="#fff" />
 									</template>
 								</FlowNodeAvatar>
 							</template>
 						</div>
-						<div v-else-if="assigneeDesc[v.name]">
+						<div v-else-if="assigneeDesc[v.local_name]">
 							<!-- 没有assigneeMap 的情况下 尝试获取描述 -->
-							<el-tag>{{ assigneeDesc[v.name] }}</el-tag>
+							<el-tag>{{ assigneeDesc[v.local_name] }}</el-tag>
 						</div>
 					</template>
 				</el-timeline-item>
@@ -105,30 +105,18 @@ const assigneeDesc = ref<{
 }>({})
 const active_assigneeKey = ref<string>()
 const active_selectOpts = ref({})
-// const userMap = ref(new Map())
-// const active_assigneeMap = ref<Assignee>({})
-window.assigneeMap = assigneeMap
 const updateActive_assigneeMap = (assignees: any[]) => {
-	// active_assigneeMap todo...   { assignees: [], type }
 	const _cur = assigneeMap.value[active_assigneeKey.value]
 	if (_cur) {
 		_cur.assignees = assignees
 	}
-	// assigneeMap.value[active_assigneeKey.value].assignees = assignees
-	// Object.assign()
 }
-const selectHandler = (name: string, type: number) => {
-	/*if (!userMap.value.get(name)) {
-		userMap.value.set(name, { assignees: [], type })
+const selectHandler = (local_name: string, type: number) => {
+	if (!assigneeMap.value[local_name]) {
+		assigneeMap.value[local_name] = { assignees: [], type }
 	}
-	useSelectRef.value.open(type, userMap.value.get(name).assignees)
-	*/
-	if (!assigneeMap.value[name]) {
-		assigneeMap.value[name] = { assignees: [], type }
-	}
-	// active_assigneeMap.value = assigneeMap.value[name]
-	const config = assigneeMap.value[name]
-	active_assigneeKey.value = name
+	const config = assigneeMap.value[local_name]
+	active_assigneeKey.value = local_name
 	active_selectOpts.value = config.selectOpts || {}
 	useSelectRef.value.open(type, config.assignees)
 }
@@ -181,15 +169,49 @@ const onSubmit = async () => {
 
 // 当前form 表单数据字符串
 let cur_processForm_str = '{}'
-const processChecked = reactive<{ [key: string]: any }>({
-	/*'local_条件分支_期限': '短期'*/
-})
-const localProcessData = ref<any[]>([])
-let c_idx = 0
-const packageProcess = (data, list = []) => {
-	return data.reduce((_list, config) => {
-		if (config.conditionNode === 0) {
-			console.log(config.name, 'name 普通节点名称', config, data)
+const processChecked = reactive<{ [key: string]: any }>({})
+const modelContentConfig = ref({})
+const packageProcess = (data, list = [], levelIdx = 0) => {
+	const new_list = [data]
+	let curData = data
+	while (curData.childNode) {
+		new_list.push(curData.childNode)
+		curData = curData.childNode
+	}
+	return new_list.reduce((_list, config, i) => {
+		// 节点唯一key
+		if (!config.local_name) {
+			config.local_name = `${config.nodeName}&_&${levelIdx}_${i}`
+		}
+		// 条件分支
+		if (Array.isArray(config.conditionNodes)) {
+			// console.log('条件节点', config)
+			_list.push(config)
+			if (Array.isArray(config.conditionNodes) && config.conditionNodes.length) {
+				// 节点唯一key(条件分支 额外处理)
+				config.conditionNodes.map((v, _i) => {
+					v.local_name = v.local_name || `${config.local_name}_${v.nodeName}*${_i}`
+				})
+				const _val = processChecked[config.local_name]
+				let condition: any = config.conditionNodes[0]
+				if (_val) {
+					config.conditionNodes.some(_condition => {
+						if (_condition.local_name === _val) {
+							condition = _condition
+							return true
+						}
+					})
+				} else {
+					// console.error('else......', condition)
+					processChecked[config.local_name] = condition.local_name
+				}
+				// console.warn('条件节点', condition.nodeName)
+				if (condition.childNode) {
+					packageProcess(condition.childNode, _list, levelIdx + 1)
+				}
+			}
+		} else {
+			// console.log(config.nodeName, 'nodeName 普通节点名称', config, data)
 			// 0，发起人 1，审批人 2，抄送人 3，条件审批 4，条件分支 5，办理子流程 6，定时器在务 7，触发器在务
 			switch (+config.type) {
 				case 0: {
@@ -204,7 +226,7 @@ const packageProcess = (data, list = []) => {
 						let disabled = false
 						let selectOpts = {}
 						const user_fn = () => {
-							assigneeMap.value[config.name] = { assignees: config.nodeUserList, type: 1, disabled, selectOpts }
+							assigneeMap.value[config.local_name] = { assignees: config.nodeUserList, type: 1, disabled, selectOpts }
 						}
 						switch (config.setType) {
 							case 1:
@@ -214,11 +236,11 @@ const packageProcess = (data, list = []) => {
 								break
 							case 2:
 								// 主管 (不需要选择)
-								assigneeDesc.value[config.name] = config.examineLevel === 1 ? '直接主管' : `发起人的第${config.examineLevel}级主管`
+								assigneeDesc.value[config.local_name] = config.examineLevel === 1 ? '直接主管' : `发起人的第${config.examineLevel}级主管`
 								break
 							case 3:
 								// 角色 选择角色 (允许重新选择)
-								assigneeMap.value[config.name] = { assignees: config.nodeRoleList, type: 2 }
+								assigneeMap.value[config.local_name] = { assignees: config.nodeRoleList, type: 2 }
 								break
 							case 4:
 								// 发起人自选 (1: 选择一个人, 2: 选择多个人)
@@ -229,11 +251,11 @@ const packageProcess = (data, list = []) => {
 								user_fn()
 								break
 							case 5: // 发起人自己 (不能选择)
-								assigneeDesc.value[config.name] = setTypeOptions_config[5]
+								assigneeDesc.value[config.local_name] = setTypeOptions_config[5]
 								break
 							case 6:
 								// 连续多级主管 (不能选择)
-								assigneeDesc.value[config.name] = config.examineLevel === 1 ? '直接主管' : `发起人的第${config.examineLevel}级主管`
+								assigneeDesc.value[config.local_name] = config.examineLevel === 1 ? '直接主管' : `发起人的第${config.examineLevel}级主管`
 								break
 						}
 					}
@@ -242,7 +264,7 @@ const packageProcess = (data, list = []) => {
 				case 2: {
 					// 抄送人
 					// 选择人员 & allowSelection 控制 true 允许选择 否则  隐藏
-					assigneeMap.value[config.name] = { assignees: config.nodeUserList, type: 1, disabled: !config.allowSelection }
+					assigneeMap.value[config.local_name] = { assignees: config.nodeUserList, type: 1, disabled: !config.allowSelection }
 					break
 				}
 				/*case 3: {
@@ -272,60 +294,39 @@ const packageProcess = (data, list = []) => {
 				}*/
 			}
 			_list.push(config)
-		} else if (config.conditionNode === 1) {
-			// 自定义标识key
-			if (!config.name) {
-				config.name = `local_${c_idx++}`
-			}
-			// console.log('条件节点', config)
-			_list.push(config)
-			if (Array.isArray(config.conditionNodeList) && config.conditionNodeList.length) {
-				const _val = processChecked[config.name]
-				let condition = config.conditionNodeList[0]
-				if (_val) {
-					config.conditionNodeList.some(_condition => {
-						if (_condition.name === _val) {
-							condition = _condition
-							return true
-						}
-					})
-				} else {
-					// console.error('else......', condition)
-					processChecked[config.name] = condition.name
-				}
-				// console.warn('条件节点', condition.name)
-				if (Array.isArray(condition.childNode) && condition.childNode.length) {
-					packageProcess(condition.childNode, _list)
-				}
-			}
 		}
 		return _list
 	}, list)
 }
 const processTimelineList = computed(() => {
-	return packageProcess(localProcessData.value)
-})
-watchEffect(() => {
-	console.error(processTimelineList.value, 'processTimelineList todo')
+	return packageProcess(modelContentConfig.value)
 })
+// window.assigneeMap = assigneeMap
+// window.processChecked = processChecked
+// watchEffect(() => {
+// 	console.error(processTimelineList.value, 'processTimelineList')
+// })
 validateForm.value.loading = true
 Promise.all([
-	model.processListNodeMapApi(props.record.processId).then((res: any) => {
-		localProcessData.value = res
-	}),
-	model.processDetailApi(props.record.processId).then(res => {
-		/*let local_workflow = {}
+	/*model.processListNodeMapApi(props.record.processId).then((res: any) => {
+		console.error('旧 processListNodeMapApi  modelContent_config', res)
+		// localProcessData.value = res
+	}),*/
+	model.processDetailApi(props.record.processId).then((res: any) => {
+		let modelContent_config = {}
 		try {
-			console.log(JSON.parse(res.modelContent))
+			console.log(JSON.parse(res.modelContent), 'modelContent')
 			const modelContent = JSON.parse(res.modelContent)
-			local_workflow = modelContent.nodeConfig ?? modelContent.childNode
-		} catch (e) {}*/
+			modelContent_config = modelContent.nodeConfig ?? modelContent.childNode
+		} catch (e) {}
+		// console.error(modelContent_config, 'modelContent_config')
+		modelContentConfig.value = modelContent_config
 		cur_processForm_str = res.processForm || '{}'
 		// const x = JSON.parse(cur_processForm_str)
 		// x[0].validate = [{ required: true, message: '请输入商品简介', trigger: 'blur' }]
 
 		// processForm 动态表单
-		// validateForm.value.rule = [...JSON.parse(cur_processForm_str) /*, { ...workflowItem, value: local_workflow }*/ /*, { type: 'input', field: 'test_3' }*/]
+		// validateForm.value.rule = [...JSON.parse(cur_processForm_str) /*, { ...workflowItem, value: modelContent_config }*/ /*, { type: 'input', field: 'test_3' }*/]
 		const { formStructure } = JSON.parse(cur_processForm_str)
 		EReditorRef.value.setData(formStructure)
 		// validateForm.value.rule = JSON.parse(cur_processForm_str)