Merge branch 'feature/审批流程实现表单选然'

src/views/approve/components/approvedContent.vue

@@ -38,16 +38,23 @@
 					</el-tabs>
 					<!-- 审批信息 -->
 					<div v-show="tabName === 'ApprovalInfo'" class="scroll-wrap">
-						<!-- 表单 -->
-						<div v-loading="validateForm.loading" class="form-wrap self-Everright-formEditor">
-							<er-form-preview
-								v-show="validateForm.rule.length"
-								ref="EReditorRef"
-								:file-upload-u-r-i="uploadFileApi"
-								:is-show-complete-button="false"
-							/>
-							<LeNoData v-if="!validateForm.rule.length" message="表单无数据" />
-						</div>
+						<!-- 系统表单-->
+						<template v-if="currentTaskRow.processType === 'business' && currentObj?.formTemplate.type === 1">
+							<component :is="dyVueComponent" ref="dyVueComponentRef"></component>
+						</template>
+
+						<!-- 表单设计 -->
+						<template v-else>
+							<div v-loading="validateForm.loading" class="form-wrap self-Everright-formEditor">
+								<er-form-preview
+									v-show="validateForm.rule.length"
+									ref="EReditorRef"
+									:file-upload-u-r-i="uploadFileApi"
+									:is-show-complete-button="false"
+								/>
+								<LeNoData v-if="!validateForm.rule.length" message="表单无数据" />
+							</div>
+						</template>
 
 						<div class="area-divider"></div>
 
@@ -214,13 +221,13 @@
 		<!-- 回退弹窗 -->
 		<rollback-dialog v-if="rollbackVisible" v-model="rollbackVisible" :task-id="taskId" @success-cb="closeDetailEv"></rollback-dialog>
 		<!-- 查看子流程表单 -->
-		<ViewProcessDialog v-if="processInfo.visible" v-model="processInfo.visible" :processInfo="processInfo" />
+		<ViewProcessDialog v-if="processInfo.visible" v-model="processInfo.visible" :process-info="processInfo" />
 	</div>
 </template>
 
 <script setup>
 import useTaskProcessStore from '@/store/modules/taskProcess'
-import { computed, ref, nextTick, watch } from 'vue'
+import { computed, ref, nextTick, watch, markRaw, defineAsyncComponent, provide } from 'vue'
 import FlowStatusStamp from '@/components/Flow/FlowStatusStamp.vue'
 import FlowStatusTag from '@/components/Flow/FlowStatusTag.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
@@ -307,6 +314,14 @@ const allowAppendNode = ref(true)
 // 允许回退
 const allowRollback = ref(true)
 const modelContentConfig = ref({})
