@lambo-design/workflow-approve 1.0.0-beta.32 → 1.0.0-beta.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/workflow-approve",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.35",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -13,7 +13,7 @@
     "axios": "^0.24.0",
     "axios-cache-plugin": "^0.1.0",
     "@lambo-design/core": "^4.7.1-beta.147",
-    "@lambo-design/shared": "^1.0.0-beta.224"
+    "@lambo-design/shared": "^1.0.0-beta.233"
   },
   "dependencies": {
     "bpmn-js": "^7.3.1",

package/src/components/candidate-groups-box.vue

@@ -1367,33 +1367,31 @@ export default {
       if (self.permScope == "all" || self.permScope == "undefined") {
         let userIdSet = new Set()
         data.forEach(itemCom => {
-          if ((jsonArray.orgCode || jsonArray.organCode) != itemCom.code) {
-
-            ajax.get(self.upmsServerContext + "/manage/user/getList", {
-              params: {
-                organId: itemCom.id,
-                orgTreeType: self.organTreeType,
-                limit: "1000",
-                directChild: true,
-              }
-            }).then(function (resp) {
-              if (resp.data.message == "成功") {
-                let nodeUser = resp.data.data
-                nodeUser.forEach(item => {
-                  if (!userIdSet.has(item.userId)) {
-                    userIdSet.add(item.userId)
-                    treeUserCenters.push({
-                      userId: item.userId,
-                      userName: item.userName,
-                      nameItem: item.superiorOrgName,
-                      organName: item.organName
-                    })
-                  }
-                })
-              }
 
-            })
-          }
+          ajax.get(self.upmsServerContext + "/manage/user/getList", {
+            params: {
+              organId: itemCom.id,
+              orgTreeType: self.organTreeType,
+              limit: "1000",
+              directChild: true,
+            }
+          }).then(function (resp) {
+            if (resp.data.message == "成功") {
+              let nodeUser = resp.data.data
+              nodeUser.forEach(item => {
+                if (!userIdSet.has(item.userId)) {
+                  userIdSet.add(item.userId)
+                  treeUserCenters.push({
+                    userId: item.userId,
+                    userName: item.userName,
+                    nameItem: item.superiorOrgName,
+                    organName: item.organName
+                  })
+                }
+              })
+            }
+
+          })
         })
       } else {
         let userIdSet = new Set()

package/src/portrait.vue

@@ -208,7 +208,7 @@
     <Modal v-model="modalBoxShow" width="1000" title="流程跟踪图">
       <Workflow_Diagram ref="processTrace" :instanceId="process.instanceId" :applyId="process.applyId"
                         :procId="process.procId" :table-columns="diagramTableColumns"
-                        :tableData="process.tableData" :hisAudit="hisAudit"
+                        :tableData="process.tableData" :hisAudit="hisAudit" :approve-detail-show-way="approveDetailShowWay"
                         :smart-flow-server-context="smartFlowServerContext">
       </Workflow_Diagram>
     </Modal>
@@ -383,6 +383,18 @@ export default {
       required: false,
       default: true,
     },
+    //流程跟踪图附件列
+    showAttachmentFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    //流程跟踪图审批详情触发方式
+    approveDetailShowWay: {
+      type: String,
+      required: false,
+      default: 'click',
+    },
     //业务表单保存方法
     businessFormSave: {
       type: Function,
@@ -706,7 +718,7 @@ export default {
           }, label)
         }
       })
