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

src/views/bpm/model/ModelForm.vue

@@ -194,11 +194,10 @@ const submitForm = async () => {
       await ModelApi.createModel(data)
       // 提示，引导用户做后续的操作
       await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
+        '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
           '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</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 }}
           </el-form-item>
           <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-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-input
               v-model="auditForms[index].reason"
@@ -149,6 +162,9 @@ const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
+const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
+const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
+
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
 const detailForm = ref({
@@ -158,6 +174,20 @@ const detailForm = ref({
   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) => {
   // 1.1 获得对应表单
@@ -176,6 +206,12 @@ const handleAudit = async (task, pass) => {
     copyUserIds: auditForms.value[index].copyUserIds
   }
   if (pass) {
+    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+    const formCreateApi = approveFormFApis.value[index]
+    if (formCreateApi) {
+      await formCreateApi.validate()
+      data.variables = approveForms.value[index].value
+    }
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
   } else {
@@ -258,6 +294,10 @@ const getProcessInstance = async () => {
 
 /** 加载任务列表 */
 const getTaskList = async () => {
+  runningTasks.value = []
+  auditForms.value = []
+  approveForms.value = []
+  approveFormFApis.value = []
   try {
     // 获得未取消的任务
     tasksLoad.value = true
@@ -285,8 +325,6 @@ const getTaskList = async () => {
     })
 
     // 获得需要自己审批的任务
-    runningTasks.value = []
-    auditForms.value = []
     loadRunningTask(tasks.value)
   } finally {
     tasksLoad.value = false
@@ -315,6 +353,15 @@ const loadRunningTask = (tasks) => {
       reason: '',
       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({}) // 占位，避免为空
+    }
   })
 }