@lambo-design-mobile/workflow-approve 1.0.0-beta.23 → 1.0.0-beta.25

package/CHANGELOG.md

@@ -1,4 +1,19 @@
 # Changelog
+## [1.0.0-beta.25](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/compare/@lambo-design-mobile/workflow-approve@1.0.0-beta.24...@lambo-design-mobile/workflow-approve@1.0.0-beta.25) (2026-03-18)
+
+
+### ✨ Features | 新功能
+
+* **审批组件:** 选人框查询问题修复 ([7712bab](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/commit/7712babcead1d9838ef17672370fe2a1a37f828d))
+* **审批组件:** 增加驳回判断优化 ([90c270b](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/commit/90c270b13f13a44d83502c0081d885a8083be75e))
+
+## [1.0.0-beta.24](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/compare/@lambo-design-mobile/workflow-approve@1.0.0-beta.23...@lambo-design-mobile/workflow-approve@1.0.0-beta.24) (2026-03-03)
+
+
+### ✨ Features | 新功能
+
+* **审批组件:** 增加驳回至会签指定节点功能；流程跟踪增加预测路线功能 ([a5a85b5](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/commit/a5a85b582a051cb2f88259a0e8680e6f033f6254))
+
 ## [1.0.0-beta.23](http://git.inspur.com/ecbh/lambo-design/lambo-design/-/compare/@lambo-design-mobile/workflow-approve@1.0.0-beta.22...@lambo-design-mobile/workflow-approve@1.0.0-beta.23) (2026-02-26)
 
 

package/api.js

@@ -140,6 +140,19 @@ export const printData = (applyId, instanceId, procId) => {
     })
 }
 
+// 渲染未来节点（预测路线）
+export const renderFutureNode = (processInstanceId, currentTaskId) => {
+    const params = {
+        processInstanceId,
+        currentTaskId
+    };
+    return ajax.request({
+        url: config.smartFlowServerContext + "/manage/processTodo/renderFutureNode",
+        method: 'get',
+        params: params,
+    })
+}
+
 export const getPrintData = (applyId, procId) => {
     const params = {
         applyId: applyId,
@@ -404,3 +417,15 @@ export const listAll = (procId, applyId, taskNode, taskId) => {
         params: params,
     });
 }
