From 2df34506a9b5c2995a0d90bbde4b7ec5d5a0bcca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Sun, 8 Oct 2023 18:03:17 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E7=BC=96=E8=BE=91=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workCenter/processConfig/EditFlowNode.vue | 447 ++++++++++++++++++
 .../processConfig/ProcessConfig.vue           |   6 +
 2 files changed, 453 insertions(+)
 create mode 100644 src/views/workCenter/processConfig/EditFlowNode.vue

diff --git a/src/views/workCenter/processConfig/EditFlowNode.vue b/src/views/workCenter/processConfig/EditFlowNode.vue
new file mode 100644
index 00000000..46c2a5d1
--- /dev/null
+++ b/src/views/workCenter/processConfig/EditFlowNode.vue
@@ -0,0 +1,447 @@
+<template>
+  <internal-detail-page :title="$route.meta.title" :content-padding="0">
+    <div class="detail-page-scroll-content">
+      <!--流程图dom-->
+      <div id="flowChart"></div>
+    </div>
+    <div class="detail-page-bottom-operate-box">
+      <!--取消-->
+      <a-button type="primary" :loading="loading" ghost @click="handleCancel">{{ $t('cancel') }}</a-button>
+      <!--保存-->
+      <a-button type="primary" :loading="loading" @click="handleSubmit">{{ $t('preservation') }}</a-button>
+    </div>
+  </internal-detail-page>
+</template>
+
+<script>
+import InternalDetailPage from '../../../components/InternalDetailPage.vue'
+import G6 from '@antv/g6'
+
+const ApiData = {
+  nodes: [
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_jLcZEGDP'
+    },
+    {
+      isCanDeleted: 1,
+      name: '自定义审批节点',
+      isApprovalNode: 1,
+      id: 'Activity_i0BgnsJS'
+    },
+    {
+      isCanDeleted: 0,
+      name: '填写基本信息，在线编辑，分发其他起草人',
+      isApprovalNode: 0,
+      id: 'Activity_0v98tow'
+    },
+    {
+      isCanDeleted: 0,
+      name: '主起草人汇总',
+      isApprovalNode: 0,
+      id: 'Activity_1dz3u0m'
+    },
+    {
+      isCanDeleted: 0,
+      name: '标准化审批',
+      isApprovalNode: 1,
+      id: 'Activity_0m576ex'
+    },
+    {
+      isCanDeleted: 0,
+      name: '其他起草人线下填写，上传',
+      isApprovalNode: 0,
+      id: 'Activity_1d2la4l'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_0vz4kbb'
+    },
+    {
+      isCanDeleted: 0,
+      name: '评分人评分',
+      isApprovalNode: 0,
+      id: 'Activity_1qhpnpa'
+    },
+    {
+      isCanDeleted: 0,
+      name: '标准化确认是否开启征求意见',
+      isApprovalNode: 1,
+      id: 'Activity_1siuksf'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_04sf5vu'
+    },
+    {
+      isCanDeleted: 0,
+      name: '主起草人汇总',
+      isApprovalNode: 0,
+      id: 'Activity_1hb9aun'
+    },
+    {
+      isCanDeleted: 0,
+      name: '其它起草人校对',
+      isApprovalNode: 1,
+      id: 'Activity_1seways'
+    },
+    {
+      isCanDeleted: 0,
+      name: '主管审批',
+      isApprovalNode: 1,
+      id: 'Activity_1l028rz'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_0a6pmod'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_07iwvx9'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_18kluhj'
+    },
+    {
+      isCanDeleted: 0,
+      name: '主管部门的领导会签',
+      isApprovalNode: 0,
+      id: 'Activity_05pybsc'
+    },
+    {
+      isCanDeleted: 0,
+      name: '标准化审批',
+      isApprovalNode: 1,
+      id: 'Activity_0uxua0b'
+    },
+    {
+      isCanDeleted: 0,
+      name: '总工程师批准',
+      isApprovalNode: 0,
+      id: 'Activity_1yr56ac'
+    },
+    {
+      isCanDeleted: 0,
+      name: '主起草人发布',
+      isApprovalNode: 0,
+      id: 'Activity_0n0h60s'
+    },
+    {
+      isCanDeleted: 0,
+      name: '主起草人上传会议纪要和参会人员',
+      isApprovalNode: 0,
+      id: 'Activity_11uuyg0'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Activity_0dbh708'
+    },
+    {
+      isCanDeleted: 0,
+      name: '责任人填写征求意见',
+      isApprovalNode: 0,
+      id: 'Activity_04m430n'
+    },
+    {
+      isCanDeleted: 0,
+      name: '部门联络人分发责任人',
+      isApprovalNode: 0,
+      id: 'Activity_1ns6olf'
+    },
+    {
+      isCanDeleted: 0,
+      name: '部门联络人汇总数据',
+      isApprovalNode: 0,
+      id: 'Activity_1riqzkp'
+    },
+    {
+      isCanDeleted: 0,
+      name: '责任人的主管审批',
+      isApprovalNode: 1,
+      id: 'Activity_1ralk8e'
+    },
+    {
+      isCanDeleted: 0,
+      name: '',
+      isApprovalNode: 0,
+      id: 'Gateway_0fczaih'
+    }
+  ],
+  edges: [
+    {
+      source: 'Gateway_jLcZEGDP',
+      target: 'Activity_1qhpnpa'
+    },
+    {
+      source: 'Activity_i0BgnsJS',
+      target: 'Gateway_jLcZEGDP'
+    },
+    {
+      source: 'StartEvent_1',
+      target: 'Activity_0v98tow'
+    },
+    {
+      source: 'Activity_0v98tow',
+      target: 'Activity_1d2la4l'
+    },
+    {
+      source: 'Activity_1d2la4l',
+      target: 'Activity_1dz3u0m'
+    },
+    {
+      source: 'Activity_1dz3u0m',
+      target: 'Activity_0m576ex'
+    },
+    {
+      source: 'Activity_0m576ex',
+      target: 'Gateway_0vz4kbb'
+    },
+    {
+      source: 'Gateway_0vz4kbb',
+      target: 'Activity_i0BgnsJS'
+    },
+    {
+      source: 'Activity_1qhpnpa',
+      target: 'Activity_1siuksf'
+    },
+    {
+      source: 'Activity_1siuksf',
+      target: 'Gateway_04sf5vu'
+    },
+    {
+      source: 'Gateway_04sf5vu',
+      target: 'Activity_11uuyg0'
+    },
+    {
+      source: 'Activity_1hb9aun',
+      target: 'Activity_1siuksf'
+    },
+    {
+      source: 'Activity_11uuyg0',
+      target: 'Activity_1seways'
+    },
+    {
+      source: 'Gateway_0a6pmod',
+      target: 'Activity_1l028rz'
+    },
+    {
+      source: 'Activity_1seways',
+      target: 'Gateway_0a6pmod'
+    },
+    {
+      source: 'Activity_1l028rz',
+      target: 'Gateway_07iwvx9'
+    },
+    {
+      source: 'Gateway_07iwvx9',
+      target: 'Activity_0uxua0b'
+    },
+    {
+      source: 'Activity_0uxua0b',
+      target: 'Gateway_18kluhj'
+    },
+    {
+      source: 'Gateway_18kluhj',
+      target: 'Activity_05pybsc'
+    },
+    {
+      source: 'Activity_05pybsc',
+      target: 'Activity_1yr56ac'
+    },
+    {
+      source: 'Activity_1yr56ac',
+      target: 'Activity_0n0h60s'
+    },
+    {
+      source: 'Activity_0n0h60s',
+      target: 'Event_0ke21ds'
+    },
+    {
+      source: 'Gateway_04sf5vu',
+      target: 'Activity_0dbh708'
+    },
+    {
+      source: 'Activity_0dbh708',
+      target: 'Activity_1hb9aun'
+    },
+    {
+      source: 'Activity_1ns6olf',
+      target: 'Activity_04m430n'
+    },
+    {
+      source: 'Activity_04m430n',
+      target: 'Activity_1riqzkp'
+    },
+    {
+      source: 'Activity_1riqzkp',
+      target: 'Activity_1ralk8e'
+    },
+    {
+      source: 'Activity_1ralk8e',
+      target: 'Gateway_0fczaih'
+    },
+    {
+      source: 'Gateway_0fczaih',
+      target: 'Event_1b5p26u'
+    },
+    {
+      source: 'Event_1noqwjv',
+      target: 'Activity_1ns6olf'
+    }
+  ]
+}
+
+export default {
+  name: 'EditFlowNode',
+  components: { InternalDetailPage },
+  data () {
+    return {
+      loading: false,
+      chartData: {},
+      graph: null
+    }
+  },
+  mounted () {
+    this.initProcessNode()
+  },
+  methods: {
+    /**
+     * 获取流程节点信息
+     */
+    initProcessNode () {
+      this.chartData = ApiData
+      this.$nextTick(() => {
+        this.initFlowChart()
+      })
+    },
+    /**
+     * 初始化流程图
+     */
+    initFlowChart () {
+      // 自定义节点
+      G6.registerNode('sql', {
+        drawShape (cfg, group) {
+          const rect = group.addShape('rect', {
+            attrs: {
+              x: -75,
+              y: -25,
+              width: 150,
+              height: 50,
+              radius: 10,
+              stroke: '#5B8FF9',
+              fill: '#C6E5FF',
+              lineWidth: 3
+            },
+            name: 'rect-shape'
+          })
+          if (cfg.name) {
+            group.addShape('text', {
+              attrs: {
+                text: cfg.name,
+                x: 0,
+                y: 0,
+                fill: '#00287E',
+                fontSize: 14,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                fontWeight: 'bold'
+              },
+              name: 'text-shape'
+            })
+          }
+          return rect
+        }
+      }, 'single-node')
+
+      this.graph = new G6.Graph({
+        container: 'flowChart',
+        width: document.getElementById('flowChart').clientWidth,
+        height: document.getElementById('flowChart').clientHeight,
+        layout: {
+          type: 'dagre',
+          // rankdir: 'LR',
+          nodesep: 70,
+          ranksep: 30,
+          controlPoints: true
+        },
+        defaultNode: {
+          type: 'sql'
+        },
+        defaultEdge: {
+          type: 'polyline',
+          style: {
+            radius: 20,
+            offset: 45,
+            endArrow: {
+              path: G6.Arrow.triangle(),
+              fill: '#C2C8D5'
+            },
+            lineWidth: 2,
+            stroke: '#C2C8D5'
+          }
+        },
+        nodeStateStyles: {
+          selected: {
+            stroke: '#d9d9d9',
+            fill: '#5394ef'
+          }
+        },
+        modes: {
+          default: [
+            'drag-canvas',
+            'zoom-canvas',
+            'click-select',
+            {
+              type: 'tooltip',
+              formatText (model) {
+                return model.name
+              },
+              offset: 30
+            }
+          ]
+        }
+      })
+
+      this.graph.data(this.chartData)
+      this.graph.render()
+
+      window.onresize = () => {
+        if (!this.graph || this.graph.get('destroyed')) {
+          return
+        }
+        this.graph.changeSize(document.getElementById('flowChart').clientWidth, document.getElementById('flowChart').clientHeight)
+      }
+    },
+    handleCancel () {
+      this.$router.go(-1)
+    },
+    handleSubmit () {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+#flowChart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/workCenter/processConfig/ProcessConfig.vue b/src/views/workCenter/processConfig/ProcessConfig.vue
index f65b04e0..f408d047 100644
--- a/src/views/workCenter/processConfig/ProcessConfig.vue
+++ b/src/views/workCenter/processConfig/ProcessConfig.vue
@@ -99,6 +99,12 @@ export default {
     handleEditFlowchart ({ id }) {
       window.open(window._CONFIG.flowchartFixedAddress + id, '_blank')
     },
+    handleEditFlowNode ({ id }) {
+      this.$router.push({
+        path: '/workCenter/EditFlowNode',
+        query: { id }
+      })
+    },
     /**
      * 部署
      * @param id