feat: [BPM 工作流] Simple 模型 - 条件节点配置

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>

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"

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"