update 编辑流程节点

src/views/workCenter/processConfig/EditFlowNode.vue

@@ -1,5 +1,5 @@
 <template>
-  <internal-detail-page :title="$route.meta.title" :content-padding="0">
+  <internal-detail-page :title="$route.meta.title" :content-padding="0" :loading="loading">
     <div class="detail-page-scroll-content">
       <!--流程图dom-->
       <div id="flowChart"></div>
@@ -10,305 +10,56 @@
       <!--保存-->
       <a-button type="primary" :loading="loading" @click="handleSubmit">{{ $t('preservation') }}</a-button>
     </div>
+
+    <flow-node-modal ref="modalForm" @ok="modalFormOk" />
   </internal-detail-page>
 </template>
 
 <script>
 import InternalDetailPage from '../../../components/InternalDetailPage.vue'
 import G6 from '@antv/g6'
+import { getFlowNodeList, deleteFlowNode } from '../../../api/workCenter.js'
+import insertCss from 'insert-css'
+import FlowNodeModal from './modules/FlowNodeModal.vue'
+import DeleteIcon from '../../../assets/image/iconDelete.svg'
+import { postAction } from '../../../api/manage.js'
 
-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'
-    }
-  ]
+// 流程图用到的属性
+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: 'EditFlowNode',
-  components: { InternalDetailPage },
+  components: { InternalDetailPage, FlowNodeModal },
   data () {
     return {
       loading: false,
@@ -324,88 +75,220 @@ export default {
      * 获取流程节点信息
      */
     initProcessNode () {
-      this.chartData = ApiData
-      this.$nextTick(() => {
-        this.initFlowChart()
+      this.loading = true
+      this.chartData = {}
+      getFlowNodeList({ modelId: this.$route.query.id }).then(res => {
+        if (res.success) {
+          this.chartData = Object.assign({}, res.result || {})
+          if (!this.graph) {
+            this.$nextTick(() => {
+              this.initFlowChart()
+            })
+          } else {
+            this.graph.destroy()
+            this.graph = null
+            this.$nextTick(() => {
+              this.initFlowChart()
+            })
+          }
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
       })
     },
     /**
      * 初始化流程图
+     *
+     * #86909c
      */
     initFlowChart () {
       // 自定义节点
-      G6.registerNode('sql', {
+      G6.registerNode('default-node', {
         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
+              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: 'rect-shape'
+            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: cfg.name,
-                x: 0,
-                y: 0,
-                fill: '#00287E',
+                text,
+                fill: ChartAttrs.nodeTextColor,
                 fontSize: 14,
                 textAlign: 'center',
                 textBaseline: 'middle',
                 fontWeight: 'bold'
               },
-              name: 'text-shape'
+              name: 'default-node-text'
+            })
+          }
+          // 可以添加，添加虽然在线上，但代码要写在自定义点里，不然获取不到节点id
+          if (cfg.isApprovalNode === 1) {
+            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) {
+            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: 'flowChart',
         width: document.getElementById('flowChart').clientWidth,
         height: document.getElementById('flowChart').clientHeight,
         layout: {
           type: 'dagre',
-          // rankdir: 'LR',
           nodesep: 70,
           ranksep: 30,
-          controlPoints: true
+          controlPoints: true,
+          preventOverlap: true // 防止节点重叠
         },
         defaultNode: {
-          type: 'sql'
+          type: 'default-node',
+          sortByCombo: true,
+          size: [210, 40]
         },
         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'
-          }
+          type: 'default-edge' // 在数据中已经指定 type，这里无需再次指定
         },
         modes: {
           default: [
             'drag-canvas',
             'zoom-canvas',
-            'click-select',
             {
               type: 'tooltip',
               formatText (model) {
@@ -419,7 +302,9 @@ export default {
 
       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
@@ -427,6 +312,37 @@ export default {
         this.graph.changeSize(document.getElementById('flowChart').clientWidth, document.getElementById('flowChart').clientHeight)
       }
     },
+    handleNodeClick ({ target, item }) {
+      if (target.cfg.name === 'add-btn' || target.cfg.name === 'add-btn-icon') {
+        this.handleAdd(item)
+      }
+    },
+    handleAdd (item) {
+      this.$refs.modalForm.title = this.$t('newlyAdded')
+      this.$refs.modalForm.add({
+        modelId: this.$route.query.id,
+        xmlNodeId: item._cfg.id
+      })
+    },
+    handleDelete (item) {
+      this.$confirm({
+        title: this.$t('confirmDeletion'),
+        content: this.$t('areYouSure'),
+        onOk: function () {
+          deleteFlowNode({ xmlNodeId: item._cfg.id }).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.initProcessNode()
+            } else {
+              this.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+    modalFormOk () {
+      this.initProcessNode()
+    },
     handleCancel () {
       this.$router.go(-1)
     },

src/views/workCenter/processConfig/modules/FlowNodeModal.vue

@@ -0,0 +1,92 @@
+<template>
+  <j-modal
+    :title="title"
+    :maskClosable="false"
+    :width="width"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel">
+
+    <a-form :form="form">
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardRegulationLibrary.nodeName')">
+        <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.nodeName')"
+                 @change="event => event.target.value = event.target.value.trim()"
+                 :maxLength="50"
+                 v-decorator="['nodeName', validatorRules.nodeName]" />
+      </a-form-item>
+    </a-form>
+
+  </j-modal>
+</template>
+
+<script>
+import { addFlowNode } from '../../../../api/workCenter.js'
+
+export default {
+  name: 'FlowNodeModal',
+  data () {
+    return {
+      title: this.$t('operation'),
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      validatorRules: {
+        // 节点名称
+        nodeName: {
+          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardRegulationLibrary.nodeName') }],
+          validateTrigger: 'blur'
+        }
+      }
+    }
+  },
+  methods: {
+    add (record) {
+      this.visible = true
+      this.model = Object.assign({}, record)
+    },
+    handleOk () {
+      this.form.validateFields((errors, values) => {
+        if (!errors) {
+          const formData = Object.assign(this.model, values)
+          let submitFunc
+          if (!this.model.id) {
+            submitFunc = addFlowNode
+          }
+          this.confirmLoading = true
+          submitFunc(formData).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.handleCancel()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>