feat: 表单设计+流程设计表单权限开发 100%

src/components/scWorkflow/nodes/approver.vue

@@ -116,7 +116,7 @@
 						<!-- 表单设置 -->
 						<div v-show="radio1 === '2'">
 							<el-table ref="multipleTableRef" :data="form.extendConfig.formConfig" style="width: 100%">
-								<el-table-column property="title" label="表单字段" align="center" />
+								<el-table-column property="label" label="表单字段" align="center" />
 								<el-table-column align="center">
 									<template #header>操作权限</template>
 									<template #default="scope">
@@ -204,15 +204,18 @@ export default {
 			if (this.form.extendConfig) {
 				formConfig = this.form.extendConfig.formConfig
 			}
-			const operateTable = JSON.parse(this.processForm).map(item => {
+      console.log(formConfig, '===formConfig==');
+      const { fields } = JSON.parse(this.processForm)
+			const operateTable = fields.map(item => {
 				let opera = '1'
 				formConfig.map(i => {
-					if (item.field === i.field) {
+					if (item.id === i.id) {
 						opera = i.opera
 					}
 				})
-				return { title: item.title, field: item.field, opera: opera }
+				return { label: item.label, id: item.id, opera: opera }
 			})
+			console.log(operateTable, '====operateTable====')
 			this.form.extendConfig = { formConfig: operateTable }
 			this.drawer = true
 		},
@@ -239,6 +242,7 @@ export default {
 			}
 
 			this.emit(_form)
+      debugger
 			this.drawer = false
 		},
 		delNode() {

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

@@ -1,18 +1,16 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { erFormEditor } from 'everright-formeditor'
 import 'Everright-formEditor/dist/style.css'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus'
 const flowStore = useFlowStore()
 const { processForm } = storeToRefs(flowStore)
 
 const EReditorRef = ref()
 
-const handleListener = obj => {
-	const { data } = obj
-	console.log(data, '....')
-}
+const handleListener = obj => {}
 
 // 保存当前的表单数据
 const exportJsonEv = () => {
@@ -20,28 +18,26 @@ const exportJsonEv = () => {
 	processForm.value = JSON.stringify(formData)
 }
 
-/**
- * 1、拿到store中的值，然后循环判表单字段的Key是否唯一
- * 2、如果不唯一，提示用户需要重新填写表单字段Key
- */
-const validateOnlyEv = () => {
-	if (processForm.value === '{}') return false
-	const finallyFormData = JSON.parse(processForm.value)
-	const fields = finallyFormData.fields.map(item => item.key)
-	return fields.some((item, index) => fields.indexOf(item) !== index) // 如果发现重复项，返回true；否则，返回false
-}
+onBeforeUnmount(() => {
+	const formData = EReditorRef.value.getData()
+	if (formData.hasOwnProperty('fields')) {
+		// 离开前 做处理
+		// const { fields } = formData
+		// console.log(fields.length, '=======')
+	} else {
+		ElMessage.error(`表单设计有误，请重新配置`)
+	}
+})
 
 // 初始化的时候，渲染当前组件的值
 onMounted(() => {
-	console.log('onMounted....')
 	if (processForm.value) {
 		EReditorRef.value.setData(JSON.parse(processForm.value))
 	}
 })
 
 defineExpose({
-	exportJsonEv,
-	validateOnlyEv
+	exportJsonEv
 })
 </script>
 <template>

src/views/flow/create/index.vue

@@ -125,10 +125,10 @@ const changeTab = () => {
 	if (activeName.value === '表单设计') {
 		// 这里针对表单设计单独处理,如果不符合条件,则不允许切换
 		dyncComponent.value.exportJsonEv()
-		leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
-		if (leavePageFlag) {
-			return ElMessage.error(`表单设计中字段Key不能重复，请确认唯一值`)
-		}
+		// leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
+		// if (leavePageFlag) {
+		// 	return ElMessage.error(`表单设计中字段Key不能重复，请确认唯一值`)
+		// }
 	} else if (activeName.value === '流程设计') {
 		dyncComponent.value.saveDesign()
 	}