feat: [bpm][ele] 仿钉钉流程模型迁移

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue

@@ -0,0 +1,830 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { IOParameter, SimpleFlowNode } from '../../consts';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { getForm } from '#/api/bpm/form';
+import { getModelList } from '#/api/bpm/model';
+
+import {
+  CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE,
+  CHILD_PROCESS_START_USER_EMPTY_TYPE,
+  CHILD_PROCESS_START_USER_TYPE,
+  ChildProcessMultiInstanceSourceTypeEnum,
+  ChildProcessStartUserEmptyTypeEnum,
+  ChildProcessStartUserTypeEnum,
+  DELAY_TYPE,
+  DelayTypeEnum,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+} from '../../consts';
+import {
+  parseFormFields,
+  useFormFields,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import { convertTimeUnit } from './utils';
+
+defineOptions({ name: 'ChildProcessNodeConfig' });
+
+const props = defineProps<{
+  flowNode: SimpleFlowNode;
+}>();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+/** 节点名称配置 */
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.CHILD_PROCESS_NODE);
+// 激活的 Tab 标签页
+const activeTabName = ref('child');
+// 子流程表单配置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: FormRules = reactive({
+  async: [{ required: true, message: '是否异步不能为空', trigger: 'change' }],
+  calledProcessDefinitionKey: [
+    { required: true, message: '子流程不能为空', trigger: 'change' },
+  ],
+  skipStartUserNode: [
+    {
+      required: true,
+      message: '是否自动跳过子流程发起节点不能为空',
+      trigger: 'change',
+    },
+  ],
+  startUserType: [
+    { required: true, message: '子流程发起人不能为空', trigger: 'change' },
+  ],
+  startUserEmptyType: [
+    {
+      required: true,
+      message: '当子流程发起人为空时不能为空',
+      trigger: 'change',
+    },
+  ],
+  startUserFormField: [
+    { required: true, message: '子流程发起人字段不能为空', trigger: 'change' },
+  ],
+  timeoutEnable: [
+    { required: true, message: '超时设置是否开启不能为空', trigger: 'change' },
+  ],
+  timeoutType: [
+    { required: true, message: '超时设置时间不能为空', trigger: 'change' },
+  ],
+  timeDuration: [
+    { required: true, message: '超时设置时间不能为空', trigger: 'change' },
+  ],
+  dateTime: [
+    { required: true, message: '超时设置时间不能为空', trigger: 'change' },
+  ],
+  multiInstanceEnable: [
+    { required: true, message: '多实例设置不能为空', trigger: 'change' },
+  ],
+  sequential: [
+    { required: true, message: '是否串行不能为空', trigger: 'change' },
+  ],
+  multiInstanceSourceType: [
+    { required: true, message: '实例数量不能为空', trigger: 'change' },
+  ],
+  approveRatio: [
+    { required: true, message: '完成比例不能为空', trigger: 'change' },
+  ],
+});
+
+type ChildProcessFormType = {
+  approveRatio: number;
+  async: boolean;
+  calledProcessDefinitionKey: string;
+  dateTime: string;
+  inVariables?: IOParameter[];
+  multiInstanceEnable: boolean;
+  multiInstanceSource: string;
+  multiInstanceSourceType: ChildProcessMultiInstanceSourceTypeEnum;
+  outVariables?: IOParameter[];
+  sequential: boolean;
+  skipStartUserNode: boolean;
+  startUserEmptyType: ChildProcessStartUserEmptyTypeEnum;
+  startUserFormField: string;
+  startUserType: ChildProcessStartUserTypeEnum;
+  timeDuration: number;
+  timeoutEnable: boolean;
+  timeoutType: DelayTypeEnum;
+  timeUnit: TimeUnitType;
+};
+
+const configForm = ref<ChildProcessFormType>({
+  async: false,
+  calledProcessDefinitionKey: '',
+  skipStartUserNode: false,
+  inVariables: [],
+  outVariables: [],
+  startUserType: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
+  startUserEmptyType:
+    ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER,
+  startUserFormField: '',
+  timeoutEnable: false,
+  timeoutType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+  multiInstanceEnable: false,
+  sequential: false,
+  approveRatio: 100,
+  multiInstanceSourceType:
+    ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY,
+  multiInstanceSource: '',
+});
+
+const childProcessOptions = ref<any[]>([]);
+// 主流程表单字段选项
+const formFieldOptions = useFormFields();
+/** 子流程发起人表单可选项 : 只有用户选择组件字段才能被选择 */
+const startUserFormFieldOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 数字表单字段选项
+const digitalFormFieldOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'inputNumber');
+});
+// 多选表单字段选项
+const multiFormFieldOptions = computed(() => {
+  return formFieldOptions.filter(
+    (item) => item.type === 'select' || item.type === 'checkbox',
+  );
+});
+const childFormFieldOptions = ref<any[]>([]);
+
+/** 保存配置 */
+const saveConfig = async () => {
+  activeTabName.value = 'child';
+  if (!formRef.value) return false;
+
+  const valid = await formRef.value.validate().catch(() => false);
+  if (!valid) return false;
+
+  const childInfo = childProcessOptions.value.find(
+    (option) => option.key === configForm.value.calledProcessDefinitionKey,
+  );
+
+  currentNode.value.name = nodeName.value!;
+  if (currentNode.value.childProcessSetting) {
+    // 1. 是否异步
+    currentNode.value.childProcessSetting.async = configForm.value.async;
+    // 2. 调用流程
+    currentNode.value.childProcessSetting.calledProcessDefinitionKey =
+      childInfo.key;
+    currentNode.value.childProcessSetting.calledProcessDefinitionName =
+      childInfo.name;
+    // 3. 是否跳过发起人
+    currentNode.value.childProcessSetting.skipStartUserNode =
+      configForm.value.skipStartUserNode;
+    // 4. 主→子变量
+    currentNode.value.childProcessSetting.inVariables =
+      configForm.value.inVariables;
+    // 5. 子→主变量
+    currentNode.value.childProcessSetting.outVariables =
+      configForm.value.outVariables;
+    // 6. 发起人设置
+    currentNode.value.childProcessSetting.startUserSetting.type =
+      configForm.value.startUserType;
+    currentNode.value.childProcessSetting.startUserSetting.emptyType =
+      configForm.value.startUserEmptyType;
+    currentNode.value.childProcessSetting.startUserSetting.formField =
+      configForm.value.startUserFormField;
+    // 7. 超时设置
+    currentNode.value.childProcessSetting.timeoutSetting = {
+      enable: configForm.value.timeoutEnable,
+    };
+    if (configForm.value.timeoutEnable) {
+      currentNode.value.childProcessSetting.timeoutSetting.type =
+        configForm.value.timeoutType;
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION) {
+        currentNode.value.childProcessSetting.timeoutSetting.timeExpression =
+          getIsoTimeDuration();
+      }
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        currentNode.value.childProcessSetting.timeoutSetting.timeExpression =
+          configForm.value.dateTime;
+      }
+    }
+    // 8. 多实例设置
+    currentNode.value.childProcessSetting.multiInstanceSetting = {
+      enable: configForm.value.multiInstanceEnable,
+    };
+    if (configForm.value.multiInstanceEnable) {
+      currentNode.value.childProcessSetting.multiInstanceSetting.sequential =
+        configForm.value.sequential;
+      currentNode.value.childProcessSetting.multiInstanceSetting.approveRatio =
+        configForm.value.approveRatio;
+      currentNode.value.childProcessSetting.multiInstanceSetting.sourceType =
+        configForm.value.multiInstanceSourceType;
+      currentNode.value.childProcessSetting.multiInstanceSetting.source =
+        configForm.value.multiInstanceSource;
+    }
+  }
+
+  currentNode.value.showText = `调用子流程：${childInfo.name}`;
+  drawerApi.close();
+  return true;
+};
+
+// 显示子流程节点配置， 由父组件传过来
+const showChildProcessNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  if (node.childProcessSetting) {
+    // 1. 是否异步
+    configForm.value.async = node.childProcessSetting.async;
+    // 2. 调用流程
+    configForm.value.calledProcessDefinitionKey =
+      node.childProcessSetting?.calledProcessDefinitionKey;
+    // 3. 是否跳过发起人
+    configForm.value.skipStartUserNode =
+      node.childProcessSetting.skipStartUserNode;
+    // 4. 主流程→子流程变量
+    configForm.value.inVariables = node.childProcessSetting.inVariables ?? [];
+    // 5. 子流程→主流程变量
+    configForm.value.outVariables = node.childProcessSetting.outVariables ?? [];
+    // 6. 发起人设置
+    configForm.value.startUserType =
+      node.childProcessSetting.startUserSetting.type;
+    configForm.value.startUserEmptyType =
+      node.childProcessSetting.startUserSetting.emptyType ??
+      ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER;
+    configForm.value.startUserFormField =
+      node.childProcessSetting.startUserSetting.formField ?? '';
+    // 7. 超时设置
+    configForm.value.timeoutEnable =
+      node.childProcessSetting.timeoutSetting.enable ?? false;
+    if (configForm.value.timeoutEnable) {
+      configForm.value.timeoutType =
+        node.childProcessSetting.timeoutSetting.type ??
+        DelayTypeEnum.FIXED_TIME_DURATION;
+      // 固定时长
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION) {
+        const strTimeDuration =
+          node.childProcessSetting.timeoutSetting.timeExpression ?? '';
+        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.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        configForm.value.dateTime =
+          node.childProcessSetting.timeoutSetting.timeExpression ?? '';
+      }
+    }
+    // 8. 多实例设置
+    configForm.value.multiInstanceEnable =
+      node.childProcessSetting.multiInstanceSetting.enable ?? false;
+    if (configForm.value.multiInstanceEnable) {
+      configForm.value.sequential =
+        node.childProcessSetting.multiInstanceSetting.sequential ?? false;
+      configForm.value.approveRatio =
+        node.childProcessSetting.multiInstanceSetting.approveRatio ?? 100;
+      configForm.value.multiInstanceSourceType =
+        node.childProcessSetting.multiInstanceSetting.sourceType ??
+        ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY;
+      configForm.value.multiInstanceSource =
+        node.childProcessSetting.multiInstanceSetting.source ?? '';
+    }
+  }
+  loadFormInfo();
+  drawerApi.open();
+};
+
+/** 暴露方法给父组件 */
+defineExpose({ showChildProcessNodeConfig });
+
+const addVariable = (arr?: IOParameter[]) => {
+  arr?.push({
+    source: '',
+    target: '',
+  });
+};
+
+const deleteVariable = (index: number, arr?: IOParameter[]) => {
+  arr?.splice(index, 1);
+};
+
+const handleCalledElementChange = () => {
+  configForm.value.inVariables = [];
+  configForm.value.outVariables = [];
+  loadFormInfo();
+};
+
+const loadFormInfo = async () => {
+  const childInfo = childProcessOptions.value.find(
+    (option) => option.key === configForm.value.calledProcessDefinitionKey,
+  );
+  if (!childInfo) return;
+
+  const formInfo = await getForm(childInfo.formId);
+  childFormFieldOptions.value = [];
+  if (formInfo.fields) {
+    formInfo.fields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), childFormFieldOptions.value);
+    });
+  }
+};
+
+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 handleMultiInstanceSourceTypeChange = () => {
+  configForm.value.multiInstanceSource = '';
+};
+
+onMounted(async () => {
+  try {
+    childProcessOptions.value = await getModelList(undefined);
+  } catch (error) {
+    console.error('获取模型列表失败', error);
+  }
+});
+</script>
+
+<template>
+  <Drawer class="w-1/3">
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <ElForm
+        ref="formRef"
+        :model="configForm"
+        label-position="top"
+        :rules="formRules"
+      >
+        <ElFormItem
+          label="是否异步执行"
+          name="async"
+          label-align="left"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 4 }"
+        >
+          <ElSwitch
+            v-model="configForm.async"
+            active-text="是"
+            inactive-text="否"
+          />
+        </ElFormItem>
+        <ElFormItem label="选择子流程" prop="calledProcessDefinitionKey">
+          <ElSelect
+            v-model="configForm.calledProcessDefinitionKey"
+            clearable
+            @change="handleCalledElementChange"
+          >
+            <ElOption
+              v-for="(item, index) in childProcessOptions"
+              :key="index"
+              :value="item.key"
+            >
+              {{ item.name }}
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="是否自动跳过子流程发起节点" prop="skipStartUserNode">
+          <ElSwitch
+            v-model="configForm.skipStartUserNode"
+            active-text="跳过"
+            inactive-text="不跳过"
+          />
+        </ElFormItem>
+        <ElFormItem label="主→子变量传递" prop="inVariables">
+          <div
+            class="flex"
+            v-for="(item, index) in configForm.inVariables"
+            :key="index"
+          >
+            <div class="mr-2">
+              <ElFormItem
+                :name="['inVariables', index, 'source']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.source">
+                  <ElOption
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-2">
+              <ElFormItem
+                :name="['inVariables', index, 'target']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.target">
+                  <ElOption
+                    v-for="(field, fIdx) in childFormFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-1 flex h-8 items-center">
+              <IconifyIcon
+                icon="lucide:trash-2"
+                :size="18"
+                class="cursor-pointer text-red-500"
+                @click="deleteVariable(index, configForm.inVariables)"
+              />
+            </div>
+          </div>
+          <ElButton
+            link
+            @click="addVariable(configForm.inVariables)"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="lucide:plus" />
+            </template>
+            添加一个
+          </ElButton>
+        </ElFormItem>
+        <ElFormItem
+          v-if="configForm.async === false"
+          label="子→主变量传递"
+          prop="outVariables"
+        >
+          <div
+            class="flex"
+            v-for="(item, index) in configForm.outVariables"
+            :key="index"
+          >
+            <div class="mr-2">
+              <ElFormItem
+                :name="['outVariables', index, 'source']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.source">
+                  <ElOption
+                    v-for="(field, fIdx) in childFormFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-2">
+              <ElFormItem
+                :name="['outVariables', index, 'target']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.target">
+                  <ElOption
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-1 flex h-8 items-center">
+              <IconifyIcon
+                icon="lucide:trash-2"
+                :size="18"
+                class="cursor-pointer text-red-500"
+                @click="deleteVariable(index, configForm.outVariables)"
+              />
+            </div>
+          </div>
+          <ElButton
+            link
+            @click="addVariable(configForm.outVariables)"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="lucide:plus" />
+            </template>
+            添加一个
+          </ElButton>
+        </ElFormItem>
+        <ElFormItem label="子流程发起人" name="startUserType">
+          <ElRadioGroup v-model="configForm.startUserType">
+            <ElRadio
+              v-for="item in CHILD_PROCESS_START_USER_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem
+          v-if="
+            configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM
+          "
+          label="子流程发起人字段"
+          name="startUserFormField"
+        >
+          <ElSelect v-model="configForm.startUserFormField" clearable>
+            <ElOption
+              v-for="(field, fIdx) in startUserFormFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+            >
+              {{ field.title }}
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          v-if="
+            configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM
+          "
+          label="当子流程发起人为空时"
+          name="startUserEmptyType"
+        >
+          <ElRadioGroup v-model="configForm.startUserEmptyType">
+            <ElRadio
+              v-for="item in CHILD_PROCESS_START_USER_EMPTY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+
+        <ElDivider>超时设置</ElDivider>
+        <ElFormItem label="启用开关" prop="timeoutEnable">
+          <ElSwitch
+            v-model="configForm.timeoutEnable"
+            active-text="开启"
+            inactive-text="关闭"
+          />
+        </ElFormItem>
+        <div v-if="configForm.timeoutEnable">
+          <ElFormItem name="timeoutType">
+            <ElRadioGroup v-model="configForm.timeoutType">
+              <ElRadioButton
+                v-for="item in DELAY_TYPE"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </ElRadioButton>
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem
+            v-if="configForm.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION"
+          >
+            <ElRow :gutter="8">
+              <ElCol>
+                <span class="inline-flex h-8 items-center"> 当超过</span>
+              </ElCol>
+              <ElCol>
+                <ElFormItem name="timeDuration">
+                  <ElInputNumber
+                    class="w-24"
+                    v-model="configForm.timeDuration"
+                    :min="1"
+                    controls-position="right"
+                  />
+                </ElFormItem>
+              </ElCol>
+              <ElCol>
+                <ElSelect v-model="configForm.timeUnit" class="w-24">
+                  <ElOption
+                    v-for="item in TIME_UNIT_TYPES"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </ElOption>
+                </ElSelect>
+              </ElCol>
+              <ElCol>
+                <span class="inline-flex h-8 items-center">后进入下一节点</span>
+              </ElCol>
+            </ElRow>
+          </ElFormItem>
+          <ElFormItem
+            v-if="configForm.timeoutType === DelayTypeEnum.FIXED_DATE_TIME"
+            name="dateTime"
+          >
+            <ElRow :gutter="8">
+              <ElCol>
+                <ElDatePicker
+                  class="mr-2"
+                  v-model="configForm.dateTime"
+                  type="datetime"
+                  placeholder="请选择日期和时间"
+                  value-format="YYYY-MM-DDTHH:mm:ss"
+                />
+              </ElCol>
+              <ElCol>
+                <span class="inline-flex h-8 items-center">
+                  后进入下一节点
+                </span>
+              </ElCol>
+            </ElRow>
+          </ElFormItem>
+        </div>
+
+        <ElDivider>多实例设置</ElDivider>
+        <ElFormItem label="启用开关" prop="multiInstanceEnable">
+          <ElSwitch
+            v-model="configForm.multiInstanceEnable"
+            active-text="开启"
+            inactive-text="关闭"
+          />
+        </ElFormItem>
+        <div v-if="configForm.multiInstanceEnable">
+          <ElFormItem
+            name="sequential"
+            label="是否串行"
+            label-align="left"
+            :label-col="{ span: 5 }"
+            :wrapper-col="{ span: 4 }"
+          >
+            <ElSwitch
+              v-model="configForm.sequential"
+              active-text="是"
+              inactive-text="否"
+            />
+          </ElFormItem>
+          <ElFormItem
+            name="approveRatio"
+            label="完成比例(%)"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 4 }"
+          >
+            <ElInputNumber
+              v-model="configForm.approveRatio"
+              :min="10"
+              :max="100"
+              :step="10"
+            />
+          </ElFormItem>
+          <ElFormItem
+            name="multiInstanceSourceType"
+            label="实例数量"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 12 }"
+          >
+            <ElSelect
+              v-model="configForm.multiInstanceSourceType"
+              @change="handleMultiInstanceSourceTypeChange"
+            >
+              <ElOption
+                v-for="item in CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY
+            "
+            name="multiInstanceSource"
+            label="固定数量"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 12 }"
+            :rules="{
+              required: true,
+              message: '固定数量不能为空',
+              trigger: 'change',
+            }"
+          >
+            <ElInputNumber v-model="configForm.multiInstanceSource" :min="1" />
+          </ElFormItem>
+          <ElFormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM
+            "
+            name="multiInstanceSource"
+            label="数字表单"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 12 }"
+            :rules="{
+              required: true,
+              message: '数字表单字段不能为空',
+              trigger: 'change',
+            }"
+          >
+            <ElSelect v-model="configForm.multiInstanceSource">
+              <ElOption
+                v-for="(field, fIdx) in digitalFormFieldOptions"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+              >
+                {{ field.title }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM
+            "
+            name="multiInstanceSource"
+            label="多选表单"
+            :rules="{
+              required: true,
+              message: '多选表单字段不能为空',
+              trigger: 'change',
+            }"
+          >
+            <ElSelect v-model="configForm.multiInstanceSource">
+              <ElOption
+                v-for="(field, fIdx) in multiFormFieldOptions"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+              >
+                {{ field.title }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+        </div>
+      </ElForm>
+    </div>
+  </Drawer>
+</template>
+
+<style scoped></style>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { ElInput } from 'element-plus';
+
+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 conditionRef = ref();
+const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
+
+/** 保存配置 */
+async function saveConfig() {
+  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;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: currentNode.value.name,
+  onConfirm: saveConfig,
+});
+
+function 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 showInput = ref(false);
+// 输入框的引用
+const inputRef = ref<HTMLInputElement | null>(null);
+// 监听 showInput 的变化，当变为true 时自动聚焦
+watch(showInput, (value) => {
+  if (value) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
+function clickIcon() {
+  showInput.value = true;
+}
+
+// 修改节点名称
+function changeNodeName() {
+  showInput.value = false;
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(
+      props.nodeIndex,
+      currentNode.value?.conditionSetting?.defaultFlow,
+    );
+}
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+<template>
+  <Drawer class="w-1/3">
+    <template #title>
+      <div class="flex items-center">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="currentNode.name"
+          :placeholder="currentNode.name"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ currentNode.name }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" />
+        </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>
+  </Drawer>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue

@@ -0,0 +1,506 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+import type { CopyTaskFormType } from '../../helpers';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({ name: 'CopyTaskNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  label =
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      ? `${label}(指定部门向上)`
+      : `${label}(发起人部门向上)`;
+  return label;
+});
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.COPY_TASK_NODE);
+
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+
+// 表单字段权限配置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  candidateStrategy: [
+    { required: true, message: '抄送人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText,
+  handleCandidateParam,
+  parseCandidateParam,
+} = useNodeForm(BpmNodeTypeEnum.COPY_TASK_NODE);
+
+const configForm = tempConfigForm as Ref<CopyTaskFormType>;
+// 抄送人策略，去掉发起人自选、发起人自审
+const copyUserStrategies = computed(() => {
+  return CANDIDATE_STRATEGY.filter(
+    (item) => item.value !== CandidateStrategy.START_USER,
+  );
+});
+
+// 改变抄送人设置策略
+function changeCandidateStrategy() {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+}
+
+// 保存配置
+async function saveConfig() {
+  activeTabName.value = 'user';
+  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.candidateParam = handleCandidateParam();
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  currentNode.value.showText = showText;
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  drawerApi.close();
+  return true;
+}
+
+// 显示抄送节点配置， 由父组件传过来
+function showCopyTaskNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  // 抄送人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+
+  drawerApi.open();
+}
+
+/** 批量更新权限 */
+function updatePermission(type: string) {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+}
+
+// 在组件初始化时对表单字段进行处理
+onMounted(() => {
+  // 可以在这里进行初始化操作
+});
+
+defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-1/3">
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <ElTabs v-model="activeTabName">
+      <ElTabPane :label="$t('message.copyTaskNodeConfig.copyUser')" name="user">
+        <div>
+          <ElForm
+            ref="formRef"
+            :model="configForm"
+            label-position="top"
+            :rules="formRules"
+          >
+            <ElFormItem label="抄送人设置" prop="candidateStrategy">
+              <ElRadioGroup
+                v-model="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <ElRow :gutter="8">
+                  <ElCol
+                    v-for="(dict, index) in copyUserStrategies"
+                    :key="index"
+                    :span="8"
+                  >
+                    <ElRadio :value="dict.value">
+                      {{ dict.label }}
+                    </ElRadio>
+                  </ElCol>
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <Select
+                v-model:value="configForm.roleIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <TreeSelect
+                v-model:value="configForm.deptIds"
+                :tree-data="deptTreeOptions"
+                :field-names="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+                empty-text="加载中，请稍候"
+                multiple
+                :check-strictly="true"
+                allow-clear
+                tree-checkable
+              />
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <Select
+                v-model:value="configForm.postIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <Select
+                v-model:value="configForm.userIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <Select
+                v-model:value="configForm.userGroups"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <Select v-model:value="configForm.formUser" clearable>
+                <SelectOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <Select v-model:value="configForm.formDept" clearable>
+                <SelectOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <Select v-model:value="configForm.deptLevel" clearable>
+                <SelectOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <Textarea v-model:value="configForm.expression" clearable />
+            </FormItem>
+          </ElForm>
+        </div>
+      </ElTabPane>
+      <ElTabPane
+        tab="表单字段权限"
+        key="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-base font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                        disabled
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </ElTabPane>
+    </ElTabs>
+  </Drawer>
+</template>

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

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElCol,
+  ElDatePicker,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import {
+  DELAY_TYPE,
+  DelayTypeEnum,
+  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, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.DELAY_TIMER_NODE);
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: FormRules = 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: '',
+});
+
+// 获取显示文本
+function 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 = `延迟<EFBFBD>?{configForm.value.dateTime.replace('T', ' ')}`;
+  }
+  return showText;
+}
+
+// 获取ISO时间格式
+function 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;
+}
+
+// 保存配置
+async function saveConfig() {
+  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,
+});
+
+// 显示延迟器节点配置，由父组件调用
+function 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-1/3">
+    <template #title>
+      <div class="flex items-center">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="mr-2 w-48"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" :size="16" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <ElForm
+        ref="formRef"
+        :model="configForm"
+        :rules="formRules"
+        label-position="top"
+      >
+        <ElFormItem label="延迟时间" prop="delayType">
+          <ElRadioGroup v-model="configForm.delayType">
+            <ElRadio
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
+        >
+          <ElRow :gutter="8">
+            <ElCol>
+              <ElFormItem prop="timeDuration">
+                <ElInputNumber
+                  class="w-28"
+                  v-model="configForm.timeDuration"
+                  :min="1"
+                />
+              </ElFormItem>
+            </ElCol>
+            <ElCol>
+              <ElSelect v-model="configForm.timeUnit" class="w-28">
+                <ElOption
+                  v-for="item in TIME_UNIT_TYPES"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                >
+                  {{ item.label }}
+                </ElOption>
+              </ElSelect>
+            </ElCol>
+            <ElCol>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </ElCol>
+          </ElRow>
+        </ElFormItem>
+        <ElFormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
+          prop="dateTime"
+        >
+          <ElRow :gutter="8">
+            <ElCol>
+              <ElDatePicker
+                class="mr-2"
+                v-model="configForm.dateTime"
+                type="datetime"
+                placeholder="请选择日期和时间"
+                value-format="YYYY-MM-DDTHH:mm:ss"
+              />
+            </ElCol>
+            <ElCol>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </ElCol>
+          </ElRow>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </Drawer>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { ConditionGroup } from '../../../consts';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { ConditionType, DEFAULT_CONDITION_GROUP_VALUE } from '../../../consts';
+import Condition from './condition.vue';
+
+defineOptions({ name: 'ConditionDialog' });
+
+const emit = defineEmits<{
+  updateCondition: [condition: object];
+}>();
+
+const conditionData = ref<{
+  conditionExpression?: string;
+  conditionGroups?: ConditionGroup;
+  conditionType: ConditionType;
+}>({
+  conditionType: ConditionType.RULE,
+  conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+});
+
+// 条件组件的引用
+const conditionRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  title: '条件配置',
+  destroyOnClose: true,
+  draggable: true,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // 获取传递的数据
+      const conditionObj = modalApi.getData();
+      if (conditionObj) {
+        conditionData.value.conditionType = conditionObj.conditionType;
+        conditionData.value.conditionExpression =
+          conditionObj.conditionExpression;
+        conditionData.value.conditionGroups = conditionObj.conditionGroups;
+      }
+    }
+  },
+  async onConfirm() {
+    // 校验表单
+    if (!conditionRef.value) return;
+    const valid = await conditionRef.value.validate().catch(() => false);
+    if (!valid) {
+      ElMessage.warning('请完善条件规则');
+      return;
+    }
+    // 设置完的条件传递给父组件
+    emit('updateCondition', conditionData.value);
+    modalApi.close();
+  },
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+/**
+ * 打开条件配置弹窗，不暴露 modalApi 给父组件
+ */
+function openModal(conditionObj: any) {
+  modalApi.setData(conditionObj).open();
+}
+
+// 暴露方法给父组件
+defineExpose({ openModal });
+</script>
+<template>
+  <Modal class="w-1/2">
+    <Condition ref="conditionRef" v-model="conditionData" />
+  </Modal>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { Ref } from 'vue';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon, Plus, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElCard,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSpace,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({
+  name: 'Condition',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const condition = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const formType = inject<Ref<number>>('formType'); // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    return !(
+      formType?.value === BpmModelFormType.CUSTOM &&
+      item.value === ConditionType.RULE
+    );
+  });
+});
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser();
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  conditionType: [
+    { required: true, message: '配置方式不能为空', trigger: 'change' },
+  ],
+  conditionExpression: [
+    {
+      required: true,
+      message: '条件表达式不能为空',
+      trigger: ['blur', 'change'],
+    },
+  ],
+});
+
+const formRef = ref(); // 表单 Ref
+
+/** 切换条件配置方式 */
+function changeConditionType() {
+  if (
+    condition.value.conditionType === ConditionType.RULE &&
+    !condition.value.conditionGroups
+  ) {
+    condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
+  }
+}
+
+function deleteConditionGroup(conditions: any, index: number) {
+  conditions.splice(index, 1);
+}
+
+function deleteConditionRule(condition: any, index: number) {
+  condition.rules.splice(index, 1);
+}
+
+function addConditionRule(condition: any, index: number) {
+  const rule = {
+    opCode: '==',
+    leftSide: undefined,
+    rightSide: '',
+  };
+  condition.rules.splice(index + 1, 0, rule);
+}
+
+function addConditionGroup(conditions: any) {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: undefined,
+        rightSide: '',
+      },
+    ],
+  };
+  conditions.push(condition);
+}
+
+async function validate() {
+  if (!formRef.value) return false;
+  return await formRef.value.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <ElForm ref="formRef" :model="condition" :rules="formRules">
+    <ElFormItem label="配置方式" name="conditionType">
+      <ElRadioGroup
+        v-model="condition.conditionType"
+        @change="changeConditionType"
+      >
+        <ElRadio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        condition.conditionType === ConditionType.RULE &&
+        condition.conditionGroups
+      "
+    >
+      <div class="mb-5 flex w-full justify-between">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <ElSwitch
+            v-model:checked="condition.conditionGroups.and"
+            checked-children="且"
+            un-checked-children="或"
+          />
+        </div>
+      </div>
+      <ElSpace direction="vertical" size="small" class="w-11/12 pl-1">
+        <template #split>
+          {{ condition.conditionGroups.and ? '且' : '或' }}
+        </template>
+        <ElCard
+          class="group relative w-full hover:border-blue-500"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="absolute left-0 top-0 z-[1] flex cursor-pointer opacity-0 group-hover:opacity-100"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <IconifyIcon
+              color="blue"
+              icon="lucide:circle-x"
+              class="size-4"
+              @click="
+                deleteConditionGroup(condition.conditionGroups.conditions, cIdx)
+              "
+            />
+          </div>
+          <template #extra>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <ElSwitch
+                  v-model:checked="equation.and"
+                  checked-children="且"
+                  un-checked-children="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <ElRow
+            :gutter="8"
+            class="mb-2"
+            v-for="(rule, rIdx) in equation.rules"
+            :key="rIdx"
+          >
+            <ElCol :span="8">
+              <ElFormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'leftSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <ElSelect
+                  v-model="rule.leftSide"
+                  allow-clear
+                  placeholder="请选择表单字段"
+                >
+                  <ElOption
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  >
+                    <ElTooltip
+                      title="表单字段非必填时不能作为流程分支条件"
+                      placement="right"
+                      v-if="!field.required"
+                    >
+                      <span>{{ field.title }}</span>
+                    </ElTooltip>
+                    <template v-else>{{ field.title }}</template>
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </ElCol>
+            <ElCol :span="6">
+              <ElSelect v-model="rule.opCode" placeholder="请选择操作符">
+                <ElOption
+                  v-for="operator in COMPARISON_OPERATORS"
+                  :key="operator.value"
+                  :label="operator.label"
+                  :value="operator.value"
+                >
+                  {{ operator.label }}
+                </ElOption>
+              </ElSelect>
+            </ElCol>
+            <ElCol :span="7">
+              <ElFormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'rightSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: ['blur', 'change'],
+                }"
+              >
+                <ElInput v-model="rule.rightSide" placeholder="请输入右值" />
+              </ElFormItem>
+            </ElCol>
+            <ElCol :span="3">
+              <div class="flex h-8 items-center">
+                <Trash2
+                  v-if="equation.rules.length > 1"
+                  class="mr-2 size-4 cursor-pointer text-red-500"
+                  @click="deleteConditionRule(equation, rIdx)"
+                />
+                <Plus
+                  class="size-4 cursor-pointer text-blue-500"
+                  @click="addConditionRule(equation, rIdx)"
+                />
+              </div>
+            </ElCol>
+          </ElRow>
+        </ElCard>
+      </ElSpace>
+      <div title="添加条件组" class="mt-4 cursor-pointer">
+        <Plus
+          class="size-6 text-blue-500"
+          @click="addConditionGroup(condition.conditionGroups?.conditions)"
+        />
+      </div>
+    </ElFormItem>
+    <ElFormItem
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      name="conditionExpression"
+    >
+      <ElInput
+        v-model="condition.conditionExpression"
+        placeholder="请输入条件表达式"
+        allow-clear
+        :auto-size="{ minRows: 3, maxRows: 6 }"
+      />
+    </ElFormItem>
+  </ElForm>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { HttpRequestParam } from '../../../consts';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCol,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import {
+  BPM_HTTP_REQUEST_PARAM_TYPES,
+  BpmHttpRequestParamTypeEnum,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({ name: 'HttpRequestParamSetting' });
+
+const props = defineProps({
+  header: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  body: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  bind: {
+    type: String,
+    required: true,
+  },
+});
+
+// 流程表单字段，发起人字段
+const formFieldOptions = useFormFieldsAndStartUser();
+
+/** 添加请求配置项 */
+function addHttpRequestParam(arr: HttpRequestParam[]) {
+  arr.push({
+    key: '',
+    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
+    value: '',
+  });
+}
+
+/** 删除请求配置项 */
+function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
+  arr.splice(index, 1);
+}
+</script>
+<template>
+  <ElFormItem label="请求头">
+    <ElRow :gutter="8" v-for="(item, index) in props.header" :key="index">
+      <ElCol :span="7">
+        <ElFormItem
+          :name="[bind, 'header', index, 'key']"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput placeholder="参数名不能为空" v-model="item.key" />
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="5">
+        <ElSelect v-model="item.type">
+          <ElOption
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          >
+            {{ types.label }}
+          </ElOption>
+        </ElSelect>
+      </ElCol>
+      <ElCol :span="10">
+        <ElFormItem
+          :name="[bind, 'header', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: ['blur', 'change'],
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <ElInput placeholder="请求头" v-model="item.value" />
+        </ElFormItem>
+        <ElFormItem
+          :name="[bind, 'header', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <ElSelect v-model="item.value" placeholder="请选择表单字段">
+            <ElOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            >
+              {{ field.title }}
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="2">
+        <div class="flex h-8 items-center">
+          <IconifyIcon
+            class="size-4 cursor-pointer text-red-500"
+            icon="lucide:trash-2"
+            @click="deleteHttpRequestParam(props.header, index)"
+          />
+        </div>
+      </ElCol>
+    </ElRow>
+    <ElButton
+      link
+      @click="addHttpRequestParam(props.header)"
+      class="flex items-center"
+    >
+      <template #icon>
+        <IconifyIcon class="size-4" icon="lucide:plus" />
+      </template>
+      添加一行
+    </ElButton>
+  </ElFormItem>
+  <ElFormItem label="请求体">
+    <ElRow :gutter="8" v-for="(item, index) in props.body" :key="index">
+      <ElCol :span="7">
+        <ElFormItem
+          :name="[bind, 'body', index, 'key']"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput placeholder="参数名" v-model="item.key" />
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="5">
+        <ElSelect v-model="item.type">
+          <ElOption
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          >
+            {{ types.label }}
+          </ElOption>
+        </ElSelect>
+      </ElCol>
+      <ElCol :span="10">
+        <ElFormItem
+          :name="[bind, 'body', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: ['blur', 'change'],
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <ElInput placeholder="参数值" v-model="item.value" />
+        </ElFormItem>
+        <ElFormItem
+          :name="[bind, 'body', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <ElSelect v-model="item.value" placeholder="请选择表单字段">
+            <ElOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            >
+              {{ field.title }}
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="2">
+        <div class="flex h-8 items-center">
+          <IconifyIcon
+            class="size-4 cursor-pointer text-red-500"
+            icon="lucide:trash-2"
+            @click="deleteHttpRequestParam(props.body, index)"
+          />
+        </div>
+      </ElCol>
+    </ElRow>
+    <ElButton
+      link
+      @click="addHttpRequestParam(props.body)"
+      class="flex items-center"
+    >
+      <template #icon>
+        <IconifyIcon class="size-4" icon="lucide:plus" />
+      </template>
+      添加一行
+    </ElButton>
+  </ElFormItem>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { toRefs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAlert,
+  ElButton,
+  ElCol,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import { useFormFields } from '../../../helpers';
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+defineOptions({ name: 'HttpRequestSetting' });
+
+const props = defineProps({
+  setting: {
+    type: Object,
+    required: true,
+  },
+  responseEnable: {
+    type: Boolean,
+    required: true,
+  },
+  formItemPrefix: {
+    type: String,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['update:setting']);
+
+const { setting } = toRefs(props);
+
+watch(
+  () => setting,
+  (val) => {
+    emits('update:setting', val);
+  },
+);
+
+/** 流程表单字段 */
+const formFields = useFormFields();
+
+/** 添加 HTTP 请求返回值设置项 */
+function addHttpResponseSetting(responseSetting: Record<string, string>[]) {
+  responseSetting.push({
+    key: '',
+    value: '',
+  });
+}
+
+/** 删除 HTTP 请求返回值设置项 */
+function deleteHttpResponseSetting(
+  responseSetting: Record<string, string>[],
+  index: number,
+) {
+  responseSetting.splice(index, 1);
+}
+</script>
+<template>
+  <ElFormItem>
+    <ElAlert
+      message="仅支持 POST 请求，以请求体方式接收参数"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+  </ElFormItem>
+  <!-- 请求地址-->
+  <ElFormItem
+    label="请求地址"
+    :name="[formItemPrefix, 'url']"
+    :rules="{
+      required: true,
+      message: '请求地址不能为空',
+      trigger: ['blur', 'change'],
+    }"
+  >
+    <ElInput v-model="setting.url" placeholder="请输入请求地址" />
+  </ElFormItem>
+  <!-- 请求头，请求体设置-->
+  <HttpRequestParamSetting
+    :header="setting.header"
+    :body="setting.body"
+    :bind="formItemPrefix"
+  />
+  <!-- 返回值设置-->
+  <div v-if="responseEnable">
+    <ElFormItem label="返回值">
+      <ElAlert
+        message="通过请求返回值, 可以修改流程表单的值"
+        type="warning"
+        show-icon
+        :closable="false"
+      />
+    </ElFormItem>
+    <ElFormItem>
+      <ElRow
+        :gutter="8"
+        v-for="(item, index) in setting.response"
+        :key="index"
+        class="mb-2"
+      >
+        <ElCol :span="10">
+          <ElFormItem
+            :name="[formItemPrefix, 'response', index, 'key']"
+            :rules="{
+              required: true,
+              message: '表单字段不能为空',
+              trigger: ['blur', 'change'],
+            }"
+          >
+            <ElSelect
+              v-model="item.key"
+              placeholder="请选择表单字段"
+              allow-clear
+            >
+              <ElOption
+                v-for="(field, fIdx) in formFields"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+                :disabled="!field.required"
+              >
+                {{ field.title }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem
+            :name="[formItemPrefix, 'response', index, 'value']"
+            :rules="{
+              required: true,
+              message: '请求返回字段不能为空',
+              trigger: ['blur', 'change'],
+            }"
+          >
+            <ElInput v-model="item.value" placeholder="请求返回字段" />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="2">
+          <div class="flex h-8 items-center">
+            <IconifyIcon
+              class="size-4 cursor-pointer text-red-500"
+              icon="lucide:trash-2"
+              @click="deleteHttpResponseSetting(setting.response!, index)"
+            />
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElButton
+        link
+        @click="addHttpResponseSetting(setting.response!)"
+        class="flex items-center"
+      >
+        <template #icon>
+          <IconifyIcon class="size-4" icon="lucide:plus" />
+        </template>
+        添加一行
+      </ElButton>
+    </ElFormItem>
+  </div>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  ElAlert,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElSwitch,
+  ElText,
+} from 'element-plus';
+
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  formFieldOptions: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const listenerFormRef = ref();
+
+const configForm = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const taskListener = ref([
+  {
+    name: '创建任务',
+    type: 'Create',
+  },
+  {
+    name: '指派任务执行人员',
+    type: 'Assign',
+  },
+  {
+    name: '完成任务',
+    type: 'Complete',
+  },
+]);
+
+async function validate() {
+  if (!listenerFormRef.value) return false;
+  return await listenerFormRef.value.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <ElForm ref="listenerFormRef" :model="configForm">
+    <div
+      v-for="(listener, listenerIdx) in taskListener"
+      :key="listenerIdx"
+      class="pl-2"
+    >
+      <ElDivider orientation="left">
+        <ElText tag="b" size="large">
+          {{ listener.name }}
+        </ElText>
+      </ElDivider>
+      <ElFormItem>
+        <ElSwitch
+          v-model="configForm[`task${listener.type}ListenerEnable`]"
+          active-text="开启"
+          inactive-text="关闭"
+        />
+      </ElFormItem>
+      <div v-if="configForm[`task${listener.type}ListenerEnable`]">
+        <ElFormItem>
+          <ElAlert
+            title="仅支持 POST 请求，以请求体方式接收参数"
+            type="warning"
+            show-icon
+            :closable="false"
+          />
+        </ElFormItem>
+        <ElFormItem
+          label="请求地址"
+          :name="`task${listener.type}ListenerPath`"
+          :rules="{
+            required: true,
+            message: '请求地址不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput v-model="configForm[`task${listener.type}ListenerPath`]" />
+        </ElFormItem>
+        <HttpRequestParamSetting
+          :header="configForm[`task${listener.type}Listener`].header"
+          :body="configForm[`task${listener.type}Listener`].body"
+          :bind="`task${listener.type}Listener`"
+        />
+      </div>
+    </div>
+  </ElForm>
+</template>

apps/web-ele/src/views/bpm/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 { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import { ConditionType } 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, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.ROUTER_BRANCH_NODE);
+const routerGroups = ref<RouterSetting[]>([]);
+const nodeOptions = ref<any[]>([]);
+const conditionRef = ref<any[]>([]);
+const formRef = ref();
+
+/** 校验节点配置 */
+async function validateConfig() {
+  // 校验路由分支选择
+  const routeIdValid = await formRef.value.validate().catch(() => false);
+  if (!routeIdValid) {
+    ElMessage.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;
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  // 校验配置
+  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,
+});
+
+/** 打开路由节点配置抽屉，由父组件调用 */
+function openDrawer(node: SimpleFlowNode) {
+  nodeOptions.value = [];
+  getRouterNode(processNodeTree?.value);
+  routerGroups.value = [];
+  nodeName.value = node.name;
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups;
+  }
+  drawerApi.open();
+}
+
+/** 获取显示文本 */
+function getShowText() {
+  if (
+    !routerGroups.value ||
+    !Array.isArray(routerGroups.value) ||
+    routerGroups.value.length <= 0
+  ) {
+    ElMessage.warning('请配置路由！');
+    return '';
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      ElMessage.warning('请完善路由配置项！');
+      return '';
+    }
+    if (
+      route.conditionType === ConditionType.EXPRESSION &&
+      !route.conditionExpression
+    ) {
+      ElMessage.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) {
+            ElMessage.warning('请完善路由配置项！');
+            return '';
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`;
+}
+
+/** 添加路由分支 */
+function addRouterGroup() {
+  routerGroups.value.push({
+    nodeId: undefined,
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: undefined,
+              rightSide: '',
+            },
+          ],
+        },
+      ],
+    },
+  });
+}
+
+/** 删除路由分支 */
+function deleteRouterGroup(index: number) {
+  routerGroups.value.splice(index, 1);
+}
+
+/** 递归获取所有节点 */
+function getRouterNode(node: any) {
+  // TODO 最好还需要满足以下要求：
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break;
+    if (
+      node.type !== BpmNodeTypeEnum.ROUTER_BRANCH_NODE &&
+      node.type !== BpmNodeTypeEnum.CONDITION_NODE
+    ) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id,
+      });
+    }
+    if (!node.childNode || node.type === BpmNodeTypeEnum.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-2/5">
+    <template #title>
+      <div class="flex items-center">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" />
+        </div>
+      </div>
+    </template>
+
+    <ElForm ref="formRef" :model="{ routerGroups }">
+      <ElCard
+        :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>
+              <ElFormItem
+                class="mb-0 ml-4 inline-block w-48"
+                :name="['routerGroups', index, 'nodeId']"
+                :rules="{
+                  required: true,
+                  message: '路由目标节点不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <ElSelect
+                  v-model="item.nodeId"
+                  placeholder="请选择路由目标节点"
+                  clearable
+                >
+                  <ElOption
+                    v-for="node in nodeOptions"
+                    :key="node.value"
+                    :value="node.value"
+                  >
+                    {{ node.label }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <ElButton
+              v-if="routerGroups.length > 1"
+              circle
+              class="flex items-center justify-center"
+              @click="deleteRouterGroup(index)"
+            >
+              <template #icon>
+                <IconifyIcon icon="lucide:x" />
+              </template>
+            </ElButton>
+          </div>
+        </template>
+        <Condition
+          :ref="(el) => (conditionRef[index] = el)"
+          :model-value="routerGroups[index]"
+          @update:model-value="(val) => (routerGroups[index] = val)"
+        />
+      </ElCard>
+    </ElForm>
+
+    <ElRow class="mt-4">
+      <ElCol :span="24">
+        <ElButton class="flex items-center p-0" link @click="addRouterGroup">
+          <template #icon>
+            <IconifyIcon icon="lucide:settings" />
+          </template>
+          新增路由分支
+        </ElButton>
+      </ElCol>
+    </ElRow>
+  </Drawer>
+</template>

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

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElCol,
+  ElInput,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+  ElText,
+  ElTooltip,
+} from 'element-plus';
+
+import { FieldPermissionType, START_USER_BUTTON_SETTING } from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({ name: 'StartUserNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 可发起流程的用户编号
+const startUserIds = inject<Ref<any[]>>('startUserIds');
+// 可发起流程的部门编号
+const startDeptIds = inject<Ref<any[]>>('startDeptIds');
+// 用户列表
+const userOptions = inject<Ref<SystemUserApi.User[]>>('userList');
+// 部门列表
+const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.START_USER_NODE);
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.WRITE);
+
+function getUserNicknames(userIds: number[]): string {
+  if (!userIds || userIds.length === 0) {
+    return '';
+  }
+  const nicknames: string[] = [];
+  userIds.forEach((userId) => {
+    const found = userOptions?.value.find((item) => item.id === userId);
+    if (found && found.nickname) {
+      nicknames.push(found.nickname);
+    }
+  });
+  return nicknames.join(',');
+}
+
+function getDeptNames(deptIds: number[]): string {
+  if (!deptIds || deptIds.length === 0) {
+    return '';
+  }
+  const deptNames: string[] = [];
+  deptIds.forEach((deptId) => {
+    const found = deptOptions?.value.find((item) => item.id === deptId);
+    if (found && found.name) {
+      deptNames.push(found.name);
+    }
+  });
+  return deptNames.join(',');
+}
+
+// 使用 VbenDrawer
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  onCancel() {
+    drawerApi.setState({ isOpen: false });
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 保存配置
+async function saveConfig() {
+  activeTabName.value = 'user';
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = '已设置';
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  // 设置发起人的按钮权限
+  currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
+  drawerApi.setState({ isOpen: false });
+  return true;
+}
+
+// 显示发起人节点配置，由父组件传过来
+function showStartUserNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+  drawerApi.open();
+}
+
+/** 批量更新权限 */
+function updatePermission(type: string) {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+}
+
+/**
+ * 暴露方法给父组件
+ */
+defineExpose({ showStartUserNodeConfig });
+</script>
+<template>
+  <Drawer>
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon
+            class="ml-1"
+            icon="lucide:edit-3"
+            :size="16"
+            @click="clickIcon()"
+          />
+        </div>
+      </div>
+    </template>
+    <ElTabs v-model="activeTabName" type="card">
+      <ElTabPane label="权限" name="user">
+        <ElText
+          v-if="
+            (!startUserIds || startUserIds.length === 0) &&
+            (!startDeptIds || startDeptIds.length === 0)
+          "
+        >
+          全部成员可以发起流程
+        </ElText>
+        <div v-else-if="startUserIds && startUserIds.length > 0">
+          <ElText v-if="startUserIds.length === 1">
+            {{ getUserNicknames(startUserIds) }} 可发起流程
+          </ElText>
+          <ElText v-else>
+            <ElTooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getUserNicknames(startUserIds)"
+            >
+              {{ getUserNicknames(startUserIds.slice(0, 2)) }} 等
+              {{ startUserIds.length }} 人可发起流程
+            </ElTooltip>
+          </ElText>
+        </div>
+        <div v-else-if="startDeptIds && startDeptIds.length > 0">
+          <ElText v-if="startDeptIds.length === 1">
+            {{ getDeptNames(startDeptIds) }} 可发起流程
+          </ElText>
+          <ElText v-else>
+            <ElTooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getDeptNames(startDeptIds)"
+            >
+              {{ getDeptNames(startDeptIds.slice(0, 2)) }} 等
+              {{ startDeptIds.length }} 个部门可发起流程
+            </ElTooltip>
+          </ElText>
+        </div>
+      </ElTabPane>
+      <ElTabPane
+        label="表单字段权限"
+        name="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-base font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <ElRow class="border border-gray-200 px-4 py-3">
+            <ElCol :span="8" class="font-bold">字段名称</ElCol>
+            <ElCol :span="16">
+              <ElRow>
+                <ElCol :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </ElCol>
+                <ElCol :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </ElCol>
+                <ElCol :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </ElCol>
+              </ElRow>
+            </ElCol>
+          </ElRow>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <ElRow class="border border-t-0 border-gray-200 px-4 py-2">
+              <ElCol :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </ElCol>
+              <ElCol :span="16">
+                <ElRadioGroup v-model="item.permission" class="w-full">
+                  <ElRow>
+                    <ElCol :span="8" class="flex items-center justify-center">
+                      <ElRadio :value="FieldPermissionType.READ" />
+                    </ElCol>
+                    <ElCol :span="8" class="flex items-center justify-center">
+                      <ElRadio :value="FieldPermissionType.WRITE" />
+                    </ElCol>
+                    <ElCol :span="8" class="flex items-center justify-center">
+                      <ElRadio :value="FieldPermissionType.NONE" />
+                    </ElCol>
+                  </ElRow>
+                </ElRadioGroup>
+              </ElCol>
+            </ElRow>
+          </div>
+        </div>
+      </ElTabPane>
+    </ElTabs>
+  </Drawer>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue

@@ -0,0 +1,688 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+// SelectValue type removed - use string | number | boolean directly
+
+import type {
+  FormTriggerSetting,
+  SimpleFlowNode,
+  TriggerSetting,
+} from '../../consts';
+
+import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRow,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import {
+  DEFAULT_CONDITION_GROUP_VALUE,
+  TRIGGER_TYPES,
+  TriggerTypeEnum,
+} from '../../consts';
+import {
+  getConditionShowText,
+  useFormFields,
+  useFormFieldsAndStartUser,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import ConditionDialog from './modules/condition-dialog.vue';
+import HttpRequestSetting from './modules/http-request-setting.vue';
+
+defineOptions({
+  name: 'TriggerNodeConfig',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const { proxy } = getCurrentInstance() as any;
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.TRIGGER_NODE);
+// 触发器表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
+  'httpRequestSetting.url': [
+    { required: true, message: '请求地址不能为空', trigger: 'blur' },
+  ],
+});
+
+// 触发器配置表单数据
+const configForm = ref<TriggerSetting>({
+  type: TriggerTypeEnum.HTTP_REQUEST,
+  httpRequestSetting: {
+    url: '',
+    header: [],
+    body: [],
+    response: [],
+  },
+  formSettings: [
+    {
+      conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      updateFormFields: {},
+      deleteFields: [],
+    },
+  ],
+});
+// 流程表单字段
+const formFields = useFormFields();
+
+// 可选的修改的表单字段
+const optionalUpdateFormFields = computed(() => {
+  return formFields.map((field) => ({
+    title: field.title,
+    field: field.field,
+    disabled: false,
+  }));
+});
+
+let originalSetting: TriggerSetting | undefined;
+
+/** 触发器类型改变了 */
+function changeTriggerType() {
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_CALLBACK &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_UPDATE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: {},
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_DELETE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: undefined,
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+  }
+}
+
+/** 添加新的修改表单设置 */
+function addFormSetting() {
+  configForm.value.formSettings!.push({
+    conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+    updateFormFields: {},
+    deleteFields: [],
+  });
+}
+
+/** 删除修改表单设置 */
+function deleteFormSetting(index: number) {
+  configForm.value.formSettings!.splice(index, 1);
+}
+
+/** 添加条件配置 */
+function addFormSettingCondition(
+  index: number,
+  formSetting: FormTriggerSetting,
+) {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
+}
+
+/** 删除条件配置 */
+function deleteFormSettingCondition(formSetting: FormTriggerSetting) {
+  formSetting.conditionType = undefined;
+}
+
+/** 打开条件配置弹窗 */
+function openFormSettingCondition(
+  index: number,
+  formSetting: FormTriggerSetting,
+) {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
+}
+
+/** 处理条件配置保存 */
+function handleConditionUpdate(index: number, condition: any) {
+  if (configForm.value.formSettings![index]) {
+    configForm.value.formSettings![index].conditionType =
+      condition.conditionType;
+    configForm.value.formSettings![index].conditionExpression =
+      condition.conditionExpression;
+    configForm.value.formSettings![index].conditionGroups =
+      condition.conditionGroups;
+  }
+}
+// 包含发起人字段的表单字段
+const includeStartUserFormFields = useFormFieldsAndStartUser();
+/** 条件配置展示 */
+function showConditionText(formSetting: FormTriggerSetting) {
+  return getConditionShowText(
+    formSetting.conditionType,
+    formSetting.conditionExpression,
+    formSetting.conditionGroups,
+    includeStartUserFormFields,
+  );
+}
+
+/** 添加修改字段设置<E8AEBE>?*/
+function addFormFieldSetting(formSetting: FormTriggerSetting) {
+  if (!formSetting) return;
+  if (!formSetting.updateFormFields) {
+    formSetting.updateFormFields = {};
+  }
+  formSetting.updateFormFields[''] = undefined;
+}
+
+/** 更新字段 KEY */
+function updateFormFieldKey(
+  formSetting: FormTriggerSetting,
+  oldKey: string,
+  newKey: number | string,
+) {
+  if (!formSetting?.updateFormFields || !newKey) return;
+  const value = formSetting.updateFormFields[oldKey];
+  delete formSetting.updateFormFields[oldKey];
+  formSetting.updateFormFields[String(newKey)] = value;
+}
+
+/** 删除修改字段设置 */
+function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
+  if (!formSetting?.updateFormFields) return;
+  delete formSetting.updateFormFields[key];
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  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;
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理修改字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.updateFormFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理删除字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.deleteFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      configForm.value.formSettings = undefined;
+
+      break;
+    }
+    // No default
+  }
+  currentNode.value.triggerSetting = configForm.value;
+  drawerApi.close();
+  return true;
+}
+
+/** 获取节点展示内容 */
+function getShowText(): string {
+  let showText = '';
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (!setting.deleteFields || setting.deleteFields.length === 0) {
+          ElMessage.warning(`请选择表单设置${index + 1}要删除的字段`);
+          return '';
+        }
+      }
+      showText = '删除表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (
+          !setting.updateFormFields ||
+          Object.keys(setting.updateFormFields).length === 0
+        ) {
+          ElMessage.warning(`请添加表单设置${index + 1}的修改字段`);
+          return '';
+        }
+      }
+      showText = '修改表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_CALLBACK:
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      showText = `${configForm.value.httpRequestSetting?.url}`;
+
+      break;
+    }
+    // No default
+  }
+  return showText;
+}
+
+/** 显示触发器节点配置，由父组件传过来 */
+function showTriggerNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  originalSetting = node.triggerSetting
+    ? cloneDeep(node.triggerSetting)
+    : undefined;
+  if (node.triggerSetting) {
+    configForm.value = {
+      type: node.triggerSetting.type,
+      httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      },
+      formSettings: node.triggerSetting.formSettings || [
+        {
+          conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          updateFormFields: {},
+          deleteFields: [],
+        },
+      ],
+    };
+  }
+  drawerApi.open();
+}
+
+// 暴露方法给父组件
+defineExpose({ showTriggerNodeConfig });
+
+onMounted(() => {
+  // 初始化可能需要的操作
+});
+</script>
+<template>
+  <Drawer class="w-1/3">
+    <template #title>
+      <div class="config-header">
+        <AInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div>
+      <ElForm
+        ref="formRef"
+        :model="configForm"
+        label-position="top"
+        :rules="formRules"
+      >
+        <ElFormItem label="触发器类型" prop="type">
+          <ElSelect v-model="configForm.type" @change="changeTriggerType">
+            <ElOption
+              v-for="(item, index) in TRIGGER_TYPES"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+            >
+              {{ item.label }}
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+        <!-- HTTP 请求触发<EFBFBD>?-->
+        <div
+          v-if="
+            [
+              TriggerTypeEnum.HTTP_REQUEST,
+              TriggerTypeEnum.HTTP_CALLBACK,
+            ].includes(configForm.type) && configForm.httpRequestSetting
+          "
+        >
+          <HttpRequestSetting
+            v-model:setting="configForm.httpRequestSetting"
+            :response-enable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
+            form-item-prefix="httpRequestSetting"
+          />
+        </div>
+
+        <!-- 表单数据修改触发<E8A7A6>?-->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <ElCard class="mt-4">
+              <template #title>
+                <div class="flex w-full items-center justify-between">
+                  <span>修改表单设置 {{ index + 1 }}</span>
+                  <ElButton
+                    v-if="configForm.formSettings!.length > 1"
+                    shape="circle"
+                    class="flex items-center justify-center"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:x" />
+                    </template>
+                  </ElButton>
+                </div>
+              </template>
+
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <ElRow>
+                <ElCol :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <ElTag
+                      color="success"
+                      closable
+                      class="text-sm"
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </ElTag>
+                  </div>
+                  <ElButton
+                    v-else
+                    type="primary"
+                    link
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:link" />
+                    </template>
+                    添加条件
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+              <ElDivider>修改表单字段设置</ElDivider>
+              <!-- 表单字段修改设置 -->
+              <ElRow
+                :gutter="8"
+                v-for="key in Object.keys(formSetting.updateFormFields || {})"
+                :key="key"
+              >
+                <ElCol :span="8">
+                  <ElFormItem>
+                    <ElSelect
+                      :value="key || undefined"
+                      @change="
+                        (newKey) => updateFormFieldKey(formSetting, key, newKey)
+                      "
+                      placeholder="请选择表单字段"
+                      :disabled="key !== ''"
+                      allow-clear
+                    >
+                      <ElOption
+                        v-for="(field, fIdx) in optionalUpdateFormFields"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                        :disabled="field.disabled"
+                      >
+                        {{ field.title }}
+                      </ElOption>
+                    </ElSelect>
+                  </ElFormItem>
+                </ElCol>
+                <ElCol :span="4">
+                  <ElFormItem>的值设置为</ElFormItem>
+                </ElCol>
+                <ElCol :span="10">
+                  <ElFormItem
+                    :name="['formSettings', index, 'updateFormFields', key]"
+                    :rules="{
+                      required: true,
+                      message: '值不能为空',
+                      trigger: 'blur',
+                    }"
+                  >
+                    <ElInput
+                      v-model="formSetting.updateFormFields![key]"
+                      placeholder="请输入值"
+                      clearable
+                      :disabled="!key"
+                    />
+                  </ElFormItem>
+                </ElCol>
+                <ElCol :span="2">
+                  <div class="flex h-8 items-center">
+                    <IconifyIcon
+                      class="size-4 cursor-pointer text-red-500"
+                      icon="lucide:trash-2"
+                      @click="deleteFormFieldSetting(formSetting, key)"
+                    />
+                  </div>
+                </ElCol>
+              </ElRow>
+
+              <!-- 添加表单字段按钮 -->
+              <ElRow>
+                <ElCol :span="24">
+                  <ElButton
+                    type="primary"
+                    link
+                    class="flex items-center p-0"
+                    @click="addFormFieldSetting(formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:file-cog" />
+                    </template>
+                    添加修改字段
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+            </ElCard>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <ElRow class="mt-6">
+            <ElCol :span="24">
+              <ElButton
+                class="flex items-center p-0"
+                link
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="lucide:settings" />
+                </template>
+                添加设置
+              </ElButton>
+            </ElCol>
+          </ElRow>
+        </div>
+
+        <!-- 表单数据删除触发<E8A7A6>?-->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <ElCard class="mt-4">
+              <template #title>
+                <div class="flex w-full items-center justify-between">
+                  <span>删除表单设置 {{ index + 1 }}</span>
+                  <ElButton
+                    v-if="configForm.formSettings!.length > 1"
+                    shape="circle"
+                    class="flex items-center justify-center"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:x" />
+                    </template>
+                  </ElButton>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <ElRow>
+                <ElCol :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <ElTag
+                      color="success"
+                      closable
+                      class="text-sm"
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </ElTag>
+                  </div>
+                  <ElButton
+                    v-else
+                    type="primary"
+                    link
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:link" />
+                    </template>
+                    添加条件
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+
+              <ElDivider>删除表单字段设置</ElDivider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <ElSelect
+                  v-model:value="formSetting.deleteFields"
+                  mode="multiple"
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <ElOption
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </ElOption>
+                </ElSelect>
+              </div>
+            </ElCard>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <ElRow class="mt-6">
+            <ElCol :span="24">
+              <ElButton
+                class="flex items-center p-0"
+                link
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="lucide:settings" />
+                </template>
+                添加设置
+              </ElButton>
+            </ElCol>
+          </ElRow>
+        </div>
+      </ElForm>
+    </div>
+  </Drawer>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/utils.ts

@@ -0,0 +1,48 @@
+import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
+
+/** 获取条件节点默认的名称 */
+export function getDefaultConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+}
+
+/** 获取包容分支条件节点默认的名称 */
+export function getDefaultInclusiveConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+}
+
+/** 转换时间单位字符串为枚举值 */
+export function convertTimeUnit(strTimeUnit: string) {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE;
+  }
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR;
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY;
+  }
+  return TimeUnitType.HOUR;
+}
+
+/** 根据审批类型获取对应的文本描述 */
+export function getApproveTypeText(approveType: ApproveType): string {
+  let approveTypeText = '';
+  APPROVE_TYPE.forEach((item) => {
+    if (item.value === approveType) {
+      approveTypeText = item.label;
+    }
+  });
+  return approveTypeText;
+}

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import ChildProcessNodeConfig from '../nodes-config/child-process-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ChildProcessNode' });
+
+const props = defineProps<{
+  flowNode: SimpleFlowNode;
+}>();
+
+/** 定义事件，更新父组件 */
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+/** 监控节点的变化 */
+const currentNode = useWatchNode(props);
+
+/** 节点名称编辑 */
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.CHILD_PROCESS_NODE,
+);
+
+// 节点配置 Ref
+const nodeConfigRef = ref();
+
+/** 打开节点配置 */
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeConfigRef.value.showChildProcessNodeConfig(currentNode.value);
+}
+
+/** 删除节点。更新当前节点为孩子节点 */
+function 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 ${currentNode.childProcessSetting?.async === true ? 'async-child-process' : 'child-process'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.childProcessSetting?.async === true ? 'icon-async-child-process' : 'icon-child-process'}`"
+            >
+            </span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            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(BpmNodeTypeEnum.CHILD_PROCESS_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <ChildProcessNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeConfigRef"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import CopyTaskNodeConfig from '../nodes-config/copy-task-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'CopyTaskNode',
+});
+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, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.COPY_TASK_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showCopyTaskNodeConfig(currentNode.value);
+  nodeSetting.value.openDrawer();
+}
+
+// 删除节点。更新当前节点为孩子节点
+function 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 copy-task">
+            <span class="iconfont icon-copy"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            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(BpmNodeTypeEnum.COPY_TASK_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } 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, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.DELAY_TIMER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function 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>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            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(BpmNodeTypeEnum.DELAY_TIMER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :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>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/end-event-node.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useTaskStatusClass, useWatchNode } from '../../helpers';
+import ProcessInstanceModal from './modules/process-instance-modal.vue';
+
+defineOptions({ name: 'EndEventNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const processInstance = inject<Ref<any>>('processInstance', ref({}));
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: ProcessInstanceModal,
+  destroyOnClose: true,
+});
+
+function nodeClick() {
+  if (readonly && processInstance && processInstance.value) {
+    const processInstanceInfo = [
+      {
+        startUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis,
+      },
+    ];
+    modalApi
+      .setData(processInstanceInfo)
+      .setState({ title: '流程信息' })
+      .open();
+  }
+}
+</script>
+<template>
+  <div class="end-node-wrapper">
+    <div
+      class="end-node-box cursor-pointer"
+      :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      @click="nodeClick"
+    >
+      <span class="node-fixed-name" title="结束">结束</span>
+    </div>
+  </div>
+  <!-- 流程信息弹窗 -->
+  <Modal />
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue

