條件分支節點

src/views/workflow/instance/component/condition/index.vue

@@ -3,7 +3,7 @@
     <div class="condition-mode">
       <div/>
       <div/>
-      <div class="__hover" @click="$emit('update:mode', mode === ConditionMode.And ? ConditionMode.Or : ConditionMode.And)">{{mode}}</div>
+      <div class="__hover" @click="$emit('update:mode', mode === ConditionMode.And ? ConditionMode.Or : ConditionMode.And)">{{String(mode).toUpperCase()}}</div>
     </div>
     <div class="condition-list">
       <template v-for="(item, index) in conditions">

src/views/workflow/instance/component/condition/condition-node.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="condition-nodes">
+    <template v-for="(item, index) in conditions">
+      <div class="condition-node">
+        <div class="mode" v-if="index > 0">{{String(mode).toUpperCase()}}</div>
+        <span>
+          <SvgIcon name="vars" color="#155aef" size="12"/>
+        </span>
+        <span class="text-[#155aef]">{{item.source.key}}</span>
+        <span>{{(item.source.type === 'Number' ? OptionsConditionNumber : OptionsConditionString).filter(v => v.value === item.method)[0]?.label || ''}}</span>
+        <template v-if="item.type === ConditionType.Constant">
+          <span class="__text-ellipsis">{{item.target}}</span>
+        </template>
+        <template v-else-if="item.type === ConditionType.Variable">
+          <span>
+            <SvgIcon name="vars" color="#155aef" size="12"/>
+          </span>
+          <span class="text-[#155aef]">{{item.target.key}}</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+import VarsValue from "@/views/workflow/instance/component/vars/vars-value.vue";
+import VarsItem from "@/views/workflow/instance/component/vars/vars-item.vue";
+import {ConditionType, OptionsConditionNumber, OptionsConditionString} from "@/views/workflow/types";
+
+const emits = defineEmits(['update:mode', 'update:conditions'])
+const props = defineProps({
+  mode: {},
+  conditions: {default: []}
+})
+const {proxy}: any = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped>
+@use "@/views/workflow/instance/component/style";
+
+.condition-nodes {
+  .condition-node {
+    margin-top: 2px;
+    background-color: #f2f4f7;
+    border-radius: 4px;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    position: relative;
+    >span {
+      font-size: 12px;
+    }
+    .mode {
+      color: #155aef;
+      position: absolute;
+      right: 0;
+      font-size: 12px;
+      top: -50%;
+      z-index: 2;
+    }
+  }
+}
+</style>

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

@@ -17,9 +17,7 @@
           </template>
         </div>
         <div v-if="index < state.nodeData.ports.length - 1">
-          <template v-for="con in port.cases">
-            <div>{{con.key}}123</div>
-          </template>
+          <conditionNode :mode="port.mode" :conditions="port.cases"/>
         </div>
       </div>
     </template>
@@ -28,6 +26,7 @@
 
 <script setup lang="ts">
 import {computed, getCurrentInstance, inject, onMounted, reactive, ref} from "vue";
+import conditionNode from '@/views/workflow/instance/component/condition/condition-node.vue'
 
 const emits = defineEmits([])
 const props = defineProps({
@@ -50,6 +49,14 @@ onMounted(() => {
     .port-item-head {
       display: flex;
       justify-content: space-between;
+      align-items: center;
+      >span:first-child {
+        font-size: 10px;
+        opacity: 0.65;
+      }
+      >span:last-child {
+        font-size: 12px;
+      }
     }
   }
 }

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

@@ -14,7 +14,7 @@
             </varsPopover>
           </div>
           <div class="flex mt-2" v-if="port.cases.length > 0">
-            <condition v-model:mode="port.mode" v-model:conditions="port.cases">
+            <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">
                   <varsValue :vars="value.source"/>
@@ -25,7 +25,7 @@
                   <varsValue :vars="value.target"/>
                 </varsPopover>
               </template>
-            </condition>
+            </conditionIndex>
           </div>
         </div>
       </template>
@@ -41,7 +41,7 @@ import {useWorkflowStore} from "@/stores";
 import ifElseNodeDefault from "../default";
 import varsValue from "@/views/workflow/instance/component/vars/vars-value.vue";
 import varsPopover from "@/views/workflow/instance/component/vars/vars-popover.vue";
-import condition from "@/views/workflow/instance/component/condition/index.vue";
+import conditionIndex from "@/views/workflow/instance/component/condition/condition-index.vue";
 import {ConditionNumber, ConditionString, ConditionType} from "@/views/workflow/types";
 
 const WorkflowStore = useWorkflowStore()

src/views/workflow/mockJson.ts

@@ -84,7 +84,7 @@ export const data1 = {
                 },
                 "method": "end with",
                 "type": "constant",
-                "target": "112"
+                "target": "112噢噢噢噢哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦i"
               }
             ]
           },