feat: 发起审批 表单渲染 + 表单结构调整

src/components/scWorkflow/nodes/approver.vue

@@ -219,8 +219,8 @@ export default {
 			if (this.form.extendConfig) {
 				formConfig = this.form.extendConfig.formConfig
 			}
-      console.log(formConfig, '===formConfig==');
-      const { fields } = JSON.parse(this.processForm)
+			const { formStructure } = JSON.parse(this.processForm)
+			const { fields } = formStructure
 			const operateTable = fields.map(item => {
 				let opera = '1'
 				formConfig.map(i => {
@@ -257,7 +257,6 @@ export default {
 			}
 
 			this.emit(_form)
-      debugger
 			this.drawer = false
 		},
 		delNode() {

src/store/modules/flow.ts

@@ -25,7 +25,7 @@ export const useFlowStore = defineStore({
 
 			cacheSwitch: false, // 缓存开关
 			modelContent: '', // 流程模型定义JSON内容
-			processForm: '[]', // 流程定义表单
+			processForm: '{}', // 流程定义表单
 			processSetting: {
 				allowRevocation: true, // 允许撤销审批中的申请
 				allowRevocationDay: true, // 允许撤销指定天内通过的审批

src/views/approve/launch/ItemDrawer.vue

@@ -10,7 +10,8 @@
 		<div v-if="validateForm.loading" v-loading="true" class="local_loading"></div>
 		<div class="info-wrap">
 			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
-			<FormCreate v-model:api="validateForm.api" class="form-wrap" :option="validateForm.option" :rule="validateForm.rule" />
+			<FormCreate v-if="false" v-model:api="validateForm.api" class="form-wrap" :option="validateForm.option" :rule="validateForm.rule" />
+			<er-form-preview ref="EReditorRef" :is-show-complete-button="false" />
 			<el-divider content-position="left">审批流程</el-divider>
 			<el-timeline class="timeline-wrap">
 				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index">
@@ -63,11 +64,15 @@
 <script setup lang="ts">
 import model from '@/api/flow/process'
 import viewForm from '@/utils/form'
+import { erFormPreview } from 'everright-formeditor'
+import 'Everright-formEditor/dist/style.css'
 import { ref, shallowRef, computed, reactive, watchEffect } from 'vue'
 import { ElMessage } from 'element-plus'
 import UseSelect from '@/components/scWorkflow/select.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 import { approveTypeOptions_config, selectModeOptions_config, setTypeOptions_config } from '@/components/scWorkflow/nodes/config'
+
+const EReditorRef = ref()
 type Props = {
 	modelValue: boolean
 	record: { processId: string; processName: string; [key: string]: any }
@@ -130,17 +135,22 @@ const validateForm = ref({
 })
 
 const onSubmit = async () => {
+	// todo 这里还需要做表单校验
+	const formData = EReditorRef.value.getData()
+	// console.log(formData)
 	const api = validateForm.value.api
-	await api.validate()
-	const values = api.formData()
+	// await api.validate()
+	// const values = api.formData()
 	// console.warn(values, 'values')
 	const processId = props.record.processId
 	validateForm.value.loading = true
-	const processForm: any[] = JSON.parse(cur_processForm_str)
-	processForm.forEach(v => {
-		// 填写的数据存储(local_: 本地数据处理标识)
-		v.local_value = values[v.field]
-	})
+	let processForm = JSON.parse(cur_processForm_str)
+	processForm = { ...processForm, formData }
+	// processForm.forEach(v => {
+	// 	// 填写的数据存储(local_: 本地数据处理标识)
+	// 	v.local_value = values[v.field]
+	// })
+	console.log(processForm, '===========')
 	const _assigneeMap = assigneeMap.value
 	const assigneeMap_ = Object.keys(_assigneeMap).reduce((obj, key) => {
 		const _o = _assigneeMap[key]
@@ -166,7 +176,7 @@ const onSubmit = async () => {
 }
 
 // 当前form 表单数据字符串
-let cur_processForm_str = '[]'
+let cur_processForm_str = '{}'
 const processChecked = reactive<{ [key: string]: any }>({
 	/*'local_条件分支_期限': '短期'*/
 })
@@ -317,13 +327,15 @@ Promise.all([
 			const modelContent = JSON.parse(res.modelContent)
 			local_workflow = modelContent.nodeConfig ?? modelContent.childNode
 		} catch (e) {}*/
-		cur_processForm_str = res.processForm || '[]'
+		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)
+		const { formStructure } = JSON.parse(cur_processForm_str)
+		EReditorRef.value.setData(formStructure)
+		// validateForm.value.rule = JSON.parse(cur_processForm_str)
 	})
 ]).finally(() => {
 	validateForm.value.loading = false

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

@@ -12,10 +12,11 @@ const EReditorRef = ref()
 
 const handleListener = obj => {}
 
-// 保存当前的表单数据
+// 保存当前的表单数据 processForm.value = '{formStructure: 表单结构值, formData: {}}
 const exportJsonEv = () => {
-	const formData = EReditorRef.value.getData()
-	processForm.value = JSON.stringify(formData)
+	const formStructure = EReditorRef.value.getData()
+	const finallyForm = { formStructure, formData: {} }
+	processForm.value = JSON.stringify(finallyForm)
 }
 
 onBeforeUnmount(() => {
@@ -32,7 +33,8 @@ onBeforeUnmount(() => {
 // 初始化的时候，渲染当前组件的值
 onMounted(() => {
 	if (processForm.value) {
-		EReditorRef.value.setData(JSON.parse(processForm.value))
+		const { formStructure } = JSON.parse(processForm.value)
+		EReditorRef.value.setData(formStructure)
 	}
 })
 

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

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