@lambo-design/workflow-approve 1.0.0-beta.14 → 1.0.0-beta.141

package/src/workflow-diagram.vue

@@ -1,332 +1,980 @@
-<template>
-  <div>
-
-    <Collapse v-show="showChart" v-model="showDefaultExpand">
-      <Panel name="0">
-        流程跟踪图
-        <div slot="content">
-          <div class="containers" :style="'height: '+canvasHeight+ 'px'">
-            <div class="canvas" ref="canvas"></div>
-          </div>
-        </div>
-      </Panel>
-    </Collapse>
-
-    <Collapse v-show="showTable" v-model="showDefaultExpand">
-      <Panel name="1">
-        {{ tableName }}
-        <div slot="content">
-          <EditTable :columns="tableColumns" v-model="hisAudit" :show-table-option="false">
-          </EditTable>
-        </div>
-      </Panel>
-    </Collapse>
-
-
-    <Modal v-model="showDetail" :width="modelWidth" :footer-hide='true' title="审批详情">
-      <Card v-for="(item,index) in detailDones" :key="index" style="margin-bottom: 10px">
-        <Form :model="item" :label-width="140" class="compactForm">
-          <Row>
-            <i-col span="12" offset="0">
-              <FormItem label="审批节点：">
-                {{ item.taskName }}
-              </FormItem>
-            </i-col>
-            <i-col span="12" offset="0">
-              <FormItem label="审批人:">
-                <Tooltip placement="bottom-end">
-                  <span class="tooltip-text">{{ item.auditName }}</span>
-                  <div slot="content" style="white-space: normal;">
-                    {{ item.auditName }}
-                  </div>
-                </Tooltip>
-
-              </FormItem>
-            </i-col>
-
-          </Row>
-          <Row>
-            <i-col span="12" offset="0">
-              <FormItem label="审批结果：">
-                <Tag color="success" v-if="item.auditResult == '30'">通过</Tag>
-                <Tag color="error" v-else-if="item.auditResult == '40'">驳回到上一节点</Tag>
-                <Tag color="error" v-else-if="item.auditResult=='50'">驳回到原点</Tag>
-                <Tag color="error" v-else-if="item.auditResult=='51'">流程终止</Tag>
-                <Tag color="error" v-else-if="item.auditResult == '60'">撤回</Tag>
-                <Tag color="success" v-else-if="item.auditResult == '80'">跳转到指定节点</Tag>
-                <Tag color="success" v-else-if="item.auditResult == '90'">驳回到指定节点</Tag>
-                <Tag color="success" v-else>待审核</Tag>
-              </FormItem>
-            </i-col>
-            <i-col span="12" offset="0">
-              <FormItem v-if="item.startDate" label="发起时间：">
-                {{ item.startDate }}
-              </FormItem>
-              <FormItem v-else label="审批时间：">
-                {{ item.auditDate }}
-              </FormItem>
-            </i-col>
-          </Row>
-          <Row>
-            <i-col span="24" offset="0">
-              <FormItem v-if="item.auditComment" label="审批意见：">
-                {{ item.auditComment }}
-              </FormItem>
-            </i-col>
-          </Row>
-        </Form>
-      </Card>
-    </Modal>
-
-
-  </div>
-</template>
-
-<script>
-import ajax from "@lambo-design/shared/utils/ajax";
-import zoomScroll from "@lambo-design/shared/utils/zoomScroll";
-import BpmnViewer from "bpmn-js/lib/Viewer";
-import ModelingModule from 'bpmn-js/lib/features/modeling';
-import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
-import EditTable from "@lambo-design/edit-table";
-
-export default {
-  components: {
-    EditTable
-  },
-  props: {
-    canvasHeight: {
-      type: Number,
-      default: 350
-    },
-    modelWidth: {
-      type: Number,
-      default: 693
-    },
-    modelTitle: {
-      type: String,
-      default: "审批详情"
-    },
-    showChart: {
-      type: Boolean,
-      default: true
-    },
-    showTable: {
-      type: Boolean,
-      default: true
-    },
-    tableName: {
-      type: String,
-      default: "审批流程跟踪"
-    },
-    tableColumns: {
-      type: Array,
-      default: () => {
-        return [
-          {title: '序号', type: 'index', width: 80},
-          {title: '审批节点', key: 'taskName', minWidth: 130},
-          {title: '办理人', key: 'auditName', minWidth: 180, tooltip: true},
-          {
-            title: '审批结果', key: 'auditResult', minWidth: 100,
-            render: (h, {row, column, index}) => {
-              let label = "";
-              if (row.auditResult == '30') label = '通过';
-              else if (row.auditResult == '40') label = '驳回到上一级';
-              else if (row.auditResult == '50') label = '驳回到原点';
-              else if (row.auditResult == '51') label = '流程终止';
-              else if (row.auditResult == '60') label = '撤回';
-              else if (row.auditResult == '80') label = '跳转到指定节点';
-              else if (row.auditResult == '90') label = '驳回到指定节点';
-              else label = '待审核';
-              return h('Label', {
-                props: {
-                  value: row.auditResult
-                }
-              }, label)
-            }
-          },
-          {
-            title: '审批时间', key: 'auditTime', minWidth: 150,
-            render: (h, {row}) => {
-              const displayDate = row.startDate || row.auditDate;
-              return h('span', displayDate);
-            }
-          },
-          {
-            title: '审批意见', key: 'auditComment', minWidth: 180, tooltip: true,
-            render: (h, {row, column, index}) => {
-              let label = "";
-              if (row.auditComment == '' || row.auditComment == null) label = '无';
-              else label = row.auditComment;
-              return h('Label', {
-                props: {
-                  value: row.auditComment
-                }
-              }, label)
-            }
-          }
-        ];
-      }
-    },
-    hisAudit: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    tableData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    applyId: {
-      type: String,
-      default: ""
-    },
-    instanceId: {
-      type: String,
-      default: ""
-    },
-    procId: {
-      type: String,
-      default: ""
-    },
-    smartFlowServerContext: {
-      type: String,
-      default: '/api/smart-flow-server',
-    },
-  },
-  data() {
-    return {
-      detailDones: [],
-      showDetail: false,
-      showDefaultExpand: this.getShowDefaultExpand(),
-    }
-  },
-  computed: {},
-  methods: {
-    getShowDefaultExpand() {
-      let expand = [];
-      if (this.showChart) {
-        expand.push('0');
-      }
-      if (this.showTable) {
-        expand.push('1');
-      }
-      return expand;
-    },
-
-    //画流程图
-    workflowInit() {
-      const canvas = this.$refs.canvas;
-      // this.bpmnViewer.destroy();
-      // if (this.bpmnViewer) return
-      if (this.bpmnViewer){
-        this.bpmnViewer.destroy()
-      }
-      this.bpmnViewer = new BpmnViewer({
-        container: canvas,
-        additionalModules: [
-          // MoveModule, // 可以调整元素
-          ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此
-          MoveCanvasModule, // 移动整个画布
-          zoomScroll // 放大缩小
-        ]
-      });
-
-      ajax.get(this.smartFlowServerContext + "/manage/processTodo/printData", {
-        params: {
-          applyId: this.applyId,
-          instanceId: this.instanceId,
-          procId: this.procId
-        }
-      }).then(resp => {
-        if (resp.data.code == '200') {
-          const bpmnXmlStr = resp.data.data.processXml;
-          this.bpmnViewer.importXML(bpmnXmlStr);
-          setTimeout(() => {
-            const printData = resp.data.data.historicData;
-            this.doPrint(printData);
-          }, 700);
-        } else {
-          this.$Message.error("加载流程xml失败，" + resp.data.data);
-        }
-      });
-    },
-    doPrint(printData) {
-      var self = this;
-      const {doneLightSet, donePointSet, doneTaskSet, todoPointSet} =
-        printData;
-      const canvas = this.bpmnViewer.get("canvas");
-      const elementRegistry = this.bpmnViewer.get('elementRegistry');
-      const userTaskList = elementRegistry.filter(
-        (item) => item.type === 'bpmn:UserTask'
-      );
-      //循环节点查找multiple
-      self.notMultiple = true;
-      canvas.zoom("fit-viewport", "auto");
-      var eventBus = this.bpmnViewer.get("eventBus");
-      var dones = this.tableData;
-      eventBus.on('element.click', function (evt) {
-        self.detailDones = [];
-        for (var item of dones) {
-          if (item.taskNode == evt.element.id) {
-            self.detailDones.push(item);
-            self.showDetail = true;
-            self.$emit("showTaskNode", item);
-            break;
-          }
-        }
-      });
-
-      for (var k in doneLightSet) {
-        if (doneLightSet[k]) {
-          canvas.addMarker(doneLightSet[k], "done-line");
-        }
-      }
-      for (var k in donePointSet) {
-        if (donePointSet[k]) {
-          canvas.addMarker(donePointSet[k], "done-point");
-        }
-      }
-      for (var k in doneTaskSet) {
-        if (doneTaskSet[k]) {
-          canvas.addMarker(doneTaskSet[k], "done-task");
-        }
-      }
-      for (var k in todoPointSet) {
-        if (todoPointSet[k]) {
-          canvas.addMarker(todoPointSet[k], "todo-point");
-        }
-      }
-
-    },
-// 校验必填
-    isNotBlank(val) {
-      return (val != null || val === 0) && (val.toString().trim() != '' || val === 0)
-    }
-  },
-  mounted() {
-    if (this.isNotBlank(this.applyId)) {
-      this.workflowInit();
-    }
-  },
-  watch: {
-    applyId(val) {
-      if (this.isNotBlank(val)) {
-        this.workflowInit();
-      }
-    },
-    instanceId(val) {
-      if (this.isNotBlank(this.applyId) && this.isNotBlank(val)) {
-        this.workflowInit();
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import "./styles/css/index.less";
-</style>
+<template>
+  <div ref="workflowDiagram">
+
+    <Collapse v-show="showChart" v-model="showDefaultExpand">
+      <Panel name="0">
+        流程跟踪图
+        <div slot="content">
+          <div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 8px;">
+            <span class="operating-instructions">提示：Ctrl+鼠标滚轮可缩放；按住鼠标左键拖动可平移</span>
+          </div>
+          <div class="notes-div">
+            <span class="notes-done-task">已办节点</span>
+            <span class="notes-todo-task">在办节点</span>
+            <span class="notes-none-task">未办节点</span>
+          </div>
+          <div class="containers" :style="'height: '+canvasHeight+ 'px'">
+            <div class="canvas" ref="canvas"></div>
+          </div>
+          <div v-if="predictButtonEnabled" style="display: flex; justify-content: center; margin-top: 12px;">
+            <Button
+                type="primary"
+                size="small"
+                @click="toggleNodeDisplay"
+                :loading="loadingFutureNodes">
+              {{ showAllNodes ? '显示预测路线' : '显示设计路线' }}
+            </Button>
+          </div>
+        </div>
+      </Panel>
+    </Collapse>
+
+    <Collapse v-show="showTable" v-model="showDefaultExpand">
+      <Panel name="1">
+        {{ tableName }}
+        <div slot="content">
+          <EditTable :columns="tableColumns" v-model="hisAuditTableData" :show-table-option="false"
+                     row-key="taskNode">
+          </EditTable>
+        </div>
+      </Panel>
+    </Collapse>
+
+
+    <Modal
+        v-model="showDetail"
+        :width="futureDetail ? 360 : modelWidth"
+        :footer-hide='true'
+        title="办理详情"
+        :class="futureDetail ? 'future-detail-modal' : ''">
+      <div v-if="futureDetail" class="future-detail-card">
+        <div class="future-detail-title">{{ futureDetail.taskName }}</div>
+        <div class="future-detail-body">
+          <span class="future-detail-status">待分配</span>
+          <span class="future-detail-users" :title="futureDetail.assigneeDisplay">
+            {{ futureDetail.assigneeDisplay }}
+          </span>
+        </div>
+      </div>
+      <template v-else>
+        <Card v-for="(item,index) in detailDones" :key="index" style="margin-bottom: 10px">
+          <Form :model="item" :label-width="120" label-colon>
+            <Row>
+              <i-col span="12" offset="0">
+                <FormItem label="节点">
+                  {{ item.taskName }}
+                </FormItem>
+              </i-col>
+              <i-col span="12" offset="0">
+                <FormItem label="办理人">
+                  <Tooltip placement="bottom-end">
+                    <span class="tooltip-text">{{ item.auditName }}</span>
+                    <div slot="content" style="white-space: normal;">
+                      {{ item.auditName }}
+                    </div>
+                  </Tooltip>
+
+                </FormItem>
+              </i-col>
+
+            </Row>
+            <Row>
+              <i-col span="12" offset="0">
+                <FormItem label="结果">
+                  <Tag color="green" v-if="item.auditResult == '00'">流程发起</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '10'">首节点自动跳过</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '11'">与上一环节办理人相同自动跳过</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '12'">与发起人相同自动跳过</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '13'">办理人为空自动跳过</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '14'">符合流程变量条件自动跳过</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '30'">{{item.handleName && item.handleName !== '审批' ? item.handleName : '通过'}}</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '31'">{{`${item.handleName && item.handleName !== '审批' ? item.handleName : '通过'}`}}</Tag>
+                  <Tag color="volcano" v-else-if="item.auditResult == '32'">{{`不${item.handleName && item.handleName !== '审批' ? item.handleName : '通过'}`}}</Tag>
+                  <Tag color="volcano" v-else-if="item.auditResult == '40'">{{item.rejectName ? item.rejectName : '驳回'}}上一节点</Tag>
+                  <Tag color="red" v-else-if="item.auditResult=='50'">{{item.rejectName ? item.rejectName : '驳回'}}到原点</Tag>
+                  <Tag color="purple" v-else-if="item.auditResult=='51'">流程终止</Tag>
+                  <Tag color="blue" v-else-if="item.auditResult == '60'">撤回</Tag>
+                  <Tag color="green" v-else-if="item.auditResult == '61'">交回委派任务</Tag>
+                  <Tag color="blue" v-else-if="item.auditResult == '62'">委派任务被撤回</Tag>
+                  <Tag color="orange" v-else-if="item.auditResult == '63'">委派任务</Tag>
+                  <Tag color="cyan" v-else-if="item.auditResult == '80'">跳转指定节点</Tag>
+                  <Tag color="cyan" v-else-if="item.auditResult == '82'">指定他人处理</Tag>
+                  <Tag color="blue" v-else-if="item.auditResult == '83'">会签减签</Tag>
+                  <Tag color="magenta" v-else-if="item.auditResult == '90'">{{item.rejectName ? item.rejectName : '驳回'}}指定节点</Tag>
+                  <Tag color="orange" v-else>待办理</Tag>
+                </FormItem>
+              </i-col>
+              <i-col span="12" offset="0">
+                <FormItem v-if="item.auditDate" label="时间">
+                  {{ item.auditDate }}
+                </FormItem>
+                <FormItem v-else :label="item.auditResult == '00' ? '发起时间' : '接收时间'">
+                  {{ item.createTime }}
+                </FormItem>
+              </i-col>
+            </Row>
+            <Row>
+              <i-col span="24" offset="0">
+                <FormItem v-if="item.auditComment" label="意见">
+                  {{ item.auditComment }}
+                </FormItem>
+              </i-col>
+            </Row>
+          </Form>
+        </Card>
+      </template>
+    </Modal>
+
+
+  </div>
+</template>
+
+<script>
+import ajax from "@lambo-design/shared/utils/ajax";
+import zoomScroll from "@lambo-design/shared/utils/zoomScroll";
+import BpmnViewer from "bpmn-js/lib/Viewer";
+import ModelingModule from 'bpmn-js/lib/features/modeling';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import EditTable from "@lambo-design/edit-table";
+import customRenderer from './components/customRenderer'
+
+export default {
+  components: {
+    EditTable
+  },
+  props: {
+    canvasHeight: {
+      type: Number,
+      default: 350
+    },
+    modelWidth: {
+      type: Number,
+      default: 693
+    },
+    modelTitle: {
+      type: String,
+      default: "审批详情"
+    },
+    showChart: {
+      type: Boolean,
+      default: true
+    },
+    showTable: {
+      type: Boolean,
+      default: true
+    },
+    tableName: {
+      type: String,
+      default: "流程跟踪表"
+    },
+    handleName: {
+      type: String,
+      default: "审批"
+    },
+    approveDetailShowWay: {
+      type: String,
+      required: false,
+      default: "click"
+    },
+    predictButtonEnabled: {
+      type: Boolean,
+      default: false
+    },
+    scrollElement: {
+      required: false
+    },
+    tableColumns: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   title: '序号',
+          //   minWidth: 60,
+          //   render: (h, {row, index}) => {
+          //     // 子节点不显示序号
+          //     if (row._isChildNode) {
+          //       return h('span', '');
+          //     }
+          //     return h('span', index + 1);
+          //   }
+          // },
+          // {title: '节点', key: 'taskName', minWidth: 130, tree: true},
+          {title: '序号', type: 'index', minWidth: 80},
+          {title: '节点', key: 'taskName', minWidth: 130},
+          {title: '办理人', key: 'auditName', minWidth: 150, tooltip: true},
+          {
+            title: '结果', key: 'auditResult', minWidth: 150,
+            render: (h, {row, column, index}) => {
+              let label = "";
+              let tagColor = "";
+              if (row.auditResult == '00'){
+                label = '流程发起';
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '10'){
+                label = '首节点自动跳过';
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '11') {
+                label = '与上一环节办理人相同自动跳过'
+                tagColor = 'green' // 绿色
+              }
+              else if (row.auditResult == '12') {
+                label = '与发起人相同自动跳过'
+                tagColor = 'green' // 绿色
+              }
+              else if (row.auditResult == '13') {
+                label = '办理人为空自动跳过'
+                tagColor = 'green' // 绿色
+              }
+              else if (row.auditResult == '14') {
+                label = '符合流程变量条件自动跳过'
+                tagColor = 'green' // 绿色
+              }
+              else if (row.auditResult == '30'){
+                label = '通过';
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '31'){
+                label = `${row.passName ? row.passName : '通过'}`;
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '32'){
+                label = `不${row.passName ? row.passName : '通过'}`;
+                tagColor =  'volcano'; // 红色
+              }
+              else if (row.auditResult == '40'){
+                label = `${row.rejectName ? row.rejectName : '驳回'}到上一级`;
+                tagColor = 'volcano'; // 火红色
+              }
+              else if (row.auditResult == '50'){
+                label = `${row.rejectName ? row.rejectName : '驳回'}到原点`;
+                tagColor = 'red'; // 红色
+              }
+              else if (row.auditResult == '51'){
+                label = '流程终止';
+                tagColor = 'purple'; // 紫色
+              }
+              else if (row.auditResult == '60'){
+                label = '撤回';
+                tagColor = 'blue'; // 蓝色
+              }
+              else if (row.auditResult == '61'){
+                label = '交回委派任务';
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '62'){
+                label = '委派任务被撤回';
+                tagColor = 'blue'; // 蓝色
+              }
+              else if (row.auditResult == '63'){
+                label = '委派任务';
+                tagColor = 'orange'; // 橙色
+              }
+              else if (row.auditResult == '80'){
+                label = '跳转到指定节点';
+                tagColor = 'cyan'; // 青色
+              }
+              else if (row.auditResult == '82'){
+                label = '指定他人处理';
+                tagColor = 'cyan'; // 青色
+              }
+              else if (row.auditResult == '83'){
+                label = '会签减签';
+                tagColor = 'blue'; // 蓝色
+              }
+              else if (row.auditResult == '90'){
+                label = `${row.rejectName ? row.rejectName : '驳回'}到指定节点`;
+                tagColor = 'magenta'; // 品红色
+              }
+              else if (row.auditResult == '待分配'){
+                label = '待分配';
+                tagColor = 'orange'; // 橙色
+              }
+              else{
+                label = '待审核';
+                tagColor = 'orange'; // 默认橙色
+              }
+              return h('Tag', {
+                props: {
+                  color: tagColor,
+                  value: row.auditResult
+                }
+              }, label);
+            }
+          },
+          {
+            title: '时间', key: 'auditTime', minWidth: 150,
+            render: (h, {row}) => {
+              const displayDate = row.auditDate;
+              return h('span', displayDate);
+            }
+          },
+          {
+            title: '意见', key: 'auditComment', minWidth: 180, tooltip: true,
+            render: (h, {row, column, index}) => {
+              let label = "";
+              if (row.auditComment == '' || row.auditComment == null) label = '无';
+              else label = row.auditComment;
+              return h('Label', {
+                props: {
+                  value: row.auditComment
+                }
+              }, label)
+            }
+          }
+        ];
+      }
+    },
+    hisAudit: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    tableData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    applyId: {
+      type: String,
+      default: ""
+    },
+    instanceId: {
+      type: String,
+      default: ""
+    },
+    procId: {
+      type: String,
+      default: ""
+    },
+    smartFlowServerContext: {
+      type: String,
+      default: '/api/smart-flow-server',
+    },
+    currentTaskId: {
+      type: String,
+      default: ""
+    },
+  },
+  data() {
+    return {
+      detailDones: [],
+      futureDetail: null,
+      showDetail: false,
+      showDefaultExpand: this.getShowDefaultExpand(),
+      showAllNodes: true, // 是否显示全部节点
+      loadingFutureNodes: false, // 加载未来节点状态
+      futureNodeData: null, // 未来节点数据
+      doneLightSet: new Set(), // 已办连线集合
+      doneTaskSet: new Set(), // 已办任务集合
+      donePointIdSet: new Set(), // 已办节点（网关等）集合
+      doneNodeIdSet: new Set(), // 已办节点总集合
+      todoPointIdSet: new Set(), // 待办节点集合（设计模式下用于校验父子流程状态）
+      diagramReady: false, // 流程图是否加载完成
+      hisAuditTableData: [], // table数据
+    }
+  },
+  computed: {},
+  methods: {
+    getShowDefaultExpand() {
+      let expand = [];
+      if (this.showChart) {
+        expand.push('0');
+      }
+      if (this.showTable) {
+        expand.push('1');
+      }
+      return expand;
+    },
+
+    //画流程图
+    workflowInit() {
+      const canvas = this.$refs.canvas;
+      // this.bpmnViewer.destroy();
+      // if (this.bpmnViewer) return
+      if (this.bpmnViewer) {
+        this.bpmnViewer.destroy()
+      }
+      this.diagramReady = false;
+      this.bpmnViewer = new BpmnViewer({
+        container: canvas,
+        additionalModules: [
+          // MoveModule, // 可以调整元素
+          ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此
+          MoveCanvasModule, // 移动整个画布
+          zoomScroll, // 放大缩小
+          //渲染器
+          customRenderer
+        ]
+      });
+
+      //修改zoomScroll的scroll方法，滚动目标element
+      zoomScroll.zoomScroll[1].prototype.scroll = (delta)=>{
+        let scrollElement = this.scrollElement ? this.scrollElement : this.$refs.workflowDiagram.parentElement.parentElement
+        scrollElement.scrollTop -= delta.dy;
+      }
+
+      ajax.get(this.smartFlowServerContext + "/manage/processTodo/printData", {
+        params: {
+          applyId: this.applyId,
+          instanceId: this.instanceId,
+          procId: this.procId
+        }
+      }).then(resp => {
+        if (resp.data.code == '200') {
+          const bpmnXmlStr = resp.data.data.processXml;
+          this.bpmnViewer.importXML(bpmnXmlStr, (err) => {
+            if (err) {
+              this.$Message.error("加载流程xml失败，" + err.message);
+              this.diagramReady = false;
+              return;
+            }
+            setTimeout(() => {
+              const printData = resp.data.data.historicData;
+              this.doPrint(printData);
+              this.diagramReady = true;
+            }, 700);
+          });
+        } else {
+          this.$Message.error("加载流程xml失败，" + resp.data.data);
+          this.diagramReady = false;
+        }
+      }).catch(() => {
+        this.diagramReady = false;
+      });
+    },
+    doPrint(printData) {
+      var self = this;
+      const {doneLightSet, donePointSet, doneTaskSet, todoPointSet} =
+          printData;
+
+      // 保存已办连线和节点集合，供未来节点显示时使用
+      self.doneLightSet = new Set(doneLightSet || []);
+      self.doneTaskSet = new Set(doneTaskSet || []);
+      self.donePointIdSet = new Set(donePointSet || []);
+      self.doneNodeIdSet = new Set([
+        ...self.doneTaskSet,
+        ...self.donePointIdSet
+      ]);
+      self.todoPointIdSet = new Set(todoPointSet || []);
+
+      const canvas = this.bpmnViewer.get("canvas");
+      const elementRegistry = this.bpmnViewer.get('elementRegistry');
+      const userTaskList = elementRegistry.filter(
+          (item) => item.type === 'bpmn:UserTask'
+      );
+      //循环节点查找multiple
+      self.notMultiple = true;
+      canvas.zoom("fit-viewport", "auto");
+      var eventBus = this.bpmnViewer.get("eventBus");
+      const getDetailData = () => {
+        // if (Array.isArray(self.hisAudit) && self.hisAudit.length > 0) {
+        //   return self.hisAudit;
+        // }
+        return Array.isArray(self.tableData) ? self.tableData : [];
+      };
+      // eventBus.on('element.click', function (evt) {
+      // eventBus.on('element.hover', function (evt) {
+      eventBus.on(`element.${this.approveDetailShowWay}`, function (evt) {
+        const detailSource = getDetailData();
+        if (self.showAllNodes) {
+          self.futureDetail = null;
+          self.detailDones = [];
+          const currentItems = detailSource.filter(item => item.taskNode === evt.element.id && !item.isFuture);
+          if (currentItems.length > 0) {
+            self.detailDones = currentItems;
+            self.showDetail = true;
+          } else {
+            self.hideFutureDetail();
+          }
+          return;
+        }
+
+        const matched = detailSource.filter(item => item.taskNode === evt.element.id);
+        const futureItem = matched.find(item => item.isFuture || item.auditResult === '待分配');
+        if (futureItem) {
+          self.futureDetail = self.buildFutureDetail(futureItem);
+          self.detailDones = [];
+          self.showDetail = true;
+          return;
+        }
+
+        self.futureDetail = null;
+        self.detailDones = matched.filter(item => !item.isFuture);
+        self.showDetail = self.detailDones.length > 0;
+        if (!self.showDetail) {
+          self.hideFutureDetail();
+        }
+      });
+
+      const isInsideExecutedSubProcess = (elementId) => {
+        if (!elementId) return false;
+        const element = elementRegistry.get(elementId);
+        if (!element) return true;
+        let parent = element.parent;
+        while (parent) {
+          if (parent.type === 'bpmn:SubProcess') {
+            const parentId = parent.id;
+            if (
+                !self.doneNodeIdSet.has(parentId) &&
+                !(self.todoPointIdSet && self.todoPointIdSet.has(parentId))
+            ) {
+              return false;
+            }
+          }
+          parent = parent.parent;
+        }
+        return true;
+      };
+
+      for (const k in doneLightSet) {
+        const lineId = doneLightSet[k];
+        if (lineId && isInsideExecutedSubProcess(lineId)) {
+          canvas.addMarker(lineId, "done-line");
+        }
+      }
+      for (const k in donePointSet) {
+        const pointId = donePointSet[k];
+        if (pointId && isInsideExecutedSubProcess(pointId)) {
+          canvas.addMarker(pointId, "done-point");
+        }
+      }
+      for (const k in doneTaskSet) {
+        const taskId = doneTaskSet[k];
+        if (taskId && isInsideExecutedSubProcess(taskId)) {
+          canvas.addMarker(taskId, "done-task");
+        }
+      }
+      for (const k in todoPointSet) {
+        const todoId = todoPointSet[k];
+        if (todoId && isInsideExecutedSubProcess(todoId)) {
+          canvas.addMarker(todoId, "todo-point");
+        }
+      }
+
+    },
+
+    buildFutureDetail(item) {
+      const names = (item.auditName || '')
+          .split(',')
+          .map(name => name && name.trim())
+          .filter(Boolean);
+      return {
+        taskName: item.taskName || '',
+        assigneeDisplay: names.length > 0 ? names.join('，') : '暂无人员'
+      };
+    },
+
+    hideFutureDetail() {
+      this.futureDetail = null;
+      this.detailDones = [];
+      this.showDetail = false;
+    },
+
+    // 切换节点显示模式
+    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.hideFutureDetail();
+        this.showAllNodes = true;
+        // 发射事件通知父组件隐藏预测路线
+        this.$emit('toggle-predictive', {showPredictive: false, futureNodeData: null});
+      }
+    },
+
+    // 加载未来节点数据
+    async loadFutureNodes() {
+      if (!this.instanceId || !this.currentTaskId) {
+        this.$Message.warning('缺少必要参数：流程实例ID或当前任务ID');
+        return false;
+      }
+      if (!this.diagramReady) {
+        this.$Message.warning('流程图尚未加载完成，请稍后重试');
+        return false;
+      }
+
+      this.loadingFutureNodes = true;
+      try {
+        const resp = await ajax.get(this.smartFlowServerContext + "/manage/processTodo/renderFutureNode", {
+          params: {
+            processInstanceId: this.instanceId,
+            currentTaskId: this.currentTaskId
+          }
+        });
+
+        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)) {
+              this.$Message.warning('预测路线暂不支持子流程节点，请查看设计路线');
+              return false;
+            }
+          }
+          this.futureNodeData = futureData;
+          this.showFutureNodesOnly();
+          return true;
+        } else {
+          this.$Message.error("加载未来节点失败：" + resp.data.message);
+          return false;
+        }
+      } catch (error) {
+        this.$Message.error("加载未来节点失败：" + error.message);
+        return false;
+      } finally {
+        this.loadingFutureNodes = false;
+      }
+    },
+
+    // 只显示未来节点
+    showFutureNodesOnly() {
+      if (!this.futureNodeData || !this.bpmnViewer) return;
+
+      const elementRegistry = this.bpmnViewer.get('elementRegistry');
+      const modeling = this.bpmnViewer.get('modeling');
+
+      // 获取所有元素
+      const allElements = elementRegistry.getAll();
+
+      // 从后端数据中提取节点和边信息
+      const {nodes = [], edges = [], futureNodeIds = [], currentNodeId = ''} = 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 || []);
+
+      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) || {};
+          const target = element.target;
+          const source = element.source;
+          const targetParent = target && target.parent && target.parent.type === 'bpmn:SubProcess' ? target.parent : null;
+          const sourceParent = source && source.parent && source.parent.type === 'bpmn:SubProcess' ? source.parent : null;
+          const targetParentDone = targetParent && doneNodeSet.has(targetParent.id);
+          const sourceParentDone = sourceParent && doneNodeSet.has(sourceParent.id);
+          const targetIsDoneTask = target && doneNodeSet.has(target.id) || targetParentDone;
+          const sourceIsDoneTask = source && doneNodeSet.has(source.id) || sourceParentDone;
+          // 修改：严格判断连线是否已办，只有连线本身在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 (element.type.includes('Gateway')) {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+
+          // 检查是否有已办连线连接
+          const hasConnectedDone = element.incoming?.some(conn => {
+            const source = conn.source;
+            //连线本身已办或者连线的来源节点
+            return doneLightSet.has(conn.id) || (source && doneNodeSet.has(source.id));
+          }) || element.outgoing?.some(conn => {
+            const target = conn.target;
+            //连线本身已办或者连线的目标节点已办
+            return doneLightSet.has(conn.id) || (target && doneNodeSet.has(target.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);
+          });
+
+          // 严格网关显示条件，只有以下情况才显示网关：
+          // 1. 网关在预测路径中
+          // 2. 网关本身已办
+          // 3. 网关同时连接了已办节点和预测路径节点（双向连接，确保不是孤立网关）
+          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.hideFutureDetail();
+
+      // 重新加载流程图是最可靠的恢复方式
+      // 这样可以避免样式清除不彻底导致的黑框问题
+      this.workflowInit();
+    },
+
+    isElementInSubProcess(element) {
+      let parent = element && element.parent;
+      while (parent) {
+        if (parent.type === 'bpmn:SubProcess') {
+          return true;
+        }
+        parent = parent.parent;
+      }
+      return false;
+    },
+
+// 校验必填
+    isNotBlank(val) {
+      return (val != null || val === 0) && (val.toString().trim() != '' || val === 0)
+    }
+  },
+  mounted() {
+    if (this.isNotBlank(this.applyId)) {
+      this.$nextTick(() => {
+        this.workflowInit();
+      });
+    }
+  },
+  watch: {
+    applyId(val) {
+      if (this.isNotBlank(val)) {
+        this.workflowInit();
+      }
+    },
+    instanceId(val) {
+      if (this.isNotBlank(this.applyId) && this.isNotBlank(val)) {
+        this.workflowInit();
+      }
+    },
+    tableData: {
+      handler(val) {
+        this.hisAuditTableData = val.filter(
+            item => !item.status || item.status !== 'future'
+        );
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import "./styles/css/index.less";
+
+.future-detail-modal .ivu-modal-header {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.future-detail-modal .ivu-modal-body {
+  padding: 20px 24px;
+}
+
+.future-detail-card {
+  background: #f7f8fa;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.future-detail-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2329;
+  margin-bottom: 12px;
+}
+
+.future-detail-body {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: #4e5969;
+}
+
+.future-detail-status {
+  background: #f7dba7;
+  color: #8f5d00;
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.future-detail-users {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
+
+
+
+
+