!124 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !124 from Jason/dev

apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue

@@ -7,7 +7,7 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import { Button, Input } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 import { ConditionType } from '../../consts';
 import {
@@ -91,13 +91,8 @@ const saveConfig = async () => {
   return true;
 };
 
-// 使用 useVbenDrawer 替代传统 Drawer
 const [Drawer, drawerApi] = useVbenDrawer({
   title: currentNode.value.name,
-  class: 'w-[588px]',
-  onCancel: () => {
-    drawerApi.close();
-  },
   onConfirm: saveConfig,
 });
 
@@ -152,7 +147,7 @@ const blurEvent = () => {
 defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 </script>
 <template>
-  <Drawer>
+  <Drawer class="w-[580px]">
     <template #title>
       <div class="flex items-center">
         <Input
@@ -185,12 +180,5 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
         <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-config/copy-task-node-config.vue

@@ -12,7 +12,6 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
-  Button,
   Col,
   Form,
   FormItem,
@@ -44,9 +43,7 @@ import {
   useWatchNode,
 } from '../../helpers';
 
-defineOptions({
+defineOptions({ name: 'CopyTaskNodeConfig' });
-  name: 'CopyTaskNodeConfig',
-});
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
@@ -67,10 +64,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  placement: 'right',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
@@ -512,10 +505,6 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
         </div>
       </TabPane>
     </Tabs>
-    <template #footer>
-      <Button type="primary" @click="saveConfig">确 定</Button>
-      <Button @click="drawerApi.close()">取 消</Button>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>

apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Col,
+  DatePicker,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import {
+  DELAY_TYPE,
+  DelayTypeEnum,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+} from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import { convertTimeUnit } from './utils';
+
+defineOptions({ name: 'DelayTimerNodeConfig' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.DELAY_TIMER_NODE,
+);
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  delayType: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  timeDuration: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  dateTime: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+});
+// 配置表单数据
+const configForm = ref({
+  delayType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+});
+
+// 获取显示文本
+const getShowText = (): string => {
+  let showText = '';
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
+  }
+  return showText;
+};
+
+// 获取ISO时间格式
+const getIsoTimeDuration = () => {
+  let strTimeDuration = 'PT';
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += `${configForm.value.timeDuration}M`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += `${configForm.value.timeDuration}H`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += `${configForm.value.timeDuration}D`;
+  }
+  return strTimeDuration;
+};
+
+// 保存配置
+const saveConfig = async () => {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: getIsoTimeDuration(),
+    };
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: configForm.value.dateTime,
+    };
+  }
+  drawerApi.close();
+  return true;
+};
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onConfirm: saveConfig,
+});
+
+// 显示延迟器节点配置，由父组件调用
+const openDrawer = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  if (node.delaySetting) {
+    configForm.value.delayType = node.delaySetting.delayType;
+    // 固定时长
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+      const strTimeDuration = node.delaySetting.delayTime;
+      const parseTime = strTimeDuration.slice(2, -1);
+      const parseTimeUnit = strTimeDuration.slice(-1);
+      configForm.value.timeDuration = Number.parseInt(parseTime);
+      configForm.value.timeUnit = convertTimeUnit(parseTimeUnit);
+    }
+    // 固定日期时间
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+      configForm.value.dateTime = node.delaySetting.delayTime;
+    }
+  }
+  drawerApi.open();
+};
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[480px]">
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" :size="16" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <Form
+        ref="formRef"
+        :model="configForm"
+        :rules="formRules"
+        :label-col="{ span: 24 }"
+        :wrapper-col="{ span: 24 }"
+      >
+        <FormItem label="延迟时间" name="delayType">
+          <RadioGroup v-model:value="configForm.delayType">
+            <Radio
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
+        >
+          <Row :gutter="8">
+            <Col>
+              <FormItem name="timeDuration">
+                <InputNumber
+                  class="w-28"
+                  v-model:value="configForm.timeDuration"
+                  :min="1"
+                />
+              </FormItem>
+            </Col>
+            <Col>
+              <Select v-model:value="configForm.timeUnit" class="w-28">
+                <SelectOption
+                  v-for="item in TIME_UNIT_TYPES"
+                  :key="item.value"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </Col>
+            <Col>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </Col>
+          </Row>
+        </FormItem>
+        <FormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
+          name="dateTime"
+        >
+          <Row :gutter="8">
+            <Col>
+              <DatePicker
+                class="mr-2"
+                v-model:value="configForm.dateTime"
+                show-time
+                placeholder="请选择日期和时间"
+                value-format="YYYY-MM-DDTHH:mm:ss"
+              />
+            </Col>
+            <Col>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </Col>
+          </Row>
+        </FormItem>
+      </Form>
+    </div>
+  </Drawer>
+</template>
+<style lang="scss" scoped></style>

apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { RouterSetting, SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  message,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import { ConditionType, NodeType } from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({ name: 'RouterNodeConfig' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
+
+/** 当前节点 */
+const currentNode = useWatchNode(props);
+/** 节点名称 */
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.ROUTER_BRANCH_NODE,
+);
+const routerGroups = ref<RouterSetting[]>([]);
+const nodeOptions = ref<any[]>([]);
+const conditionRef = ref<any[]>([]);
+const formRef = ref();
+
+/** 校验节点配置 */
+const validateConfig = async () => {
+  // 校验路由分支选择
+  const routeIdValid = await formRef.value.validate().catch(() => false);
+  if (!routeIdValid) {
+    message.warning('请配置路由目标节点');
+    return false;
+  }
+
+  // 校验条件规则
+  let valid = true;
+  for (const item of conditionRef.value) {
+    if (item && !(await item.validate())) {
+      valid = false;
+    }
+  }
+  if (!valid) return false;
+
+  // 获取节点显示文本，如果为空，校验不通过
+  const showText = getShowText();
+  if (!showText) return false;
+
+  return true;
+};
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 校验配置
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 保存配置
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = getShowText();
+  currentNode.value.routerGroups = routerGroups.value;
+  drawerApi.close();
+  return true;
+};
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onConfirm: saveConfig,
+});
+
+/** 打开路由节点配置抽屉，由父组件调用 */
+const openDrawer = (node: SimpleFlowNode) => {
+  nodeOptions.value = [];
+  getRouterNode(processNodeTree?.value);
+  routerGroups.value = [];
+  nodeName.value = node.name;
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups;
+  }
+  drawerApi.open();
+};
+
+/** 获取显示文本 */
+const getShowText = () => {
+  if (
+    !routerGroups.value ||
+    !Array.isArray(routerGroups.value) ||
+    routerGroups.value.length <= 0
+  ) {
+    message.warning('请配置路由！');
+    return '';
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      message.warning('请完善路由配置项！');
+      return '';
+    }
+    if (
+      route.conditionType === ConditionType.EXPRESSION &&
+      !route.conditionExpression
+    ) {
+      message.warning('请完善路由配置项！');
+      return '';
+    }
+    if (route.conditionType === ConditionType.RULE) {
+      for (const condition of route.conditionGroups.conditions) {
+        for (const rule of condition.rules) {
+          if (!rule.leftSide || !rule.rightSide) {
+            message.warning('请完善路由配置项！');
+            return '';
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`;
+};
+
+/** 添加路由分支 */
+const addRouterGroup = () => {
+  routerGroups.value.push({
+    nodeId: undefined,
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: undefined,
+              rightSide: '',
+            },
+          ],
+        },
+      ],
+    },
+  });
+};
+
+/** 删除路由分支 */
+const deleteRouterGroup = (index: number) => {
+  routerGroups.value.splice(index, 1);
+};
+
+/** 递归获取所有节点 */
+const getRouterNode = (node: any) => {
+  // TODO 最好还需要满足以下要求
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break;
+    if (
+      node.type !== NodeType.ROUTER_BRANCH_NODE &&
+      node.type !== NodeType.CONDITION_NODE
+    ) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id,
+      });
+    }
+    if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
+      break;
+    }
+    if (node.conditionNodes && node.conditionNodes.length > 0) {
+      node.conditionNodes.forEach((item: any) => {
+        getRouterNode(item);
+      });
+    }
+    node = node.childNode;
+  }
+};
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[630px]">
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" />
+        </div>
+      </div>
+    </template>
+
+    <Form ref="formRef" :model="{ routerGroups }">
+      <Card
+        :body-style="{ padding: '10px' }"
+        class="mt-4"
+        v-for="(item, index) in routerGroups"
+        :key="index"
+      >
+        <template #title>
+          <div class="flex h-16 w-full items-center justify-between">
+            <div class="flex items-center font-normal">
+              <span class="font-medium">路由{{ index + 1 }}</span>
+              <FormItem
+                class="mb-0 ml-4 inline-block w-[180px]"
+                :name="['routerGroups', index, 'nodeId']"
+                :rules="{
+                  required: true,
+                  message: '路由目标节点不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <Select
+                  v-model:value="item.nodeId"
+                  placeholder="请选择路由目标节点"
+                  allow-clear
+                >
+                  <SelectOption
+                    v-for="node in nodeOptions"
+                    :key="node.value"
+                    :value="node.value"
+                  >
+                    {{ node.label }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+            <Button
+              v-if="routerGroups.length > 1"
+              shape="circle"
+              class="flex items-center justify-center"
+              @click="deleteRouterGroup(index)"
+            >
+              <template #icon>
+                <IconifyIcon icon="ep:close" />
+              </template>
+            </Button>
+          </div>
+        </template>
+        <Condition
+          :ref="(el) => (conditionRef[index] = el)"
+          :model-value="routerGroups[index] as Record<string, any>"
+          @update:model-value="(val) => (routerGroups[index] = val)"
+        />
+      </Card>
+    </Form>
+
+    <Row class="mt-4">
+      <Col :span="24">
+        <Button
+          class="flex items-center p-0"
+          type="link"
+          @click="addRouterGroup"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:setting" />
+          </template>
+          新增路由分支
+        </Button>
+      </Col>
+    </Row>
+  </Drawer>
+</template>

apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue

@@ -95,7 +95,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   onCancel() {
-    drawerApi.close();
+    drawerApi.setState({ isOpen: false });
   },
   onConfirm() {
     saveConfig();
@@ -111,7 +111,7 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
   // 设置发起人的按钮权限
   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
-  drawerApi.close();
+  drawerApi.setState({ isOpen: false });
   return true;
 };
 

apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue

@@ -63,9 +63,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
@@ -678,12 +675,6 @@ onMounted(() => {
         </div>
       </Form>
     </div>
-    <template #footer>
-      <div class="flex justify-end">
-        <Button type="primary" @click="saveConfig">确 定</Button>
-        <Button class="ml-2" @click="drawerApi.close()">取 消</Button>
-      </div>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>

apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue

@@ -102,9 +102,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
@@ -212,7 +209,7 @@ const changeCandidateStrategy = () => {
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
 };
 
-// 审批方式改变
+/** 审批方式改变 */
 const approveMethodChanged = () => {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
@@ -240,18 +237,8 @@ const nodeTypeName = computed(() => {
   return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
 });
 
-/** 保存配置 */
+/** 校验节点配置 */
-const saveConfig = async () => {
+const validateConfig = async () => {
-  // 设置审批节点名称
-  currentNode.value.name = nodeName.value!;
-  // 设置审批类型
-  currentNode.value.approveType = approveType.value;
-  // 如果不是人工审批。返回
-  if (approveType.value !== ApproveType.USER) {
-    currentNode.value.showText = getApproveTypeText(approveType.value);
-    drawerApi.close();
-    return true;
-  }
   if (!formRef.value) return false;
   if (!userTaskListenerRef.value) return false;
 
@@ -274,6 +261,27 @@ const saveConfig = async () => {
   const showText = getShowText();
   if (!showText) return false;
 
+  return true;
+};
+/** 保存配置 */
+const saveConfig = async () => {
+  // 如果不是人工审批，不执行校验，直接返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.name = nodeName.value!;
+    currentNode.value.approveType = approveType.value;
+    currentNode.value.showText = getApproveTypeText(approveType.value);
+    drawerApi.close();
+    return true;
+  }
+  // 执行校验
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!;
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value;
+  // 设置审批人设置策略
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
   // 处理 candidateParam 参数
   currentNode.value.candidateParam = handleCandidateParam();
@@ -336,7 +344,7 @@ const saveConfig = async () => {
   // 审批意见
   currentNode.value.reasonRequire = configForm.value.reasonRequire;
 
-  currentNode.value.showText = showText;
+  currentNode.value.showText = getShowText();
   drawerApi.close();
   return true;
 };
@@ -1206,10 +1214,6 @@ onMounted(() => {
         />
       </TabPane>
     </Tabs>
-    <template #footer>
-      <Button type="primary" @click="saveConfig">确 定</Button>
-      <Button @click="drawerApi.close()">取 消</Button>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>

apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'DelayTimerNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.DELAY_TIMER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon delay-node">
+            <span class="iconfont icon-delay"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <DelayTimerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>

apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useTaskStatusClass } from '../../helpers';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ParallelNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+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 || `并行${index + 1}`;
+};
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true;
+};
+
+// 新增条件
+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: [],
+    };
+    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 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.PARALLEL_NODE) 继续查找
+  emits('findParnetNode', 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-parallel icon-size parallel"></span>
+      </div>
+      <Button
+        v-else
+        class="branch-node-add"
+        color="#626aef"
+        @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="`${useTaskStatusClass(item.activityStatus)}`"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="showInputs[index]">
+                  <Input
+                    type="text"
+                    class="input-max-width 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">无优先级</div>
+              </div>
+              <div class="branch-node-content">
+                <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 v-if="!readonly" class="node-toolbar">
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 递归显示子节点  -->
+        <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>

apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import RouterNodeConfig from '../nodes-config/router-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'RouterNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.ROUTER_BRANCH_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon router-node">
+            <span class="iconfont icon-router"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <RouterNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>

apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue

@@ -4,9 +4,12 @@ import type { SimpleFlowNode } from '../consts';
 import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
+import DelayTimerNode from './nodes/delay-timer-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 ParallelNode from './nodes/parallel-node.vue';
+import RouterNode from './nodes/router-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';
@@ -94,12 +97,12 @@ const recursiveFindParentNode = (
     @find-parent-node="findParentNode"
   />
   <!-- 并行节点 -->
-  <!-- <ParallelNode
+  <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
+    @find-parent-node="findParentNode"
-  /> -->
+  />
   <!-- 包容分支节点 -->
   <InclusiveNode
     v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
@@ -108,17 +111,17 @@ const recursiveFindParentNode = (
     @find-parent-node="findParentNode"
   />
   <!-- 延迟器节点 -->
-  <!-- <DelayTimerNode
+  <DelayTimerNode
     v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 路由分支节点 -->
-  <!-- <RouterNode
+  <RouterNode
     v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 触发器节点 -->
   <TriggerNode
     v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"

apps/web-antd/src/components/simple-process-design/consts.ts

@@ -564,7 +564,7 @@ export type RouterSetting = {
   conditionExpression: string;
   conditionGroups: ConditionGroup;
   conditionType: ConditionType;
-  nodeId: string;
+  nodeId: string | undefined;
 };
 
 /**