feat: 表单在待审批模块使用

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'">
+							<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 评论 拒绝 同意等
@@ -367,7 +382,6 @@ const openComment = async (visibleType, item) => {
 			break
 	}
 }
-
 /**
  * 获取taskId对应的详情
  */
@@ -381,6 +395,7 @@ const getTaskDetail = () => {
 		instanceState: cur.instanceState
 	})
 		.then(data => {
+			currentObj.value = data
 			const activeList = data.processApprovals
 			activeList.forEach(v => {
 				v.local_timestamp = v.id && formatTimestamp(v.createTime)
@@ -410,27 +425,19 @@ 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
-						}
-					}
-					return {
-						showLabel,
-						showValue
+				/* 这里主要是表单设计的逻辑 start */
+				let formContent = null
+				const { processType } = currentTaskRow.value
+				if (processType === 'business') {
+					if (data?.formTemplate.type === 1) {
+						return
+					} else {
+						formContent = `{"formStructure":${data.formTemplate.content}}` || '{}'
 					}
-				})*/
-				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 +476,7 @@ const getTaskDetail = () => {
 				}
 				EReditorRef.value.setData(newFormStructure, formData)
 				validateForm.value.rule = newFields
+				/* 这里主要是表单设计的逻辑 end */
 			} catch (e) {
 				console.error('解析 descItems 数据出现问题', e)
 				// descItemsData.value.list = []