From 1c2b247cf4e5a685e37eebd48d06b7bba795b8c8 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 31 May 2025 08:33:34 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]?=
 =?UTF-8?q?=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E5=8C=85=E5=AE=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodes/inclusive-node.vue       | 282 ++++++++++++++++++
 .../components/process-node-tree.vue          |   7 +-
 .../simple-process-design/helpers.ts          |  22 ++
 .../styles/simple-process-designer.scss       |   6 +-
 4 files changed, 313 insertions(+), 4 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
new file mode 100644
index 000000000..c47afcbb1
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+  NodeType,
+} from '../../consts';
+import {
+  getDefaultInclusiveConditionNodeName,
+  useTaskStatusClass,
+} from '../../helpers';
+// import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'InclusiveNode',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultInclusiveConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+};
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true;
+};
+
+const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+};
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `包容条件${len}`,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+};
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+};
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+};
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+};
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
+      </div>
+      <Button v-else class="branch-node-add" @click="addCondition" plain>
+        添加条件
+      </Button>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <Input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- TODO 条件节点配置 -->
+        <!-- <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        /> -->
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 5f7bb5905..d8681f3e3 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -5,6 +5,7 @@ import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
+import InclusiveNode from './nodes/inclusive-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
@@ -99,12 +100,12 @@ const recursiveFindParentNode = (
     @find:parent-node="findFromParentNode"
   /> -->
   <!-- 包容分支节点 -->
-  <!-- <InclusiveNode
+  <InclusiveNode
     v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 延迟器节点 -->
   <!-- <DelayTimerNode
     v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
index 281572815..9fddcb13c 100644
--- a/apps/web-antd/src/components/simple-process-design/helpers.ts
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -737,3 +737,25 @@ const getOpName = (opCode: string): string | undefined => {
   );
   return opName?.label;
 };
+
+/** 获取条件节点默认的名称 */
+export const getDefaultConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+};
+
+/** 获取包容分支条件节点默认的名称 */
+export const getDefaultInclusiveConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+};
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index 8c3afd37f..28708e598 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -334,12 +334,14 @@
         margin-top: 4px;
         line-height: 32px;
         color: #111f2c;
+        background: rgb(0 0 0 / 3%);
         border-radius: 4px;
 
         .branch-node-text {
+          display: -webkit-box;
           overflow: hidden;
           text-overflow: ellipsis;
-          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-line-clamp: 1; /* 这将限制文本显示为一行 */
           font-size: 12px;
           line-height: 24px;
           word-break: break-all;
@@ -486,6 +488,8 @@
           border-radius: 18px;
           transform: translateX(-50%);
           transform-origin: center center;
+          display: flex;
+          align-items: center;
         }
 
         .branch-node-readonly {

From ce9b6c5b885019857fbcf2e9aa7c16d02601ce5b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 31 May 2025 20:50:38 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]?=
 =?UTF-8?q?=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodes/exclusive-node.vue       | 277 ++++++++++++++++++
 .../components/process-node-tree.vue          |   7 +-
 .../styles/simple-process-designer.scss       |   4 +-
 3 files changed, 283 insertions(+), 5 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
new file mode 100644
index 000000000..3ac884ad3
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+  NodeType,
+} from '../../consts';
+import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
+// TODO import ConditionNodeConfig from './nodes-config/condition-node-config.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ExclusiveNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+};
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true;
+};
+
+const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+};
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `条件${len}`,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+};
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+};
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+};
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+};
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-exclusive icon-size condition"></span>
+      </div>
+      <Button v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </Button>
+
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <Input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">优先级{{ index + 1 }}</div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- TODO 条件节点配置-->
+        <!-- <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        /> -->
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index d8681f3e3..fadf8b3ad 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -5,6 +5,7 @@ import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
+import ExclusiveNode from './nodes/exclusive-node.vue';
 import InclusiveNode from './nodes/inclusive-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import TriggerNode from './nodes/trigger-node.vue';
@@ -86,12 +87,12 @@ const recursiveFindParentNode = (
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 条件节点 -->
-  <!-- <ExclusiveNode
+  <ExclusiveNode
     v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 并行节点 -->
   <!-- <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index 28708e598..b4ff3ab28 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -480,6 +480,8 @@
           top: -18px;
           left: 50%;
           z-index: 1;
+          display: flex;
+          align-items: center;
           height: 36px;
           padding: 0 10px;
           font-size: 12px;
@@ -488,8 +490,6 @@
           border-radius: 18px;
           transform: translateX(-50%);
           transform-origin: center center;
-          display: flex;
-          align-items: center;
         }
 
         .branch-node-readonly {

From 4cd9b3c6d8e708be58037d0a97e3234e978acc63 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 31 May 2025 22:05:15 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]?=
 =?UTF-8?q?=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/condition-node-config.vue    | 196 ++++++++++++++++++
 .../components/nodes/exclusive-node.vue       |  10 +-
 .../components/nodes/inclusive-node.vue       |  10 +-
 3 files changed, 206 insertions(+), 10 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
