From a9306450b52bc9f57fe7beab2a1edf4edce57623 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 29 Jun 2025 06:58:17 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]?=
 =?UTF-8?q?=20=E5=A2=9E=E5=8A=A0=E5=AD=90=E6=B5=81=E7=A8=8B=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodes/child-process-node.vue   | 129 ++++++++++++++++++
 .../components/nodes/user-task-node.vue       |  21 +--
 .../components/process-node-tree.vue          |   9 +-
 3 files changed, 136 insertions(+), 23 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue
new file mode 100644
index 000000000..f9d6b4642
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { BpmNodeTypeEnum } from '#/utils';
+
+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,
+);
+
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    console.warn('TODO: 打开节点配置');
+  }
+  // 暂时注释掉，因为child-process-node-config.vue文件不存在
+  // nodeSetting.value.showChildProcessNodeConfig(currentNode.value);
+  // nodeSetting.value.openDrawer();
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${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>
+          <Input
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
+            v-model:value="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="nodeSetting"
+      :flow-node="currentNode"
+    /> -->
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
index 9f7ee6bf1..ce841bcc1 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
@@ -16,25 +16,6 @@ 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';
-// // 使用useVbenVxeGrid
-// const [Grid, gridApi] = useVbenVxeGrid({
-//   gridOptions: {
-//     columns: columns.value,
-//     keepSource: true,
-//     border: true,
-//     height: 'auto',
-//     data: selectTasks.value,
-//     rowConfig: {
-//       keyField: 'id',
-//     },
-//     pagerConfig: {
-//       enabled: false,
-//     },
-//     toolbarConfig: {
-//       enabled: false,
-//     },
-//   } as VxeTableGridOptions<any>,
-// });
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'UserTaskNode' });
@@ -155,7 +136,7 @@ function findReturnTaskNodes(
           </div>
         </div>
       </div>
-      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler
         v-if="currentNode"
         v-model:child-node="currentNode.childNode"
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 50fca1638..dc9039089 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -4,6 +4,7 @@ import type { SimpleFlowNode } from '../consts';
 import { BpmNodeTypeEnum } from '#/utils';
 
 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';
@@ -140,11 +141,13 @@ function recursiveFindParentNode(
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 子流程节点 -->
-  <!-- <ChildProcessNode
-    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
+  <ChildProcessNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.CHILD_PROCESS_NODE
+    "
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree
     v-if="currentNode && currentNode.childNode"

From 9cea95a9d070df25bc2447e578b16904c81b133f Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 29 Jun 2025 23:09:06 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]?=
 =?UTF-8?q?=20=E5=AD=90=E6=B5=81=E7=A8=8B=E8=8A=82=E7=82=B9=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../child-process-node-config.vue             | 825 ++++++++++++++++++
 .../nodes-config/user-task-node-config.vue    |   2 +-
 .../components/nodes/child-process-node.vue   |  29 +-
 .../simple-process-design/consts.ts           |   2 +-
 4 files changed, 842 insertions(+), 16 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue
new file mode 100644
index 000000000..4b48dd3d8
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -0,0 +1,825 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { IOParameter, SimpleFlowNode } from '../../consts';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  DatePicker,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  Switch,
+} from 'ant-design-vue';
+
+import { getFormDetail } from '#/api/bpm/form';
+import { getModelList } from '#/api/bpm/model';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import {
+  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: Record<string, Rule[]> = 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' },
+  ],
+});
+
+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');
+});
+//  TODO: 多实例暂时注释
+// 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 getFormDetail(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;
+};
+/** TODO: 多实例暂时注释 */
+// 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">
+        <Input
+          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()"
+          @press-enter="changeNodeName()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <Form
+        ref="formRef"
+        :model="configForm"
+        :label-wrap="true"
+        :label-col="{ span: 24 }"
+        :wrapper-col="{ span: 24 }"
+        :rules="formRules"
+      >
+        <FormItem
+          label="是否异步执行"
+          name="async"
+          label-align="left"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 4 }"
+        >
+          <Switch
+            v-model:checked="configForm.async"
+            checked-children="是"
+            un-checked-children="否"
+          />
+        </FormItem>
+        <FormItem label="选择子流程" name="calledProcessDefinitionKey">
+          <Select
+            v-model:value="configForm.calledProcessDefinitionKey"
+            allow-clear
+            @change="handleCalledElementChange"
+          >
+            <SelectOption
+              v-for="(item, index) in childProcessOptions"
+              :key="index"
+              :value="item.key"
+            >
+              {{ item.name }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <FormItem
+          label="是否自动跳过子流程发起节点"
+          name="skipStartUserNode"
+          label-align="left"
+          :label-col="{ span: 12 }"
+          :wrapper-col="{ span: 4 }"
+        >
+          <Switch
+            v-model:checked="configForm.skipStartUserNode"
+            checked-children="跳过"
+            un-checked-children="不跳过"
+          />
+        </FormItem>
+        <FormItem label="主→子变量传递" name="inVariables">
+          <div
+            class="flex"
+            v-for="(item, index) in configForm.inVariables"
+            :key="index"
+          >
+            <div class="mr-2">
+              <FormItem
+                :name="['inVariables', index, 'source']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <Select class="!w-40" v-model:value="item.source">
+                  <SelectOption
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+            <div class="mr-2">
+              <FormItem
+                :name="['inVariables', index, 'target']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <Select class="!w-40" v-model:value="item.target">
+                  <SelectOption
+                    v-for="(field, fIdx) in childFormFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </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>
+          <Button
+            type="link"
+            @click="addVariable(configForm.inVariables)"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="lucide:plus" />
+            </template>
+            添加一行
+          </Button>
+        </FormItem>
+        <FormItem
+          v-if="configForm.async === false"
+          label="子→主变量传递"
+          name="outVariables"
+        >
+          <div
+            class="flex"
+            v-for="(item, index) in configForm.outVariables"
+            :key="index"
+          >
+            <div class="mr-2">
+              <FormItem
+                :name="['outVariables', index, 'source']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <Select class="!w-40" v-model:value="item.source">
+                  <SelectOption
+                    v-for="(field, fIdx) in childFormFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+            <div class="mr-2">
+              <FormItem
+                :name="['outVariables', index, 'target']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <Select class="!w-40" v-model:value="item.target">
+                  <SelectOption
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </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>
+          <Button
+            type="link"
+            @click="addVariable(configForm.outVariables)"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="lucide:plus" />
+            </template>
+            添加一行
+          </Button>
+        </FormItem>
+        <FormItem label="子流程发起人" name="startUserType">
+          <RadioGroup v-model:value="configForm.startUserType">
+            <Radio
+              v-for="item in CHILD_PROCESS_START_USER_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          v-if="
+            configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM
+          "
+          label="子流程发起人字段"
+          name="startUserFormField"
+        >
+          <Select v-model:value="configForm.startUserFormField" allow-clear>
+            <SelectOption
+              v-for="(field, fIdx) in startUserFormFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+            >
+              {{ field.title }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <FormItem
+          v-if="
+            configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM
+          "
+          label="当子流程发起人为空时"
+          name="startUserEmptyType"
+        >
+          <RadioGroup v-model:value="configForm.startUserEmptyType">
+            <Radio
+              v-for="item in CHILD_PROCESS_START_USER_EMPTY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Radio>
+            <!-- <Row :gutter="[0, 8]">
+              <Col
+                v-for="item in CHILD_PROCESS_START_USER_EMPTY_TYPE"
+                :key="item.value"
+                :span="24"
+              >
+                <Radio :value="item.value" :label="item.value">
+                  {{ item.label }}
+                </Radio>
+              </Col>
+            </Row> -->
+          </RadioGroup>
+        </FormItem>
+
+        <Divider>超时设置</Divider>
+        <FormItem
+          label="启用开关"
+          name="timeoutEnable"
+          label-align="left"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 4 }"
+        >
+          <Switch
+            v-model:checked="configForm.timeoutEnable"
+            checked-children="开启"
+            un-checked-children="关闭"
+          />
+        </FormItem>
+        <div v-if="configForm.timeoutEnable">
+          <FormItem name="timeoutType">
+            <RadioGroup v-model:value="configForm.timeoutType">
+              <RadioButton
+                v-for="item in DELAY_TYPE"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </RadioButton>
+            </RadioGroup>
+          </FormItem>
+          <FormItem
+            v-if="configForm.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION"
+          >
+            <Row :gutter="8">
+              <Col>
+                <span class="inline-flex h-8 items-center"> 当超过 </span>
+              </Col>
+              <Col>
+                <FormItem name="timeDuration">
+                  <InputNumber
+                    class="w-24"
+                    v-model:value="configForm.timeDuration"
+                    :min="1"
+                    controls-position="right"
+                  />
+                </FormItem>
+              </Col>
+              <Col>
+                <Select v-model:value="configForm.timeUnit" class="w-24">
+                  <SelectOption
+                    v-for="item in TIME_UNIT_TYPES"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </SelectOption>
+                </Select>
+              </Col>
+              <Col>
+                <span class="inline-flex h-8 items-center">后进入下一节点</span>
+              </Col>
+            </Row>
+          </FormItem>
+          <FormItem
+            v-if="configForm.timeoutType === DelayTypeEnum.FIXED_DATE_TIME"
+            name="dateTime"
+          >
+            <Row :gutter="8">
+              <Col>
+                <DatePicker
+                  class="mr-2"
+                  v-model:value="configForm.dateTime"
+                  type="date"
+                  show-time
+                  placeholder="请选择日期和时间"
+                  value-format="YYYY-MM-DDTHH:mm:ss"
+                />
+              </Col>
+              <Col>
+                <span class="inline-flex h-8 items-center">
+                  后进入下一节点
+                </span>
+              </Col>
+            </Row>
+          </FormItem>
+        </div>
+
+        <!-- <Divider>多实例设置 TODO: 多实例暂时注释</Divider> -->
+        <!-- <FormItem label="启用开关" name="multiInstanceEnable">
+          <Switch
+            v-model:checked="configForm.multiInstanceEnable"
+            checked-children="开启"
+            un-checked-children="关闭"
+          />
+        </FormItem>
+        <div v-if="configForm.multiInstanceEnable">
+          <FormItem name="sequential">
+            <Switch
+              v-model:checked="configForm.sequential"
+              checked-children="串行"
+              un-checked-children="并行"
+            />
+          </FormItem>
+          <FormItem name="approveRatio">
+            <TypographyText>完成比例(%)</TypographyText>
+            <InputNumber
+              class="ml-2"
+              v-model:value="configForm.approveRatio"
+              :min="10"
+              :max="100"
+              :step="10"
+            />
+          </FormItem>
+          <FormItem name="multiInstanceSourceType">
+            <TypographyText>多实例来源</TypographyText>
+            <Select
+              class="ml-2 w-48"
+              v-model:value="configForm.multiInstanceSourceType"
+              @change="handleMultiInstanceSourceTypeChange"
+            >
+              <SelectOption
+                v-for="item in CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </SelectOption>
+            </Select>
+          </FormItem>
+          <FormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY
+            "
+          >
+            <InputNumber
+              v-model:value="configForm.multiInstanceSource"
+              :min="1"
+            />
+          </FormItem>
+          <FormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM
+            "
+          >
+            <Select class="w-48" v-model:value="configForm.multiInstanceSource">
+              <SelectOption
+                v-for="(field, fIdx) in digitalFormFieldOptions"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+              >
+                {{ field.title }}
+              </SelectOption>
+            </Select>
+          </FormItem>
+          <FormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM
+            "
+          >
+            <Select class="w-48" v-model:value="configForm.multiInstanceSource">
+              <SelectOption
+                v-for="(field, fIdx) in multiFormFieldOptions"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+              >
+                {{ field.title }}
+              </SelectOption>
+            </Select>
+          </FormItem>
+        </div> -->
+      </Form>
+    </div>
+  </Drawer>
+</template>
+
+<style scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index 03e2aea7d..66e6ed5ad 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -601,7 +601,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <Drawer class="w-1/3">
+  <Drawer class="w-2/5">
     <template #title>
       <div class="config-header">
         <Input
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue
index f9d6b4642..a6849e188 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SimpleFlowNode } from '../../consts';
 
