update 流程详情-流程图

2023-10-11 12:00:08 +08:00
parent 03088b4729
commit 6148febfff
5 changed files with 414 additions and 272 deletions
@@ -0,0 +1,339 @@
+<template>
+  <div :id="domId"></div>
+</template>
+
+<script>
+import insertCss from 'insert-css'
+import G6 from '@antv/g6'
+import DeleteIcon from '../assets/image/iconDelete.svg'
+
+// 流程图用到的属性
+const ChartAttrs = {
+  nodeStrokeColor: '#739FC8', // 节点边框颜色
+  nodeFillColor: '#EEF4F8', // 节点背景颜色
+  nodeTextColor: '#227CCF', // 节点文字颜色
+  nodeWidth: 210, // 节点宽度
+  nodeHeight: 40, // 节点高度
+  ellipseLength: 12, // 文本显示最大长度
+  returnLineSpacing: 30, // 文本左右绕的加宽
+  edgeColor: '#86909c', // 线的颜色
+  edgeWidth: 1,
+  btnColor: '#1f1f1f', // 按钮颜色
+  btnSize: 20, // 按钮的宽高
+  btnPadding: 2 // 按钮边框和内部图标的距离
+}
+
+// 添加图标
+const AddIcon = function EXPAND_ICON (x, y, r) {
+  return [['M', x + 2, y], ['L', x + 2 * r - 2, y], ['M', x + r, y - r + 2], ['L', x + r, y + r - 2]]
+}
+
+// 处理图的tooltip样式
+insertCss(`
+.g6-tooltip {
+    border-radius: 6px;
+    font-size: 12px;
+    color: #fff;
+    background-color: #000;
+    padding: 2px 8px;
+    text-align: center;
+  }
+`)
+
+export default {
+  name: 'FlowChart',
+  props: {
+    // 元素的id
+    domId: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    // 流程图用到的数据
+    chartData: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    // 是否仅查看
+    isViewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isLoadEnd: false, // 页面是否加载完成
+      graph: null
+    }
+  },
+  watch: {
+    chartData: {
+      handler () {
+        if (this.isLoadEnd) {
+          if (this.graph) {
+            this.graph.destroy()
+            this.graph = null
+            this.initChart()
+          } else {
+            this.initChart()
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    isLoadEnd () {
+      if (this.isLoadEnd && Object.keys(this.chartData).length > 0) {
+        this.initChart()
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.isLoadEnd = true
+    })
+  },
+  methods: {
+    initChart () {
+      const canOperate = !this.isViewOnly
+      // 自定义节点
+      G6.registerNode('default-node', {
+        drawShape (cfg, group) {
+          const rect = group.addShape('rect', {
+            attrs: {
+              x: -(ChartAttrs.nodeWidth / 2),
+              y: -(ChartAttrs.nodeHeight / 2),
+              width: ChartAttrs.nodeWidth,
+              height: ChartAttrs.nodeHeight,
+              radius: ChartAttrs.nodeHeight / 2,
+              fill: ChartAttrs.nodeFillColor,
+              stroke: ChartAttrs.nodeStrokeColor
+            },
+            name: 'default-node-box'
+          })
+          // 处理文本显示及文本超长
+          if (cfg.name) {
+            const text = cfg.name.length > ChartAttrs.ellipseLength ? cfg.name.substring(0, ChartAttrs.ellipseLength) + '...' : cfg.name
+            group.addShape('text', {
+              attrs: {
+                text,
+                fill: ChartAttrs.nodeTextColor,
+                fontSize: 14,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                fontWeight: 'bold'
+              },
+              name: 'default-node-text'
+            })
+          }
+          // 可以添加，添加虽然在线上，但代码要写在自定义点里，不然获取不到节点id
+          if (cfg.isApprovalNode === 1 && canOperate) {
+            group.addShape('rect', {
+              attrs: {
+                x: -(ChartAttrs.btnSize / 2),
+                y: 1.5 * ChartAttrs.btnSize,
+                width: ChartAttrs.btnSize,
+                height: ChartAttrs.btnSize,
+                radius: 4,
+                symbol: AddIcon,
+                fill: 'white',
+                cursor: 'pointer',
+                stroke: ChartAttrs.btnColor,
+                lineWidth: 1
+              },
+              name: 'add-btn'
+            })
+            group.addShape('marker', {
+              attrs: {
+                x: -(ChartAttrs.btnSize / 2) + ChartAttrs.btnPadding,
+                y: 2 * ChartAttrs.btnSize,
+                r: (ChartAttrs.btnSize / 2) - ChartAttrs.btnPadding,
+                symbol: AddIcon,
+                stroke: ChartAttrs.btnColor,
+                fill: 'white',
+                cursor: 'pointer',
+                lineWidth: 1
+              },
+              name: 'add-btn-icon'
+            })
+          }
+          // 可以删除
+          if (cfg.isCanDeleted === 1 && canOperate) {
+            group.addShape('rect', {
+              attrs: {
+                x: ChartAttrs.nodeWidth / 2 + ChartAttrs.btnSize / 2,
+                y: -ChartAttrs.btnSize / 2,
+                width: ChartAttrs.btnSize,
+                height: ChartAttrs.btnSize,
+                radius: 4,
+                symbol: AddIcon,
+                fill: 'white',
+                cursor: 'pointer',
+                stroke: ChartAttrs.btnColor
+              },
+              name: 'delete-btn'
+            })
+            group.addShape('image', {
+              attrs: {
+                x: ChartAttrs.nodeWidth / 2 + ChartAttrs.btnSize / 2 + ChartAttrs.btnPadding,
+                y: -ChartAttrs.btnSize / 2 + ChartAttrs.btnPadding,
+                img: DeleteIcon,
+                width: ChartAttrs.btnSize - ChartAttrs.btnPadding * 2,
+                height: ChartAttrs.btnSize - ChartAttrs.btnPadding * 2
+              },
+              name: 'delete-btn-icon'
+            })
+          }
+          return rect
+        },
+        // 设置锚点，上下中心
+        getAnchorPoints () {
+          return [
+            [0.5, 0],
+            [0.5, 1]
+          ]
+        }
+      }, 'single-node')
+
+      // 自定义边
+      G6.registerEdge('default-edge', {
+        // 处理线条
+        draw (cfg, group) {
+          const startPoint = cfg.startPoint
+          const endPoint = cfg.endPoint
+          let path = []
+          // 如果起始点在终点的右下方
+          if (startPoint.y > endPoint.y && startPoint.x >= endPoint.x) {
+            path = [
+              ['M', startPoint.x, startPoint.y],
+              ['L', startPoint.x, startPoint.y + ChartAttrs.nodeHeight], // 从下面出来
+              ['L', startPoint.x + ChartAttrs.nodeWidth / 2 + ChartAttrs.returnLineSpacing, startPoint.y + ChartAttrs.nodeHeight], // 右侧绕一下
+              ['L', startPoint.x + ChartAttrs.nodeWidth / 2 + ChartAttrs.returnLineSpacing, endPoint.y - ChartAttrs.nodeHeight], // 右侧绕一下
+              ['L', endPoint.x, endPoint.y - ChartAttrs.nodeHeight], // 到入点的上方
+              ['L', endPoint.x, endPoint.y]
+            ]
+          } else if (startPoint.y > endPoint.y && startPoint.x < endPoint.x) { // 起始点在终点的左下方
+            path = [
+              ['M', startPoint.x, startPoint.y],
+              ['L', startPoint.x, startPoint.y + ChartAttrs.nodeHeight], // 从下面出来
+              ['L', startPoint.x - ChartAttrs.nodeWidth - ChartAttrs.returnLineSpacing, startPoint.y + ChartAttrs.nodeHeight], // 左侧绕一下
+              ['L', startPoint.x - ChartAttrs.nodeWidth - ChartAttrs.returnLineSpacing, endPoint.y - ChartAttrs.nodeHeight], // 右侧绕一下
+              ['L', endPoint.x, endPoint.y - ChartAttrs.nodeHeight], // 到入点的上方
+              ['L', endPoint.x, endPoint.y]
+            ]
+          } else {
+            path = [
+              ['M', startPoint.x, startPoint.y],
+              ['L', startPoint.x, (endPoint.y - startPoint.y) / 2 + startPoint.y],
+              ['L', endPoint.x, (endPoint.y - startPoint.y) / 2 + startPoint.y],
+              ['L', endPoint.x, endPoint.y]
+            ]
+          }
+          const shape = group.addShape('path', {
+            attrs: {
+              path,
+              stroke: ChartAttrs.edgeColor,
+              lineWidth: ChartAttrs.edgeWidth,
+              endArrow: true
+            },
+            className: 'edge-shape',
+            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+            name: 'edge-shape'
+          })
+          // 处理label
+          if (cfg.label && cfg.label.length > 0) {
+            console.log(cfg.label)
+            group.addShape('text', {
+              attrs: {
+                text: cfg.label,
+                textAlign: 'center',
+                x: endPoint.x,
+                y: (endPoint.y - startPoint.y) / 2 + startPoint.y,
+                fill: 'black'
+              },
+              name: 'edge-label'
+            })
+          }
+          return shape
+        }
+      })
+
+      this.graph = new G6.Graph({
+        container: this.domId,
+        width: document.getElementById(this.domId).clientWidth,
+        height: document.getElementById(this.domId).clientHeight,
+        layout: {
+          type: 'dagre',
+          nodesep: 70,
+          ranksep: 30,
+          controlPoints: true,
+          preventOverlap: true // 防止节点重叠
+        },
+        defaultNode: {
+          type: 'default-node',
+          sortByCombo: true,
+          size: [210, 40]
+        },
+        defaultEdge: {
+          type: 'default-edge' // 在数据中已经指定 type，这里无需再次指定
+        },
+        modes: {
+          default: [
+            'drag-canvas',
+            'zoom-canvas',
+            {
+              type: 'tooltip',
+              formatText (model) {
+                return model.name
+              },
+              offset: 30
+            }
+          ]
+        }
+      })
+
+      this.graph.data(this.chartData)
+      this.graph.render()
+      this.graph.on('node:click', event => {
+        this.handleNodeClick(event)
+      })
+      window.onresize = () => {
+        if (!this.graph || this.graph.get('destroyed')) {
+          return
+        }
+        this.graph.changeSize(document.getElementById(this.domId).clientWidth, document.getElementById(this.domId).clientHeight)
+      }
+    },
+    /**
+     * 节点点击事件
+     * @param target
+     * @param item
+     */
+    handleNodeClick ({ target, item }) {
+      // 处理新增
+      if (target.cfg.name === 'add-btn' || target.cfg.name === 'add-btn-icon') {
+        this.handleAdd(item)
+        return
+      }
+      // 处理删除
+      if (target.cfg.name === 'delete-btn' || target.cfg.name === 'delete-btn-icon') {
+        this.handleDelete(item)
+      }
+    },
+    handleAdd (item) {
+      this.$emit('add', item)
+    },
+    handleDelete (item) {
+      this.$emit('delete', item)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>
@@ -0,0 +1,63 @@
+<template>
+  <j-modal
+    :title="$t('workCenter.processDetail.flowChart')"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    :footer="null"
+    @cancel="close">
+    <a-spin :spinning="confirmLoading">
+      <flow-chart dom-id="flowChart" :chart-data="chartData" is-view-only />
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import FlowChart from './FlowChart.vue'
+import { getFlowNodeList } from '../api/workCenter.js'
+
+export default {
+  name: 'FlowChartModal',
+  components: { FlowChart },
+  data () {
+    return {
+      width: 1000,
+      visible: false,
+      confirmLoading: false,
+      chartData: {},
+      processId: null // 流程id
+    }
+  },
+  methods: {
+    open () {
+      this.visible = true
+      this.initChartData()
+    },
+    close () {
+      this.visible = false
+    },
+    initChartData () {
+      this.confirmLoading = true
+      getFlowNodeList({ modelId: this.processId }).then(res => {
+        if (res.success) {
+          this.chartData = Object.assign({}, res.result || {})
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#flowChart {
+  width: 100%;
+  height: calc(100vh - 200px - 55px - 48px);
+}
+</style>
@@ -71,6 +71,8 @@
        </div>
      </div>
    </div>
+
+    <flow-chart-modal ref="flowChartModal" />
  </div>
 </template>

@@ -82,6 +84,7 @@ import { ACCESS_TOKEN } from '../store/mutation-types.js'
 import { downloadFile, getFileAccessHttpUrl } from '../api/manage.js'
 import { previewPdf } from '../utils/previewPdf.js'
 import { Base64 } from 'js-base64'
+import FlowChartModal from './FlowChartModal.vue'

 // 支持预览的文件后缀
 const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf', 'docx', 'doc']
@@ -90,7 +93,7 @@ const FILE_TYPE_PDF = 'pdf'

 export default {
  name: 'ProcessDetailList',
-  components: { JTable },
+  components: { JTable, FlowChartModal },
  mixins: [JeroListMixin],
  props: {
    // 需要有list属性，用于混入里的接口获取
@@ -131,7 +134,7 @@ export default {
        },
        // 任务受理人
        {
-          dataIndex: 'projectName',
+          dataIndex: 'projectName1',
          title: this.$t('workCenter.processDetail.taskHandler'),
          width: 120
        },
@@ -143,7 +146,7 @@ export default {
        },
        // 完成时间
        {
-          dataIndex: 'nameWorkNo',
+          dataIndex: 'nameWorkNo1',
          title: this.$t('workCenter.processDetail.completionTime'),
          width: 150
        },
@@ -192,6 +195,8 @@ export default {
     * 跳转流程图页面
     */
    viewFlowChart () {
+      this.$refs.flowChartModal.processId = '62507'
+      this.$refs.flowChartModal.open()
    },
    handlePreview (file) {
      if (!file || !file.url) {