@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+} from '../../consts';
+import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
+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[],
+    currentNode: 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 inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
+const showInputs = ref<boolean[]>([]);
+
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+
+// 修改节点名称
+function changeNodeName(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+function conditionNodeConfig(nodeId: string) {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+}
+
+// 新增条件
+function 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: BpmNodeTypeEnum.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function 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);
+    }
+  }
+}
+
+// 移动节点
+function 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;
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === BpmNodeTypeEnum.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>
+      <ElButton v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </ElButton>
+      <!-- 排他网关节点下面可以多个分支，每个分支第一个节点是条件节点 NodeType.CONDITION_NODE -->
+      <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]">
+                  <ElInput
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
+                    type="text"
+                    class="editable-title-input"
+                    @blur="changeNodeName(index)"
+                    @keyup.enter="changeNodeName(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(BpmNodeTypeEnum.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="lucide:circle-x"
+                    :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="lucide:chevron-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="lucide:chevron-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 条件节点配置 -->
+        <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>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+} from '../../consts';
+import {
+  getDefaultInclusiveConditionNodeName,
+  useTaskStatusClass,
+} from '../../helpers';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.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[],
+    currentNode: 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 inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
+const showInputs = ref<boolean[]>([]);
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+// 修改节点名称
+function changeNodeName(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultInclusiveConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+function conditionNodeConfig(nodeId: string) {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+}
+
+// 新增条件
+function 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: BpmNodeTypeEnum.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function 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);
+    }
+  }
+}
+
+// 移动节点
+function 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;
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === BpmNodeTypeEnum.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>
+      <ElButton v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </ElButton>
+      <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]">
+                  <ElInput
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
+                    type="text"
+                    class="editable-title-input"
+                    @blur="changeNodeName(index)"
+                    @keyup.enter="changeNodeName(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(BpmNodeTypeEnum.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="lucide:circle-x"
+                    :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="lucide:chevron-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="lucide:chevron-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 条件节点配置 -->
+        <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>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-data.ts