-import { inject } from 'vue';
+import { inject, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
@@ -11,7 +11,7 @@ import { BpmNodeTypeEnum } from '#/utils';
 
 import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
-// import ChildProcessNodeConfig from '../nodes-config/child-process-node-config.vue';
+import ChildProcessNodeConfig from '../nodes-config/child-process-node-config.vue';
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'ChildProcessNode' });
@@ -20,7 +20,7 @@ const props = defineProps<{
   flowNode: SimpleFlowNode;
 }>();
 
-// 定义事件，更新父组件。
+/** 定义事件，更新父组件。 */
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
@@ -28,26 +28,27 @@ const emits = defineEmits<{
 // 是否只读
 const readonly = inject<Boolean>('readonly');
 
-// 监控节点的变化
+/** 监控节点的变化 */
 const currentNode = useWatchNode(props);
 
-// 节点名称编辑
+/** 节点名称编辑 */
 const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.CHILD_PROCESS_NODE,
 );
 
-// 打开节点配置
+// 节点配置 Ref
+const nodeConfigRef = ref();
+
+/** 打开节点配置 */
 const openNodeConfig = () => {
   if (readonly) {
-    console.warn('TODO: 打开节点配置');
+    return;
   }
-  // 暂时注释掉，因为child-process-node-config.vue文件不存在
-  // nodeSetting.value.showChildProcessNodeConfig(currentNode.value);
-  // nodeSetting.value.openDrawer();
+  nodeConfigRef.value.showChildProcessNodeConfig(currentNode.value);
 };
 
-// 删除节点。更新当前节点为孩子节点
+/** 删除节点。更新当前节点为孩子节点 */
 const deleteNode = () => {
   emits('update:flowNode', currentNode.value.childNode);
 };
@@ -118,11 +119,11 @@ const deleteNode = () => {
         :current-node="currentNode"
       />
     </div>
-    <!-- <ChildProcessNodeConfig
+    <ChildProcessNodeConfig
       v-if="!readonly && currentNode"
-      ref="nodeSetting"
+      ref="nodeConfigRef"
       :flow-node="currentNode"
-    /> -->
+    />
   </div>
 </template>
 
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
index fa2da26a2..cced73c1e 100644
--- a/apps/web-antd/src/components/simple-process-design/consts.ts
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -852,7 +852,7 @@ export const CHILD_PROCESS_START_USER_TYPE = [
     label: '同主流程发起人',
     value: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
   },
-  { label: '表单', value: ChildProcessStartUserTypeEnum.FROM_FORM },
+  { label: '从表单中获取', value: ChildProcessStartUserTypeEnum.FROM_FORM },
 ];
 
 export const CHILD_PROCESS_START_USER_EMPTY_TYPE = [