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] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]=20S?=
 =?UTF-8?q?imple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=9D=A1=E4=BB=B6=E8=8A=82?=
 =?UTF-8?q?=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"