节点参数

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

@@ -19,9 +19,9 @@
         </div>
       </template>
       <div class="node-add">
-        <div class="node-add-item __hover" @click="onAddNode('test')">测试节点</div>
-        <div class="node-add-item __hover" @click="onAddNode('root')">根节点</div>
-        <div class="node-add-item __hover" @click="onAddNode('if-else')">条件分支</div>
+        <div class="node-add-item __hover" @click="onAddNode(NodeType.Test)">{{ NodeTypeTitle.Test }}</div>
+        <div class="node-add-item __hover" @click="onAddNode(NodeType.Answer)">{{ NodeTypeTitle.Answer }}</div>
+        <div class="node-add-item __hover" @click="onAddNode(NodeType.IfElse)">{{ NodeTypeTitle.IfElse }}</div>
       </div>
     </ElPopover>
   </template>
@@ -31,7 +31,7 @@
 import {getCurrentInstance, inject, reactive, ref} from "vue";
 import { ElPopover, ElTooltip } from 'element-plus';
 import {getNodeDefault} from "@/views/workflow/config";
-import {WorkflowFunc} from "@/views/workflow/types";
+import {NodeType, NodeTypeTitle, WorkflowFunc} from "@/views/workflow/types";
 import {handleEdge, handleNode} from "@/views/workflow/handle";
 
 const emits = defineEmits([])

src/views/workflow/config.ts

@@ -1,6 +1,7 @@
 import { v4 } from "uuid";
-import {NodeDataStruct, NodePortStruct, NodeStruct} from "@/views/workflow/types";
+import {NodeDataStruct, NodePortStruct, NodeStruct, NodeType} from "@/views/workflow/types";
 import rootNodeDefault from "@/views/workflow/instance/root/default";