new file mode 100644
index 000000000..19aba8a8c
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import { ConditionType } from '../../consts';
+import {
+  getConditionShowText,
+  getDefaultConditionNodeName,
+  useFormFieldsAndStartUser,
+} from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({
+  name: 'ConditionNodeConfig',
+});
+const props = defineProps({
+  conditionNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+  nodeIndex: {
+    type: Number,
+    required: true,
+  },
+});
+
+const currentNode = ref<SimpleFlowNode>(props.conditionNode);
+const condition = ref<any>({
+  conditionType: ConditionType.RULE, // 设置默认值
+  conditionExpression: '',
+  conditionGroups: {
+    and: true,
+    conditions: [
+      {
+        and: true,
+        rules: [
+          {
+            opCode: '==',
+            leftSide: '',
+            rightSide: '',
+          },
+        ],
+      },
+    ],
+  },
+});
+
+// 显示名称输入框
+const showInput = ref(false);
+const conditionRef = ref();
+const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
+
+/** 保存配置 */
+const saveConfig = async () => {
+  if (!currentNode.value.conditionSetting?.defaultFlow) {
+    // 校验表单
+    const valid = await conditionRef.value.validate();
+    if (!valid) return false;
+    const showText = getConditionShowText(
+      condition.value?.conditionType,
+      condition.value?.conditionExpression,
+      condition.value.conditionGroups,
+      fieldOptions,
+    );
+    if (!showText) {
+      return false;
+    }
+    currentNode.value.showText = showText;
+    // 使用 cloneDeep 进行深拷贝
+    currentNode.value.conditionSetting = cloneDeep({
+      ...currentNode.value.conditionSetting,
+      conditionType: condition.value?.conditionType,
+      conditionExpression:
+        condition.value?.conditionType === ConditionType.EXPRESSION
+          ? condition.value?.conditionExpression
+          : undefined,
+      conditionGroups:
+        condition.value?.conditionType === ConditionType.RULE
+          ? condition.value?.conditionGroups
+          : undefined,
+    });
+  }
+  drawerApi.close();
+  return true;
+};
+
+// 使用 useVbenDrawer 替代传统 Drawer
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: currentNode.value.name,
+  class: 'w-[588px]',
+  onCancel: () => {
+    drawerApi.close();
+  },
+  onConfirm: saveConfig,
+});
+
+const open = () => {
+  // 使用三元表达式代替 if-else，解决 linter 警告
+  condition.value = currentNode.value.conditionSetting
+    ? cloneDeep(currentNode.value.conditionSetting)
+    : {
+        conditionType: ConditionType.RULE,
+        conditionExpression: '',
+        conditionGroups: {
+          and: true,
+          conditions: [
+            {
+              and: true,
+              rules: [
+                {
+                  opCode: '==',
+                  leftSide: '',
+                  rightSide: '',
+                },
+              ],
+            },
+          ],
+        },
+      };
+
+  drawerApi.open();
+};
+
+watch(
+  () => props.conditionNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const clickIcon = () => {
+  showInput.value = true;
+};
+// 输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false;
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(
+      props.nodeIndex,
+      currentNode.value?.conditionSetting?.defaultFlow,
+    );
+};
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+<template>
+  <Drawer>
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="currentNode.name"
+          :placeholder="currentNode.name"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ currentNode.name }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <div
+        class="mb-3 text-base"
+        v-if="currentNode.conditionSetting?.defaultFlow"
+      >
+        未满足其它条件时，将进入此分支（该分支不可编辑和删除）
+      </div>
+      <div v-else>
+        <Condition ref="conditionRef" v-model:model-value="condition" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end space-x-2">
+        <Button type="primary" @click="saveConfig">确 定</Button>
+        <Button @click="drawerApi.close">取 消</Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
index 3ac884ad3..fb00d2e71 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -15,7 +15,7 @@ import {
   NodeType,
 } from '../../consts';
 import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
-// TODO import ConditionNodeConfig from './nodes-config/condition-node-config.vue';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
 import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
 
@@ -155,7 +155,7 @@ const recursiveFindParentNode = (
       <Button v-else class="branch-node-add" @click="addCondition">
         添加条件
       </Button>
-
+      <!-- 排他网关节点下面可以多个分支，每个分支第一个节点是条件节点 NodeType.CONDITION_NODE -->
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -252,12 +252,12 @@ const recursiveFindParentNode = (
             />
           </div>
         </div>
-        <!-- TODO 条件节点配置-->
-        <!-- <ConditionNodeConfig
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
           :node-index="index"
           :condition-node="item"
           :ref="item.id"
-        /> -->
+        />
         <!-- 递归显示子节点  -->
         <ProcessNodeTree
           v-if="item && item.childNode"
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
index c47afcbb1..8d613c8ca 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -18,7 +18,7 @@ import {
   getDefaultInclusiveConditionNodeName,
   useTaskStatusClass,
 } from '../../helpers';
-// import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
 import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
 
@@ -159,7 +159,7 @@ const recursiveFindParentNode = (
       >
         <span class="iconfont icon-inclusive icon-size inclusive"></span>
       </div>
-      <Button v-else class="branch-node-add" @click="addCondition" plain>
+      <Button v-else class="branch-node-add" @click="addCondition">
         添加条件
       </Button>
       <div
@@ -257,12 +257,12 @@ const recursiveFindParentNode = (
             />
           </div>
         </div>
-        <!-- TODO 条件节点配置 -->
-        <!-- <ConditionNodeConfig
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
           :node-index="index"
           :condition-node="item"
           :ref="item.id"
-        /> -->
+        />
         <!-- 递归显示子节点  -->
         <ProcessNodeTree
           v-if="item && item.childNode"