@@ -0,0 +1,56 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 流程实例列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'startUser',
+      title: '发起人',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.startUser?.nickname;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.startUser?.deptName;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '开始时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 90,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+      },
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 100,
+      formatter: 'formatPast2',
+    },
+  ];
+}

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useGridColumns } from './process-instance-data';
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    border: true,
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const data = modalApi.getData<any[]>();
+      // 填充列表数据
+      await gridApi.setGridOptions({ data });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/4">
+    <Grid />
+  </Modal>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-data.ts

@@ -0,0 +1,61 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 审批记录列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'assigneeUser',
+      title: '审批人',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.assigneeUser?.deptName || row.ownerUser?.deptName;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '开始时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 90,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 160,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 100,
+      formatter: 'formatPast2',
+    },
+  ];
+}

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useGridColumns } from './task-list-data';
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    border: true,
+    height: 'auto',
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const data = modalApi.getData<any[]>();
+      // 填充列表数据
+      await gridApi.setGridOptions({ data });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/4">
+    <Grid />
+  </Modal>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/node-handler.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElMessage, ElPopover } from 'element-plus';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_NAME,
+  RejectHandlerType,
+} from '../../consts';
+
+defineOptions({
+  name: 'NodeHandler',
+});
+
+const props = defineProps({
+  childNode: {
+    type: Object as () => SimpleFlowNode,
+    default: null,
+  },
+  currentNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['update:childNode']);
+const popoverShow = ref(false);
+const readonly = inject<Boolean>('readonly'); // 是否只读
+
+function addNode(type: number) {
+  // 校验：条件分支、包容分支后面，不允许直接添加并行分支
+  if (
+    type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE &&
+    [
+      BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
+      BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
+    ].includes(props.currentNode?.type)
+  ) {
+    ElMessage.error('条件分支、包容分支后面，不允许直接添加并行分支');
+    return;
+  }
+
+  popoverShow.value = false;
+  if (
+    type === BpmNodeTypeEnum.USER_TASK_NODE ||
+    type === BpmNodeTypeEnum.TRANSACTOR_NODE
+  ) {
+    const id = `Activity_${generateUUID()}`;
+    const data: SimpleFlowNode = {
+      id,
+      name: NODE_DEFAULT_NAME.get(type) as string,
+      showText: '',
+      type,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      // 超时处理
+      rejectHandler: {
+        type: RejectHandlerType.FINISH_PROCESS,
+      },
+      timeoutHandler: {
+        enable: false,
+      },
+      assignEmptyHandler: {
+        type: AssignEmptyHandlerType.APPROVE,
+      },
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      childNode: props.childNode,
+      taskCreateListener: {
+        enable: false,
+      },
+      taskAssignListener: {
+        enable: false,
+      },
+      taskCompleteListener: {
+        enable: false,
+      },
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.COPY_TASK_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.COPY_TASK_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '条件分支',
+      type: BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '条件1',
+          showText: '',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '并行分支',
+      type: BpmNodeTypeEnum.PARALLEL_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行1',
+          showText: '无需配置条件同时执行',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行2',
+          showText: '无需配置条件同时执行',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '包容分支',
+      type: BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '包容条件1',
+          showText: '',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.DELAY_TIMER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.DELAY_TIMER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      id: `GateWay_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.TRIGGER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.TRIGGER_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.TRIGGER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.CHILD_PROCESS_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.CHILD_PROCESS_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.CHILD_PROCESS_NODE,
+      childNode: props.childNode,
+      childProcessSetting: {
+        calledProcessDefinitionKey: '',
+        calledProcessDefinitionName: '',
+        async: false,
+        skipStartUserNode: false,
+        startUserSetting: {
+          type: 1,
+        },
+        timeoutSetting: {
+          enable: false,
+        },
+        multiInstanceSetting: {
+          enable: false,
+        },
+      },
+    };
+    emits('update:childNode', data);
+  }
+}
+</script>
+<template>
+  <div class="node-handler-wrapper">
+    <div class="node-handler">
+      <ElPopover
+        trigger="hover"
+        placement="right"
+        width="auto"
+        v-if="!readonly"
+      >
+        <div class="handler-item-wrapper">
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.USER_TASK_NODE)"
+          >
+            <div class="approve handler-item-icon">
+              <span class="iconfont icon-approve icon-size"></span>
+            </div>
+            <div class="handler-item-text">审批人</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.TRANSACTOR_NODE)"
+          >
+            <div class="transactor handler-item-icon">
+              <span class="iconfont icon-transactor icon-size"></span>
+            </div>
+            <div class="handler-item-text">办理人</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.COPY_TASK_NODE)"
+          >
+            <div class="handler-item-icon copy">
+              <span class="iconfont icon-size icon-copy"></span>
+            </div>
+            <div class="handler-item-text">抄送</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.CONDITION_BRANCH_NODE)"
+          >
+            <div class="handler-item-icon condition">
+              <span class="iconfont icon-size icon-exclusive"></span>
+            </div>
+            <div class="handler-item-text">条件分支</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.PARALLEL_BRANCH_NODE)"
+          >
+            <div class="handler-item-icon parallel">
+              <span class="iconfont icon-size icon-parallel"></span>
+            </div>
+            <div class="handler-item-text">并行分支</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE)"
+          >
+            <div class="handler-item-icon inclusive">
+              <span class="iconfont icon-size icon-inclusive"></span>
+            </div>
+            <div class="handler-item-text">包容分支</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.DELAY_TIMER_NODE)"
+          >
+            <div class="handler-item-icon delay">
+              <span class="iconfont icon-size icon-delay"></span>
+            </div>
+            <div class="handler-item-text">延迟器</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.ROUTER_BRANCH_NODE)"
+          >
+            <div class="handler-item-icon router">
+              <span class="iconfont icon-size icon-router"></span>
+            </div>
+            <div class="handler-item-text">路由分支</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.TRIGGER_NODE)"
+          >
+            <div class="handler-item-icon trigger">
+              <span class="iconfont icon-size icon-trigger"></span>
+            </div>
+            <div class="handler-item-text">触发器</div>
+          </div>
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.CHILD_PROCESS_NODE)"
+          >
+            <div class="handler-item-icon child-process">
+              <span class="iconfont icon-size icon-child-process"></span>
+            </div>
+            <div class="handler-item-text">子流程</div>
+          </div>
+        </div>
+        <template #reference>
+          <div class="add-icon"><IconifyIcon icon="lucide:plus" /></div>
+        </template>
+      </ElPopover>
+    </div>
+  </div>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, nextTick, ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } 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[],
+    currentNode: 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 inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
+const showInputs = ref<boolean[]>([]);
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当输入框显示时 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+// 修改节点名称
+function changeNodeName(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name = conditionNode.name || `并行${index + 1}`;
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+// 新增条件
+function 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: BpmNodeTypeEnum.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function 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);
+    }
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === BpmNodeTypeEnum.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>
+      <ElButton
+        v-else
+        class="branch-node-add"
+        color="#626aef"
+        @click="addCondition"
+        plain
+      >
+        添加分支
+      </ElButton>
+      <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]">
+                  <ElInput
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="changeNodeName(index)"
+                    @keyup.enter="changeNodeName(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(BpmNodeTypeEnum.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div v-if="!readonly" class="node-toolbar">
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="lucide:circle-x"
+                    @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-ele/src/views/bpm/components/simple-process-design/components/nodes/router-node.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } 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, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function 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>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            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(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              @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>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+// TODO @芋艿：后续是不是把业务组件，挪到每个模块里；待定
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
+import TaskListModal from './modules/task-list-modal.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'StartUserNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+
+// 定义事件，更新父组件
+defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const readonly = inject<Boolean>('readonly'); // 是否只读
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.START_USER_NODE,
+);
+
+const nodeSetting = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: TaskListModal,
+  destroyOnClose: true,
+});
+function nodeClick() {
+  if (readonly) {
+    // 只读模式，弹窗显示任务信息
+    if (tasks && tasks.value) {
+      // 过滤出当前节点的任务
+      const nodeTasks = tasks.value.filter(
+        (task) => task.taskDefinitionKey === currentNode.value.id,
+      );
+      // 弹窗显示任务信息
+      modalApi
+        .setData(nodeTasks)
+        .setState({ title: currentNode.value.name })
+        .open();
+    }
+  } else {
+    nodeSetting.value.showStartUserNodeConfig(currentNode.value);
+  }
+}
+</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 start-user">
+            <span class="iconfont icon-start-user"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.START_USER_NODE) }}
+          </div>
+          <IconifyIcon icon="lucide:chevron-right" v-if="!readonly" />
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+
+  <StartUserNodeConfig
+    v-if="!readonly && currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+  />
+  <!-- 审批记录弹窗 -->
+  <Modal />
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/trigger-node.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import TriggerNodeConfig from '../nodes-config/trigger-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'TriggerNode',
+});
+
+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, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.TRIGGER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showTriggerNodeConfig(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function 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 trigger-node">
+            <span class="iconfont icon-trigger"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            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(BpmNodeTypeEnum.TRIGGER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <TriggerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/user-task-node.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
+import TaskListModal from './modules/task-list-modal.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'UserTaskNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: BpmNodeTypeEnum];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.USER_TASK_NODE,
+);
+const nodeSetting = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: TaskListModal,
+  destroyOnClose: true,
+});
+
+function nodeClick() {
+  if (readonly) {
+    if (tasks && tasks.value) {
+      // 过滤出当前节点的任务
+      const nodeTasks = tasks.value.filter(
+        (task) => task.taskDefinitionKey === currentNode.value.id,
+      );
+      // 弹窗显示任务信息
+      modalApi
+        .setData(nodeTasks)
+        .setState({ title: currentNode.value.name })
+        .open();
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
+  }
+}
+
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+// 查找可以驳回用户节点
+function findReturnTaskNodes(
+  matchNodeList: SimpleFlowNode[], // 匹配的节点
+) {
+  // 从父节点查找
+  emits('findParentNode', matchNodeList, BpmNodeTypeEnum.USER_TASK_NODE);
+}
+</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 ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
+            >
+            </span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(currentNode.type) }}
+          </div>
+          <IconifyIcon icon="lucide:chevron-right" v-if="!readonly" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+  <UserTaskNodeConfig
+    v-if="currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+    @find-return-task-nodes="findReturnTaskNodes"
+  />
+  <!--  审批记录弹窗 -->
+  <Modal />
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+
+import { useWatchNode } from '../helpers';
+import ChildProcessNode from './nodes/child-process-node.vue';
+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';
+
+defineOptions({ name: 'ProcessNodeTree' });
+
+const props = defineProps({
+  parentNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+
+const emits = defineEmits<{
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    currentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+const currentNode = useWatchNode(props);
+
+// 用于删除节点
+
+const handleModelValueUpdate = (updateValue: any) => {
+  emits('update:flowNode', updateValue);
+};
+
+const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+};
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  findNode: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!findNode) {
+    return;
+  }
+  if (findNode.type === BpmNodeTypeEnum.START_USER_NODE) {
+    nodeList.push(findNode);
+    return;
+  }
+
+  if (findNode.type === nodeType) {
+    nodeList.push(findNode);
+  }
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+}
+</script>
+<template>
+  <!-- 发起人节<EFBFBD>?-->
+  <StartUserNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.START_USER_NODE"
+    :flow-node="currentNode"
+  />
+  <!-- 审批节点 -->
+  <UserTaskNode
+    v-if="
+      currentNode &&
+      (currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE ||
+        currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE)
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 抄送节<E98081>?-->
+  <CopyTaskNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.COPY_TASK_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 条件节点 -->
+  <ExclusiveNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 并行节点 -->
+  <ParallelNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 包容分支节点 -->
+  <InclusiveNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 延迟器节<E599A8>?-->
+  <DelayTimerNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.DELAY_TIMER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 路由分支节点 -->
+  <RouterNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 触发器节<E599A8>?-->
+  <TriggerNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.TRIGGER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 子流程节<E7A88B>?-->
+  <ChildProcessNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.CHILD_PROCESS_NODE
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 递归显示孩子节点  -->
+  <ProcessNodeTree
+    v-if="currentNode && currentNode.childNode"
+    v-model:flow-node="currentNode.childNode"
+    :parent-node="currentNode"
+    @recursive-find-parent-node="recursiveFindParentNode"
+  />
+
+  <!-- 结束节点 -->
+  <EndEventNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.END_EVENT_NODE"
+    :flow-node="currentNode"
+  />
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../consts';
+
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, onMounted, provide, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
+import { handleTree } from '@vben/utils';
+
+import { ElButton } from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getSimpleUserList } from '#/api/system/user';
+
+import { NODE_DEFAULT_TEXT, NodeId } from '../consts';
+import SimpleProcessModel from './simple-process-model.vue';
+
+defineOptions({
+  name: 'SimpleProcessDesigner',
+});
+
+const props = defineProps({
+  modelName: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  // 流程表单 ID
+  modelFormId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  // 表单类型
+  modelFormType: {
+    type: Number,
+    required: false,
+    default: BpmModelFormType.NORMAL,
+  },
+  // 可发起流程的人员编号
+  startUserIds: {
+    type: Array,
+    required: false,
+    default: undefined,
+  },
+  // 可发起流程的部门编号
+  startDeptIds: {
+    type: Array,
+    required: false,
+    default: undefined,
+  },
+});
+// 保存成功事件
+const emits = defineEmits(['success']);
+const processData = inject('processData') as Ref;
+const loading = ref(false);
+const formFields = ref<string[]>([]);
+const formType = ref(props.modelFormType);
+
+// 监听 modelFormType 变化
+watch(
+  () => props.modelFormType,
+  (newVal) => {
+    formType.value = newVal;
+  },
+);
+
+// 监听 modelFormId 变化
+watch(
+  () => props.modelFormId,
+  async (newVal) => {
+    if (newVal) {
+      const form = await getForm(newVal);
+      formFields.value = form?.fields;
+    } else {
+      // 如果 modelFormId 为空，清空表单字段
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+const roleOptions = ref<SystemRoleApi.Role[]>([]); // 角色列表
+const postOptions = ref<SystemPostApi.Post[]>([]); // 岗位列表
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+const deptOptions = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTreeOptions = ref();
+const userGroupOptions = ref<BpmUserGroupApi.UserGroup[]>([]); // 用户组列表
+
+provide('formFields', formFields);
+provide('formType', formType);
+provide('roleList', roleOptions);
+provide('postList', postOptions);
+provide('userList', userOptions);
+provide('deptList', deptOptions);
+provide('userGroupList', userGroupOptions);
+provide('deptTree', deptTreeOptions);
+provide('startUserIds', props.startUserIds);
+provide('startDeptIds', props.startDeptIds);
+provide('tasks', []);
+provide('processInstance', {});
+const processNodeTree = ref<SimpleFlowNode | undefined>();
+provide('processNodeTree', processNodeTree);
+
+// 创建错误提示弹窗
+const [ErrorModal, errorModalApi] = useVbenModal({
+  fullscreenButton: false,
+});
+
+// 添加更新模型的方法
+function updateModel() {
+  if (!processNodeTree.value) {
+    processNodeTree.value = {
+      name: '发起人',
+      type: BpmNodeTypeEnum.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
+      // 默认为空，需要进行配置
+      showText: '',
+      childNode: {
+        id: NodeId.END_EVENT_NODE_ID,
+        name: '结束',
+        type: BpmNodeTypeEnum.END_EVENT_NODE,
+      },
+    };
+    // 初始化时也触发一次保存
+    saveSimpleFlowModel(processNodeTree.value);
+  }
+}
+
+async function saveSimpleFlowModel(
+  simpleModelNode: SimpleFlowNode | undefined,
+) {
+  if (!simpleModelNode) {
+    return;
+  }
+
+  try {
+    processData.value = simpleModelNode;
+    emits('success', simpleModelNode);
+  } catch (error) {
+    console.error('保存失败:', error);
+  }
+}
+
+/**
+ * 校验节点设置。 暂时以 showText 为空作为节点错误配置的判断条件
+ */
+function validateNode(
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) {
+  if (node) {
+    const { type, showText, conditionNodes } = node;
+    if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
+      return;
+    }
+
+    if (
+      type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 1. 分支节点, 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes);
+      });
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    } else {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
+    }
+  }
+}
+
+onMounted(async () => {
+  try {
+    loading.value = true;
+    // 获得角色列表
+    roleOptions.value = await getSimpleRoleList();
+    // 获得岗位列表
+    postOptions.value = await getSimplePostList();
+    // 获得用户列表
+    userOptions.value = await getSimpleUserList();
+    // 获得部门列表
+    const deptList = await getSimpleDeptList();
+    deptOptions.value = deptList;
+    // 转换成树形结构
+    deptTreeOptions.value = handleTree(deptList);
+    // 获取用户组列表
+    userGroupOptions.value = await getUserGroupSimpleList();
+    // 加载流程数据
+    if (processData.value) {
+      processNodeTree.value = processData?.value;
+    } else {
+      updateModel();
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+
+const validate = async () => {
+  const errorNodes: SimpleFlowNode[] = [];
+  validateNode(processNodeTree.value, errorNodes);
+  if (errorNodes.length === 0) {
+    return true;
+  } else {
+    // 设置错误节点数据并打开弹窗
+    errorModalApi.setData(errorNodes);
+    errorModalApi.open();
+    return false;
+  }
+};
+defineExpose({ validate });
+</script>
+<template>
+  <div v-loading="loading">
+    <SimpleProcessModel
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
+    <ErrorModal title="流程设计校验不通过" class="w-2/5">
+      <div class="mb-2 text-base">以下节点配置不完善，请修改相关配置</div>
+      <div
+        class="mb-3 rounded-md p-2 text-sm"
+        v-for="(item, index) in errorModalApi.getData()"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      </div>
+      <template #footer>
+        <ElButton type="primary" @click="errorModalApi.close()">
+          知道了
+        </ElButton>
+      </template>
+    </ErrorModal>
+  </div>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { onMounted, provide, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { downloadFileFromBlob, isString } from '@vben/utils';
+
+import { ElButton, ElButtonGroup, ElDialog, ElRow } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../consts';
+import { useWatchNode } from '../helpers';
+import ProcessNodeTree from './process-node-tree.vue';
+
+defineOptions({
+  name: 'SimpleProcessModel',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+  readonly: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+});
+
+const emits = defineEmits<{
+  save: [node: SimpleFlowNode | undefined];
+}>();
+
+const processNodeTree = useWatchNode(props);
+
+provide('readonly', props.readonly);
+
+// TODO 可优化：拖拽有点卡顿
+/** 拖拽、放大缩小等操作 */
+const scaleValue = ref(100);
+const MAX_SCALE_VALUE = 200;
+const MIN_SCALE_VALUE = 50;
+const isDragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const currentX = ref(0);
+const currentY = ref(0);
+const initialX = ref(0);
+const initialY = ref(0);
+
+function setGrabCursor() {
+  document.body.style.cursor = 'grab';
+}
+
+function resetCursor() {
+  document.body.style.cursor = 'default';
+}
+
+function startDrag(e: MouseEvent) {
+  isDragging.value = true;
+  startX.value = e.clientX - currentX.value;
+  startY.value = e.clientY - currentY.value;
+  setGrabCursor(); // 设置小手光标
+}
+
+function onDrag(e: MouseEvent) {
+  if (!isDragging.value) return;
+  e.preventDefault(); // 禁用文本选择
+
+  // 使用 requestAnimationFrame 优化性能
+  requestAnimationFrame(() => {
+    currentX.value = e.clientX - startX.value;
+    currentY.value = e.clientY - startY.value;
+  });
+}
+
+function stopDrag() {
+  isDragging.value = false;
+  resetCursor(); // 重置光标
+}
+
+function zoomIn() {
+  if (scaleValue.value === MAX_SCALE_VALUE) {
+    return;
+  }
+  scaleValue.value += 10;
+}
+
+function zoomOut() {
+  if (scaleValue.value === MIN_SCALE_VALUE) {
+    return;
+  }
+  scaleValue.value -= 10;
+}
+
+function processReZoom() {
+  scaleValue.value = 100;
+}
+
+function resetPosition() {
+  currentX.value = initialX.value;
+  currentY.value = initialY.value;
+}
+
+/** 校验节点设置 */
+const errorDialogVisible = ref(false);
+let errorNodes: SimpleFlowNode[] = [];
+
+function validateNode(
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) {
+  if (node) {
+    const { type, showText, conditionNodes } = node;
+    if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
+      return;
+    }
+    if (type === BpmNodeTypeEnum.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === BpmNodeTypeEnum.USER_TASK_NODE ||
+      type === BpmNodeTypeEnum.COPY_TASK_NODE ||
+      type === BpmNodeTypeEnum.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes);
+      });
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+  }
+}
+
+/** 获取当前流程数据 */
+async function getCurrentFlowData() {
+  try {
+    errorNodes = [];
+    validateNode(processNodeTree.value, errorNodes);
+    if (errorNodes.length > 0) {
+      errorDialogVisible.value = true;
+      return undefined;
+    }
+    return processNodeTree.value;
+  } catch (error) {
+    console.error('获取流程数据失败:', error);
+    return undefined;
+  }
+}
+
+defineExpose({
+  getCurrentFlowData,
+});
+
+/** 导出 JSON */
+function exportJson() {
+  downloadFileFromBlob({
+    fileName: 'model.json',
+    source: new Blob([JSON.stringify(processNodeTree.value)]),
+  });
+}
+
+/** 导入 JSON */
+const refFile = ref();
+function importJson() {
+  refFile.value.click();
+}
+function importLocalFile() {
+  const file = refFile.value.files[0];
+  file.text().then((result: any) => {
+    if (isString(result)) {
+      processNodeTree.value = JSON.parse(result);
+      emits('save', processNodeTree.value);
+    }
+  });
+}
+
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  initialX.value = currentX.value;
+  initialY.value = currentY.value;
+});
+</script>
+<template>
+  <div class="simple-process-model-container">
+    <div class="bg-card absolute right-0 top-0">
+      <ElRow type="flex" justify="end">
+        <ElButtonGroup key="scale-control">
+          <ElButton v-if="!readonly" @click="exportJson">
+            <IconifyIcon icon="lucide:download" /> 导出
+          </ElButton>
+          <ElButton v-if="!readonly" @click="importJson">
+            <IconifyIcon icon="lucide:upload" />导入
+          </ElButton>
+          <!-- 用于打开本地文件-->
+          <input
+            v-if="!readonly"
+            type="file"
+            id="files"
+            ref="refFile"
+            class="hidden"
+            accept=".json"
+            @change="importLocalFile"
+          />
+          <ElButton @click="processReZoom()">
+            <IconifyIcon icon="lucide:table-columns-split" />
+          </ElButton>
+          <ElButton :plain="true" @click="zoomOut()">
+            <IconifyIcon icon="lucide:zoom-out" />
+          </ElButton>
+          <ElButton class="w-20"> {{ scaleValue }}% </ElButton>
+          <ElButton :plain="true" @click="zoomIn()">
+            <IconifyIcon icon="lucide:zoom-in" />
+          </ElButton>
+          <ElButton @click="resetPosition">重置</ElButton>
+        </ElButtonGroup>
+      </ElRow>
+    </div>
+    <div
+      class="simple-process-model"
+      :style="`transform: translate(${currentX}px, ${currentY}px) scale(${scaleValue / 100});`"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag"
+      @mouseenter="setGrabCursor"
+    >
+      <ProcessNodeTree
+        v-if="processNodeTree"
+        v-model:flow-node="processNodeTree"
+      />
+    </div>
+  </div>
+
+  <ElDialog v-model="errorDialogVisible" title="保存失败" width="400">
+    <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <div
+      class="line-height-normal mb-3 rounded p-2"
+      v-for="(item, index) in errorNodes"
+      :key="index"
+    >
+      {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+    </div>
+    <template #footer>
+      <ElButton type="primary" @click="errorDialogVisible = false">
+        知道了
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-viewer.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { provide, ref, watch } from 'vue';
+
+import { useWatchNode } from '../helpers';
+import SimpleProcessModel from './simple-process-model.vue';
+
+defineOptions({ name: 'SimpleProcessViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    flowNode: SimpleFlowNode;
+    // 流程实例
+    processInstance?: any;
+    // 流程任务
+    tasks?: any[];
+  }>(),
+  {
+    processInstance: undefined,
+    tasks: () => [] as any[],
+  },
+);
+const approveTasks = ref<any[]>(props.tasks);
+const currentProcessInstance = ref(props.processInstance);
+const simpleModel = useWatchNode(props);
+watch(
+  () => props.tasks,
+  (newValue) => {
+    approveTasks.value = newValue;
+  },
+);
+watch(
+  () => props.processInstance,
+  (newValue) => {
+    currentProcessInstance.value = newValue;
+  },
+);
+// 提供给后代组件使用
+provide('tasks', approveTasks);
+provide('processInstance', currentProcessInstance);
+</script>
+<template>
+  <SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
+</template>

apps/web-ele/src/views/bpm/components/simple-process-design/consts.ts

@@ -0,0 +1,888 @@
+import { BpmNodeTypeEnum, BpmTaskStatusEnum } from '@vben/constants';
+
+interface DictDataType {
+  label: string;
+  value: number | string;
+}
+
+// 用户任务的审批类型。 【参考飞书】
+export enum ApproveType {
+  /**
+   * 自动通过
+   */
+  AUTO_APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  AUTO_REJECT = 3,
+  /**
+   * 人工审批
+   */
+  USER = 1,
+}
+
+// 多人审批方式类型枚举 （ 用于审批节点 ）
+export enum ApproveMethodType {
+  /**
+   * 多人或签(通过只需一人，拒绝只需一人)
+   */
+  ANY_APPROVE = 3,
+
+  /**
+   * 多人会签(按通过比例)
+   */
+  APPROVE_BY_RATIO = 2,
+
+  /**
+   * 随机挑选一人审批
+   */
+  RANDOM_SELECT_ONE_APPROVE = 1,
+  /**
+   * 多人依次审批
+   */
+  SEQUENTIAL_APPROVE = 4,
+}
+
+export enum NodeId {
+  /**
+   * 发起人节点 Id
+   */
+  END_EVENT_NODE_ID = 'EndEvent',
+
+  /**
+   * 发起人节点 Id
+   */
+  START_USER_NODE_ID = 'StartUserNode',
+}
+
+// 条件配置类型 （ 用于条件节点配置 ）
+export enum ConditionType {
+  /**
+   * 条件表达式
+   */
+  EXPRESSION = 1,
+
+  /**
+   * 条件规则
+   */
+  RULE = 2,
+}
+
+// 操作按钮类型枚举 (用于审批节点)
+export enum OperationButtonType {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
+// 审批拒绝类型枚举
+export enum RejectHandlerType {
+  /**
+   * 结束流程
+   */
+  FINISH_PROCESS = 1,
+  /**
+   * 驳回到指定节点
+   */
+  RETURN_USER_TASK = 2,
+}
+
+// 用户任务超时处理类型枚举
+export enum TimeoutHandlerType {
+  /**
+   * 自动同意
+   */
+  APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 3,
+  /**
+   * 自动提醒
+   */
+  REMINDER = 1,
+}
+
+// 用户任务的审批人为空时，处理类型枚举
+export enum AssignEmptyHandlerType {
+  /**
+   * 自动通过
+   */
+  APPROVE = 1,
+  /**
+   * 转交给流程管理员
+   */
+  ASSIGN_ADMIN = 4,
+  /**
+   * 指定人员审批
+   */
+  ASSIGN_USER = 3,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 2,
+}
+
+// 用户任务的审批人与发起人相同时，处理类型枚举
+export enum AssignStartUserHandlerType {
+  /**
+   * 转交给部门负责人审批
+   */
+  ASSIGN_DEPT_LEADER = 3,
+  /**
+   * 自动跳过【参考飞书】：1）如果当前节点还有其他审批人，则交由其他审批人进行审批；2）如果当前节点没有其他审批人，则该节点自动通过
+   */
+  SKIP = 2,
+  /**
+   * 由发起人对自己审批
+   */
+  START_USER_AUDIT = 1,
+}
+
+// 时间单位枚举
+export enum TimeUnitType {
+  /**
+   * 天
+   */
+  DAY = 3,
+  /**
+   * 小时
+   */
+  HOUR = 2,
+  /**
+   * 分钟
+   */
+  MINUTE = 1,
+}
+
+/**
+ * 表单权限的枚举
+ */
+export enum FieldPermissionType {
+  /**
+   * 隐藏
+   */
+  NONE = '3',
+  /**
+   * 只读
+   */
+  READ = '1',
+  /**
+   * 编辑
+   */
+  WRITE = '2',
+}
+
+/**
+ * 延迟类型
+ */
+export enum DelayTypeEnum {
+  /**
+   * 固定日期时间
+   */
+  FIXED_DATE_TIME = 2,
+  /**
+   * 固定时长
+   */
+  FIXED_TIME_DURATION = 1,
+}
+
+/**
+ * 触发器类型枚举
+ */
+export enum TriggerTypeEnum {
+  /**
+   * 表单数据删除触发器
+   */
+  FORM_DELETE = 11,
+  /**
+   * 表单数据更新触发器
+   */
+  FORM_UPDATE = 10,
+  /**
+   * 接收 HTTP 回调请求触发器
+   */
+  HTTP_CALLBACK = 2,
+  /**
+   * 发送 HTTP 请求触发器
+   */
+  HTTP_REQUEST = 1,
+}
+
+export enum ChildProcessStartUserTypeEnum {
+  /**
+   * 表单
+   */
+  FROM_FORM = 2,
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+}
+
+export enum ChildProcessStartUserEmptyTypeEnum {
+  /**
+   * 子流程管理员
+   */
+  CHILD_PROCESS_ADMIN = 2,
+  /**
+   * 主流程管理员
+   */
+  MAIN_PROCESS_ADMIN = 3,
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+}
+
+export enum ChildProcessMultiInstanceSourceTypeEnum {
+  /**
+   * 固定数量
+   */
+  FIXED_QUANTITY = 1,
+  /**
+   * 多选表单
+   */
+  MULTIPLE_FORM = 3,
+  /**
+   * 数字表单
+   */
+  NUMBER_FORM = 2,
+}
+
+// 候选人策略枚举 （ 用于审批节点。抄送节点 )
+export enum CandidateStrategy {
+  /**
+   * 审批人自选
+   */
+  APPROVE_USER_SELECT = 34,
+  /**
+   * 部门的负责人
+   */
+  DEPT_LEADER = 21,
+  /**
+   * 部门成员
+   */
+  DEPT_MEMBER = 20,
+  /**
+   * 流程表达式
+   */
+  EXPRESSION = 60,
+  /**
+   * 表单内部门负责人
+   */
+  FORM_DEPT_LEADER = 51,
+  /**
+   * 表单内用户字段
+   */
+  FORM_USER = 50,
+  /**
+   * 连续多级部门的负责人
+   */
+  MULTI_LEVEL_DEPT_LEADER = 23,
+  /**
+   * 指定岗位
+   */
+  POST = 22,
+  /**
+   * 指定角色
+   */
+  ROLE = 10,
+  /**
+   * 发起人自己
+   */
+  START_USER = 36,
+  /**
+   * 发起人部门负责人
+   */
+  START_USER_DEPT_LEADER = 37,
+  /**
+   * 发起人连续多级部门的负责人
+   */
+  START_USER_MULTI_LEVEL_DEPT_LEADER = 38,
+  /**
+   * 发起人自选
+   */
+  START_USER_SELECT = 35,
+  /**
+   * 指定用户
+   */
+  USER = 30,
+  /**
+   * 指定用户组
+   */
+  USER_GROUP = 40,
+}
+
+export enum BpmHttpRequestParamTypeEnum {
+  /**
+   * 固定值
+   */
+  FIXED_VALUE = 1,
+  /**
+   * 表单
+   */
+  FROM_FORM = 2,
+}
+
+// 这里定义 HTTP 请求参数类型
+export type HttpRequestParam = {
+  key: string;
+  type: number;
+  value: string;
+};
+
+// 监听器结构定义
+export type ListenerHandler = {
+  body?: HttpRequestParam[];
+  enable: boolean;
+  header?: HttpRequestParam[];
+  path?: string;
+};
+
+/**
+ * 条件规则结构定义
+ */
+export type ConditionRule = {
+  leftSide: string | undefined;
+  opCode: string;
+  rightSide: string | undefined;
+};
+
+/**
+ * 条件结构定义
+ */
+export type Condition = {
+  // 条件规则的逻辑关系是否为且
+  and: boolean;
+  rules: ConditionRule[];
+};
+
+/**
+ * 条件组结构定义
+ */
+export type ConditionGroup = {
+  // 条件组的逻辑关系是否为且
+  and: boolean;
+  // 条件数组
+  conditions: Condition[];
+};
+
+/**
+ * 条件节点设置结构定义，用于条件节点
+ */
+export type ConditionSetting = {
+  // 条件表达式
+  conditionExpression?: string;
+  // 条件组
+  conditionGroups?: ConditionGroup;
+  // 条件类型
+  conditionType?: ConditionType;
+  // 是否默认的条件
+  defaultFlow?: boolean;
+};
+
+/**
+ * 审批拒绝结构定义
+ */
+export type RejectHandler = {
+  // 退回节点 Id
+  returnNodeId?: string;
+  // 审批拒绝类型
+  type: RejectHandlerType;
+};
+
+/**
+ * 审批超时结构定义
+ */
+export type TimeoutHandler = {
+  // 是否开启超时处理
+  enable: boolean;
+  // 执行动作是自动提醒, 最大提醒次数
+  maxRemindCount?: number;
+  // 超时时间设置
+  timeDuration?: string;
+  // 超时执行的动作
+  type?: number;
+};
+
+/**
+ * 审批人为空的结构定义
+ */
+export type AssignEmptyHandler = {
+  // 审批人为空的处理类型
+  type: AssignEmptyHandlerType;
+  // 指定用户的编号数组
+  userIds?: number[];
+};
+
+/**
+ * 延迟设置
+ */
+export type DelaySetting = {
+  // 延迟时间表达式
+  delayTime: string;
+  // 延迟类型
+  delayType: number;
+};
+
+/**
+ * 路由分支结构定义
+ */
+export type RouterSetting = {
+  conditionExpression: string;
+  conditionGroups: ConditionGroup;
+  conditionType: ConditionType;
+  nodeId: string | undefined;
+};
+
+/**
+ * 操作按钮权限结构定义
+ */
+export type ButtonSetting = {
+  displayName: string;
+  enable: boolean;
+  id: OperationButtonType;
+};
+
+/**
+ * HTTP 请求触发器结构定义
+ */
+export type HttpRequestTriggerSetting = {
+  // 请求体参数设置
+  body?: HttpRequestParam[];
+  // 请求头参数设置
+  header?: HttpRequestParam[];
+  // 请求响应设置
+  response?: Record<string, string>[];
+  // 请求 URL
+  url: string;
+};
+
+/**
+ * 流程表单触发器配置结构定义
+ */
+export type FormTriggerSetting = {
+  // 条件表达式
+  conditionExpression?: string;
+  // 条件组
+  conditionGroups?: ConditionGroup;
+  // 条件类型
+  conditionType?: ConditionType;
+  // 删除表单字段配置
+  deleteFields?: string[];
+  // 更新表单字段配置
+  updateFormFields?: Record<string, any>;
+};
+
+/**
+ * 触发器节点结构定义
+ */
+export type TriggerSetting = {
+  formSettings?: FormTriggerSetting[];
+  httpRequestSetting?: HttpRequestTriggerSetting;
+  type: TriggerTypeEnum;
+};
+
+export type IOParameter = {
+  source: string;
+  target: string;
+};
+
+export type StartUserSetting = {
+  emptyType?: ChildProcessStartUserEmptyTypeEnum;
+  formField?: string;
+  type: ChildProcessStartUserTypeEnum;
+};
+
+export type TimeoutSetting = {
+  enable: boolean;
+  timeExpression?: string;
+  type?: DelayTypeEnum;
+};
+
+export type MultiInstanceSetting = {
+  approveRatio?: number;
+  enable: boolean;
+  sequential?: boolean;
+  source?: string;
+  sourceType?: ChildProcessMultiInstanceSourceTypeEnum;
+};
+
+/**
+ * 子流程节点结构定义
+ */
+export type ChildProcessSetting = {
+  async: boolean;
+  calledProcessDefinitionKey: string;
+  calledProcessDefinitionName: string;
+  inVariables?: IOParameter[];
+  multiInstanceSetting: MultiInstanceSetting;
+  outVariables?: IOParameter[];
+  skipStartUserNode: boolean;
+  startUserSetting: StartUserSetting;
+  timeoutSetting: TimeoutSetting;
+};
+
+/**
+ *  节点结构定义
+ */
+export interface SimpleFlowNode {
+  id: string;
+  type: BpmNodeTypeEnum;
+  name: string;
+  showText?: string;
+  // 孩子节点
+  childNode?: SimpleFlowNode;
+  // 条件节点
+  conditionNodes?: SimpleFlowNode[];
+  // 审批类型
+  approveType?: ApproveType;
+  // 候选人策略
+  candidateStrategy?: number;
+  // 候选人参数
+  candidateParam?: string;
+  // 多人审批方式
+  approveMethod?: ApproveMethodType;
+  // 通过比例
+  approveRatio?: number;
+  // 审批按钮设置
+  buttonsSetting?: any[];
+  // 表单权限
+  fieldsPermission?: Array<Record<string, any>>;
+  // 审批任务超时处理
+  timeoutHandler?: TimeoutHandler;
+  // 审批任务拒绝处理
+  rejectHandler?: RejectHandler;
+  // 审批人为空的处理
+  assignEmptyHandler?: AssignEmptyHandler;
+  // 审批节点的审批人与发起人相同时，对应的处理类型
+  assignStartUserHandlerType?: number;
+  // 创建任务监听器
+  taskCreateListener?: ListenerHandler;
+  // 创建任务监听器
+  taskAssignListener?: ListenerHandler;
+  // 创建任务监听器
+  taskCompleteListener?: ListenerHandler;
+  // 条件设置
+  conditionSetting?: ConditionSetting;
+  // 活动的状态，用于前端节点状态展示
+  activityStatus?: BpmTaskStatusEnum;
+  // 延迟设置
+  delaySetting?: DelaySetting;
+  // 路由分支
+  routerGroups?: RouterSetting[];
+  defaultFlowId?: string;
+  // 签名
+  signEnable?: boolean;
+  // 审批意见
+  reasonRequire?: boolean;
+  // 跳过表达式
+  skipExpression?: string;
+  // 触发器设置
+  triggerSetting?: TriggerSetting;
+  // 子流程
+  childProcessSetting?: ChildProcessSetting;
+}
+
+/**
+ * 条件组默认值
+ */
+export const DEFAULT_CONDITION_GROUP_VALUE = {
+  and: true,
+  conditions: [
+    {
+      and: true,
+      rules: [
+        {
+          opCode: '==',
+          leftSide: undefined,
+          rightSide: '',
+        },
+      ],
+    },
+  ],
+};
+
+export const NODE_DEFAULT_TEXT = new Map<number, string>();
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.USER_TASK_NODE, '请配置审批人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.COPY_TASK_NODE, '请配置抄送人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CONDITION_NODE, '请设置条件');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.START_USER_NODE, '请设置发起人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '请设置延迟器');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '请设置路由节点');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRIGGER_NODE, '请设置触发器');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '请设置办理人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '请设置子流程');
+
+export const NODE_DEFAULT_NAME = new Map<number, string>();
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.USER_TASK_NODE, '审批人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.COPY_TASK_NODE, '抄送人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CONDITION_NODE, '条件');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.START_USER_NODE, '发起人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '延迟器');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '路由分支');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRIGGER_NODE, '触发器');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '办理人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '子流程');
+
+// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
+export const CANDIDATE_STRATEGY: DictDataType[] = [
+  { label: '指定成员', value: CandidateStrategy.USER as any },
+  { label: '指定角色', value: CandidateStrategy.ROLE as any },
+  { label: '指定岗位', value: CandidateStrategy.POST as any },
+  { label: '部门成员', value: CandidateStrategy.DEPT_MEMBER as any },
+  { label: '部门负责人', value: CandidateStrategy.DEPT_LEADER as any },
+  {
+    label: '连续多级部门负责人',
+    value: CandidateStrategy.MULTI_LEVEL_DEPT_LEADER as any,
+  },
+  { label: '发起人自选', value: CandidateStrategy.START_USER_SELECT as any },
+  { label: '审批人自选', value: CandidateStrategy.APPROVE_USER_SELECT as any },
+  { label: '发起人本人', value: CandidateStrategy.START_USER as any },
+  {
+    label: '发起人部门负责人',
+    value: CandidateStrategy.START_USER_DEPT_LEADER as any,
+  },
+  {
+    label: '发起人连续部门负责人',
+    value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER as any,
+  },
+  { label: '用户组', value: CandidateStrategy.USER_GROUP as any },
+  { label: '表单内用户字段', value: CandidateStrategy.FORM_USER as any },
+  {
+    label: '表单内部门负责人',
+    value: CandidateStrategy.FORM_DEPT_LEADER as any,
+  },
+  { label: '流程表达式', value: CandidateStrategy.EXPRESSION as any },
+];
+// 审批节点 的审批类型
+export const APPROVE_TYPE: DictDataType[] = [
+  { label: '人工审批', value: ApproveType.USER as any },
+  { label: '自动通过', value: ApproveType.AUTO_APPROVE as any },
+  { label: '自动拒绝', value: ApproveType.AUTO_REJECT as any },
+];
+
+export const APPROVE_METHODS: DictDataType[] = [
+  {
+    label: '按顺序依次审批',
+    value: ApproveMethodType.SEQUENTIAL_APPROVE as any,
+  },
+  {
+    label: '会签（可同时审批，至少 % 人必须审批通过）',
+    value: ApproveMethodType.APPROVE_BY_RATIO as any,
+  },
+  {
+    label: '或签(可同时审批，有一人通过即可)',
+    value: ApproveMethodType.ANY_APPROVE as any,
+  },
+  {
+    label: '随机挑选一人审批',
+    value: ApproveMethodType.RANDOM_SELECT_ONE_APPROVE as any,
+  },
+];
+
+export const CONDITION_CONFIG_TYPES: DictDataType[] = [
+  { label: '条件规则', value: ConditionType.RULE as any },
+  { label: '条件表达式', value: ConditionType.EXPRESSION as any },
+];
+
+// 时间单位类型
+export const TIME_UNIT_TYPES: DictDataType[] = [
+  { label: '分钟', value: TimeUnitType.MINUTE as any },
+  { label: '小时', value: TimeUnitType.HOUR as any },
+  { label: '天', value: TimeUnitType.DAY as any },
+];
+// 超时处理执行动作类型
+export const TIMEOUT_HANDLER_TYPES: DictDataType[] = [
+  { label: '自动提醒', value: 1 },
+  { label: '自动同意', value: 2 },
+  { label: '自动拒绝', value: 3 },
+];
+export const REJECT_HANDLER_TYPES: DictDataType[] = [
+  { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS as any },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK as any },
+  // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
+];
+export const ASSIGN_EMPTY_HANDLER_TYPES: DictDataType[] = [
+  { label: '自动通过', value: 1 },
+  { label: '自动拒绝', value: 2 },
+  { label: '指定成员审批', value: 3 },
+  { label: '转交给流程管理员', value: 4 },
+];
+export const ASSIGN_START_USER_HANDLER_TYPES: DictDataType[] = [
+  { label: '由发起人对自己审批', value: 1 },
+  { label: '自动跳过', value: 2 },
+  { label: '转交给部门负责人审批', value: 3 },
+];
+
+// 比较运算符
+export const COMPARISON_OPERATORS: DictDataType[] = [
+  {
+    value: '==',
+    label: '等于',
+  },
+  {
+    value: '!=',
+    label: '不等于',
+  },
+  {
+    value: '>',
+    label: '大于',
+  },
+  {
+    value: '>=',
+    label: '大于等于',
+  },
+  {
+    value: '<',
+    label: '小于',
+  },
+  {
+    value: '<=',
+    label: '小于等于',
+  },
+];
+// 审批操作按钮名称
+export const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办');
+OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派');
+OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签');
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回');
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送');
+
+// 默认的按钮权限设置
+export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: true },
+];
+
+// 办理人默认的按钮权限设置
+export const TRANSACTOR_DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '办理', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false },
+];
+
+// 发起人的按钮权限。暂时定死，不可以编辑
+export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '提交', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false },
+];
+
+export const MULTI_LEVEL_DEPT: DictDataType[] = [
+  { label: '第 1 级部门', value: 1 },
+  { label: '第 2 级部门', value: 2 },
+  { label: '第 3 级部门', value: 3 },
+  { label: '第 4 级部门', value: 4 },
+  { label: '第 5 级部门', value: 5 },
+  { label: '第 6 级部门', value: 6 },
+  { label: '第 7 级部门', value: 7 },
+  { label: '第 8 级部门', value: 8 },
+  { label: '第 9 级部门', value: 9 },
+  { label: '第 10 级部门', value: 10 },
+  { label: '第 11 级部门', value: 11 },
+  { label: '第 12 级部门', value: 12 },
+  { label: '第 13 级部门', value: 13 },
+  { label: '第 14 级部门', value: 14 },
+  { label: '第 15 级部门', value: 15 },
+];
+
+export const DELAY_TYPE = [
+  { label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
+  { label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME },
+];
+
+export const BPM_HTTP_REQUEST_PARAM_TYPES = [
+  {
+    value: 1,
+    label: '固定值',
+  },
+  {
+    value: 2,
+    label: '表单',
+  },
+];
+
+export const TRIGGER_TYPES: DictDataType[] = [
+  { label: '发送 HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST as any },
+  { label: '接收 HTTP 回调', value: TriggerTypeEnum.HTTP_CALLBACK as any },
+  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE as any },
+  { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE as any },
+];
+
+export const CHILD_PROCESS_START_USER_TYPE = [
+  {
+    label: '同主流程发起人',
+    value: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
+  },
+  { label: '从表单中获取', value: ChildProcessStartUserTypeEnum.FROM_FORM },
+];
+
+export const CHILD_PROCESS_START_USER_EMPTY_TYPE = [
+  {
+    label: '同主流程发起人',
+    value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER,
+  },
+  {
+    label: '子流程管理员',
+    value: ChildProcessStartUserEmptyTypeEnum.CHILD_PROCESS_ADMIN,
+  },
+  {
+    label: '主流程管理员',
+    value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_ADMIN,
+  },
+];
+
+export const CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE = [
+  {
+    label: '固定数量',
+    value: ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY,
+  },
+  {
+    label: '数字表单',
+    value: ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM,
+  },
+  {
+    label: '多选表单',
+    value: ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM,
+  },
+];

apps/web-ele/src/views/bpm/components/simple-process-design/helpers.ts

@@ -0,0 +1,792 @@
+import type { Ref } from 'vue';
+
+import type {
+  ConditionGroup,
+  HttpRequestParam,
+  SimpleFlowNode,
+} from './consts';
+
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, nextTick, ref, toRaw, unref, watch } from 'vue';
+
+import {
+  BpmNodeTypeEnum,
+  BpmTaskStatusEnum,
+  ProcessVariableEnum,
+} from '@vben/constants';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  CandidateStrategy,
+  COMPARISON_OPERATORS,
+  ConditionType,
+  FieldPermissionType,
+  NODE_DEFAULT_NAME,
+  RejectHandlerType,
+} from './consts';
+
+export function useWatchNode(props: {
+  flowNode: SimpleFlowNode;
+}): Ref<SimpleFlowNode> {
+  const node = ref<SimpleFlowNode>(props.flowNode);
+  watch(
+    () => props.flowNode,
+    (newValue) => {
+      node.value = newValue;
+    },
+  );
+  return node;
+}
+
+// 解析 formCreate 所有表单字段, 并返回
+function parseFormCreateFields(formFields?: string[]) {
+  const result: Array<Record<string, any>> = [];
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result);
+    });
+  }
+  return result;
+}
+
+/**
+ * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
+ *
+ * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
+ * @param fields 解析后表单组件字段
+ * @param parentTitle  如果是子表单，子表单的标题，默认为空
+ */
+export const parseFormFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>> = [],
+  parentTitle: string = '',
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule;
+  if (field && tempTitle) {
+    let title = tempTitle;
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`;
+    }
+    let required = false;
+    if ($required) {
+      required = true;
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required,
+    });
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFormFields(rule, fields);
+    });
+  }
+};
+
+/**
+ * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
+ */
+export function useFormFieldsPermission(
+  defaultPermission: FieldPermissionType,
+) {
+  // 字段权限配置. 需要有 field, title,  permissioin 属性
+  const fieldsPermissionConfig = ref<Array<Record<string, any>>>([]);
+
+  const formType = inject<Ref<number | undefined>>('formType', ref()); // 表单类型
+
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+
+  function getNodeConfigFormFields(
+    nodeFormFields?: Array<Record<string, string>>,
+  ) {
+    nodeFormFields = toRaw(nodeFormFields);
+    fieldsPermissionConfig.value =
+      !nodeFormFields || nodeFormFields.length === 0
+        ? getDefaultFieldsPermission(unref(formFields))
+        : mergeFieldsPermission(nodeFormFields, unref(formFields));
+  }
+  // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
+  function mergeFieldsPermission(
+    formFieldsPermisson: Array<Record<string, string>>,
+    formFields?: string[],
+  ) {
+    let mergedFieldsPermission: Array<Record<string, any>> = [];
+    if (formFields) {
+      mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
+        const found = formFieldsPermisson.find(
+          (fieldPermission) => fieldPermission.field === item.field,
+        );
+        return {
+          field: item.field,
+          title: item.title,
+          permission: found ? found.permission : defaultPermission,
+        };
+      });
+    }
+    return mergedFieldsPermission;
+  }
+
+  // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
+  function getDefaultFieldsPermission(formFields?: string[]) {
+    let defaultFieldsPermission: Array<Record<string, any>> = [];
+    if (formFields) {
+      defaultFieldsPermission = parseFormCreateFields(formFields).map(
+        (item) => {
+          return {
+            field: item.field,
+            title: item.title,
+            permission: defaultPermission,
+          };
+        },
+      );
+    }
+    return defaultFieldsPermission;
+  }
+
+  // 获取表单的所有字段，作为下拉框选项
+  const formFieldOptions = parseFormCreateFields(unref(formFields));
+
+  return {
+    formType,
+    fieldsPermissionConfig,
+    formFieldOptions,
+    getNodeConfigFormFields,
+  };
+}
+
+/**
+ * @description 获取流程表单的字段
+ */
+export function useFormFields() {
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  return parseFormCreateFields(unref(formFields));
+}
+
+// TODO @芋艿：后续需要把各种类似 useFormFieldsPermission 的逻辑，抽成一个通用方法。
+/**
+ * @description 获取流程表单的字段和发起人字段
+ */
+export function useFormFieldsAndStartUser() {
+  const injectFormFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const formFields = parseFormCreateFields(unref(injectFormFields));
+  // 添加发起人
+  formFields.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    required: true,
+  });
+  return formFields;
+}
+
+export type UserTaskFormType = {
+  approveMethod: ApproveMethodType;
+  approveRatio?: number;
+  assignEmptyHandlerType?: AssignEmptyHandlerType;
+  assignEmptyHandlerUserIds?: number[];
+  assignStartUserHandlerType?: AssignStartUserHandlerType;
+  buttonsSetting: any[];
+  candidateStrategy: CandidateStrategy;
+  deptIds?: number[]; // 部门
+  deptLevel?: number; // 部门层级
+  expression?: string; // 流程表达式
+  formDept?: string; // 表单内部门字段
+  formUser?: string; // 表单内用户字段
+  maxRemindCount?: number;
+  postIds?: number[]; // 岗位
+  reasonRequire: boolean;
+  rejectHandlerType?: RejectHandlerType;
+  returnNodeId?: string;
+  roleIds?: number[]; // 角色
+  signEnable: boolean;
+  skipExpression?: string; // 跳过表达式
+  taskAssignListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskAssignListenerEnable?: boolean;
+  taskAssignListenerPath?: string;
+  taskCompleteListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskCompleteListenerEnable?: boolean;
+  taskCompleteListenerPath?: string;
+  taskCreateListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskCreateListenerEnable?: boolean;
+  taskCreateListenerPath?: string;
+  timeDuration?: number;
+  timeoutHandlerEnable?: boolean;
+  timeoutHandlerType?: number;
+  userGroups?: number[]; // 用户组
+  userIds?: number[]; // 用户
+};
+
+export type CopyTaskFormType = {
+  candidateStrategy: CandidateStrategy;
+  deptIds?: number[]; // 部门
+  deptLevel?: number; // 部门层级
+  expression?: string; // 流程表达式
+  formDept?: string; // 表单内部门字段
+  formUser?: string; // 表单内用户字段
+  postIds?: number[]; // 岗位
+  roleIds?: number[]; // 角色
+  userGroups?: number[]; // 用户组
+  userIds?: number[]; // 用户
+};
+
+/**
+ * @description 节点表单数据。 用于审批节点、抄送节点
+ */
+export function useNodeForm(nodeType: BpmNodeTypeEnum) {
+  const roleOptions = inject<Ref<SystemRoleApi.Role[]>>('roleList', ref([])); // 角色列表
+  const postOptions = inject<Ref<SystemPostApi.Post[]>>('postList', ref([])); // 岗位列表
+  const userOptions = inject<Ref<SystemUserApi.User[]>>('userList', ref([])); // 用户列表
+  const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList', ref([])); // 部门列表
+  const userGroupOptions = inject<Ref<BpmUserGroupApi.UserGroup[]>>(
+    'userGroupList',
+    ref([]),
+  ); // 用户组列表
+  const deptTreeOptions = inject<Ref<SystemDeptApi.Dept[]>>(
+    'deptTree',
+    ref([]),
+  ); // 部门树
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
+
+  if (
+    nodeType === BpmNodeTypeEnum.USER_TASK_NODE ||
+    nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE
+  ) {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      approveRatio: 100,
+      rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      returnNodeId: '',
+      timeoutHandlerEnable: false,
+      timeoutHandlerType: 1,
+      timeDuration: 6, // 默认 6小时
+      maxRemindCount: 1, // 默认 提醒 1次
+      buttonsSetting: [],
+    };
+  }
+  configForm.value = {
+    candidateStrategy: CandidateStrategy.USER,
+  };
+
+  function getShowText(): string {
+    let showText = '';
+    // 指定成员
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.USER &&
+      configForm.value?.userIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      userOptions?.value.forEach((item: any) => {
+        if (configForm.value?.userIds?.includes(item.id)) {
+          candidateNames.push(item.nickname);
+        }
+      });
+      showText = `指定成员：${candidateNames.join(',')}`;
+    }
+    // 指定角色
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.ROLE &&
+      configForm.value.roleIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      roleOptions?.value.forEach((item: any) => {
+        if (configForm.value?.roleIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定角色：${candidateNames.join(',')}`;
+    }
+    // 指定部门
+    if (
+      (configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+        configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+        configForm.value?.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) &&
+      configForm.value?.deptIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      deptOptions?.value.forEach((item) => {
+        if (configForm.value?.deptIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      if (
+        configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER
+      ) {
+        showText = `部门成员：${candidateNames.join(',')}`;
+      } else if (
+        configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
+      ) {
+        showText = `部门的负责人：${candidateNames.join(',')}`;
+      } else {
+        showText = `多级部门的负责人：${candidateNames.join(',')}`;
+      }
+    }
+
+    // 指定岗位
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.POST &&
+      configForm.value.postIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      postOptions?.value.forEach((item) => {
+        if (configForm.value?.postIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定岗位: ${candidateNames.join(',')}`;
+    }
+    // 指定用户组
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP &&
+      configForm.value?.userGroups?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      userGroupOptions?.value.forEach((item) => {
+        if (configForm.value?.userGroups?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定用户组: ${candidateNames.join(',')}`;
+    }
+
+    // 表单内用户字段
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
+      const formFieldOptions = parseFormCreateFields(unref(formFields));
+      const item = formFieldOptions.find(
+        (item) => item.field === configForm.value?.formUser,
+      );
+      showText = `表单用户：${item?.title}`;
+    }
+
+    // 表单内部门负责人
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+    ) {
+      showText = `表单内部门负责人`;
+    }
+
+    // 审批人自选
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.APPROVE_USER_SELECT
+    ) {
+      showText = `审批人自选`;
+    }
+
+    // 发起人自选
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_SELECT
+    ) {
+      showText = `发起人自选`;
+    }
+    // 发起人自己
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
+      showText = `发起人自己`;
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_DEPT_LEADER
+    ) {
+      showText = `发起人的部门负责人`;
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      showText = `发起人连续部门负责人`;
+    }
+    // 流程表达式
+    if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      showText = `流程表达式：${configForm.value.expression}`;
+    }
+    return showText;
+  }
+
+  /**
+   *  处理候选人参数的赋值
+   */
+  function handleCandidateParam() {
+    let candidateParam: string | undefined;
+    if (!configForm.value) {
+      return candidateParam;
+    }
+    switch (configForm.value.candidateStrategy) {
+      case CandidateStrategy.DEPT_LEADER:
+      case CandidateStrategy.DEPT_MEMBER: {
+        candidateParam = configForm.value.deptIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.EXPRESSION: {
+        candidateParam = configForm.value.expression;
+        break;
+      }
+      // 表单内部门的负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
+        const deptFieldOnForm = configForm.value.formDept;
+        candidateParam = deptFieldOnForm?.concat(
+          `|${configForm.value.deptLevel}`,
+        );
+        break;
+      }
+      case CandidateStrategy.FORM_USER: {
+        candidateParam = configForm.value?.formUser;
+        break;
+      }
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const deptIds = configForm.value.deptIds?.join(',');
+        candidateParam = deptIds?.concat(`|${configForm.value.deptLevel}`);
+        break;
+      }
+      case CandidateStrategy.POST: {
+        candidateParam = configForm.value.postIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.ROLE: {
+        candidateParam = configForm.value.roleIds?.join(',');
+        break;
+      }
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
+        candidateParam = `${configForm.value.deptLevel}`;
+        break;
+      }
+      case CandidateStrategy.USER: {
+        candidateParam = configForm.value.userIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.USER_GROUP: {
+        candidateParam = configForm.value.userGroups?.join(',');
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    return candidateParam;
+  }
+  /**
+   *  解析候选人参数
+   */
+  function parseCandidateParam(
+    candidateStrategy: CandidateStrategy,
+    candidateParam: string | undefined,
+  ) {
+    if (!configForm.value || !candidateParam) {
+      return;
+    }
+    switch (candidateStrategy) {
+      case CandidateStrategy.DEPT_LEADER:
+      case CandidateStrategy.DEPT_MEMBER: {
+        configForm.value.deptIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.EXPRESSION: {
+        configForm.value.expression = candidateParam;
+        break;
+      }
+      // 表单内的部门负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
+        const paramArray = candidateParam.split('|');
+        if (paramArray.length > 1) {
+          configForm.value.formDept = paramArray[0];
+          if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
+        }
+        break;
+      }
+      case CandidateStrategy.FORM_USER: {
+        configForm.value.formUser = candidateParam;
+        break;
+      }
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const paramArray = candidateParam.split('|') as string[];
+        if (paramArray.length > 1) {
+          configForm.value.deptIds = paramArray[0]
+            ?.split(',')
+            .map((item) => +item);
+          if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
+        }
+        break;
+      }
+      case CandidateStrategy.POST: {
+        configForm.value.postIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.ROLE: {
+        configForm.value.roleIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
+        configForm.value.deptLevel = +candidateParam;
+        break;
+      }
+      case CandidateStrategy.USER: {
+        configForm.value.userIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.USER_GROUP: {
+        configForm.value.userGroups = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+  return {
+    configForm,
+    roleOptions,
+    postOptions,
+    userOptions,
+    userGroupOptions,
+    deptTreeOptions,
+    handleCandidateParam,
+    parseCandidateParam,
+    getShowText,
+  };
+}
+
+/**
+ * @description 抽屉配置
+ */
+export function useDrawer() {
+  // 抽屉配置是否可见
+  const settingVisible = ref(false);
+  // 关闭配置抽屉
+  function closeDrawer() {
+    settingVisible.value = false;
+  }
+  // 打开配置抽屉
+  function openDrawer() {
+    settingVisible.value = true;
+  }
+  return {
+    settingVisible,
+    closeDrawer,
+    openDrawer,
+  };
+}
+
+/**
+ * @description 节点名称配置
+ */
+export function useNodeName(nodeType: BpmNodeTypeEnum) {
+  // 节点名称
+  const nodeName = ref<string>();
+  // 节点名称输入框
+  const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
+  // 点击节点名称编辑图标
+  function clickIcon() {
+    showInput.value = true;
+  }
+  // 修改节点名称
+  function changeNodeName() {
+    showInput.value = false;
+    nodeName.value =
+      nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
+  }
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
+  return {
+    nodeName,
+    showInput,
+    inputRef,
+    clickIcon,
+    changeNodeName,
+  };
+}
+
+export function useNodeName2(
+  node: Ref<SimpleFlowNode>,
+  nodeType: BpmNodeTypeEnum,
+) {
+  // 显示节点名称输入框
+  const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
+
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
+  // 修改节点名称
+  function changeNodeName() {
+    showInput.value = false;
+    node.value.name =
+      node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
+    console.warn('node.value.name===>', node.value.name);
+  }
+  // 点击节点标题进行输入
+  function clickTitle() {
+    showInput.value = true;
+  }
+  return {
+    showInput,
+    inputRef,
+    clickTitle,
+    changeNodeName,
+  };
+}
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function useTaskStatusClass(
+  taskStatus: BpmTaskStatusEnum | undefined,
+): string {
+  if (!taskStatus) {
+    return '';
+  }
+  if (taskStatus === BpmTaskStatusEnum.APPROVE) {
+    return 'status-pass';
+  }
+  if (taskStatus === BpmTaskStatusEnum.RUNNING) {
+    return 'status-running';
+  }
+  if (taskStatus === BpmTaskStatusEnum.REJECT) {
+    return 'status-reject';
+  }
+  if (taskStatus === BpmTaskStatusEnum.CANCEL) {
+    return 'status-cancel';
+  }
+  return '';
+}
+
+/** 条件组件文字展示 */
+export function getConditionShowText(
+  conditionType: ConditionType | undefined,
+  conditionExpression: string | undefined,
+  conditionGroups: ConditionGroup | undefined,
+  fieldOptions: Array<Record<string, any>>,
+) {
+  let showText: string | undefined;
+  if (conditionType === ConditionType.EXPRESSION && conditionExpression) {
+    showText = `表达式：${conditionExpression}`;
+  }
+  if (conditionType === ConditionType.RULE) {
+    // 条件组是否为与关系
+    const groupAnd = conditionGroups?.and;
+    let warningMessage: string | undefined;
+    const conditionGroup = conditionGroups?.conditions.map((item) => {
+      return `(${item.rules
+        .map((rule) => {
+          if (rule.leftSide && rule.rightSide) {
+            return `${getFormFieldTitle(
+              fieldOptions,
+              rule.leftSide,
+            )} ${getOpName(rule.opCode)} ${rule.rightSide}`;
+          } else {
+            // 有一条规则不完善。提示错误
+            warningMessage = '请完善条件规则';
+            return '';
+          }
+        })
+        .join(item.and ? ' 且 ' : ' 或 ')} ) `;
+    });
+    showText = warningMessage
+      ? ''
+      : conditionGroup?.join(groupAnd ? ' 且 ' : ' 或 ');
+  }
+  return showText;
+}
+
+/** 获取表单字段名称*/
+function getFormFieldTitle(
+  fieldOptions: Array<Record<string, any>>,
+  field: string,
+) {
+  const item = fieldOptions.find((item) => item.field === field);
+  return item?.title;
+}
+
+/** 获取操作符名称 */
+function getOpName(opCode: string): string | undefined {
+  const opName = COMPARISON_OPERATORS.find(
+    (item: any) => item.value === opCode,
+  );
+  return opName?.label;
+}
+
+/** 获取条件节点默认的名称 */
+export function getDefaultConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+}
+
+/** 获取包容分支条件节点默认的名称 */
+export function getDefaultInclusiveConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+}

apps/web-ele/src/views/bpm/components/simple-process-design/index.ts

@@ -0,0 +1,11 @@
+import './styles/simple-process-designer.scss';
+
+export { default as HttpRequestSetting } from './components/nodes-config/modules/http-request-setting.vue';
+
+export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
+
+export { default as SimpleProcessViewer } from './components/simple-process-viewer.vue';
+
+export type { SimpleFlowNode } from './consts';
+
+export { parseFormFields } from './helpers';

apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss

@@ -0,0 +1,759 @@
+// TODO 整个样式是不是要重新优化一下
+// iconfont 样式
+@font-face {
+  font-family: iconfont; /* Project id 4495938 */
+  src:
+    url('iconfont.woff2?t=1737639517142') format('woff2'),
+    url('iconfont.woff?t=1737639517142') format('woff'),
+    url('iconfont.ttf?t=1737639517142') format('truetype');
+}
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    max-width: 510px;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      outline: 0;
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+    }
+  }
+}
+// 节点连线气泡卡片样式
+.handler-item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  width: 320px;
+  cursor: pointer;
+
+  .handler-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+  }
+
+  .handler-item-icon {
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    user-select: none;
+    background: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 50%;
+
+    &:hover {
+      background: #e2e2e2;
+      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    }
+
+    .icon-size {
+      font-size: 25px;
+      line-height: 50px;
+    }
+  }
+
+  .approve {
+    color: #ff943e;
+  }
+
+  .copy {
+    color: #3296fa;
+  }
+
+  .condition {
+    color: #67c23a;
+  }
+
+  .parallel {
+    color: #626aef;
+  }
+
+  .inclusive {
+    color: #345da2;
+  }
+
+  .delay {
+    color: #e47470;
+  }
+
+  .trigger {
+    color: #3373d2;
+  }
+
+  .router {
+    color: #ca3a31;
+  }
+
+  .transactor {
+    color: #309;
+  }
+
+  .child-process {
+    color: #963;
+  }
+
+  .async-child-process {
+    color: #066;
+  }
+
+  .handler-item-text {
+    width: 80px;
+    margin-top: 4px;
+    font-size: 13px;
+    text-align: center;
+  }
+}
+// Simple 流程模型样式
+.simple-process-model-container {
+  width: 100%;
+  height: 100%;
+  padding-top: 32px;
+  overflow-x: auto;
+  background-color: #fafafa;
+
+  .simple-process-model {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: fit-content;
+    background: url('./svg/simple-process-bg.svg') 0 0 repeat;
+    transform: scale(1);
+    transform-origin: 50% 0 0;
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    // 节点容器 定义节点宽度
+    .node-container {
+      width: 200px;
+    }
+    // 节点
+    .node-box {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      min-height: 70px;
+      padding: 5px 10px 8px;
+      cursor: pointer;
+      background-color: #fff;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+      transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &.status-pass {
+        background-color: #a9da90;
+        border-color: #67c23a;
+      }
+
+      &.status-pass:hover {
+        border-color: #67c23a;
+      }
+
+      &.status-running {
+        background-color: #e7f0fe;
+        border-color: #5a9cf8;
+      }
+
+      &.status-running:hover {
+        border-color: #5a9cf8;
+      }
+
+      &.status-reject {
+        background-color: #f6e5e5;
+        border-color: #e47470;
+      }
+
+      &.status-reject:hover {
+        border-color: #e47470;
+      }
+
+      &:hover {
+        border-color: #0089ff;
+
+        .node-toolbar {
+          opacity: 1;
+        }
+
+        .branch-node-move {
+          display: flex;
+        }
+      }
+
+      // 普通节点标题
+      .node-title-container {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+
+        .node-title-icon {
+          display: flex;
+          align-items: center;
+
+          &.user-task {
+            color: #ff943e;
+          }
+
+          &.copy-task {
+            color: #3296fa;
+          }
+
+          &.start-user {
+            color: #676565;
+          }
+
+          &.delay-node {
+            color: #e47470;
+          }
+
+          &.trigger-node {
+            color: #3373d2;
+          }
+
+          &.router-node {
+            color: #ca3a31;
+          }
+
+          &.transactor-task {
+            color: #309;
+          }
+
+          &.child-process {
+            color: #963;
+          }
+
+          &.async-child-process {
+            color: #066;
+          }
+        }
+
+        .node-title {
+          margin-left: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 18px;
+          color: #1f1f1f;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #f60;
+          }
+        }
+      }
+
+      // 条件节点标题
+      .branch-node-title-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 0;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+
+        .input-max-width {
+          max-width: 115px !important;
+        }
+
+        .branch-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 13px;
+          font-weight: 600;
+          color: #f60;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #000;
+          }
+        }
+
+        .branch-priority {
+          min-width: 50px;
+          font-size: 12px;
+        }
+      }
+
+      .node-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-top: 4px;
+        line-height: 32px;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          font-size: 14px;
+          line-height: 24px;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      //条件节点内容
+      .branch-node-content {
+        display: flex;
+        align-items: center;
+        min-height: 32px;
+        padding: 4px 0;
+        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: 1; /* 这将限制文本显示为一行 */
+          font-size: 12px;
+          line-height: 24px;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      // 节点操作 ：删除
+      .node-toolbar {
+        position: absolute;
+        top: -20px;
+        right: 0;
+        display: flex;
+        opacity: 0;
+
+        .toolbar-icon {
+          vertical-align: middle;
+          text-align: center;
+        }
+      }
+
+      // 条件节点左右移动
+      .branch-node-move {
+        position: absolute;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 10px;
+        height: 100%;
+        cursor: pointer;
+      }
+
+      .move-node-left {
+        top: 0;
+        left: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+
+      .move-node-right {
+        top: 0;
+        right: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+
+    .node-config-error {
+      border-color: #ff5219 !important;
+    }
+    // 普通节点包装
+    .node-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    // 节点连线处理
+    .node-handler-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 70px;
+      user-select: none;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        width: 2px;
+        height: 100%;
+        margin: auto;
+        content: '';
+        background-color: #dedede;
+      }
+
+      .node-handler {
+        .add-icon {
+          position: relative;
+          top: -5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 25px;
+          height: 25px;
+          color: #fff;
+          cursor: pointer;
+          background-color: #0089ff;
+          border-radius: 50%;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .node-handler-arrow {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        display: flex;
+        transform: translateX(-50%);
+      }
+    }
+
+    // 条件节点包装
+    .branch-node-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 16px;
+
+      .branch-node-container {
+        position: relative;
+        display: flex;
+        min-width: fit-content;
+
+        &::before {
+          position: absolute;
+          left: 50%;
+          width: 4px;
+          height: 100%;
+          content: '';
+          background-color: #fafafa;
+          transform: translate(-50%);
+        }
+
+        .branch-node-add {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          align-items: center;
+          height: 36px;
+          padding: 0 10px;
+          font-size: 12px;
+          line-height: 36px;
+          border: 2px solid #dedede;
+          border-radius: 18px;
+          transform: translateX(-50%);
+          transform-origin: center center;
+        }
+
+        .branch-node-readonly {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          background-color: #fff;
+          border: 2px solid #dedede;
+          border-radius: 50%;
+          transform: translateX(-50%);
+          transform-origin: center center;
+
+          &.status-pass {
+            background-color: #e9f4e2;
+            border-color: #6bb63c;
+          }
+
+          &.status-pass:hover {
+            border-color: #6bb63c;
+          }
+
+          .icon-size {
+            font-size: 22px;
+
+            &.condition {
+              color: #67c23a;
+            }
+
+            &.parallel {
+              color: #626aef;
+            }
+
+            &.inclusive {
+              color: #345da2;
+            }
+          }
+        }
+
+        .branch-node-item {
+          position: relative;
+          display: flex;
+          flex-shrink: 0;
+          flex-direction: column;
+          align-items: center;
+          min-width: 280px;
+          padding: 40px 40px 0;
+          background: transparent;
+          border-top: 2px solid #dedede;
+          border-bottom: 2px solid #dedede;
+
+          &::before {
+            position: absolute;
+            inset: 0;
+            width: 2px;
+            height: 100%;
+            margin: auto;
+            content: '';
+            background-color: #dedede;
+          }
+        }
+        // 覆盖条件节点第一个节点左上角的线
+        .branch-line-first-top {
+          position: absolute;
+          top: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点第一个节点左下角的线
+        .branch-line-first-bottom {
+          position: absolute;
+          bottom: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点最后一个节点右上角的线
+        .branch-line-last-top {
+          position: absolute;
+          top: -5px;
+          right: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点最后一个节点右下角的线
+        .branch-line-last-bottom {
+          position: absolute;
+          right: -1px;
+          bottom: -5px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+      }
+    }
+
+    .node-fixed-name {
+      display: inline-block;
+      width: auto;
+      padding: 0 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+      white-space: nowrap;
+    }
+    // 开始节点包装
+    .start-node-wrapper {
+      position: relative;
+      margin-top: 16px;
+
+      .start-node-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .start-node-box {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 90px;
+          height: 36px;
+          padding: 3px 4px;
+          color: #212121;
+          cursor: pointer;
+          background: #fafafa;
+          border-radius: 30px;
+          box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        }
+      }
+    }
+
+    // 结束节点包装
+    .end-node-wrapper {
+      margin-bottom: 16px;
+
+      .end-node-box {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 36px;
+        color: #212121;
+        background-color: #fff;
+        border: 2px solid transparent;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+
+        &.status-pass {
+          background-color: #a9da90;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        &.status-reject {
+          background-color: #f6e5e5;
+          border-color: #e47470;
+        }
+
+        &.status-reject:hover {
+          border-color: #e47470;
+        }
+
+        &.status-cancel {
+          background-color: #eaeaeb;
+          border-color: #919398;
+        }
+
+        &.status-cancel:hover {
+          border-color: #919398;
+        }
+      }
+    }
+
+    // 可编辑的 title 输入框
+    .editable-title-input {
+      max-width: 145px;
+      height: 20px;
+      margin-left: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        outline: 0;
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-trigger::before {
+  content: '\e6d3';
+}
+
+.icon-router::before {
+  content: '\e6b2';
+}
+
+.icon-delay::before {
+  content: '\e600';
+}
+
+.icon-start-user::before {
+  content: '\e679';
+}
+
+.icon-inclusive::before {
+  content: '\e602';
+}
+
+.icon-copy::before {
+  content: '\e7eb';
+}
+
+.icon-transactor::before {
+  content: '\e61c';
+}
+
+.icon-exclusive::before {
+  content: '\e717';
+}
+
+.icon-approve::before {
+  content: '\e715';
+}
+
+.icon-parallel::before {
+  content: '\e688';
+}
+
+.icon-async-child-process::before {
+  content: '\e6f2';
+}
+
+.icon-child-process::before {
+  content: '\e6c1';
+}

apps/web-ele/src/views/bpm/components/simple-process-design/styles/svg/simple-process-bg.svg

@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>

apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue

@@ -291,8 +291,8 @@ defineExpose({ validate });
         <ImageUpload
           v-model:value="modelData.icon"
           :show-description="false"
-          :width="120"
+          width="120px"
-          :height="120"
+          height="120px"
         />
       </ElFormItem>
       <ElFormItem label="流程描述" prop="description">

apps/web-ele/src/views/bpm/model/form/modules/process-design.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { computed, nextTick, ref } from 'vue';
+import type { Ref } from 'vue';
+
+import { computed, inject, nextTick, ref } from 'vue';
 
 import { BpmModelType } from '@vben/constants';
 
@@ -7,23 +9,23 @@ import BpmModelEditor from './bpm-model-editor.vue';
 import SimpleModelDesign from './simple-model-design.vue';
 
 const modelData = defineModel<any>(); // 创建本地数据副本
-// const processData = inject('processData') as Ref;
+const processData = inject('processData') as Ref;
 
 const simpleDesign = ref();
 
 /** 表单校验 */
 async function validate() {
   // 获取最新的流程数据
-  // if (!processData.value) {
+  if (!processData.value) {
-  //   throw new Error('请设计流程');
+    throw new Error('请设计流程');
-  // }
+  }
-  // if (modelData.value.type === BpmModelType.SIMPLE) {
+  if (modelData.value.type === BpmModelType.SIMPLE) {
-  //   // 简易设计器校验
+    // 简易设计器校验
-  //   const validateResult = await simpleDesign.value?.validateConfig();
+    const validateResult = await simpleDesign.value?.validateConfig();
-  //   if (!validateResult) {
+    if (!validateResult) {
-  //     throw new Error('请完善设计配置');
+      throw new Error('请完善设计配置');
-  //   }
+    }
-  // }
+  }
   return true;
 }
 

apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
 
-// import { SimpleProcessDesigner } from '#/views/bpm/components/simple-process-design';
+import { SimpleProcessDesigner } from '#/views/bpm/components/simple-process-design';
 
 defineOptions({ name: 'SimpleModelDesign' });
 
@@ -15,16 +15,16 @@ defineProps<{
   startUserIds?: number[];
 }>();
 
-// const emit = defineEmits(['success']);
+const emit = defineEmits(['success']);
 
 const designerRef = ref();
 
 /** 保存成功回调 */
-// function handleSuccess(data?: any) {
+function handleSuccess(data?: any) {
-//   if (data) {
+  if (data) {
-//     emit('success', data);
+    emit('success', data);
-//   }
+  }
-// }
+}
 
 /** 设计器配置校验 */
 async function validateConfig() {
@@ -35,7 +35,7 @@ defineExpose({ validateConfig });
 </script>
 <template>
   <ContentWrap class="px-4 py-5">
-    <!-- <SimpleProcessDesigner
+    <SimpleProcessDesigner
       :model-form-id="modelFormId"
       :model-name="modelName"
       :model-form-type="modelFormType"
@@ -43,6 +43,6 @@ defineExpose({ validateConfig });
       :start-user-ids="startUserIds"
       :start-dept-ids="startDeptIds"
       ref="designerRef"
-    /> -->
+    />
   </ContentWrap>
 </template>