合并

zrch-risk-client-39/src/views/flowable/task/todo/components/TodoIndex.vue

@@ -28,20 +28,16 @@
                 <div class="next-node-info">
                   <span class="next-node-label">下一节点：</span>
                   <a-select
-                  v-model:value="nextNodeNameSele"
-                  placeholder="请选择下一个节点"
-                  style="width: 100%"
-                  @change="handleChange"
-                  v-if="shownextNodeNameSele"
-                  > 
-                  <a-select-option
-                    v-for="item in tableOptions"
-                    :key="item.id"
-                    :value="item.value"
+                    v-model:value="nextNodeNameSele"
+                    placeholder="请选择下一个节点"
+                    style="width: 100%"
+                    @change="handleChange"
+                    v-if="shownextNodeNameSele"
                   >
-                    {{ item.name }}
-                  </a-select-option>
-                </a-select>
+                    <a-select-option v-for="item in tableOptions" :key="item.id" :value="item.value">
+                      {{ item.name }}
+                    </a-select-option>
+                  </a-select>
 
                   <a-tag color="blue" class="next-node-tag" v-if="shownextNodeNametext">
                     {{ nextNodeName || '等待确定下一节点' }}
@@ -62,8 +58,8 @@
                     <div v-show="formTp == 1" class="form-wrapper">
                       <FlowInnerForm ref="refCruInnerForm" :key="formKey" style="width: 100%" />
                     </div>
-                    <div v-show="formTp == 2" class="iframe-container" style="background-color: red; height: 470px">
-                      <iFrame :src="formUrl" class="responsive-iframe" style="width: 100%; height: 100%" />
+                    <div v-show="formTp == 2" class="iframe-container" style="height: 470px">
+                      <iFrame :key="formKey" :src="formUrl" class="responsive-iframe" style="width: 100%; height: 100%" />
                     </div>
                   </div>
                 </a-card>
@@ -216,7 +212,7 @@
   // API
   import { flowRecord } from '/@/components/Process/api/finished';
   import { flowXmlAndNode } from '/@/components/Process/api/definition';
-  import { complete, flowTaskForm, getNextFlowNode,getMyTaskFlow} from '/@/components/Process/api/todo';
+  import { complete, flowTaskForm, getNextFlowNode, getMyTaskFlow } from '/@/components/Process/api/todo';
   import { flowTaskInfo } from '/@/components/Process/api/process';
 
   // 组件
@@ -240,7 +236,6 @@
   const loadingFlowChart = ref(false);
   const formKey = ref(0);
   const showApprovalUi = ref(true);
-  
 
   const flowData = ref<any>({});
   const flowRecordList = ref<any[]>([]);
@@ -253,7 +248,7 @@
   const shownextNodeNameSele = ref(true);
   const shownextNodeNametext = ref(false);
 
-  const res0  = ref();
+  const res0 = ref();
   const res1 = ref();
   const res3 = ref();
 
@@ -333,6 +328,7 @@
         placeholder: '请选择接收人',
         mode: 'multiple',
       },
