From 059df5b4cac567685ba08f21b7893a097ca82847 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 1 Jun 2025 22:19:18 +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=E5=BB=B6=E8=BF=9F=E5=99=A8?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/delay-timer-node-config.vue  | 256 ++++++++++++++++++
 .../components/nodes/delay-timer-node.vue     | 115 ++++++++
 .../components/process-node-tree.vue          |   5 +-
 3 files changed, 374 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
new file mode 100644
index 000000000..fdb8e3a6c
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -0,0 +1,256 @@
+<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 {
+  Button,
+  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,
+  onCancel: () => {
+    drawerApi.close();
+  },
+  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>
+
+    <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>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
new file mode 100644
index 000000000..59b887a4b
--- /dev/null
+++ b/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>
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 bb6286f63..b139aa3b1 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
@@ -4,6 +4,7 @@ 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';
@@ -109,11 +110,11 @@ 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
     v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"