+import answerNodeDefault from "@/views/workflow/instance/answer/default";
 
 export const lineStyle = {
   line: {
@@ -14,40 +15,46 @@ export const portStyle = {
     fo: {
       width: 12,
       height: 12,
-      x: -6,
-      y: -6,
+      x: -9,
+      y: -9,
       magnet: true,
     },
   },
 }
 
 export const nodeDefault = {
-  test: () => (<NodeStruct>{
+  [NodeType.Test]: () => (<NodeStruct>{
     x: 0,
     y: 0,
     data: <NodeDataStruct>{
       id: v4(),
       title: '测试节点',
-      type: 'test',
     }
   }),
-  root: () => (<NodeStruct>{
+  [NodeType.Root]: () => (<NodeStruct>{
     x: 0,
     y: 0,
     data: <NodeDataStruct>{
       id: v4(),
       title: '开始',
-      type: 'root',
       ...rootNodeDefault.defaultValue,
     }
   }),
-  'if-else': () => (<NodeStruct>{
+  [NodeType.Answer]: () => (<NodeStruct>{
+    x: 0,
+    y: 0,
+    data: <NodeDataStruct>{
+      id: v4(),
+      title: '直接回复',
+      ...answerNodeDefault.defaultValue,
+    }
+  }),
+  [NodeType.IfElse]: () => (<NodeStruct>{
     x: 0,
     y: 0,
     data: <NodeDataStruct>{
       id: v4(),
       title: '条件分支',
-      type: 'if-else',
       ports: <NodePortStruct[]>[
         {
           id: v4(),
@@ -59,10 +66,11 @@ export const nodeDefault = {
         },
       ],
     }
-  })
+  }),
 }
-export const getNodeDefault = (type) => {
+export const getNodeDefault = (type: NodeType) => {
   const node = nodeDefault[type]()
   node.id = node.data.id
+  node.data.type = type
   return node
 }

src/views/workflow/handle.ts

@@ -4,8 +4,8 @@ import {lineStyle, portStyle} from "@/views/workflow/config";
 import { v4 } from "uuid";
 
 const systemVars = [
-  {key: 'sys.query', type: 'String'},
-  {key: 'sys.user_id', type: 'String'},
+  {label: '查询内容', key: 'sys.query', type: 'String'},
+  {label: '用户ID', key: 'sys.user_id', type: 'String'},
 ]
 
 export const handleNode = (no, graph) => {
@@ -68,7 +68,7 @@ export const handleNode = (no, graph) => {
         }
       })
     })
-  } else {
+  } else if (node.data.type !== 'answer') {
     node.ports.items.push({
       id: `${node.id}_end`,
       group: 'end',

src/views/workflow/index.vue

@@ -16,6 +16,7 @@ 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([])
@@ -39,7 +40,8 @@ provide('workflowFunc', <WorkflowFunc>{
       const node = state.graph.getCellById(nodeId)
       node.portProp(portId, ['args', 'dy'], dom.offsetTop + 17)
     }
-  }
+  },
+  getInVars: (node) => getInVars(node, state.graph)
 })
 
 const getJsonData = () => {
@@ -72,7 +74,7 @@ const getJsonData = () => {
   console.log(res)
 }
 const initData = () => {
-  state.workflowData = data1
+  state.workflowData = data2
 }
 onMounted(() => {
   initData()

src/views/workflow/instance/answer/default.ts

@@ -0,0 +1,8 @@
+const nodeDefault = {
+  defaultValue: {
+    inVars: [],
+    outVars: [],
+  }
+}
+
+export default nodeDefault

src/views/workflow/instance/answer/funcs.ts

@@ -0,0 +1,3 @@
+export const getInVars = (node, graph) => {
+
+}

src/views/workflow/instance/answer/node/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="node-root">
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, inject, onMounted, reactive, ref} from "vue";
+
+const emits = defineEmits([])
+const props = defineProps({
+  node: <any>{}
+})
+const {proxy}: any = getCurrentInstance()
+const state: any = reactive({
+  nodeData: {}
+})
+onMounted(() => {
+  state.nodeData = props.node.data
+})
+</script>
+
+<style lang="scss" scoped>
+.node-root {
+}
+</style>

src/views/workflow/instance/answer/panel/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="root-panel" v-if="state.nodeData">
+    <div class="flex justify-between items-center mb-2">
+      <div class="text-sm">输入字段</div>
+      <SvgIcon name="czr_add" size="12" class="__hover" @click="onAddVars"/>
+    </div>
+    <div class="vars">
+      <template v-for="(item, index) in state.nodeData.outVars">
+        <div class="item">
+          <varsItem
+            :item="item"
+            :edit="true"
+            :del="true"
+            @onEdit="onEditVars(item, index)"
+            @onDel="onDelVars(item, index)"
+          />
+        </div>
+      </template>
+    </div>
+    <div class="w-full h-[1px] bg-[#1018281f] my-2"/>
+    <div class="vars">
+      <template v-for="item in state.nodeData.sysVars">
+        <div class="item">
+          <varsItem :item="item"/>
+        </div>
+      </template>
+    </div>
+  </div>
+  <varsDetail v-model:show="state.vars.show" :transfer="state.vars.transfer" @refresh="val => setVars(val)"/>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref, watch} from "vue";
+import varsItem from "@/views/workflow/instance/component/vars/vars-item.vue";
+import varsDetail from "@/views/workflow/instance/component/vars/vars-detail.vue";
+
+const emits = defineEmits([])
+const props = defineProps({
+  node: <any>{}
+})
+const {proxy}: any = getCurrentInstance()
+const state: any = reactive({
+  nodeData: null,
+  vars: {
+    show: false,
+    transfer: {}
+  }
+})
+watch(() => props.node, (n) => {
+  if (n) {
+    state.nodeData = n.data
+  }
+}, {immediate: true})
+const onAddVars = () => {
+  state.vars.transfer = {
+    mode: 'add'
+  }
+  state.vars.show = true
+}
+const onEditVars = (row, index) => {
+  state.vars.transfer = {
+    mode: 'edit',
+    row: JSON.parse(JSON.stringify(row)),
+    index: index,
+  }
+  state.vars.show = true
+}
+const onDelVars = (row, index) => {
+  state.nodeData.outVars.splice(index, 1)
+}
+const setVars = (val) => {
+  if (state.vars.transfer.mode === 'add') {
+    state.nodeData.outVars.push(val)
+  } else {
+    state.nodeData.outVars[state.vars.transfer.index] = val
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.root-panel {
+  .vars {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    .item {
+      padding: 6px 10px;
+      border: 1px solid rgb(234 236 240);
+      border-radius: 8px;
+    }
+  }
+}
+</style>

src/views/workflow/instance/root/default.ts

@@ -1,6 +1,6 @@
 const nodeDefault = {
   defaultValue: {
-    inVars: []
+    outVars: []
   }
 }
 

src/views/workflow/instance/root/funcs.ts

@@ -0,0 +1,3 @@
+export const getInVars = (node, graph) => {
+
+}

src/views/workflow/instance/root/panel/index.vue

@@ -5,7 +5,7 @@
       <SvgIcon name="czr_add" size="12" class="__hover" @click="onAddVars"/>
     </div>
     <div class="vars">
-      <template v-for="(item, index) in state.nodeData.inVars">
+      <template v-for="(item, index) in state.nodeData.outVars">
         <div class="item">
           <varsItem
             :item="item"
@@ -66,13 +66,13 @@ const onEditVars = (row, index) => {
   state.vars.show = true
 }
 const onDelVars = (row, index) => {
-  state.nodeData.inVars.splice(index, 1)
+  state.nodeData.outVars.splice(index, 1)
 }
 const setVars = (val) => {
   if (state.vars.transfer.mode === 'add') {
-    state.nodeData.inVars.push(val)
+    state.nodeData.outVars.push(val)
   } else {
-    state.nodeData.inVars[state.vars.transfer.index] = val
+    state.nodeData.outVars[state.vars.transfer.index] = val
   }
 }
 </script>

src/views/workflow/mockJson.ts

@@ -8,7 +8,7 @@ export const data1 = {
         "id": "3ba412bb-3772-4f61-85de-095f4017858c",
         "title": "开始",
         "type": "root",
-        "inVars": [
+        "outVars": [
           {
             "label": "参数1",
             "key": "key1",
@@ -235,6 +235,30 @@ export const data1 = {
   ]
 }
 export const data2 = {
-  "nodes": [],
+  "nodes": [
+    {
+      "id": "3ba412bb-3772-4f61-85de-095f4017858c",
+      "x": -370,
+      "y": -120,
+      "data": {
+        "id": "3ba412bb-3772-4f61-85de-095f4017858c",
+        "title": "开始",
+        "type": "root",
+        "outVars": [
+          {
+            "label": "参数1",
+            "key": "key1",
+            "type": "String",
+            "length": "10"
+          },
+          {
+            "label": "参数2",
+            "key": "key2",
+            "type": "Number"
+          }
+        ],
+      }
+    }
+  ],
   "edges": []
 }

src/views/workflow/types.ts

@@ -1,6 +1,7 @@
 export type WorkflowFunc = {
   nodeClick: (node: any) => void
   layoutPort: (nodeId: string, portId: string) => void
+  getInVars: (node: any) => void
 }
 
 export type NodeStruct = {
@@ -13,7 +14,7 @@ export type NodeStruct = {
 export type NodeDataStruct = {
   id: string
   title: string
-  type: 'test' | 'root' | 'if-else'
+  type?: 'test' | 'root' | 'answer' | 'if-else'
   ports?: NodePortStruct[]
   edgeSource?: string
 }
@@ -21,4 +22,18 @@ export type NodeDataStruct = {
 export type NodePortStruct = {
   id: string
   data: any
+}
+
+export enum NodeType {
+  Test = 'test',
+  Root = 'root',
+  Answer = 'answer',
+  IfElse = 'if-else',
+}
+
+export enum NodeTypeTitle {
+  Test = '测试节点',
+  Root = '开始',
+  Answer = '直接回复',
+  IfElse = '条件分支',
 }