BPM：支持多表单，每个流程任务都可以绑定流程表单

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -24,12 +24,7 @@
       </el-collapse-item>
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="formVisible" key="form">
       <el-collapse-item name="condition" v-if="formVisible" key="form">
         <template #title><Icon icon="ep:list" />表单</template>
         <template #title><Icon icon="ep:list" />表单</template>
-        <!-- <element-form :id="elementId" :type="elementType" /> -->
-        友情提示：使用
-        <router-link :to="{ path: '/bpm/manager/form' }"
-          ><el-link type="danger">流程表单</el-link>
-        </router-link>
-        替代，提供更好的表单设计功能
+        <element-form :id="elementId" :type="elementType" />
       </el-collapse-item>
       </el-collapse-item>
       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
         <template #title><Icon icon="ep:checked" />任务（审批人）</template>
         <template #title><Icon icon="ep:checked" />任务（审批人）</template>

src/utils/formCreate.ts

@@ -28,7 +28,7 @@ export const decodeFields = (fields: string[]) => {
   return rule
   return rule
 }
 }
 
 
-// 设置表单的 Conf 和 Fields
+// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
 export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
 export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
   // @ts-ignore
   // @ts-ignore
   designerRef.value.setOption(JSON.parse(conf))
   designerRef.value.setOption(JSON.parse(conf))
@@ -36,19 +36,22 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
   designerRef.value.setRule(decodeFields(fields))
   designerRef.value.setRule(decodeFields(fields))
 }
 }
 
 
-// 设置表单的 Conf 和 Fields
+// 设置表单的 Conf 和 Fields，适用 form-create 场景
 export const setConfAndFields2 = (
 export const setConfAndFields2 = (
   detailPreview: object,
   detailPreview: object,
   conf: string,
   conf: string,
   fields: string,
   fields: string,
   value?: object
   value?: object
 ) => {
 ) => {
+  if (isRef(detailPreview)) {
+    detailPreview = detailPreview.value
+  }
   // @ts-ignore
   // @ts-ignore
-  detailPreview.value.option = JSON.parse(conf)
+  detailPreview.option = JSON.parse(conf)
   // @ts-ignore
   // @ts-ignore
-  detailPreview.value.rule = decodeFields(fields)
+  detailPreview.rule = decodeFields(fields)
   if (value) {
   if (value) {
     // @ts-ignore
     // @ts-ignore
-    detailPreview.value.value = value
+    detailPreview.value = value
   }
   }
 }
 }

src/views/bpm/model/ModelForm.vue

@@ -194,11 +194,10 @@ const submitForm = async () => {
       await ModelApi.createModel(data)
       await ModelApi.createModel(data)
       // 提示，引导用户做后续的操作
       // 提示，引导用户做后续的操作
       await ElMessageBox.alert(
       await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
+        '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
           '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
           '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
           '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
           '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
-          '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+          '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
           '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
           '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
         '重要提示',
         '重要提示',
         {
         {

src/views/bpm/processInstance/detail/index.vue

@@ -21,9 +21,22 @@
             {{ processInstance.name }}
             {{ processInstance.name }}
           </el-form-item>
           </el-form-item>
           <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
           <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-            {{ processInstance.startUser.nickname }}
-            <el-tag size="small" type="info">{{ processInstance.startUser.deptName }}</el-tag>
+            {{ processInstance?.startUser.nickname }}
+            <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
           </el-form-item>
           </el-form-item>
+          <el-card class="mb-15px !-mt-10px" v-if="runningTasks[index].formId > 0">
+            <template #header>
+              <span class="el-icon-picture-outline">
+                填写表单【{{ runningTasks[index]?.formName }}】
+              </span>
+            </template>
+            <form-create
+              v-model:api="approveFormFApis[index]"
+              v-model="approveForms[index].value"
+              :option="approveForms[index].option"
+              :rule="approveForms[index].rule"
+            />
+          </el-card>
           <el-form-item label="审批建议" prop="reason">
           <el-form-item label="审批建议" prop="reason">
             <el-input
             <el-input
               v-model="auditForms[index].reason"
               v-model="auditForms[index].reason"
@@ -149,6 +162,9 @@ const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
 const auditRule = reactive({
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
 })
+const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
+const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
+
 // ========== 申请信息 ==========
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
 const fApi = ref<ApiAttrs>() //
 const detailForm = ref({
 const detailForm = ref({
@@ -158,6 +174,20 @@ const detailForm = ref({
   value: {}
   value: {}
 })
 })
 
 
+/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
+watch(
+  () => approveFormFApis.value,
+  (value) => {
+    value?.forEach((api) => {
+      api.btn.show(false)
+      api.resetBtn.show(false)
+    })
+  },
+  {
+    deep: true
+  }
+)
+
 /** 处理审批通过和不通过的操作 */
 /** 处理审批通过和不通过的操作 */
 const handleAudit = async (task, pass) => {
 const handleAudit = async (task, pass) => {
   // 1.1 获得对应表单
   // 1.1 获得对应表单
@@ -176,6 +206,12 @@ const handleAudit = async (task, pass) => {
     copyUserIds: auditForms.value[index].copyUserIds
     copyUserIds: auditForms.value[index].copyUserIds
   }
   }
   if (pass) {
   if (pass) {
+    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+    const formCreateApi = approveFormFApis.value[index]
+    if (formCreateApi) {
+      await formCreateApi.validate()
+      data.variables = approveForms.value[index].value
+    }
     await TaskApi.approveTask(data)
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
     message.success('审批通过成功')
   } else {
   } else {
@@ -258,6 +294,10 @@ const getProcessInstance = async () => {
 
 
 /** 加载任务列表 */
 /** 加载任务列表 */
 const getTaskList = async () => {
 const getTaskList = async () => {
+  runningTasks.value = []
+  auditForms.value = []
+  approveForms.value = []
+  approveFormFApis.value = []
   try {
   try {
     // 获得未取消的任务
     // 获得未取消的任务
     tasksLoad.value = true
     tasksLoad.value = true
@@ -285,8 +325,6 @@ const getTaskList = async () => {
     })
     })
 
 
     // 获得需要自己审批的任务
     // 获得需要自己审批的任务
-    runningTasks.value = []
-    auditForms.value = []
     loadRunningTask(tasks.value)
     loadRunningTask(tasks.value)
   } finally {
   } finally {
     tasksLoad.value = false
     tasksLoad.value = false
@@ -315,6 +353,15 @@ const loadRunningTask = (tasks) => {
       reason: '',
       reason: '',
       copyUserIds: []
       copyUserIds: []
     })
     })
+
+    // 2.4 处理 approve 表单
+    if (task.formId && task.formConf) {
+      const approveForm = {}
+      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
+      approveForms.value.push(approveForm)
+    } else {
+      approveForms.value.push({}) // 占位，避免为空
+    }
   })
   })
 }
 }