结构修改，多嵌套一层workflowData，不然无法同步data的值

src/stores/modules/workflow.ts

@@ -37,23 +37,24 @@ export const useWorkflowStore = defineStore('workflow', {
       const pathNodes = this.graph.getPredecessors(node).reverse()
       const options: any = []
       pathNodes.forEach(n => {
+        const wd = n.data.workflowData
         const group = {
-          label: n.data.title,
-          key: n.data.id,
+          label: wd.subTitle || wd.title,
+          key: wd.id,
           options: [
-            ...(n.data.outVars?.map(v => {
-              v.nodeId = n.data.id
-              v.nodeTitle = n.data.title
+            ...(wd.outVars?.map(v => {
+              v.nodeId = wd.id
               return v
             }) || []),
-            ...(n.data.sysVars?.map(v => {
-              v.nodeId = n.data.id
-              v.nodeTitle = n.data.title
+            ...(wd.sysVars?.map(v => {
+              v.nodeId = wd.id
               return v
             }) || []),
           ]
         }
-        options.push(group)
+        if (group.options.length > 0) {
+          options.push(group)
+        }
       })
       return options
     }

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

@@ -44,7 +44,7 @@ const {proxy}: any = getCurrentInstance()
 const state: any = reactive({})
 const onAddNode = (type) => {
   const node = getNodeDefault(type)
-  const sons = props.graph.getSuccessors(props.node, {breadthFirst: true, deep: false, distance: 1}).filter(v => v.data.edgeSource === props.port.id)
+  const sons = props.graph.getSuccessors(props.node, {breadthFirst: true, deep: false, distance: 1}).filter(v => v.data.workflowData.edgeSource === props.port.id)
   const diff = 100
   let X = 0
   let Y = 0

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

@@ -1,6 +1,9 @@
 <template>
   <div class="node" ref="ref_node">
-    <div class="node-title">{{ state.nodeData?.title }}</div>
+    <div class="node-title">
+      {{ state.nodeData?.title }}
+      <div class="node-sub" v-if="state.nodeData?.subTitle">{{ state.nodeData.subTitle }}</div>
+    </div>
     <div class="node-content">
       <template v-if="state.nodeData?.type === 'root'">
         <rootNode :node="state.node"/>
@@ -13,10 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref} from "vue";
+import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref, watch} from "vue";
 import rootNode from '../instance/root/node/index.vue'
 import ifElseNode from '../instance/if-else/node/index.vue'
+import {useWorkflowStore} from "@/stores";
 
+const WorkflowStore = useWorkflowStore()
 const getNode: any = inject('getNode')
 const emits = defineEmits([])
 const props = defineProps({})
@@ -28,7 +33,7 @@ const state: any = reactive({
 const ref_node = ref()
 onMounted(() => {
   state.node = getNode()
-  state.nodeData = state.node.data
+  state.nodeData = state.node.data.workflowData
   nextTick(() => {
     state.node.size(ref_node.value.clientWidth, ref_node.value.clientHeight)
   })
@@ -51,13 +56,19 @@ onMounted(() => {
     cursor: pointer;
   }
   .node-title {
-    height: 50px;
+    min-height: 50px;
     width: 100%;
     display: flex;
-    align-items: center;
+    justify-content: center;
+    flex-direction: column;
     padding: 8px 12px;
     font-size: 14px;
     font-weight: bold;
+    .node-sub {
+      font-size: 12px;
+      font-weight: normal;
+      opacity: 0.65;
+    }
   }
   .node-content {
     padding: 0px 12px;

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

@@ -2,9 +2,20 @@
   <transition name="slide">
     <div class="panel" v-if="WorkflowStore.panel.show">
       <div class="panel-header">
-        <h3>{{ nodeDataCpt.title }}</h3>
+        <h3>{{ state.nodeData.title }}</h3>
         <div class="__hover" @click="WorkflowStore.nodePanelClose()">×</div>
       </div>
+      <div class="panel-sub">
+        <CzrFormColumn
+          :span="24"
+          label-width="0"
+          v-model:param="state.nodeData.subTitle"
+          :transparent="true"
+          placeholder="副标题..."
+          :max-length="20"
+          :clearable="false"
+        />
+      </div>
       <div class="panel-content">
         <template v-if="nodeDataCpt.type === NodeType.Root">
           <rootPanel :node="WorkflowStore.panel.node"/>
@@ -21,21 +32,27 @@
 </template>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, reactive, ref} from "vue";
+import {computed, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
 import rootPanel from '../instance/root/panel/index.vue'
 import answerPanel from '../instance/answer/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({
 })
 const {proxy}: any = getCurrentInstance()
-const state: any = reactive({})
-const nodeDataCpt = computed(() => WorkflowStore.panel.node?.data || {})
+const state: any = reactive({
+  nodeData: {}
+})
+const nodeDataCpt = computed(() => WorkflowStore.panel.node?.data.workflowData || {})
+watch(() => nodeDataCpt.value, (n) => {
+  if (n) {
+    state.nodeData = WorkflowStore.panel.node?.data.workflowData || {}
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -54,12 +71,15 @@ const nodeDataCpt = computed(() => WorkflowStore.panel.node?.data || {})
   flex-direction: column;
   border-radius: 10px 0 0 10px;
   .panel-header {
-    padding: 16px;
-    border-bottom: style.$borderStyle;
+    padding: 16px 16px 0 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+  .panel-sub {
+    border-bottom: style.$borderStyle;
+    padding: 6px;
+  }
   .panel-content {
     padding: 0 16px 16px;
     flex: 1;

src/views/workflow/config.ts

@@ -1,5 +1,5 @@
 import { v4 } from "uuid";
-import {NodeDataStruct, NodePortStruct, NodeStruct, NodeType} from "@/views/workflow/types";
+import {ConditionMode, NodeDataStruct, NodePortStruct, NodeStruct, NodeType} from "@/views/workflow/types";
 import rootNodeDefault from "@/views/workflow/instance/root/default";
 import answerNodeDefault from "@/views/workflow/instance/answer/default";
 
@@ -58,11 +58,12 @@ export const nodeDefault = {
       ports: <NodePortStruct[]>[
         {
           id: v4(),
-          data: {}
+          mode: ConditionMode.And,
+          cases: []
         },
         {
           id: v4(),
-          data: {}
+          isElse: true
         },
       ],
     }

src/views/workflow/handle.ts

@@ -15,8 +15,10 @@ export const handleNode = (no) => {
     x: no.x,
     y: no.y,
     data: {
-      ...no.data,
-      id: no.id
+      workflowData: {
+        ...no.data,
+        id: no.id
+      }
     },
     shape: 'workflow-node',
     portMarkup: [Markup.getForeignObjectMarkup()],
@@ -37,7 +39,7 @@ export const handleNode = (no) => {
       }
     ]
   }
-  if (node.data.type === 'root') {
+  if (node.data.workflowData.type === 'root') {
     node.data.sysVars = [
       ...WorkflowStore.systemVars
     ]
@@ -51,8 +53,8 @@ export const handleNode = (no) => {
       }
     })
   }
-  if (node.data.ports?.length > 0) {
-    node.data.ports.forEach((p, pI) => {
+  if (node.data.workflowData.ports?.length > 0) {
+    node.data.workflowData.ports.forEach((p, pI) => {
       node.ports.items.push({
         id: p.id,
         group: 'more',
@@ -64,7 +66,7 @@ export const handleNode = (no) => {
         }
       })
     })
-  } else if (node.data.type !== 'answer') {
+  } else if (node.data.workflowData.type !== 'answer') {
     node.ports.items.push({
       id: `${node.id}_end`,
       group: 'end',
@@ -93,8 +95,10 @@ export const handleEdge = (ed) => {
       port: `${ed.target}_start`
     },
     data: {
-      ...ed.data,
-      id: ed.id
+      workflowData: {
+        ...ed.data,
+        id: ed.id
+      }
     },
     shape: 'edge',
     attrs: lineStyle,

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

@@ -15,7 +15,7 @@ const state: any = reactive({
   nodeData: {}
 })
 onMounted(() => {
-  state.nodeData = props.node.data
+  state.nodeData = props.node.data.workflowData
 })
 </script>
 

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

@@ -27,7 +27,7 @@ const state: any = reactive({
 })
 watch(() => props.node, (n) => {
   if (n) {
-    state.nodeData = n.data
+    state.nodeData = n.data.workflowData
   }
 }, {immediate: true})
 </script>

src/views/workflow/instance/component/vars/vars-detail.vue

@@ -78,7 +78,6 @@ const ref_form = ref()
 watch(() => props.show, (n) => {
   if (n) {
     state.form = props.transfer.row || {type: 'String'}
-    console.log(state.form)
     nextTick(() => {
       ref_form.value.reset()
     })

src/views/workflow/instance/component/vars/vars-value.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vars-value" v-if="vars">
-    {{vars.nodeTitle}} / <span class="text-[#155aef]">{{vars.key}}</span> · <span class="opacity-65">{{vars.label}} {{vars.type}}</span>
+    {{nodeDataCpt.subTitle || nodeDataCpt.title}} / <span class="text-[#155aef]">{{vars.key}}</span> · <span class="opacity-65">{{vars.label}} {{vars.type}}</span>
   </div>
   <div v-else  class="opacity-65">
     {x}请选择变量
@@ -8,14 +8,20 @@
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive, ref} from "vue";
+import {computed, getCurrentInstance, reactive, ref} from "vue";
+import {useWorkflowStore} from "@/stores";
 
+const WorkflowStore = useWorkflowStore()
 const emits = defineEmits([])
 const props = defineProps({
   vars: <any>{}
 })
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({})
+const nodeDataCpt = computed(() => {
+  const node = WorkflowStore.graph.getCellById(props.vars?.nodeId)
+  return node.data.workflowData
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -37,7 +37,7 @@ const state: any = reactive({
   nodeData: {}
 })
 onMounted(() => {
-  state.nodeData = props.node.data
+  state.nodeData = props.node.data.workflowData
 })
 </script>
 

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

@@ -13,7 +13,7 @@
               <CzrButton type="add" title="添加条件"/>
             </varsPopover>
           </div>
-          <div class="flex mt-2" v-if="port.cases.length > 0">
+          <div class="flex mt-2" v-if="port.cases?.length > 0">
             <conditionIndex v-model:mode="port.mode" v-model:conditions="port.cases">
               <template #source="{value, index: conIndex}">
                 <varsPopover :node="props.node" @setVars="vars => port.cases[conIndex].source = vars" class="ml-auto">
@@ -55,7 +55,7 @@ const state: any = reactive({
 })
 watch(() => props.node, (n) => {
   if (n) {
-    state.nodeData = n.data
+    state.nodeData = n.data.workflowData
   }
 }, {immediate: true})
 watch(() => state.nodeData, (n) => {

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

@@ -15,7 +15,7 @@ const state: any = reactive({
   nodeData: {}
 })
 onMounted(() => {
-  state.nodeData = props.node.data
+  state.nodeData = props.node.data.workflowData
 })
 </script>
 

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

@@ -48,7 +48,7 @@ const state: any = reactive({
 })
 watch(() => props.node, (n) => {
   if (n) {
-    state.nodeData = n.data
+    state.nodeData = n.data.workflowData
   }
 }, {immediate: true})
 const onAddVars = () => {

src/views/workflow/mockJson.ts

@@ -19,14 +19,12 @@ export const data1 = {
             "type": "String",
             "length": "10",
             "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-            "nodeTitle": "开始"
           },
           {
             "label": "参数2",
             "key": "key2",
             "type": "Number",
             "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-            "nodeTitle": "开始"
           }
         ],
         "sysVars": [
@@ -35,14 +33,12 @@ export const data1 = {
             "key": "sys.query",
             "type": "String",
             "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-            "nodeTitle": "开始"
           },
           {
             "label": "用户ID",
             "key": "sys.user_id",
             "type": "String",
             "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-            "nodeTitle": "开始"
           }
         ]
       }
@@ -67,7 +63,6 @@ export const data1 = {
                   "type": "String",
                   "length": "10",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "includes",
                 "type": "constant",
@@ -80,7 +75,6 @@ export const data1 = {
                   "key": "sys.query",
                   "type": "String",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "end with",
                 "type": "constant",
@@ -104,7 +98,6 @@ export const data1 = {
                   "key": "key2",
                   "type": "Number",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "≥",
                 "type": "constant",
@@ -124,7 +117,6 @@ export const data1 = {
                   "type": "String",
                   "length": "10",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "includes",
                 "type": "variable",
@@ -133,7 +125,6 @@ export const data1 = {
                   "key": "sys.query",
                   "type": "String",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 }
               },
               {
@@ -144,7 +135,6 @@ export const data1 = {
                   "type": "String",
                   "length": "10",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "includes",
                 "type": "constant",
@@ -157,7 +147,6 @@ export const data1 = {
                   "key": "key2",
                   "type": "Number",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "=",
                 "type": "constant",
@@ -171,7 +160,6 @@ export const data1 = {
                   "type": "String",
                   "length": "10",
                   "nodeId": "3ba412bb-3772-4f61-85de-095f4017858c",
-                  "nodeTitle": "开始"
                 },
                 "method": "includes",
                 "type": "constant",
@@ -185,7 +173,8 @@ export const data1 = {
             "cases": []
           },
           {
-            "id": "7171167d-873b-4621-9ce1-dd45f9f4c9c3"
+            "id": "7171167d-873b-4621-9ce1-dd45f9f4c9c3",
+            "isElse": true
           }
         ],
         "p1": "条件分支1的的参数1",

src/views/workflow/types.ts

@@ -15,7 +15,9 @@ export type NodeDataStruct = {
 
 export type NodePortStruct = {
   id: string
-  data: any
+  mode?: string
+  cases?: Array<any>
+  isElse?: boolean
 }
 
 export enum NodeType {