+      rules: [{ required: true, message: '请选择接收人' }],
     },
     {
       label: '接收角色',
@@ -387,13 +383,8 @@
 
       await nextTick();
 
-      if (!refCruInnerForm.value) {
-        throw new Error('表单组件未找到');
-      }
-
       let { taskId } = taskForm;
 
-      
       if (!taskId) {
         // try to resolve taskId by business id from workFlowData
         const dataId = workFlowData.value?.dataId || workFlowData.value?.id || workFlowData.value?.businessId;
@@ -416,18 +407,33 @@
 
       const resData = await flowTaskForm({ taskId });
       const { flowForm = {} } = resData;
-      formTp.value = flowForm.formTp;
-      
-      if (flowForm.formTp == '1') {
-        await refCruInnerForm.value.iniData(flowForm);
+      // normalize form type to number for consistent comparisons
+      const tp = Number(flowForm.formTp);
+      formTp.value = tp;
+
+      if (tp === 1) {
+        // ensure the inner form component is recreated before initializing
+        formKey.value++;
+        await nextTick();
+        if (!refCruInnerForm.value) {
+          // wait a tick more in case component hasn't mounted
+          await nextTick();
+        }
+        if (refCruInnerForm.value && typeof refCruInnerForm.value.iniData === 'function') {
+          await refCruInnerForm.value.iniData(flowForm);
+        } else {
+          throw new Error('内嵌表单组件未就绪');
+        }
       } else {
-        let formValues = resData.formValues;
+        let formValues = resData.formValues || {};
         let formUrlparval = formValues.dataId;
-        let formUrlpar = formValues.dataName;
-        const connector = flowForm.formUrl.includes('?') ? '&' : '?';
-        formUrl.value = flowForm.formUrl + connector + formUrlpar + '=' + formUrlparval;
-        //formUrl.value = flowForm.formUrl + '?' + formUrlpar + '=' + formUrlparval;
-         console.error('表单url:', formUrl.value);
+        let formUrlpar = formValues.dataName || 'id';
+        const connector = flowForm.formUrl && flowForm.formUrl.includes('?') ? '&' : '?';
+        formUrl.value = (flowForm.formUrl || '') + connector + formUrlpar + '=' + formUrlparval;
+        // force iframe reload when src is set/changed
+        formKey.value++;
+        await nextTick();
+        console.error('表单url:', formUrl.value);
       }
       formError.value = false;
     } catch (error) {
@@ -517,37 +523,36 @@
         values: {},
       };
       //找到选择的下一步节点
-      if(nextNodenum.value>1){
-      submitData.values['userTaskid'] = nextNodeNameSelevue.value;
+      if (nextNodenum.value > 1) {
+        submitData.values['userTaskid'] = nextNodeNameSelevue.value;
       }
-      
+
       if (!showApprovalUi.value) {
         await complete(submitData);
         emit('callback');
         return false;
       }
-      
 
       const formData = await validate();
       Object.assign(submitData, formData);
       submitData.comment = submitData.comment || '';
-       
-//alert("dd"+isFixed.value);
-     // if (!isFixed.value) {
-     //alert("dd"+userType.value);
-        if (userType.value === 'user') {
+
+      //alert("dd"+isFixed.value);
+      // if (!isFixed.value) {
+      //alert("dd"+userType.value);
+      if (userType.value === 'user') {
+        submitData.values['approval'] = formData.checkSendUser;
+        submitData.values['approvalType'] = 'user';
+
+        if (formData.checkSendUser) {
           submitData.values['approval'] = formData.checkSendUser;
           submitData.values['approvalType'] = 'user';
-
-          if (formData.checkSendUser) {
-            submitData.values['approval'] = formData.checkSendUser;
-            submitData.values['approvalType'] = 'user';
-          }
-        } else if (formData.checkSendRole) {
-          submitData.values['approval'] = formData.checkSendRole;
-          submitData.values['approvalType'] = 'role';
         }
-     // }
+      } else if (formData.checkSendRole) {
+        submitData.values['approval'] = formData.checkSendRole;
+        submitData.values['approvalType'] = 'role';
+      }
+      // }
 
       // 执行发送
       const result = await complete(submitData);
@@ -582,60 +587,52 @@
   };
 
   const handleChange = (value: string) => {
-  console.log(`selected ${value}`);
-  nextNodeNameSelevue.value=value;
-  console.log(" nextNodeNameSelevue.value ",nextNodeNameSelevue.value);
-
-  if(value==0){
-  ChangeSelectNodeAfter(res0);
-  }
-  if(value==1){
-  ChangeSelectNodeAfter(res1);
-  }
-  if(value==2){
-  ChangeSelectNodeAfter(res2);
-  }
-  
+    console.log(`selected ${value}`);
+    nextNodeNameSelevue.value = value;
+    console.log(' nextNodeNameSelevue.value ', nextNodeNameSelevue.value);
 
+    if (value == 0) {
+      ChangeSelectNodeAfter(res0);
+    }
+    if (value == 1) {
+      ChangeSelectNodeAfter(res1);
+    }
+    if (value == 2) {
+      ChangeSelectNodeAfter(res2);
+    }
   };
 
-   function ChangeSelectNodeAfter(res) {
-
-        isFixed.value = res.dataType == 'fixed' ? true : false;
-        if (isFixed.value && !isApproval.value) {
-          showApprovalUi.value;
-        }
-
-        nextNode.value = res;
-        nextNodeName.value = res.userTask?.name || '';
-
-        //alert(""+res.dataType);
-
-        if (res.type === 'role') {
-          removeSchemaByFiled('checkSendUser');
-          if (res.dataType === 'fixed' && res.userTask?.candidateGroups) {
-            setFieldsValue({
-              checkSendRole: res.userTask.candidateGroups,
-            });
-          }
-        } else {
-          removeSchemaByFiled('checkSendRole');
-          if (res.dataType === 'fixed' && res.userTask?.assignee) {
-            setFieldsValue({
-              checkSendUser: res.userTask.assignee,
-            });
-          }
-        }
-    
+  function ChangeSelectNodeAfter(res) {
+    isFixed.value = res.dataType == 'fixed' ? true : false;
+    if (isFixed.value && !isApproval.value) {
+      showApprovalUi.value;
+    }
 
+    nextNode.value = res;
+    nextNodeName.value = res.userTask?.name || '';
 
-   }
+    if (res.type === 'role') {
+      removeSchemaByFiled('checkSendUser');
+      if (res.dataType === 'fixed' && res.userTask?.candidateGroups) {
+        setFieldsValue({
+          checkSendRole: res.userTask.candidateGroups,
+        });
+      }
+    } else {
+      removeSchemaByFiled('checkSendRole');
+      if (res.dataType === 'fixed' && res.userTask?.assignee) {
+        setFieldsValue({
+          checkSendUser: res.userTask.assignee,
+        });
+      }
+    }
+  }
 
   const iniData = async (data: any) => {
     try {
       // 设置工作流数据
       workFlowData.value = data;
-      console.log("why iniData",data);
+      console.log('why iniData', data);
 
       // 更新任务表单
       Object.assign(taskForm, {
@@ -657,60 +654,51 @@
 
       if (taskForm.taskId) {
         const reslist = await getNextFlowNode({ taskId: taskForm.taskId });
-        
-      
-         
-        
-        console.log("getNextFlowNode reslist ",reslist);
+
+        console.log('getNextFlowNode reslist ', reslist);
         if (reslist == null) {
+          // 到达流程结束节点：设置展示状态但不要提前返回，仍需加载表单和流转记录
           nextNodeName.value = '结束';
           removeSchemaByFiled('checkSendRole');
           removeSchemaByFiled('checkSendUser');
           showApprovalUi.value = isApproval.value;
-          shownextNodeNameSele.value =false;
-          shownextNodeNametext.value =true;
-          return false;
-        }else{
-          shownextNodeNameSele.value =true;
-          shownextNodeNametext.value =false;
-          
-          nextNodenum.value=reslist.length;
-         
-         
-         //why工作流修改
-         // 使用 for 循环赋值
-          for (let i = 0; i <reslist.length; i++) {
-           let resb = reslist[i];
+          shownextNodeNameSele.value = false;
+          shownextNodeNametext.value = true;
+          // 不再 return，这样后续仍会继续加载流转记录和表单
+        } else {
+          shownextNodeNameSele.value = true;
+          shownextNodeNametext.value = false;
+
+          nextNodenum.value = reslist.length;
+
+          //why工作流修改
+          // 使用 for 循环赋值
+          for (let i = 0; i < reslist.length; i++) {
+            let resb = reslist[i];
             tableOptions.value.push({
               id: `${i}`,
               name: `${resb.userTask.name}`,
-              value: `${i}`
+              value: `${i}`,
             });
           }
           nextNodeNameSele.value = tableOptions.value[0].name;
-         
-
-       // tableOptions.value = res.userTaskList;
-
-       
-    
-         const res = reslist[0]; // 获取第一行数据
-         console.log("res ",res);
-         ChangeSelectNodeAfter(res);
-         if(reslist.length==1){
-          res0.value = reslist[0];
-         }
-         if(reslist.length==2){
-          res0.value = reslist[0];
-          res1.value = reslist[1];
-         }
-         if(reslist.length==3){
-          res0.value = reslist[0];
-          res1.value = reslist[1];
-          res2.value = reslist[2];
-         }
-
-         }
+
+          const res = reslist[0]; // 获取第一行数据
+          console.log('res ', res);
+          ChangeSelectNodeAfter(res);
+          if (reslist.length == 1) {
+            res0.value = reslist[0];
+          }
+          if (reslist.length == 2) {
+            res0.value = reslist[0];
+            res1.value = reslist[1];
+          }
+          if (reslist.length == 3) {
+            res0.value = reslist[0];
+            res1.value = reslist[1];
+            res2.value = reslist[2];
+          }
+        }
       }
 
       // 加载流转记录
@@ -732,7 +720,28 @@
 </script>
 
 <style lang="scss" scoped>
+  /* ==================== 柔和中性风格 - CSS 变量 ==================== */
+  .execute-form-container {
+    background: var(--color-bg-white);
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
+  }
   .app-container {
+    --color-primary: #3b5bdb;
+    --color-primary-hover: #364fc7;
+    --color-primary-light: #e8ecfd;
+    --color-success: #2f9e44;
+    --color-warning: #e67700;
+    --color-error: #c92a2a;
+    --color-text-primary: #1c1c1e;
+    --color-text-secondary: #555770;
+    --color-text-muted: #a0a3b1;
+    --color-border: #e4e4e9;
+    --color-border-strong: #c8c8d0;
+    --color-bg-page: #f5f5f7;
+    --color-bg-white: #ffffff;
+    --color-bg-section: #f0f0f4;
+    --radius: 6px;
     height: 100vh;
     margin: 0;
     padding: 0;