feat: 审批详情表单回显

src/views/approve/components/approvedContent.vue

@@ -231,8 +231,7 @@ const activeData = ref([])
 const currentType = ref(null)
 const currentFormData = ref({})
 // 当前form 表单数据字符串
-let cur_processForm_str =
-	'{"formStructure":{"list":[{"type":"inline","columns":["G87FL_bjPlVjZjSd2P3SE"],"style":{},"id":"XqyjpOONTVRdA9XeA667G","key":"inline_XqyjpOONTVRdA9XeA667G"},{"type":"inline","columns":["fg_137feCy7pJSJs9sOaU"],"style":{},"id":"RsbiEBhHked3LYw_GDwYt","key":"inline_RsbiEBhHked3LYw_GDwYt"}],"config":{"isSync":true,"pc":{"size":"default","labelPosition":"left","completeButton":{"text":"提交","color":"","backgroundColor":""}},"mobile":{"labelPosition":"left","completeButton":{"text":"提交","color":"","backgroundColor":""}}},"fields":[{"type":"input","label":"姓名","icon":"input","key":"input_name","id":"G87FL_bjPlVjZjSd2P3SE","options":{"clearable":true,"isShowWordLimit":false,"renderType":1,"disabled":false,"showPassword":false,"defaultValue":"","placeholder":"请输入","labelWidth":100,"isShowLabel":true,"required":false,"min":null,"max":null},"style":{"width":{"pc":"100%","mobile":"100%"}}},{"type":"input","label":"别名","icon":"input","key":"input_alias","id":"fg_137feCy7pJSJs9sOaU","options":{"clearable":true,"isShowWordLimit":false,"renderType":1,"disabled":false,"showPassword":false,"defaultValue":"","placeholder":"请输入","labelWidth":100,"isShowLabel":true,"required":false,"min":null,"max":null},"style":{"width":{"pc":"100%","mobile":"100%"}}}],"data":{},"logic":{}},"formData":{"input_name":"罗小胖","input_alias":"luoxiaopang"}}'
+let cur_processForm_str = ''
 const EReditorRef = ref()
 const taskId = computed(() => {
 	return currentTaskRow.value.taskId || ''
@@ -343,11 +342,14 @@ const getTaskDetail = () => {
 						showValue
 					}
 				})*/
-				const { formStructure, formData } = JSON.parse(cur_processForm_str)
+				const cur_processForm_str = JSON.parse(data.formContent)
+				const { formStructure, formData } = cur_processForm_str
 				EReditorRef.value.setData(formStructure, formData)
+				validateForm.value.rule = formStructure.fields
+				console.log(formStructure)
+				// todo 还要在这里判断哪些表单室显示 隐藏 禁用 启用
 				return
-				const forms = JSON.parse(data.formContent)
-				cur_processForm_str = data.formContent
+				// 以下代码作废 todo delete
 				if (Array.isArray(forms)) {
 					validateForm.value.rule = forms
 					const api = validateForm.value.api
@@ -362,6 +364,7 @@ const getTaskDetail = () => {
 						api.disabled(false /*true*/)
 					})
 				}
