审批流程配置

src/views/process/chart/context-menu-tool.vue

@@ -99,7 +99,7 @@ const onAdd = () => {
     )
   }
   setTimeout(() => {
-    ProcessStore.onAutoFix()
+    ProcessStore.onAutoFix(false)
     ProcessStore.graph.stopBatch(GraphHistoryStep.NodeAdd)
   }, 100)
   props.onClose(null, true)
@@ -131,7 +131,7 @@ const onDel = () => {
         }),
       )
       setTimeout(() => {
-        ProcessStore.onAutoFix()
+        ProcessStore.onAutoFix(false)
         ProcessStore.graph.stopBatch(GraphHistoryStep.NodeDel)
       }, 100)
       props.onClose(null, true)

src/views/process/chart/index.vue

@@ -280,10 +280,10 @@ const initChart = async () => {
         },
       ],
     },
-    connecting: {
-      // router: 'orth',
-      highlight: true,
-    },
+    // connecting: {
+    // router: 'orth',
+    // highlight: true,
+    // },
   })
   await ProcessStore.init(state.graph, onAutoFix)
   initPlug()
@@ -320,7 +320,9 @@ const initEdges = () => {
       state.graph.addEdge(handleEdge(v))
     })
     state.isInitEdges = true
-    onHistoryClear()
+    setTimeout(() => {
+      onHistoryClear()
+    }, 100)
   }
 }
 const initWatch = () => {
@@ -414,6 +416,7 @@ const initWatch = () => {
             GraphHistoryStep.EdgeDel,
           ].includes(options.name)
         ) {
+          ProcessStore.autoSave()
           ProcessStore.nodeRelationChange()
         }
         const arr = [options.name]
@@ -512,9 +515,10 @@ const onAddNode = ({ type, e }) => {
   const node = state.graph.createNode(handleNode(getNodeDefault(type)))
   state.dnd.start(node, e)
 }
