feat: Add workflow condition style

1Panel-dev · Dec 19, 2024 · c000ee4 · c000ee4
1 parent c98874e
commit c000ee4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
@@ -211,6 +211,9 @@ h5 {
 .p-8-12 {
   padding: calc(var(--app-base-px)) calc(var(--app-base-px) + 4px);
 }
+.p-12-16 {
+  padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
+}
 .p-12-24 {
   padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 3);
 }

diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
@@ -37,6 +37,27 @@
                 ><ArrowDownBold />
               </el-icon>
             </el-button>
+            <el-dropdown
+              v-if="showOperate(nodeModel.type)"
+              :teleported="false"
+              trigger="click"
+              placement="bottom-start"
+            >
+              <el-button text>{{ condition }}</el-button>
+              <template #dropdown>
+                <div style="width: 280px" class="p-12-16">
+                  <h5>执行条件</h5>
+                  <p class="mt-8 lighter">
+                    <span>前置</span>
+                    <el-select v-model="condition" size="small" style="width: 60px; margin: 0 8px">
+                      <el-option label="所有" value="AND" />
+                      <el-option label="任一" value="OR" />
+                    </el-select>
+                    <span>连线节点执行完，执行当前节点</span>
+                  </p>
+                </div>
+              </template>
+            </el-dropdown>
             <el-dropdown v-if="showOperate(nodeModel.type)" :teleported="false" trigger="click">
               <el-button text>
                 <el-icon class="color-secondary"><MoreFilled /></el-icon>
@@ -128,7 +149,8 @@ const height = ref<{
 })
 const showAnchor = ref<boolean>(false)
 const anchorData = ref<any>()
-// const showNode = ref<boolean>(true)
+const condition = ref('AND')
+
 const showNode = computed({
   set: (v) => {
     set(props.nodeModel.properties, 'showNode', v)