-      if (this.handleButtons.includes('attachmentFile')){
+      if (this.showAttachmentFile){
         column.push({
           title: `附件`, key: 'fileList', minWidth: 200,
           render: (h, { row }) => {
@@ -1121,6 +1133,14 @@ export default {
                 self.disable = false
               }
             })
+          } else if (result.code == '10012') {
+            // 数据同步
+            self.loading = false
+            self.disable = false
+            self.$Message.warning(result.message)
+            setTimeout(() => {
+              self.executionCompleted(true, null, null, auditResult, self.curTaskId)
+            }, 1000)
           } else {
             self.loading = true
             self.disable = true
@@ -1131,12 +1151,14 @@ export default {
                 self.loading = false
                 self.disable = false
                 self.$Message.success(result.message);
-                if (result.data) {
-                  let taskIds = result.data.map(item => item.id).join(',');
-                  self.executionCompleted(true, result.data[0].processInstanceId, taskIds, auditResult, self.curTaskId)
-                } else {
-                  self.executionCompleted(true, null, null, auditResult, self.curTaskId)
-                }
+                setTimeout(() => {
+                  if (result.data) {
+                    let taskIds = result.data.map(item => item.id).join(',');
+                    self.executionCompleted(true, result.data[0].processInstanceId, taskIds, auditResult, self.curTaskId)
+                  } else {
+                    self.executionCompleted(true, null, null, auditResult, self.curTaskId)
+                  }
+                }, 1000)
               } else {
                 self.loading = false
                 self.disable = false
@@ -1189,6 +1211,14 @@ export default {
                 self.executionCompleted(true, null, null, auditResult, self.curTaskId)
               }, 1000)
             }
+          } else if (result.code == '10012') {
+            // 数据同步
+            self.loading = false
+            self.disable = false
+            self.$Message.warning(result.message)
+            setTimeout(() => {
+              self.executionCompleted(true, null, null, auditResult, self.curTaskId)
+            }, 1000)
           } else if (result.code == '20002') {
             // 流程结束
             self.loading = false
@@ -1458,12 +1488,12 @@ export default {
       return false
     },
     readingRangeClick(item) {
-      let permScope = item.organTreeType === this.defaultOrganTreeType ? this.permScope : 'all'
+      let permScope = item.orgTreeType === this.defaultOrganTreeType ? this.permScope : 'all'
       let orgTreeType = item.orgTreeType ? item.orgTreeType : this.defaultOrganTreeType
       this.$refs.assigneeHelpBox.toggleShowHelpBox(orgTreeType, permScope, 'transferNextTask', item.id)
     },
     candidateGroupsReadingRangeClick(item) {
-      let permScope = item.organTreeType === this.defaultOrganTreeType ? this.permScope : 'all'
+      let permScope = item.orgTreeType === this.defaultOrganTreeType ? this.permScope : 'all'
       let orgTreeType = item.orgTreeType ? item.orgTreeType : this.defaultOrganTreeType
       this.$refs.candidateGroupsHelpBox.toggleShowHelpBox(permScope, item.candidates, orgTreeType, item.id);
     },

package/src/workflow-diagram.vue

@@ -1,371 +1,377 @@
-<template>
-  <div>
-
-    <Collapse v-show="showChart" v-model="showDefaultExpand">
-      <Panel name="0">
-        流程跟踪图
-        <div slot="content">
-          <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>
-      </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="detailDones[0] && detailDones[0].handleName ? detailDones[0].handleName + '详情' : '审批详情'">
-      <Card v-for="(item,index) in detailDones" :key="index" style="margin-bottom: 10px">
-        <Form :model="item" :label-width="140">
-          <Row>
-            <i-col span="12" offset="0">
-              <FormItem :label="item.handleName ? item.handleName + '节点：' : '审批节点：'">
-                {{ item.taskName }}
-              </FormItem>
-            </i-col>
-            <i-col span="12" offset="0">
-              <FormItem :label="item.handleName ? item.handleName + '人：' : '审批人：'">
-                <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="item.handleName ? item.handleName + '结果：' : '审批结果：'">
-                <Tag color="green" v-if="item.auditResult == '30'">通过</Tag>
-                <Tag color="volcano" v-else-if="item.auditResult == '40'">驳回上一节点</Tag>
-                <Tag color="red" v-else-if="item.auditResult=='50'">驳回到原点</Tag>
-                <Tag color="purple" v-else-if="item.auditResult=='51'">流程终止</Tag>
-                <Tag color="blue" v-else-if="item.auditResult == '60'">撤回</Tag>
-                <Tag color="cyan" v-else-if="item.auditResult == '80'">跳转指定节点</Tag>
-                <Tag color="magenta" v-else-if="item.auditResult == '90'">驳回指定节点</Tag>
-                <Tag color="orange" 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.handleName ? item.handleName + '时间：' : '审批时间：'">
-                {{ item.auditDate }}
-              </FormItem>
-            </i-col>
-          </Row>
-          <Row>
-            <i-col span="24" offset="0">
-              <FormItem v-if="item.auditComment" :label="item.handleName ? item.handleName + '意见：' : '审批意见：'">
-                {{ 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: "流程跟踪表"
-    },
-    handleName: {
-      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 = "";
-              let tagColor = "";
-              if (row.auditResult == '30'){
-                label = '通过';
-                tagColor = 'green'; // 绿色
-              }
-              else if (row.auditResult == '40'){
-                label = '驳回到上一级';
-                tagColor = 'volcano'; // 火红色
-              }
-              else if (row.auditResult == '50'){
-                label = '驳回到原点';
-                tagColor = 'red'; // 红色
-              }
-              else if (row.auditResult == '51'){
-                label = '流程终止';
-                tagColor = 'purple'; // 紫色
-              }
-              else if (row.auditResult == '60'){
-                label = '撤回';
-                tagColor = 'blue'; // 蓝色
-              }
-              else if (row.auditResult == '80'){
-                label = '跳转到指定节点';
-                tagColor = 'cyan'; // 青色
-              }
-              else if (row.auditResult == '90'){
-                label = '驳回到指定节点';
-                tagColor = 'magenta'; // 品红色
-              }
-              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.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) {
-      eventBus.on('element.hover', 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;
-          }
-        }
-        if(self.detailDones.length > 0) {
-          self.showDetail = true;
-        }
-      });
-
-      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>
+
+    <Collapse v-show="showChart" v-model="showDefaultExpand">
+      <Panel name="0">
+        流程跟踪图
+        <div slot="content">
+          <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>
+      </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="detailDones[0] && detailDones[0].handleName ? detailDones[0].handleName + '详情' : '审批详情'">
+      <Card v-for="(item,index) in detailDones" :key="index" style="margin-bottom: 10px">
+        <Form :model="item" :label-width="140">
+          <Row>
+            <i-col span="12" offset="0">
+              <FormItem :label="item.handleName ? item.handleName + '节点：' : '审批节点：'">
+                {{ item.taskName }}
+              </FormItem>
+            </i-col>
+            <i-col span="12" offset="0">
+              <FormItem :label="item.handleName ? item.handleName + '人：' : '审批人：'">
+                <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="item.handleName ? item.handleName + '结果：' : '审批结果：'">
+                <Tag color="green" v-if="item.auditResult == '30'">通过</Tag>
+                <Tag color="volcano" v-else-if="item.auditResult == '40'">驳回上一节点</Tag>
+                <Tag color="red" v-else-if="item.auditResult=='50'">驳回到原点</Tag>
+                <Tag color="purple" v-else-if="item.auditResult=='51'">流程终止</Tag>
+                <Tag color="blue" v-else-if="item.auditResult == '60'">撤回</Tag>
+                <Tag color="cyan" v-else-if="item.auditResult == '80'">跳转指定节点</Tag>
+                <Tag color="magenta" v-else-if="item.auditResult == '90'">驳回指定节点</Tag>
+                <Tag color="orange" 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.handleName ? item.handleName + '时间：' : '审批时间：'">
+                {{ item.auditDate }}
+              </FormItem>
+            </i-col>
+          </Row>
+          <Row>
+            <i-col span="24" offset="0">
+              <FormItem v-if="item.auditComment" :label="item.handleName ? item.handleName + '意见：' : '审批意见：'">
+                {{ 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: "流程跟踪表"
+    },
+    handleName: {
+      type: String,
+      default: "审批"
+    },
+    approveDetailShowWay: {
+      type: String,
+      required: false,
+      default: "click"
+    },
+    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 = "";
+              let tagColor = "";
+              if (row.auditResult == '30'){
+                label = '通过';
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '40'){
+                label = '驳回到上一级';
+                tagColor = 'volcano'; // 火红色
+              }
+              else if (row.auditResult == '50'){
+                label = '驳回到原点';
+                tagColor = 'red'; // 红色
+              }
+              else if (row.auditResult == '51'){
+                label = '流程终止';
+                tagColor = 'purple'; // 紫色
+              }
+              else if (row.auditResult == '60'){
+                label = '撤回';
+                tagColor = 'blue'; // 蓝色
+              }
+              else if (row.auditResult == '80'){
+                label = '跳转到指定节点';
+                tagColor = 'cyan'; // 青色
+              }
+              else if (row.auditResult == '90'){
+                label = '驳回到指定节点';
+                tagColor = 'magenta'; // 品红色
+              }
+              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.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) {
+      // eventBus.on('element.hover', function (evt) {
+      eventBus.on(`element.${this.approveDetailShowWay}`, 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;
+          }
+        }
+        if(self.detailDones.length > 0) {
+          self.showDetail = true;
+        }
+      });
+
+      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>