+				// 以下代码作废 todo delete
 			} catch (e) {
 				console.error('解析 descItems 数据出现问题', e)
 				// descItemsData.value.list = []

src/views/flow/create/components/FormDesign.vue

@@ -19,27 +19,46 @@ const exportJsonEv = () => {
 	processForm.value = JSON.stringify(finallyForm)
 }
 
-onBeforeUnmount(() => {
-	const formData = EReditorRef.value.getData()
-	if (formData.hasOwnProperty('fields')) {
-		// 离开前 做处理
-		// const { fields } = formData
-		// console.log(fields.length, '=======')
-	} else {
-		ElMessage.error(`表单设计有误，请重新配置`)
-	}
-})
+const validate = () => {
+	// 根据后续的业务需求 调整 validate 的功能
+	exportJsonEv()
+	return new Promise((resolve, reject) => {
+		const bool = true
+		if (bool) {
+			resolve(true)
+		} else {
+			reject(false)
+		}
+	})
+}
 
-// 初始化的时候，渲染当前组件的值
-onMounted(() => {
+// onBeforeUnmount(() => {
+// 	const formData = EReditorRef.value.getData()
+// 	if (formData.hasOwnProperty('fields')) {
+// 		// 离开前 做处理
+// 		// const { fields } = formData
+// 		// console.log(fields.length, '=======')
+// 	} else {
+// 		ElMessage.error(`表单设计有误，请重新配置`)
+// 	}
+// })
+
+const updateCompInfo = () => {
 	if (processForm.value) {
 		const { formStructure } = JSON.parse(processForm.value)
 		EReditorRef.value.setData(formStructure)
 	}
+}
+
+// 初始化的时候，渲染当前组件的值
+onMounted(() => {
+	updateCompInfo()
 })
 
 defineExpose({
-	exportJsonEv
+	exportJsonEv,
+	validate,
+	updateCompInfo
 })
 </script>
 <template>

src/views/flow/create/components/test.vue

@@ -21,22 +21,34 @@ const exportJson = async json => {
  * 1、拿到store中的值，然后循环判表单字段的Id是否唯一
  * 2、如果不唯一，提示用户需要重新填写表单字段Id
  */
-const validateOnlyEv = () => {
-	const finallyFormData = JSON.parse(processForm.value)
-	const fields = finallyFormData.map(item => item.field)
-	return fields.some((item, index) => fields.indexOf(item) !== index) // 如果发现重复项，返回true；否则，返回false
+const validate = () => {
+	// 根据后续的业务需求 调整 validate 的功能
+	exportJsonEv()
+	return new Promise((resolve, reject) => {
+		const finallyFormData = JSON.parse(processForm.value)
+		const fields = finallyFormData.map(item => item.field)
+		const bool = fields.length === [...new Set(fields)].length
+		if (bool) {
+			resolve(true)
+		} else {
+			reject(false)
+		}
+	})
 }
-
-// 初始化的时候，渲染当前组件的值
-onMounted(() => {
+const updateCompInfo = () => {
 	if (processForm.value) {
 		designer.value.initForm(processForm.value || [])
 	}
+}
+// 初始化的时候，渲染当前组件的值
+onMounted(() => {
+	updateCompInfo()
 })
 
 defineExpose({
 	exportJsonEv,
-	validateOnlyEv
+	validate,
+	updateCompInfo
 })
 </script>
 

src/views/flow/create/index.vue

@@ -139,9 +139,9 @@ const validateTabs = async () => {
 		await _validate().catch(e => {
 			activeTab.value = componentsArr[i].label
 			// 表单设计 额外 弹窗
-			if (activeTab.value === '表单设计') {
-				ElMessage.error(`表单设计中字段ID不能重复，请确认唯一值`)
-			}
+			// if (activeTab.value === '表单设计') {
+			// 	ElMessage.error(`表单设计中字段ID不能重复，请确认唯一值`)
+			// }
 			bool = false
 		})
 		if (!bool) return false
@@ -157,7 +157,7 @@ const activeComponent = index => {
 			cache_components.value[index] = true
 			// 更新数据
 			const updateCompInfo = compRefs.value[index]?.updateCompInfo
-      // console.error('刷新数据')
+			// console.error('刷新数据')
 			// console.error(updateCompInfo, 'updateCompInfo')
 			if (updateCompInfo) {
 				updateCompInfo()

src/views/flow/group/components/listGroup.vue

@@ -74,7 +74,7 @@
 												<el-icon :size="16" @click="enabledEv(element.processId, 1)"><Check /></el-icon>
 											</el-tooltip>
 										</el-space>
-										<el-space wrap>
+										<el-space wrap style="margin-left: 10px">
 											<el-popconfirm title="确定删除?" @confirm="stopEv(element.processId)">
 												<template #reference>
 													<el-icon :size="16"><Delete /></el-icon>