+
+export const getDoneDetail = (taskNode, applyId) => {
+    const params = {
+        taskNode: taskNode,
+        applyId: applyId,
+    };
+    return ajax.request({
+        url: config.smartFlowServerContext + "/manage/processDone/getDoneDetail",
+        method: 'get',
+        params: params,
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design-mobile/workflow-approve",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.25",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -15,8 +15,8 @@
   "devDependencies": {
     "standard-version": "^9.5.0",
     "@lambo-design-mobile/lambo-scan-code": "^1.0.0-beta.1",
-    "@lambo-design-mobile/shared": "^1.0.0-beta.21",
-    "@lambo-design-mobile/upload-file": "^1.0.0-beta.16"
+    "@lambo-design-mobile/upload-file": "^1.0.0-beta.16",
+    "@lambo-design-mobile/shared": "^1.0.0-beta.21"
   },
   "scripts": {
     "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/FlowApproval.vue

@@ -115,23 +115,16 @@
     <!-- 底部按钮 等其他内容 -->
     <div>
       <van-popup v-model="popupShow" style="padding-top: 40px" closeable round position="bottom">
-        <template v-for="(button, index) of operationButtons">
+        <template v-for="(button, index) of operationButtons.moreOperations">
           <div :class="button.class" @click="button.action">
             {{ button.label }}
           </div>
         </template>
       </van-popup>
       <div class="custom-bottom-bar">
-        <div v-if="!isDetail && operationButtons.length > 1" class="bar-item" @click="onMore">更多</div>
-        <div v-else-if="!isDetail && operationButtons.length === 1" class="bar-item" @click="handleSingleButton()">
-          {{ getSingleButtonText() }}
+        <div v-for="(button, index) of operationButtons.bottomButtons" :class="button.class" @click="button.action">
+          {{ button.label }}
         </div>
-        <div class="bar-item" @click="onTrack">流程跟踪</div>
-        <div v-if="!isDetail && !revokeDelegateTask && !appointTask && !coSignVotingTask" class="bar-item approve" @click="audit('30')">{{ getAuditButtonStatus(30) }}</div>
-        <div v-if="!isDetail && revokeDelegateTask" class="bar-item approve" @click="audit('62')">{{ getAuditButtonStatus(62) }}</div>
-        <div v-if="!isDetail && appointTask" class="bar-item approve" @click="audit('61')">{{ getAuditButtonStatus(61) }}</div>
-        <div v-if="coSignVotingTask" class="bar-item disagree" @click="audit('32')">{{ getAuditButtonStatus(32) }}</div>
-        <div v-if="coSignVotingTask" class="bar-item approve" @click="audit('31')">{{ getAuditButtonStatus(31) }}</div>
       </div>
     </div>
     <van-popup @click-close-icon="handleSelect('cancel')" v-model="nextNodePopupShow"
@@ -292,6 +285,9 @@
               <van-radio :name='index'/>
             </div>
           </div>
+          <div v-if="showRejectToSelected" class="table-row">
+            <van-field @click="handleSelectRejectUser" label="选择驳回人员" readonly placeholder="点击选择" :value="rejectUsers.name"></van-field>
+          </div>
           <div v-if="showProcessControl" class="reject-attribute">
             <div>驳回的节点通过后：</div>
             <van-radio-group v-model="rejectAttribute">
@@ -302,13 +298,21 @@
       </van-radio-group>
     </van-dialog>
     <van-dialog v-model="rejectAttributesBoxShow" @confirm="processRejectNode()" @close="rejectAttributesDialogShowClose()"
-                title="驳回的节点通过后" show-cancel-button>
-      <div class="reject-attribute">
+                title="驳回设置" show-cancel-button>
+      <div v-if="showProcessControl" class="reject-attribute">
+        <div>驳回的节点通过后：</div>
         <van-radio-group v-model="rejectAttribute">
           <van-radio v-for="(item, index) in rejectAttributeList" :key="index" :name="item.type">{{ item.name }}</van-radio>
         </van-radio-group>
       </div>
+      <div v-if="showRejectToSelected" class="reject-attribute">
+        <van-field @click="handleSelectRejectUser" label="选择驳回人员" readonly placeholder="点击选择" :value="rejectUsers.name"></van-field>
+      </div>
     </van-dialog>
+    <van-popup v-if="selectRejectUserPopupShow" v-model="selectRejectUserPopupShow" closeable round position="bottom"
+               :style="{ height: '80%' }">
+      <select-handle title="选择驳回人员" :multi-select="true" :procType="procType" :user-list="rejectUserList" @selectHandle="selectRejectUserHandle"></select-handle>
+    </van-popup>
   </div>
 </template>
 
@@ -330,7 +334,8 @@ import {
   getUnapprovedListOfMultiNode,
   getProcessTodoList,
   getProcessAttributes,
-  listAll
+  listAll,
+  getDoneDetail
 } from "../api";
 import {Dialog, Toast} from "vant";
 import UploadFile from '@lambo-design-mobile/upload-file';
@@ -353,9 +358,59 @@ export default {
     showAuditOpinion(){
       return this.handleButtons && (this.handleButtons.includes('auditOpinion') ||  this.handleButtons.includes('appointHandler') ||  this.handleButtons.includes('attachmentFile'))
     },
-    operationButtons(){
-      const showButtons = !this.appointTask && !this.rejectedTask && !this.revokeDelegateTask && !this.coSignVotingTask
-      const handleButtons = [
+    operationButtons() {
+      // 流程跟踪按钮
+      const processTraceButton = {
+        id: 'processTrace',
+        label: '流程跟踪',
+        condition: this.handleButtons?.includes('processTrace'),
+        class: 'bar-item',
+        action: () => this.onTrack(),
+      }
+
+      // 审批按钮
+      const auditButtonDefinitions = [
+        {
+          id: 'auditTo30',
+          label: this.getAuditButtonStatus(30),
+          condition: this.handleButtons?.includes('auditTo30') && !this.isDetail && !this.revokeDelegateTask && !this.appointTask && !this.coSignVotingTask,
+          class: 'bar-item approve',
+          action: () => this.audit('30'),
+        },
+        {
+          id: 'auditTo62',
+          label: this.getAuditButtonStatus(62),
+          condition: !this.isDetail && this.revokeDelegateTask,
+          class: 'bar-item approve',
+          action: () => this.audit('62'),
+        },
+        {
+          id: 'auditTo61',
+          label: this.getAuditButtonStatus(61),
+          condition: !this.isDetail && this.appointTask,
+          class: 'bar-item approve',
+          action: () => this.audit('61'),
+        },
+        {
+          id: 'auditTo32',
+          label: this.getAuditButtonStatus(32),
+          condition: this.coSignVotingTask,
+          class: 'bar-item disagree',
+          action: () => this.audit('32'),
+        },
+        {
+          id: 'auditTo31',
+          label: this.getAuditButtonStatus(31),
+          condition: this.coSignVotingTask,
+          class: 'bar-item approve',
+          action: () => this.audit('31'),
+        },
+      ]
+
+      // 实际可以展示的审批按钮
+      const validAuditButtons = auditButtonDefinitions.filter(item => item.condition)
+      const showButtons = !this.appointTask && !this.rejectedTask && !this.revokeDelegateTask && !this.coSignVotingTask && !this.isDetail
+      const handleButtonsDefinitions = [
         {
           id: 'delegateTask',
           label: this.getAuditButtonStatus(84),
@@ -363,6 +418,7 @@ export default {
               this.handleButtons?.includes('delegateTask') &&
               showButtons,
           class: 'popup-option',
+          barClass: 'bar-item approve',
           action: () => this.audit('84'),
         },
         {
@@ -372,6 +428,7 @@ export default {
               this.handleButtons?.includes('addMultitaskInstance') &&
               showButtons,
           class: 'popup-option',
+          barClass: 'bar-item approve',
           action: () => this.showUpdateMultitaskInstanceModal('81'),
         },
         {
@@ -381,6 +438,7 @@ export default {
               this.handleButtons?.includes('reductionMultitaskInstance') &&
               showButtons,
           class: 'popup-option',
+          barClass: 'bar-item disagree',
           action: () => this.showUpdateMultitaskInstanceModal('83'),
         },
         {
@@ -388,6 +446,7 @@ export default {
           label: this.getAuditButtonStatus(70),
           condition: this.handleButtons && this.handleButtons.includes('auditTo70') && showButtons,
           class: 'popup-option',
+          barClass: 'bar-item disagree',
           action: () => this.audit('70'),
         },
         {
@@ -395,6 +454,7 @@ export default {
           label: this.getAuditButtonStatus(40),
           condition: this.handleButtons && this.handleButtons.includes('auditTo40') && showButtons,
           class: 'popup-option highlighted',
+          barClass: 'bar-item disagree',
           action: () => this.audit('40'),
         },
         {
@@ -402,6 +462,7 @@ export default {
           label: this.getAuditButtonStatus(90),
           condition: this.handleButtons && this.handleButtons.includes('auditTo90') && showButtons,
           class: 'popup-option',
+          barClass: 'bar-item disagree',
           action: () => this.audit('90'),
         },
         {
@@ -409,6 +470,7 @@ export default {
           label: this.getAuditButtonStatus(80),
           condition: this.handleButtons && this.handleButtons.includes('auditTo80') && showButtons,
           class: 'popup-option',
+          barClass: 'bar-item approve',
           action: () => this.audit('80'),
         },
         {
@@ -416,6 +478,7 @@ export default {
           label: this.getAuditButtonStatus(82),
           condition: this.handleButtons && this.handleButtons.includes('auditTo82') && showButtons,
           class: 'popup-option',
+          barClass: 'bar-item approve',
           action: () => this.audit('82'),
         },
         {
@@ -423,10 +486,46 @@ export default {
           label: this.getAuditButtonStatus(50),
           condition: this.handleButtons && this.handleButtons.includes('auditTo50') && showButtons,
           class: 'popup-option',
+          barClass: 'bar-item disagree',
           action: () => this.audit('50'),
         },
       ]
-      return handleButtons.filter(item => item.condition)
+
+      // 实际更多操作按钮
+      let moreOperations = handleButtonsDefinitions.filter(item => item.condition)
+
+      let moreButtons = []
+      let borrowedButton = null;
+      // 如果审批按钮为空，且更多操作里有按钮，则借调最后一个
+      if (validAuditButtons.length === 0 && moreOperations.length > 0) {
+        borrowedButton = moreOperations.pop();
+        borrowedButton.class = borrowedButton.barClass
+      }
+      if (!this.isDetail) {
+        if (moreOperations.length > 1) {
+          moreButtons.push({
+            id: 'onMore',
+            label: '更多',
+            condition: true,
+            class: 'bar-item',
+            action: () => this.onMore(),
+          })
+        } else if (moreOperations.length === 1) {
+          moreButtons.push({
+            id: moreOperations[0].id,
+            label: moreOperations[0].label,
+            condition: true,
+            class: 'bar-item',
+            action: () => moreOperations[0].action(),
+          })
+        }
+      }
+      const baseList = [...moreButtons, processTraceButton]
+      if (borrowedButton) {
+        baseList.splice(2, 0, borrowedButton);
+      }
+      const bottomButtons = [...baseList, ...validAuditButtons]
+      return { bottomButtons, moreOperations }
     }
   },
   components: {ApprovalNodeCell, SelectNormalList, SelectOrganize, Tree, SelectHandle, UploadFile, SelectHandleCard},
@@ -562,6 +661,7 @@ export default {
       permissionsScope: {},
       selectOrganizePopupShow: false,
       selectCandUserPopupShow: false,
+      selectRejectUserPopupShow: false,
       selectUserPopupShow: false,
       selectRolePopupShow: false,
       selectReductionUserPopupShow: false,
@@ -575,20 +675,24 @@ export default {
         organTreeType: '',
         action: (checkResult) => { console.log('未定义回调方法') },
       },
+      showRejectToSelected: false,
       showProcessControl: false,
       rejectAttributesBoxShow: false,
       rejectAttribute: 'inSequence',
       rejectAttributeList: [],
       taskAuditUserList: [],
+      rejectUserList: [],
       targetTaskNodeProcessControl: '',
+      rejectUsers: {
+        name: '全部办理人',
+        id: 'all'
+      },
     };
   },
   methods: {
     getAuditStatus,
     initData() {
-      if (!this.handleButtons){
-        this.getHandleButtons();
-      }
+      this.getHandleButtons();
       if (!this.isDetail) this.getTaskStatus();
       this.getProcessHistory();
       this.getNextNodes();
@@ -639,10 +743,10 @@ export default {
         if (resp.data.code === '200') {
           const todoData = resp.data.data.rows[0]
           // 委派任务状态
-          self.revokeDelegateTask = todoData.delegateStatus ? todoData.delegateStatus === '10' : false
-          self.appointTask = todoData.delegateStatus ? todoData.delegateStatus === '20' : false
+          self.revokeDelegateTask = todoData?.delegateStatus ? todoData.delegateStatus === '10' : false
+          self.appointTask = todoData?.delegateStatus ? todoData.delegateStatus === '20' : false
           // 判断节点是否是被驳回的节点
-          const taskExtensionAttributes = todoData.taskExtensionAttributes ? JSON.parse(todoData.taskExtensionAttributes) : ''
+          const taskExtensionAttributes = todoData?.taskExtensionAttributes ? JSON.parse(todoData.taskExtensionAttributes) : ''
           if (taskExtensionAttributes && taskExtensionAttributes.rejectAttributes) {
             const rejectAttributes = taskExtensionAttributes.rejectAttributes
             if (rejectAttributes && rejectAttributes.type && rejectAttributes.type != 'inSequence') self.rejectedTask = true
@@ -654,8 +758,8 @@ export default {
       getNodeData(this.procId, this.taskNode).then(resp => {
         if (resp.data.code === '200') {
           const data = resp.data.data[0]
-          this.handleButtons = data.handleButtons ? data.handleButtons : ["processTrace", "auditHistory", "auditOpinion", "attachmentFile", "auditTo30", "auditTo70", "auditTo40", "auditTo90", "auditTo80", "auditTo82", "auditTo50"];
-          this.coSignVotingTask = data.handleButtons && data.handleButtons.includes('coSignVoting')
+          this.handleButtons = this.handleButtons ? this.handleButtons : data.handleButtons ? data.handleButtons : ["processTrace", "auditHistory", "auditOpinion", "attachmentFile", "auditTo30", "auditTo70", "auditTo40", "auditTo90", "auditTo80", "auditTo82", "auditTo50"];
+          this.coSignVotingTask = this.handleButtons && this.handleButtons.includes('coSignVoting')
           this.nextAssigneeSelectionType = data.nextAssigneeSelectionType;
           this.passName = data.handleName;
           this.rejectName = data.rejectName;
@@ -1011,6 +1115,8 @@ export default {
           procId: this.procId,
           instanceId: this.instanceId,
           taskNode: this.taskNode,
+          taskId: this.taskId,
+          predictButtonEnabled: this.handleButtons && this.handleButtons.includes('predictiveRoute'),
         }
       })
     },
@@ -1051,13 +1157,13 @@ export default {
       console.log('点击了审批:', auditResult);
 
       if (this.approvalForm.auditOpinion === '' || this.approvalForm.auditOpinion == null) {
-        if (!this.handleButtons || (this.handleButtons.includes('auditOpinion') && this.auditResult !== '30' && this.auditResult !== '31')) {
+        if (!this.handleButtons || (this.handleButtons.includes('auditOpinion') && auditResult != '30' && auditResult != '31')) {
           this.updateActiveTab()
           this.approvalError = true
           Toast({message: '请输入审批意见', duration: '500'});
           return
         } else {
-          this.auditParams.auditOpinion = this.getAuditButtonStatus(auditResult);
+          this.approvalForm.auditOpinion = this.getAuditButtonStatus(auditResult);
         }
       }
 
@@ -1155,7 +1261,15 @@ export default {
                 self.executionCompleted(true, null, null, auditResult, self.taskId)
               }, 1000)
             } else {
-              self.handleButtons && self.handleButtons.includes('rejectProcessControl') ? self.getProcessAttributes() : self.auditRequest(self.auditParams)
+              // 前序节点只有一个会签节点才可选择驳回人员
+              self.showRejectToSelected = result.data.length === 1 && result.data[0].handleButtons?.includes('rejectToSelected')
+              self.nodeList = Array.isArray(result.data) ? result.data : []
+              self.radio = 0
+              if (self.showRejectToSelected && !self.handleButtons?.includes('rejectProcessControl')) {
+                self.rejectAttributesBoxShow = true
+              } else {
+                self.handleButtons && self.handleButtons.includes('rejectProcessControl') ? self.getProcessAttributes() : self.auditRequest(self.auditParams)
+              }
             }
           })
         }).catch(() => {
@@ -1192,6 +1306,10 @@ export default {
       getProcessAttributes(self.procId, self.taskNode).then(resp => {
         if (resp.data.code === '200') {
           if ((self.auditParams.auditResult == '70' && !resp.data.data.jumpFirstNode) || (self.auditParams.auditResult == '40' && (resp.data.data.multiNode || resp.data.data.preNodeGateway))) {
+            if (self.showRejectToSelected && self.nodeList.length > 0) {
+              self.rejectAttributesBoxShow = true
+              return
+            }
             self.auditRequest(self.auditParams)
             return
           } else {
@@ -1237,10 +1355,9 @@ export default {
                     )
                   }
                 }
+                self.showProcessControl = self.rejectAttributeList.length > 0 && self.handleButtons && self.handleButtons.includes('rejectProcessControl')
                 if (self.auditParams.auditResult == '70' || self.auditParams.auditResult == '40') {
                   self.rejectAttributesBoxShow = self.rejectAttributeList.length > 0 && self.handleButtons && self.handleButtons.includes('rejectProcessControl')
-                } else if (self.auditParams.auditResult == '90'){
-                  self.showProcessControl = self.rejectAttributeList.length > 0 && self.handleButtons && self.handleButtons.includes('rejectProcessControl')
                 }
               }
             }).catch((err) => {
@@ -1261,6 +1378,9 @@ export default {
         code: self.auditResult,
         name: self.getAuditStatus(self.auditResult).text
       }
+      if (self.rejectUsers.id !== 'all'){
+        auditParams.rejectUsers = self.rejectUsers.id
+      }
       self.showToastLoading('处理审批中');
       //确认执行审批逻辑
       audit(auditParams).then((resp) => {  // 使用箭头函数
@@ -1339,9 +1459,10 @@ export default {
       }
     },
     selectNode(currentRow, index) {
-      console.log(currentRow);
       this.radio = index
       this.targetTaskNodeProcessControl = currentRow.processControl
+      this.rejectUsers = { name: '全部办理人', id: 'all' }
+      this.showRejectToSelected = currentRow.rejectToSelected
     },
     processJumpSpecifiedNode() {
       const self = this;
@@ -1355,8 +1476,42 @@ export default {
       self.auditParams.rejectAttribute = self.rejectAttribute ? self.rejectAttribute : 'inSequence'
       self.auditRequest(self.auditParams)
     },
+    handleSelectRejectUser() {
+      let self = this
+      getDoneDetail(self.nodeList[self.radio].taskNode, self.applyId).then(function (resp) {
+        if (resp.data.code === '200') {
+          const data = resp.data.data.rows
+          const latestAudit = data.reduce((max, current) => {
+            return current.auditDate > max.auditDate ? current : max;
+          });
+          const seenNames = new Set();
+          self.rejectUserList = data.filter(item => {
+            if (item.parentExecutionId && latestAudit.parentExecutionId && item.parentExecutionId !== latestAudit.parentExecutionId) {
+              return false;
+            }
+            if (seenNames.has(item.auditName)) {
+              return false;
+            }
+            seenNames.add(item.auditName);
+            return true;
+          }).map(item => {
+            return {
+              ...item,
+              userName: item.auditName,
+              userId: item.auditId,
+              organName: item.auditUserOrgan?.split(':')[1]
+            }
+          });
+          self.selectRejectUserPopupShow = true
+        } else {
+          Toast.fail(resp.data.message)
+        }
+      })
+    },
     rejectAttributesDialogShowClose(){
       //重置
+      this.showRejectToSelected = false
+      this.showProcessControl = false
       this.rejectAttributesBoxShow = false
       this.auditResult = '';
       this.radio = '';
@@ -1451,6 +1606,12 @@ export default {
         this.handleSelect('select')
       }
       this.selectUserPopupShow = false;
+      this.selectCandUserPopupShow = false;
+    },
+    selectRejectUserHandle(checkResult) {
+      this.rejectUsers.name = checkResult.map(item => item.userName).join(',')
+      this.rejectUsers.id = checkResult.map(item => item.userId).join(',')
+      this.selectRejectUserPopupShow = false;
     },
     selectPositionHandle(handle, result) {
       if (handle === 'select') {

package/src/SelectHandle.vue

@@ -144,11 +144,15 @@ export default {
         this.personList.rows = this.userRangeList
         this.personList.total = this.userRangeList.length
         return
-      }
-      this.useUserTransferRange = false
-      if (this.orgList && this.orgList.length > 0){
-        this.organizeIdList = this.orgList.map(item => item.orgId)
-        this.orgTreeType = this.organTreeType;
+      }
+      this.useUserTransferRange = false
+      this.personList.total = 0;
+      this.personList.rows = [];
+      this.finished = false;
+      this.loading = false;
+      if (this.orgList && this.orgList.length > 0){
+        this.organizeIdList = this.orgList.map(item => item.orgId)
+        this.orgTreeType = this.organTreeType;
         this.searchForm = {
           ...this.searchForm,
           orgTreeType: this.organTreeType,
@@ -180,33 +184,43 @@ export default {
         })
       }
     },
-    handleLoad() {
-      console.log("触发加载")
-      this.loading = true;
-      if (this.useUserTransferRange){
-        this.personList.rows = this.searchForm.userName ? this.userRangeList.map(item => item.userName === this.searchForm.userName) : this.userRangeList
-        this.personList.total = this.personList.rows.length;
-        this.loading = false;
-        return
-      }
+    handleLoad() {
+      if (this.loading || this.finished) {
+        return
+      }
+      console.log("触发加载")
+      this.loading = true;
+      if (this.useUserTransferRange){
+        this.personList.rows = this.searchForm.userName ? this.userRangeList.map(item => item.userName === this.searchForm.userName) : this.userRangeList
+        this.personList.total = this.personList.rows.length;
+        this.finished = true;
+        this.loading = false;
+        return
+      }
       const offset = this.personList.rows.length;
       const limit = 10;
 
-      getUserList(offset, limit, this.searchForm).then(res => {
-        const result = res.data;
-        if (result.code === "1") {
-          //返回的数据添加到 personList 中
-          this.personList.rows = this.personList.rows.concat(result.data.rows);
-          this.personList.total = result.data.total;
-        }
-
-        this.loading = false;
-        this.finished = this.personList.rows.length >= this.personList.total;
-
-      }).catch(error => {
-        console.error('Error fetching data:', error);
-        this.loading = false;
-      });
+      getUserList(offset, limit, this.searchForm).then(res => {
+        const result = res.data;
+        if (result.code === "1") {
+          //返回的数据添加到 personList 中
+          const newRows = Array.isArray(result.data.rows) ? result.data.rows : [];
+          this.personList.rows = this.personList.rows.concat(newRows);
+          const total = Number(result.data.total);
+          if (!Number.isNaN(total)) {
+            this.personList.total = total;
+          }
+          const noMoreByPage = newRows.length < limit;
+          const noMoreByTotal = this.personList.total > 0 && this.personList.rows.length >= this.personList.total;
+          this.finished = noMoreByPage || noMoreByTotal;
+        }
+
+        this.loading = false;
+
+      }).catch(error => {
+        console.error('Error fetching data:', error);
+        this.loading = false;
+      });
     },
 
     extractUsers(permScope) {
@@ -240,11 +254,13 @@ export default {
     resetSearch() {
       this.initSearch()
     },
-    resetAndLoadPersonList() {
-      this.personList.total = 0;
-      this.personList.rows = [];
-      this.handleLoad();
-    },
+    resetAndLoadPersonList() {
+      this.personList.total = 0;
+      this.personList.rows = [];
+      this.finished = false;
+      this.loading = false;
+      this.handleLoad();
+    },
     handleSelect(handle) {
       if (handle === 'select') {
         // 触发自定义事件 'selectHandle'，并传递 this.checkResult

package/src/WorkflowDiagram.vue

@@ -10,6 +10,16 @@
       <div class="containers">
         <div ref="canvas" class="canvas"></div>
       </div>
+      <div v-if="predictButtonEnabled" class="predict-toggle">
+        <van-button
+            type="primary"
+            size="small"
+            :loading="loadingFutureNodes"
+            @click="toggleNodeDisplay"
+        >
+          {{ showAllNodes ? '显示预测路线' : '显示设计路线' }}
+        </van-button>
+      </div>
 
       <!--审批流程追踪-->
       <div class="title-info">
@@ -74,7 +84,8 @@
 </template>
 <script>
 import Viewer from "bpmn-js/lib/Viewer";
-import {getHisAudit, getPrintData, printData} from "../api";
+import { Toast } from "vant";
+import {getHisAudit, getPrintData, printData, renderFutureNode, getNodeData} from "../api";
 import ApprovalNodeCell from "./ApprovalNodeCell.vue";
 import { getAuditStatus } from './js/global';
 import FlowNodeCell from "./FlowNodeCell.vue";  // 根据路径修改
@@ -90,6 +101,11 @@ export default {
       type: String,
       required: false,
     },
+    taskId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     taskNode: {
       type: String,
       required: false,
@@ -98,18 +114,56 @@ export default {
       type: String,
       required: true,
     },
+    predictButtonEnabled: {
+      type: Boolean,
+      required: false,
+    },
   },
   mounted() {
+    if (this.predictButtonEnabled == null && this.taskNode){
+      getNodeData(this.procId, this.taskNode).then(resp => {
+        if (resp.data.code === '200') {
+          const data = resp.data.data[0]
+          this.predictButtonEnabled = data.handleButtons && data.handleButtons.includes("predictiveRoute")
+        }
+      })
+    }
     this.getPrintData()
     // this.getHisAudit()
     this.onTrack()
   },
+  beforeDestroy() {
+    this.removeTouchGesture();
+    if (this.bpmnViewer) {
+      this.bpmnViewer.destroy();
+      this.bpmnViewer = null;
+    }
+  },
   data() {
     return {
       showTaskNodeDetail: false,
       nodeDetailsList: [],
       currentIndex: 0,
       auditData: [],
+      tableData: [],
+
+      bpmnViewer: null,
+      diagramReady: false,
+
+      // 预测路线相关状态
+      showAllNodes: true,
+      loadingFutureNodes: false,
+      futureNodeData: null,
+
+      // 已办/待办集合（用于预测路线显示时保留已执行路径）
+      doneLightSet: new Set(),
+      doneTaskSet: new Set(),
+      donePointIdSet: new Set(),
+      doneNodeIdSet: new Set(),
+      todoPointIdSet: new Set(),
+
+      // 触摸手势事件句柄（用于重复初始化时清理）
+      touchGestureHandlers: null,
     }
   },
   computed: {
@@ -125,8 +179,9 @@ export default {
     getPrintData() {
       getPrintData(this.applyId, this.procId).then(resp => {
         if (resp.data.code === '200') {
-          this.tableData = resp.data.data
-          this.auditData = resp.data.data
+          const data = Array.isArray(resp.data.data) ? resp.data.data : [];
+          this.tableData = data;
+          this.auditData = data;
         }
       })
     },
@@ -137,16 +192,317 @@ export default {
         }
       })
     },
-    onTrack() {
+
+    // 切换“设计路线 / 预测路线”显示
+    async toggleNodeDisplay() {
+      if (this.showAllNodes) {
+        const success = await this.loadFutureNodes();
+        if (!success) return;
+        this.showAllNodes = false;
+        this.$emit('toggle-predictive', {showPredictive: true, futureNodeData: this.futureNodeData});
+      } else {
+        this.showAllNodesInDiagram();
+        this.showAllNodes = true;
+        this.$emit('toggle-predictive', {showPredictive: false, futureNodeData: null});
+      }
+    },
+
+    // 加载未来节点（预测路线）数据
+    async loadFutureNodes() {
+      if (!this.instanceId || !this.taskId) {
+        Toast('缺少必要参数：流程实例ID或当前任务ID');
+        return false;
+      }
+      if (!this.diagramReady) {
+        Toast('流程图尚未加载完成，请稍后重试');
+        return false;
+      }
+
+      this.loadingFutureNodes = true;
+      try {
+        const resp = await renderFutureNode(this.instanceId, this.taskId);
+        if (resp.data.code === '200' && resp.data.data) {
+          const futureData = resp.data.data;
+          const currentNodeId = futureData.currentNodeId;
+          const elementRegistry = this.bpmnViewer && this.bpmnViewer.get('elementRegistry');
+          if (currentNodeId && elementRegistry) {
+            const currentElement = elementRegistry.get(currentNodeId);
+            if (currentElement && this.isElementInSubProcess(currentElement)) {
+              Toast('预测路线暂不支持子流程节点，请查看设计路线');
+              return false;
+            }
+          }
+          this.futureNodeData = futureData;
+          this.showFutureNodesOnly();
+          return true;
+        }
+        Toast.fail(`加载预测路线失败：${resp.data.message || '未知错误'}`);
+        return false;
+      } catch (error) {
+        Toast.fail(`加载预测路线失败：${error.message || '未知错误'}`);
+        return false;
+      } finally {
+        this.loadingFutureNodes = false;
+      }
+    },
+
+    // 只显示预测路线相关节点（并保留已办路径）
+    showFutureNodesOnly() {
+      if (!this.futureNodeData || !this.bpmnViewer) return;
+
+      const elementRegistry = this.bpmnViewer.get('elementRegistry');
+
+      // 获取所有元素
+      const allElements = elementRegistry.getAll();
+
+      // 从后端数据中提取节点和边信息
+      const {nodes = [], edges = [], futureNodeIds = []} = this.futureNodeData;
+
+      // 构建节点ID到节点数据的映射
+      const nodeMap = new Map();
+      nodes.forEach(node => {
+        nodeMap.set(node.id, node);
+      });
+
+      // 构建边ID到边数据的映射
+      const edgeMap = new Map();
+      edges.forEach(edge => {
+        edgeMap.set(edge.id, edge);
+      });
+
+      // 已办连线和节点集合（使用 Set 便于判断）
+      const doneLightSet = this.doneLightSet instanceof Set ? this.doneLightSet : new Set(this.doneLightSet || []);
+      const doneNodeSet = this.doneNodeIdSet instanceof Set ? this.doneNodeIdSet : new Set(this.doneNodeIdSet || []);
+      const hiddenNodeSet = new Set(this.futureNodeData.hiddenNodeIds || []);
+      const hiddenEdgeSet = new Set(this.futureNodeData.hiddenEdgeIds || []);
+
+      const futureNodeIdSet = new Set(futureNodeIds || []);
+      void futureNodeIdSet;
+
+      const visibleSubProcessIds = new Set(this.futureNodeData.visibleSubProcessIds || []);
+
+      // 遍历所有元素
+      allElements.forEach(element => {
+        const gfx = elementRegistry.getGraphics(element);
+        if (!gfx) return;
+
+        // 开始事件和结束事件
+        if (element.type === 'bpmn:StartEvent' || element.type === 'bpmn:EndEvent') {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+          const parentSubProcess = element.parent && element.parent.type === 'bpmn:SubProcess' ? element.parent : null;
+          const parentVisible = parentSubProcess ? visibleSubProcessIds.has(parentSubProcess.id) : true;
+          const parentDone = parentSubProcess && doneNodeSet.has(parentSubProcess.id);
+          if (parentSubProcess && !parentVisible && !parentDone) {
+            gfx.style.display = 'none';
+            return;
+          }
+          const shouldDisplay = nodeFutureVisible || doneNodeSet.has(element.id);
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+          return;
+        }
+
+        // 处理任务节点
+        if (element.type === 'bpmn:UserTask' ||
+            element.type === 'bpmn:ServiceTask' ||
+            element.type === 'bpmn:Task' ||
+            element.type === 'bpmn:CallActivity') {
+
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+          const parentId = nodeData.parentSubProcessId;
+          const parentIsDone = parentId && doneNodeSet.has(parentId);
+          const isDoneTask = doneNodeSet.has(element.id) || parentIsDone;
+          const shouldDisplay = nodeFutureVisible || isDoneTask;
+
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+
+          if (nodeData.futureHighlight) {
+            const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+            if (visualElement) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理连线
+        if (element.type === 'bpmn:SequenceFlow') {
+          const edgeData = edgeMap.get(element.id) || {};
+
+          // 修改：严格判断连线是否已办，只有连线本身在 doneLightSet 中才视为已办
+          const isDoneLine = doneLightSet.has(element.id);
+
+          const edgeFutureVisible = edgeData.hasOwnProperty('futureVisible')
+              ? edgeData.futureVisible
+              : !hiddenEdgeSet.has(element.id);
+
+          if (!(edgeFutureVisible || isDoneLine)) {
+            gfx.style.display = 'none';
+            return;
+          }
+
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+
+          const shouldHighlight = edgeData.futureHighlight === true;
+          if (shouldHighlight) {
+            const canvas = this.bpmnViewer.get('canvas');
+            if (canvas && canvas.hasMarker(element.id, 'done-line')) {
+              canvas.removeMarker(element.id, 'done-line');
+            }
+            const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+            if (visualElement) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理网关节点
+        if (typeof element.type === 'string' && element.type.includes('Gateway')) {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+
+          // 检查是否同时连接到已办节点和预测路径上的节点
+          const hasIncomingDone = element.incoming?.some(conn => {
+            const source = conn.source;
+            return doneLightSet.has(conn.id) || (source && doneNodeSet.has(source.id));
+          });
+
+          const hasOutgoingFuture = element.outgoing?.some(conn => {
+            const target = conn.target;
+            const connData = edgeMap.get(conn.id) || {};
+            return connData.futureVisible || (target && nodeMap.get(target.id)?.futureVisible);
+          });
+
+          // 严格网关显示条件：预测可见 / 已办 / 同时连接已办与预测（避免孤立网关）
+          const shouldDisplay = nodeFutureVisible || doneNodeSet.has(element.id) || (hasIncomingDone && hasOutgoingFuture);
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+          const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+          if (visualElement) {
+            if (nodeData.futureHighlight) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            } else {
+              visualElement.style.stroke = '#000000';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理子流程节点（SubProcess）
+        if (element.type === 'bpmn:SubProcess') {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : visibleSubProcessIds.has(element.id);
+          const shouldDisplay = nodeFutureVisible || doneNodeSet.has(element.id);
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+          const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+          if (visualElement) {
+            if (nodeData.futureHighlight) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            } else {
+              visualElement.style.stroke = '#000000';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理 label（如连线名称）
+        if (element.type === 'label' && element.labelTarget) {
+          const target = element.labelTarget;
+          const targetEdgeData = edgeMap.get(target.id) || {};
+          const futureLabelVisible = targetEdgeData.hasOwnProperty('futureLabelVisible')
+              ? targetEdgeData.futureLabelVisible
+              : false;
+          const targetIsDoneLine = doneLightSet.has(target.id);
+          gfx.style.display = (futureLabelVisible || targetIsDoneLine) ? '' : 'none';
+        }
+      });
+    },
+
+    // 恢复显示全部节点（设计路线）
+    showAllNodesInDiagram() {
+      if (!this.bpmnViewer) return;
+      this.futureNodeData = null;
+      this.showTaskNodeDetail = false;
+      this.nodeDetailsList = [];
+      this.currentIndex = 0;
+
+      // 重新加载流程图是最可靠的恢复方式（避免样式残留）
+      this.onTrack();
+    },
+
+    isElementInSubProcess(element) {
+      let parent = element && element.parent;
+      while (parent) {
+        if (parent.type === 'bpmn:SubProcess') {
+          return true;
+        }
+        parent = parent.parent;
+      }
+      return false;
+    },
+
+    removeTouchGesture() {
+      if (!this.touchGestureHandlers) return;
+      const {container, onTouchStart, onTouchMove, onTouchEnd} = this.touchGestureHandlers;
+      if (container) {
+        container.removeEventListener('touchstart', onTouchStart);
+        container.removeEventListener('touchmove', onTouchMove);
+        container.removeEventListener('touchend', onTouchEnd);
+      }
+      this.touchGestureHandlers = null;
+    },
+
+    async onTrack() {
+      this.removeTouchGesture();
+      if (this.bpmnViewer) {
+        this.bpmnViewer.destroy();
+        this.bpmnViewer = null;
+      }
+      this.diagramReady = false;
+
       // 初始化 Viewer
       this.bpmnViewer = new Viewer({
         container: this.$refs.canvas
       });
 
-      // 获取并加载流程数据
-      printData(this.applyId, this.instanceId, this.procId).then(async resp => {
-        let result = resp.data
-        if (result.code === '200') {
+      try {
+        // 获取并加载流程数据
+        const resp = await printData(this.applyId, this.instanceId, this.procId);
+        const result = resp && resp.data;
+        if (result && result.code === '200') {
           const bpmnXmlStr = result.data.processXml;
           await this.bpmnViewer.importXML(bpmnXmlStr);
 
@@ -154,48 +510,58 @@ export default {
           canvas.zoom('fit-viewport', 'auto');
           canvas.zoom(0.6); // 放大视图
 
-          //给流程节点添加固定样式
+          // 给流程节点添加固定样式
           this.doPrint(result.data.historicData);
+          this.diagramReady = true;
 
           // 添加手势缩放和移动功能
           this.addTouchGesture();
           // 监听元素点击事件
           this.addElementClickListener();
 
+          return;
         }
-      }).catch(err => {
-        console.error("Error fetching BPMN data:", err);
-      });
 
+        this.diagramReady = false;
+        Toast.fail(`加载流程图失败：${(result && result.message) || '未知错误'}`);
+      } catch (err) {
+        this.diagramReady = false;
+        console.error("Error fetching BPMN data:", err);
+        Toast.fail(`加载流程图失败：${err.message || '未知错误'}`);
+      }
     },
     doPrint(printData) {
-      const {doneLightSet, donePointSet, doneTaskSet, todoPointSet} =
-          printData;
+      const {doneLightSet, donePointSet, doneTaskSet, todoPointSet} = printData || {};
+
+      // 保存已办连线和节点集合，供预测路线显示时使用
+      this.doneLightSet = new Set(doneLightSet || []);
+      this.doneTaskSet = new Set(doneTaskSet || []);
+      this.donePointIdSet = new Set(donePointSet || []);
+      this.doneNodeIdSet = new Set([
+        ...this.doneTaskSet,
+        ...this.donePointIdSet
+      ]);
+      this.todoPointIdSet = new Set(todoPointSet || []);
+
       const canvas = this.bpmnViewer.get("canvas");
       const elementRegistry = this.bpmnViewer.get('elementRegistry');
       elementRegistry.filter((item) => item.type === 'bpmn:UserTask');
-      for (let k in doneLightSet) {
-        if (doneLightSet[k]) {
-          canvas.addMarker(doneLightSet[k], "done-line");
-        }
+      for (const id of this.doneLightSet) {
+        if (id) canvas.addMarker(id, "done-line");
       }
-      for (let k in donePointSet) {
-        if (donePointSet[k]) {
-          canvas.addMarker(donePointSet[k], "done-point");
-        }
+      for (const id of this.donePointIdSet) {
+        if (id) canvas.addMarker(id, "done-point");
       }
-      for (let k in doneTaskSet) {
-        if (doneTaskSet[k]) {
-          canvas.addMarker(doneTaskSet[k], "done-task");
-        }
+      for (const id of this.doneTaskSet) {
+        if (id) canvas.addMarker(id, "done-task");
       }
-      for (let k in todoPointSet) {
-        if (todoPointSet[k]) {
-          canvas.addMarker(todoPointSet[k], "todo-point");
-        }
+      for (const id of this.todoPointIdSet) {
+        if (id) canvas.addMarker(id, "todo-point");
       }
     },
     addTouchGesture() {
+      if (!this.bpmnViewer) return;
+      this.removeTouchGesture();
       const canvas = this.bpmnViewer.get('canvas');
       const container = this.$refs.canvas;
       let initialDistance = null;
@@ -208,7 +574,7 @@ export default {
         return Math.sqrt(dx * dx + dy * dy);
       };
 
-      container.addEventListener('touchstart', (event) => {
+      const onTouchStart = (event) => {
         if (event.touches.length === 2) {
           initialDistance = calculateDistance(event.touches[0], event.touches[1]);
         } else if (event.touches.length === 1) {
@@ -218,9 +584,9 @@ export default {
           };
           isPanning = true;
         }
-      });
+      };
 
-      container.addEventListener('touchmove', (event) => {
+      const onTouchMove = (event) => {
         if (event.touches.length === 2 && initialDistance !== null) {
           const currentDistance = calculateDistance(event.touches[0], event.touches[1]);
           const zoomFactor = currentDistance / initialDistance;
@@ -250,18 +616,25 @@ export default {
 
           event.preventDefault(); // 阻止默认的触摸事件
         }
-      });
+      };
 
-      container.addEventListener('touchend', () => {
+      const onTouchEnd = () => {
         initialDistance = null; // 重置初始距离
         isPanning = false; // 停止平移
-      });
+      };
+
+      container.addEventListener('touchstart', onTouchStart);
+      container.addEventListener('touchmove', onTouchMove);
+      container.addEventListener('touchend', onTouchEnd);
+
+      this.touchGestureHandlers = {container, onTouchStart, onTouchMove, onTouchEnd};
     },
     addElementClickListener() {
       const eventBus = this.bpmnViewer.get('eventBus');
       eventBus.on('element.click', (event) => {
         const elementId = event.element.id;
-        let matchedRecords = this.tableData.filter(item => item.taskNode === elementId);
+        const tableData = Array.isArray(this.tableData) ? this.tableData : [];
+        let matchedRecords = tableData.filter(item => item.taskNode === elementId);
 
         if (matchedRecords.length > 0) {
           const getTime = (record) => {
@@ -293,6 +666,12 @@ export default {
 <style scoped>
 @import 'styles/global.css';
 
+.predict-toggle {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+}
+
 .canvas {
   width: 100%;
   height: 250px;