-const onAutoFix = () => {
-  state.graph.startBatch(GraphHistoryStep.AutoFix)
-  const xLevelsMap = new Map()
+const onAutoFix = (batch = true) => {
+  if (batch) {
+    state.graph.startBatch(GraphHistoryStep.AutoFix)
+  }
   const nodeSep = 20
   // 布局方向
   const dir = 'TB' // LR RL TB BT
@@ -545,30 +549,13 @@ const onAutoFix = () => {
     if (node) {
       const pos = g.node(id)
       node.position(pos.x - node.size().width / 2, pos.y)
-      //  自动布局后针对某些节点高度过大，导致挡住其他节点的二次手动排序
-      if (xLevelsMap.has(pos.x)) {
-        xLevelsMap.set(pos.x, [...xLevelsMap.get(pos.x), { ...pos, id }])
-      } else {
-        xLevelsMap.set(pos.x, [{ ...pos, id }])
-      }
     }
   })
-  // xLevelsMap.forEach((value, key, map) => {
-  //   const arr = value.sort((a, b) => a.y - b.y)
-  //   arr.forEach((n, i) => {
-  //     if (i > 0) {
-  //       const last = arr[i - 1]
-  //       if (n.y < last.y + last.height) {
-  //         n.y = nodeSep + last.y + last.height
-  //         const node = state.graph.getCellById(n.id) as Node
-  //         node.position(n.x, n.y)
-  //       }
-  //     }
-  //   })
-  // })
-  setTimeout(() => {
-    state.graph.stopBatch(GraphHistoryStep.AutoFix)
-  }, 100)
+  if (batch) {
+    setTimeout(() => {
+      state.graph.stopBatch(GraphHistoryStep.AutoFix)
+    }, 100)
+  }
   graphZoom(0)
 }
 watch(

src/views/process/index.vue

@@ -115,104 +115,105 @@ const initData = () => {
     nodes: [],
     edges: [],
   }
-  const data = {
-    graph: {
-      nodes: [
-        {
-          id: '40fc7fd8-9adc-4446-a1bb-a0e8546cbdce',
-          type: 'start',
-          position: {
-            x: 23,
-            y: 35,
-          },
-          data: {
-            id: '40fc7fd8-9adc-4446-a1bb-a0e8546cbdce',
-            title: '发起',
-            edgeSource: null,
-            edgeTarget: ['3f1ebbdd-ba81-47e5-9e28-47106774cabb'],
-            valid: true,
-            type: 'start',
-          },
-        },
-        {
-          id: '937362a7-7122-4b1a-a7b2-02c9a1a155fd',
-          type: 'end',
-          position: {
-            x: 23,
-            y: 477,
-          },
-          data: {
-            id: '937362a7-7122-4b1a-a7b2-02c9a1a155fd',
-            title: '结束',
-            edgeSource: ['0bf28835-8eb2-4596-bab4-ec5bb2314390'],
-            edgeTarget: null,
-            valid: true,
-            type: 'end',
-          },
-        },
-        {
-          id: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
-          type: 'approval',
-          position: {
-            x: -200,
-            y: 234,
-          },
-          data: {
-            id: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
-            title: '审批节点',
-            edgeSource: ['40fc7fd8-9adc-4446-a1bb-a0e8546cbdce'],
-            edgeTarget: ['0bf28835-8eb2-4596-bab4-ec5bb2314390'],
-            valid: true,
-            type: 'approval',
-            name: '55555',
-            linkAccount: 'role',
-            roles: ['1968135147337920512'],
-          },
-        },
-        {
-          id: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
-          type: 'approval',
-          position: {
-            x: 170,
-            y: 270,
-          },
-          data: {
-            id: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
-            title: '审批节点',
-            edgeSource: ['3f1ebbdd-ba81-47e5-9e28-47106774cabb'],
-            edgeTarget: ['937362a7-7122-4b1a-a7b2-02c9a1a155fd'],
-            valid: true,
-            type: 'approval',
-            name: 'kkfkkfkk',
-            linkAccount: 'account',
-            accounts: ['0', '1950731839749042176', '1977563023736336384'],
-          },
-        },
-      ],
-      edges: [
-        {
-          id: 'ab1c1778-94d8-450c-b823-dd169a434fd2',
-          target: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
-          source: '40fc7fd8-9adc-4446-a1bb-a0e8546cbdce',
-        },
-        {
-          id: 'c766ffc2-fc71-4739-ba87-054fa164adcf',
-          target: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
-          source: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
-        },
-        {
-          id: '09fef45f-f143-48a8-993f-6592ec313598',
-          target: '937362a7-7122-4b1a-a7b2-02c9a1a155fd',
-          source: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
-        },
-      ],
-      viewport: {
-        zoom: 1,
-        x: 423,
-        y: 129,
-      },
-    },
-  }
+  const data = null
+  //   {
+  //   graph: {
+  //     nodes: [
+  //       {
+  //         id: '40fc7fd8-9adc-4446-a1bb-a0e8546cbdce',
+  //         type: 'start',
+  //         position: {
+  //           x: 23,
+  //           y: 35,
+  //         },
+  //         data: {
+  //           id: '40fc7fd8-9adc-4446-a1bb-a0e8546cbdce',
+  //           title: '发起',
+  //           edgeSource: null,
+  //           edgeTarget: ['3f1ebbdd-ba81-47e5-9e28-47106774cabb'],
+  //           valid: true,
+  //           type: 'start',
+  //         },
+  //       },
+  //       {
+  //         id: '937362a7-7122-4b1a-a7b2-02c9a1a155fd',
+  //         type: 'end',
+  //         position: {
+  //           x: 23,
+  //           y: 477,
+  //         },
+  //         data: {
+  //           id: '937362a7-7122-4b1a-a7b2-02c9a1a155fd',
+  //           title: '结束',
+  //           edgeSource: ['0bf28835-8eb2-4596-bab4-ec5bb2314390'],
+  //           edgeTarget: null,
+  //           valid: true,
+  //           type: 'end',
+  //         },
+  //       },
+  //       {
+  //         id: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
+  //         type: 'approval',
+  //         position: {
+  //           x: -200,
+  //           y: 234,
+  //         },
+  //         data: {
+  //           id: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
+  //           title: '审批节点',
+  //           edgeSource: ['40fc7fd8-9adc-4446-a1bb-a0e8546cbdce'],
+  //           edgeTarget: ['0bf28835-8eb2-4596-bab4-ec5bb2314390'],
+  //           valid: true,
+  //           type: 'approval',
+  //           name: '55555',
+  //           linkAccount: 'role',
+  //           roles: ['1968135147337920512'],
+  //         },
+  //       },
+  //       {
+  //         id: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
+  //         type: 'approval',
+  //         position: {
+  //           x: 170,
+  //           y: 270,
+  //         },
+  //         data: {
+  //           id: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
+  //           title: '审批节点',
+  //           edgeSource: ['3f1ebbdd-ba81-47e5-9e28-47106774cabb'],
+  //           edgeTarget: ['937362a7-7122-4b1a-a7b2-02c9a1a155fd'],
+  //           valid: true,
+  //           type: 'approval',
+  //           name: 'kkfkkfkk',
+  //           linkAccount: 'account',
+  //           accounts: ['0', '1950731839749042176', '1977563023736336384'],
+  //         },
+  //       },
+  //     ],
+  //     edges: [
+  //       {
+  //         id: 'ab1c1778-94d8-450c-b823-dd169a434fd2',
+  //         target: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
+  //         source: '40fc7fd8-9adc-4446-a1bb-a0e8546cbdce',
+  //       },
+  //       {
+  //         id: 'c766ffc2-fc71-4739-ba87-054fa164adcf',
+  //         target: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
+  //         source: '3f1ebbdd-ba81-47e5-9e28-47106774cabb',
+  //       },
+  //       {
+  //         id: '09fef45f-f143-48a8-993f-6592ec313598',
+  //         target: '937362a7-7122-4b1a-a7b2-02c9a1a155fd',
+  //         source: '0bf28835-8eb2-4596-bab4-ec5bb2314390',
+  //       },
+  //     ],
+  //     viewport: {
+  //       zoom: 1,
+  //       x: 423,
+  //       y: 129,
+  //     },
+  //   },
+  // }
   if (data?.graph?.viewport) {
     state.workflowData = {
       viewport: data.graph.viewport,

src/views/process/instance/approval/panel/index.vue

@@ -4,36 +4,36 @@
       <CzrFormColumn
         label="节点名称"
         :span="24"
-        v-model:param="state.nodeData.name"
+        v-model:param="state.nodeDataTemp.name"
       />
       <CzrFormColumn
         required
         label="关联账号"
         :span="24"
-        v-model:param="state.nodeData.linkAccount"
+        v-model:param="state.nodeDataTemp.linkAccount"
         link="radio"
         :options="[
           { label: '按角色选择', value: 'role' },
           { label: '按账号选择', value: 'account' },
         ]"
       />
-      <template v-if="state.nodeData.linkAccount === 'role'">
+      <template v-if="state.nodeDataTemp.linkAccount === 'role'">
         <CzrFormColumn
           required
           label="角色"
           :span="24"
-          v-model:param="state.nodeData.roles"
+          v-model:param="state.nodeDataTemp.roles"
           link="select"
           :options="state.roleOptions"
           :multiple="true"
         />
       </template>
-      <template v-else-if="state.nodeData.linkAccount === 'account'">
+      <template v-else-if="state.nodeDataTemp.linkAccount === 'account'">
         <CzrFormColumn
           required
           label="账号"
           :span="24"
-          v-model:param="state.nodeData.accounts"
+          v-model:param="state.nodeDataTemp.accounts"
           link="select"
           :options="state.accountOptions"
           :multiple="true"
@@ -67,6 +67,7 @@ const props = defineProps({
 const { proxy }: any = getCurrentInstance()
 const state: any = reactive({
   nodeData: null,
+  nodeDataTemp: null,
   vars: {
     show: false,
     transfer: {},
@@ -86,6 +87,7 @@ watch(
   { immediate: true },
 )
 const onSubmit = () => {
+  Object.assign(state.nodeData, state.nodeDataTemp)
   ref_form.value
     .submit()
     .then(() => {
@@ -129,7 +131,7 @@ const onDel = () => {
         }),
       )
       setTimeout(() => {
-        ProcessStore.onAutoFix()
+        ProcessStore.onAutoFix(false)
         ProcessStore.graph.stopBatch(GraphHistoryStep.NodeDel)
       }, 100)
       ProcessStore.nodePanelClose()