+
+// 系统表单
+const dyVueComponent = ref(undefined)
+const dyVueComponentRef = ref()
+const dyVueForm = ref({})
+const currentObj = ref()
+provide('dyVueForm', dyVueForm) // 这里主要是存放动态的form的属性值
+
 /**
  * 详情按钮各个操作弹窗
  * @param visibleType 评论 拒绝 同意等
@@ -325,32 +340,29 @@ const openComment = async (visibleType, item) => {
 			// 点击同意
 			let bool = true
 			if (item === 'agree') {
-				const form = EReditorRef.value.getSelfFormRef()
-				bool = await form.validate(valid => {
-					if (valid) {
-						// 表单验证通过 进行保存
-						const formData = EReditorRef.value.getData()
-						let processForm = JSON.parse(cur_processForm_str)
-						processForm = { ...processForm, formData }
-						currentFormData.value = { processForm: JSON.stringify(processForm) }
-						console.log('验证通过')
+				const { processType } = currentTaskRow.value
+				const flag = processType === 'business' && currentObj.value.formTemplate.type === 1 // 系统表单
+				if (flag) {
+					//todo 这里的系统表单还未做必填校验,根据自己的业务做校验
+					const formData = dyVueComponentRef.value.getData()
+					const saveData = {
+						formStructure: '@/views/flow/test/test1.vue',
+						formData: formData
 					}
-				})
-				// const api = validateForm.value.api
-				// bool = await api.validate((valid, fail) => {
-				// 	if (valid) {
-				// 		// 表单验证通过
-				// 		const values = api.formData()
-				// 		const processForm = JSON.parse(cur_processForm_str)
-				// 		processForm.forEach(v => {
-				// 			// 填写的数据存储(local_: 本地数据处理标识)
-				// 			v.local_value = values[v.field]
-				// 		})
-				// 		console.warn(processForm, 'processForm')
-				// 		// 流程表单JSON内容 & local_value 保存
-				// 		currentFormData.value = { processForm: JSON.stringify(processForm) }
-				// 	}
-				// })
+					currentFormData.value = { processForm: JSON.stringify(saveData) }
+				} else {
+					const form = EReditorRef.value.getSelfFormRef()
+					bool = await form.validate(valid => {
+						if (valid) {
+							// 表单验证通过 进行保存
+							const formData = EReditorRef.value.getData()
+							let processForm = JSON.parse(cur_processForm_str)
+							processForm = { ...processForm, formData }
+							currentFormData.value = { processForm: JSON.stringify(processForm) }
+							console.log('验证通过')
+						}
+					})
+				}
 			}
 			if (!bool) return
 			currentType.value = item
@@ -367,13 +379,16 @@ const openComment = async (visibleType, item) => {
 			break
 	}
 }
-
 /**
  * 获取taskId对应的详情
+ * @param taskId
+ * 1、获取流程数据
+ * 2、获取表单数据
+ * 	2.1 主流程、业务流程(type=0 表单设计)、子流程 使用EverightForm表单来渲染表单值
+ * 	2.2 业务流程(type=1 使用系统表单来渲染表单值)
  */
 const getTaskDetail = () => {
 	const cur = currentTaskRow.value || {}
-	// 提交的表单 数据展示
 	validateForm.value.loading = true
 	processTaskApprovalInfo({
 		taskId: cur.taskId,
@@ -390,7 +405,6 @@ const getTaskDetail = () => {
 				v.local_content = _content?.opinion
 			})
 			activeData.value = activeList
-			// todo 获取当前的操作权限，进行赋值
 			try {
 				const modelContent = JSON.parse(data.modelContent || '{}')
 				const modelContent_config = modelContent.nodeConfig // ?? modelContent.childNode
@@ -399,6 +413,7 @@ const getTaskDetail = () => {
 				}
 				modelContentConfig.value = modelContent_config || {}
 				window.modelContentConfig = modelContentConfig
+				/* 允许转交 允许加减签 允许回退 start */
 				if (props.currentTaskType === 'pendingApproval') {
 					allowTransfer.value = data?.allowTransfer
 					allowAppendNode.value = data?.allowAppendNode
@@ -410,27 +425,33 @@ const getTaskDetail = () => {
 				if (props.currentTaskType === 'myApplication') {
 					allowRevocation.value = data.processSetting.allowRevocation
 				}
-				/*descItemsData.value.list = JSON.parse(data.formContent).map(item => {
-					const showLabel = item.title
-					let showValue = item.local_value
-					const options = item.options
-					if (Array.isArray(options) && showValue !== undefined) {
-						if (Array.isArray(showValue)) {
-							showValue = showValue.reduce(val => {
-								const cur = options.find(option => option.value === val)
-								return cur?.label || val
-							}, [])
-						} else {
-							const cur = options.find(option => option.value === showValue)
-							showValue = cur?.label || showValue
+				/* 允许转交 允许加减签 允许回退 end */
+
+				/* 这里主要是表单设计的逻辑 start */
+				let formContent = null
+				const { processType } = currentTaskRow.value
+				if (processType === 'business') {
+					currentObj.value = data
+					if (data?.formTemplate.type === 1) {
+						dyVueForm.value = {
+							dy: {
+								name: '测试名字',
+								region: 1,
+								delivery: true,
+								type: ['1'],
+								resource: 'Sponsor',
+								desc: '啦啦啦'
+							}
 						}
+						dyVueComponent.value = markRaw(defineAsyncComponent(() => import('@/views/flow/test/test1.vue')))
+						return
+					} else {
+						formContent = `{"formStructure":${data.formTemplate.content}}` || '{}'
 					}
-					return {
-						showLabel,
-						showValue
-					}
-				})*/
-				cur_processForm_str = data.formContent
+				} else {
+					formContent = data.formContent
+				}
+				cur_processForm_str = formContent
 				const { formStructure, formData } = JSON.parse(cur_processForm_str)
 				const formConfig = data.formConfig || []
 				let newFormStructure = formStructure // 存储一份
@@ -469,6 +490,7 @@ const getTaskDetail = () => {
 				}
 				EReditorRef.value.setData(newFormStructure, formData)
 				validateForm.value.rule = newFields
+				/* 这里主要是表单设计的逻辑 end */
 			} catch (e) {
 				console.error('解析 descItems 数据出现问题', e)
 				// descItemsData.value.list = []

src/views/flow/test/businessLaunch.vue

@@ -141,7 +141,6 @@ const onSubmit = async () => {
 			})
 	}
 
-
 }
 
 // 获取当前表单中的详情