@lambo-design/workflow-approve 1.0.0-beta.6 → 1.0.0-beta.60

package/src/workflow-diagram.vue

@@ -1,332 +1,416 @@
-<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 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 == '00'">流程发起</Tag>
+                <Tag color="green" v-if="item.auditResult == '10'">自动跳过</Tag>
+                <Tag color="green" v-else-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="green" v-else-if="item.auditResult == '61'">交回委派任务</Tag>
+                <Tag color="blue" v-else-if="item.auditResult == '62'">委派任务被撤回</Tag>
+                <Tag color="cyan" v-else-if="item.auditResult == '80'">跳转指定节点</Tag>
+                <Tag color="cyan" v-else-if="item.auditResult == '82'">指定他人处理</Tag>
+                <Tag color="cyan" v-else-if="item.auditResult == '83'">会签减签</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.auditResult == '00' ? '发起时间：' : '接收时间：'">
+                {{ item.createTime }}
+              </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"
+    },
+    scrollElement: {
+      required: false
+    },
+    tableColumns: {
+      type: Array,
+      default: () => {
+        return [
+          {title: '序号', type: 'index', width: 60},
+          {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 == '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 == '61'){
+                label = '交回委派任务';
+                tagColor = 'green'; // 绿色
+              }
+              else if (row.auditResult == '62'){
+                label = '委派任务被撤回';
+                tagColor = 'blue'; // 蓝色
+              }
+              else if (row.auditResult == '80'){
+                label = '跳转到指定节点';
+                tagColor = 'cyan'; // 青色
+              }
+              else if (row.auditResult == '82'){
+                label = '指定他人处理';
+                tagColor = 'cyan'; // 青色
+              }
+              else if (row.auditResult == '83'){
+                label = '会签减签';
+                tagColor = 'red'; // 青色
+              }
+              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 // 放大缩小
+        ]
+      });
+
+      //修改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);
+          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>