替換store

src/stores/index.ts

@@ -1,2 +1,3 @@
 export * from './modules/dialog-level'
 export * from './modules/menu'
+export * from './modules/workflow'

src/stores/modules/dialog-level.ts

@@ -8,7 +8,7 @@ export const useDialogLevelStore = defineStore('dialogLevel', {
   },
   actions: {
     add(key) {
-      const oldDom = document.body.getElementsByClassName(this.dialogShows[0])?.[0]
+      const oldDom: any = document.body.getElementsByClassName(this.dialogShows[0])?.[0]
       if (oldDom) {
         oldDom.style.display = 'none'
       }
@@ -16,7 +16,7 @@ export const useDialogLevelStore = defineStore('dialogLevel', {
     },
     del(key) {
       this.dialogShows = this.dialogShows.filter(v => v !== key)
-      const newDom = document.body.getElementsByClassName(this.dialogShows[0])?.[0]
+      const newDom: any = document.body.getElementsByClassName(this.dialogShows[0])?.[0]
       if (newDom) {
         newDom.style.display = 'unset'
       }

src/stores/modules/workflow.ts

@@ -0,0 +1,35 @@
+import {defineStore} from "pinia";
+import {getInVars} from "@/views/workflow/instance/funcs";
+
+export const useWorkflowStore = defineStore('workflow', {
+  state: () => ({
+    graph: <any>null,
+    panel: {
+      node: <any>null,
+      show: false
+    }
+  }),
+  getters: {
+  },
+  actions: {
+    init(graph) {
+      this.graph = graph
+    },
+    nodePanel(node) {
+      this.panel.node = node
+      this.panel.show = true
+    },
+    nodePanelClose() {
+      this.panel.node = null
+      this.panel.show = false
+    },
+    layoutPort(nodeId: string, portId: string) {
+      const dom = document.getElementById(portId)
+      if (dom) {
+        const node = this.graph.getCellById(nodeId)
+        node.portProp(portId, ['args', 'dy'], dom.offsetTop + 17)
+      }
+    },
+    // getInVars(node) => getInVars(node, this.graph)
+  },
+})

src/views/workflow/chart/context-menu-tool.tsx

@@ -24,10 +24,9 @@ class ContextMenuTool extends ToolsView.ToolItem {
     document.removeEventListener('mousedown', this.onMouseDown)
 
     if (visible && pos) {
-      const { data, graph }: any = this.options
+      const { data }: any = this.options
       app = createApp(contextMenuTool, {
         data,
-        graph,
         onClose: this.onMouseDown
       })
       // 减去本身元素的宽高
@@ -70,7 +69,6 @@ ContextMenuTool.config({
   tagName: 'div',
   isSVGElement: false,
   data: {},
-  graph: null
 })
 
 export {

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

@@ -6,11 +6,12 @@
 
 <script setup lang="ts">
 import {getCurrentInstance, reactive} from "vue";
+import {useWorkflowStore} from "@/stores";
 
+const WorkflowStore = useWorkflowStore()
 const emits = defineEmits([])
 const props = defineProps({
   data: <any>{},
-  graph: <any>{},
   onClose: <any>{},
 })
 const {proxy}: any = getCurrentInstance()
@@ -18,8 +19,8 @@ const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
 })
 const onDel = () => {
-  props.graph.removeEdge(props.data.id)
-  props.graph.removeNode(props.data.id)
+  WorkflowStore.graph.removeEdge(props.data.id)
+  WorkflowStore.graph.removeNode(props.data.id)
   props.onClose(null, true)
 }
 </script>

src/views/workflow/chart/index.vue

@@ -7,18 +7,18 @@
 </template>
 
 <script setup lang="ts">
-import {createVNode, getCurrentInstance, inject, nextTick, onMounted, provide, reactive, ref, render, watch} from "vue";
-import {Graph, Markup, Shape} from '@antv/x6'
-import {WorkflowFunc} from "@/views/workflow/types";
+import {createVNode, getCurrentInstance, nextTick, onMounted, reactive, ref, render, watch} from "vue";
+import {Graph, Shape} from '@antv/x6'
 import {getNodeDefault, lineStyle} from "@/views/workflow/config";
 import nodeAdd from './node-add.vue'
 import {register} from "@antv/x6-vue-shape";
 import WorkflowNode from "./node-index.vue";
 import {handleEdge, handleNode} from "@/views/workflow/handle";
-import { Snapline } from '@antv/x6-plugin-snapline'
+import {Snapline} from '@antv/x6-plugin-snapline'
 import {ContextMenuTool} from "./context-menu-tool";
+import {useWorkflowStore} from "@/stores/modules/workflow";
+import {NodeType} from "@/views/workflow/types";
 
-const workflowFuncInject = inject('workflowFunc', {} as WorkflowFunc)
 register({
   shape: 'workflow-node',
   component: WorkflowNode,
@@ -53,7 +53,7 @@ Graph.registerPortLayout('end', (portsPositionArgs, elemBBox) => {
 Graph.registerPortLayout('more', (portsPositionArgs, elemBBox) => {
   return portsPositionArgs.map((_, index) => {
     nextTick(() => {
-      workflowFuncInject.layoutPort(_.nodeId, _.portId)
+      WorkflowStore.layoutPort(_.nodeId, _.portId)
       if (edgeTimer) {
         clearTimeout(edgeTimer)
       }
@@ -71,7 +71,8 @@ Graph.registerPortLayout('more', (portsPositionArgs, elemBBox) => {
 })
 Graph.registerNodeTool('contextmenu', ContextMenuTool, true)
 Graph.registerEdgeTool('contextmenu', ContextMenuTool, true)
-const emits = defineEmits(['init'])
+const WorkflowStore = useWorkflowStore()
+const emits = defineEmits([])
 const props = defineProps({
   data: <any>{}
 })
@@ -145,6 +146,7 @@ const initChart = () => {
       }
     }
   })
+  WorkflowStore.init(state.graph)
   initNodes()
   state.graph.zoomToFit({ maxScale: 1 })
   state.graph.centerContent() // 居中显示
@@ -155,15 +157,14 @@ const initChart = () => {
     }),
   )
   initWatch()
-  emits('init', state.graph)
 }
 const initNodes = () => {
   props.data.nodes.forEach(v => {
-    state.graph.addNode(handleNode(v, state.graph))
+    state.graph.addNode(handleNode(v))
   })
   if (props.data.nodes.length === 0) {
-    const node = getNodeDefault('root')
-    state.graph.addNode(handleNode(node, state.graph))
+    const node = getNodeDefault(NodeType.Root)
+    state.graph.addNode(handleNode(node))
   }
 }
 const initEdges = () => {
@@ -173,7 +174,7 @@ const initEdges = () => {
       targetNode.setData({
         edgeSource: v.port || v.source
       }, {deep: false})
-      state.graph.addEdge(handleEdge(v, state.graph))
+      state.graph.addEdge(handleEdge(v))
     })
     state.isInitEdges = true
   }
@@ -182,7 +183,7 @@ const initWatch = () => {
   state.graph.on('node:click', ({ e, x, y, node, view, port }) => {
     setTimeout(() => {
       if (!state.isPort) {
-        workflowFuncInject.nodeClick(node)
+        WorkflowStore.nodePanel(node)
       }
     }, 50)
   })

src/views/workflow/chart/node-add.vue

@@ -31,7 +31,7 @@
 import {getCurrentInstance, inject, reactive, ref} from "vue";
 import { ElPopover, ElTooltip } from 'element-plus';
 import {getNodeDefault} from "@/views/workflow/config";
-import {NodeType, NodeTypeTitle, WorkflowFunc} from "@/views/workflow/types";
+import {NodeType, NodeTypeTitle} from "@/views/workflow/types";
 import {handleEdge, handleNode} from "@/views/workflow/handle";
 
 const emits = defineEmits([])
@@ -76,8 +76,8 @@ const onAddNode = (type) => {
   } else {
     node.data.edgeSource = `${props.node.id}_end`
   }
-  props.graph.addNode(handleNode(node, props.graph))
-  props.graph.addEdge(handleEdge(edge, props.graph))
+  props.graph.addNode(handleNode(node))
+  props.graph.addEdge(handleEdge(edge))
 }
 </script>
 

src/views/workflow/chart/panel-index.vue

@@ -1,16 +1,16 @@
 <template>
   <transition name="slide">
-    <div class="panel" v-if="show">
+    <div class="panel" v-if="WorkflowStore.panel.show">
       <div class="panel-header">
         <h3>{{ nodeDataCpt.title }}</h3>
-        <div class="__hover" @click="$emit('update:show', false)">×</div>
+        <div class="__hover" @click="WorkflowStore.nodePanelClose()">×</div>
       </div>
       <div class="panel-content">
-        <template v-if="nodeDataCpt.type === 'root'">
-          <rootPanel :node="node"/>
+        <template v-if="nodeDataCpt.type === NodeType.Root">
+          <rootPanel :node="WorkflowStore.panel.node"/>
         </template>
-        <template v-if="nodeDataCpt.type === 'if-else'">
-          <ifElsePanel :node="node"/>
+        <template v-if="nodeDataCpt.type === NodeType.IfElse">
+          <ifElsePanel :node="WorkflowStore.panel.node"/>
         </template>
       </div>
     </div>
@@ -21,15 +21,17 @@
 import {computed, getCurrentInstance, reactive, ref} from "vue";
 import rootPanel from '../instance/root/panel/index.vue'
 import ifElsePanel from '../instance/if-else/panel/index.vue'
+import {useWorkflowStore} from "@/stores";
+import {NodeType} from "@/views/workflow/types";
 
+
+const WorkflowStore = useWorkflowStore()
 const emits = defineEmits([])
 const props = defineProps({
-  show: {},
-  node: <any>{},
 })
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({})
-const nodeDataCpt = computed(() => props.node?.data || {})
+const nodeDataCpt = computed(() => WorkflowStore.panel.node?.data || {})
 </script>
 
 <style lang="scss" scoped>

src/views/workflow/handle.ts

@@ -8,7 +8,7 @@ const systemVars = [
   {label: '用户ID', key: 'sys.user_id', type: 'String'},
 ]
 
-export const handleNode = (no, graph) => {
+export const handleNode = (no) => {
   const id = v4()
   if (!no.id) {
     no.id = id
@@ -36,7 +36,6 @@ export const handleNode = (no, graph) => {
         name: 'contextmenu',
         args: {
           data: no,
-          graph,
         }
       }
     ]
@@ -81,7 +80,7 @@ export const handleNode = (no, graph) => {
   return node
 }
 
-export const handleEdge = (ed, graph) => {
+export const handleEdge = (ed) => {
   const id = v4()
   if (!ed.id) {
     ed.id = id
@@ -114,7 +113,6 @@ export const handleEdge = (ed, graph) => {
         name: 'contextmenu',
         args: {
           data: ed,
-          graph,
         }
       }
     ]

src/views/workflow/index.vue

@@ -3,9 +3,9 @@
     <TeleportContainer/>
     <el-button style="position: absolute; top: 0;left: 0; z-index: 2" type="primary" @click="getJsonData">保存配置</el-button>
     <div class="workflow-chart">
-      <workflowChart :data="state.workflowData" ref="ref_workflow" @init="graph => state.graph = graph"/>
+      <workflowChart :data="state.workflowData" ref="ref_workflow"/>
     </div>
-    <workflowPanel v-model:show="state.showPanel" :node="state.currentNode"/>
+    <workflowPanel/>
   </div>
 </template>
 
@@ -15,8 +15,6 @@ import workflowChart from './chart/index.vue'
 import workflowPanel from './chart/panel-index.vue'
 import { getTeleport } from '@antv/x6-vue-shape'
 import {data1, data2} from './mockJson'
-import {WorkflowFunc} from "@/views/workflow/types";
-import {getInVars} from "@/views/workflow/instance/root/funcs";
 const TeleportContainer = getTeleport()
 
 const emits = defineEmits([])
@@ -24,25 +22,8 @@ const props = defineProps({})
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
   workflowData: null,
-  showPanel: false,
-  currentNode: null,
-  graph: null
 })
 const ref_workflow = ref()
-provide('workflowFunc', <WorkflowFunc>{
-  nodeClick: (node) => {
-    state.currentNode = node
-    state.showPanel = true
-  },
-  layoutPort: (nodeId: string, portId: string) => {
-    const dom = document.getElementById(portId)
-    if (dom) {
-      const node = state.graph.getCellById(nodeId)
-      node.portProp(portId, ['args', 'dy'], dom.offsetTop + 17)
-    }
-  },
-  getInVars: (node) => getInVars(node, state.graph)
-})
 
 const getJsonData = () => {
   const data = ref_workflow.value.toJSON()

src/views/workflow/instance/if-else/panel/index.vue

@@ -17,9 +17,9 @@
 <script setup lang="ts">
 import {getCurrentInstance, inject, reactive, ref, watch} from "vue";
 import { v4 } from "uuid";
-import {WorkflowFunc} from "@/views/workflow/types";
+import {useWorkflowStore} from "@/stores";
 
-const workflowFuncInject = inject('workflowFunc', {} as WorkflowFunc)
+const WorkflowStore = useWorkflowStore()
 const emits = defineEmits(['reLayoutPort'])
 const props = defineProps({
   node: <any>{}
@@ -35,7 +35,7 @@ watch(() => props.node, (n) => {
 }, {immediate: true})
 watch(() => state.nodeData, (n) => {
   n.ports.forEach(p => {
-    workflowFuncInject.layoutPort(props.node.id, p.id)
+    WorkflowStore.layoutPort(props.node.id, p.id)
   })
 }, {deep: true})
 const onAddPort = () => {

src/views/workflow/mockJson.ts

@@ -238,8 +238,8 @@ export const data2 = {
   "nodes": [
     {
       "id": "3ba412bb-3772-4f61-85de-095f4017858c",
-      "x": -370,
-      "y": -120,
+      "x": -650,
+      "y": -250,
       "data": {
         "id": "3ba412bb-3772-4f61-85de-095f4017858c",
         "title": "开始",
@@ -257,8 +257,38 @@ export const data2 = {
             "type": "Number"
           }
         ],
+        "sysVars": [
+          {
+            "label": "查询内容",
+            "key": "sys.query",
+            "type": "String"
+          },
+          {
+            "label": "用户ID",
+            "key": "sys.user_id",
+            "type": "String"
+          }
+        ]
+      }
+    },
+    {
+      "id": "081e032b-312e-4ebc-b663-73ce5615a3bf",
+      "x": -310,
+      "y": -250,
+      "data": {
+        "id": "081e032b-312e-4ebc-b663-73ce5615a3bf",
+        "title": "直接回复",
+        "inVars": [],
+        "outVars": [],
+        "type": "answer",
+        "edgeSource": "3ba412bb-3772-4f61-85de-095f4017858c_end"
       }
     }
   ],
-  "edges": []
+  "edges": [
+    {
+      "target": "081e032b-312e-4ebc-b663-73ce5615a3bf",
+      "source": "3ba412bb-3772-4f61-85de-095f4017858c"
+    }
+  ]
 }

src/views/workflow/types.ts

@@ -1,9 +1,3 @@
-export type WorkflowFunc = {
-  nodeClick: (node: any) => void
-  layoutPort: (nodeId: string, portId: string) => void
-  getInVars: (node: any) => void
-}
-
 export type NodeStruct = {
   id: string
   x: number