!172 !170 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !172 from xingyu/dev

apps/web-antd/src/components/form-create/components/use-api-select.tsx

@@ -186,6 +186,12 @@ export const useApiSelect = (option: ApiSelectProps) => {
       });
 
       const buildSelect = () => {
+        const {
+          modelValue,
+          'onUpdate:modelValue': onUpdateModelValue,
+          ...restAttrs
+        } = attrs;
+
         if (props.multiple) {
           // fix：多写此步是为了解决 multiple 属性问题
           return (
@@ -193,7 +199,9 @@ export const useApiSelect = (option: ApiSelectProps) => {
               class="w-full"
               loading={loading.value}
               mode="multiple"
-              {...attrs}
+              onUpdate:value={onUpdateModelValue as any}
+              value={modelValue as any}
+              {...restAttrs}
               // TODO: remote 对等实现
               // remote={props.remote}
               {...(props.remote && { remoteMethod })}
@@ -212,7 +220,9 @@ export const useApiSelect = (option: ApiSelectProps) => {
           <Select
             class="w-full"
             loading={loading.value}
-            {...attrs}
+            onUpdate:value={onUpdateModelValue as any}
+            value={modelValue as any}
+            {...restAttrs}
             // TODO: @dhb52 remote 对等实现, 还是说没作用
             // remote={props.remote}
             {...(props.remote && { remoteMethod })}
@@ -228,6 +238,11 @@ export const useApiSelect = (option: ApiSelectProps) => {
         );
       };
       const buildCheckbox = () => {
+        const {
+          modelValue,
+          'onUpdate:modelValue': onUpdateModelValue,
+          ...restAttrs
+        } = attrs;
         if (isEmpty(options.value)) {
           options.value = [
             { label: '选项1', value: '选项1' },
@@ -235,7 +250,12 @@ export const useApiSelect = (option: ApiSelectProps) => {
           ];
         }
         return (
-          <CheckboxGroup class="w-full" {...attrs}>
+          <CheckboxGroup
+            class="w-full"
+            onUpdate:value={onUpdateModelValue as any}
+            value={modelValue as any}
+            {...restAttrs}
+          >
             {options.value.map(
               (item: { label: any; value: any }, index: any) => (
                 <Checkbox key={index} value={item.value}>
@@ -247,6 +267,11 @@ export const useApiSelect = (option: ApiSelectProps) => {
         );
       };
       const buildRadio = () => {
+        const {
+          modelValue,
+          'onUpdate:modelValue': onUpdateModelValue,
+          ...restAttrs
+        } = attrs;
         if (isEmpty(options.value)) {
           options.value = [
             { label: '选项1', value: '选项1' },
@@ -254,7 +279,12 @@ export const useApiSelect = (option: ApiSelectProps) => {
           ];
         }
         return (
-          <RadioGroup class="w-full" {...attrs}>
+          <RadioGroup
+            class="w-full"
+            onUpdate:value={onUpdateModelValue as any}
+            value={modelValue as any}
+            {...restAttrs}
+          >
             {options.value.map(
               (item: { label: any; value: any }, index: any) => (
                 <Radio key={index} value={item.value}>

apps/web-antd/src/components/markdown-view/markdown-view.vue

@@ -22,7 +22,7 @@ const md = new MarkdownIt({
     if (lang && hljs.getLanguage(lang)) {
       try {
         const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`;
-        return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(lang, str, true).value}</code></pre>`;
+        return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
       } catch {}
     }
     return ``;

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

@@ -0,0 +1,875 @@
+<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_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: 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' },
+  ],
+  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 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;
+};
+
+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>
+          </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>多实例设置</Divider>
+        <FormItem
+          label="启用开关"
+          label-align="left"
+          name="multiInstanceEnable"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 4 }"
+        >
+          <Switch
+            v-model:checked="configForm.multiInstanceEnable"
+            checked-children="开启"
+            un-checked-children="关闭"
+          />
+        </FormItem>
+        <div v-if="configForm.multiInstanceEnable">
+          <FormItem
+            name="sequential"
+            label="是否串行"
+            label-align="left"
+            :label-col="{ span: 5 }"
+            :wrapper-col="{ span: 4 }"
+          >
+            <Switch
+              v-model:checked="configForm.sequential"
+              checked-children="是"
+              un-checked-children="否"
+            />
+          </FormItem>
+          <FormItem
+            name="approveRatio"
+            label="完成比例(%)"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 4 }"
+          >
+            <InputNumber
+              v-model:value="configForm.approveRatio"
+              :min="10"
+              :max="100"
+              :step="10"
+            />
+          </FormItem>
+          <FormItem
+            name="multiInstanceSourceType"
+            label="实例数量"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 12 }"
+          >
+            <Select
+              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
+            "
+            name="multiInstanceSource"
+            label="固定数量"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 12 }"
+            :rules="{
+              required: true,
+              message: '固定数量不能为空',
+              trigger: 'change',
+            }"
+          >
+            <InputNumber
+              v-model:value="configForm.multiInstanceSource"
+              :min="1"
+            />
+          </FormItem>
+          <FormItem
+            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',
+            }"
+          >
+            <Select 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
+            "
+            name="multiInstanceSource"
+            label="多选表单"
+            label-align="left"
+            :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 12 }"
+            :rules="{
+              required: true,
+              message: '多选表单字段不能为空',
+              trigger: 'change',
+            }"
+          >
+            <Select 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>

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

@@ -62,9 +62,15 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-// TODO xingyu 暴露 modalApi 给父组件是否合适? trigger-node-config.vue 会有多个 conditionDialog 实例
-// 不用暴露啊，用 useVbenModal 就可以了
-defineExpose({ modalApi });
+/**
+ * 打开条件配置弹窗，不暴露 modalApi 给父组件
+ */
+function openModal(conditionObj: any) {
+  modalApi.setData(conditionObj).open();
+}
+
+// 暴露方法给父组件
+defineExpose({ openModal });
 </script>
 <template>
   <Modal class="w-1/2">

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

@@ -200,8 +200,8 @@ function addFormSettingCondition(
   formSetting: FormTriggerSetting,
 ) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
-  // 使用modalApi来打开模态框并传递数据
-  conditionDialog.modalApi.setData(formSetting).open();
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
 }
 
 /** 删除条件配置 */
@@ -215,8 +215,8 @@ function openFormSettingCondition(
   formSetting: FormTriggerSetting,
 ) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
-  // 使用 modalApi 来打开模态框并传递数据
-  conditionDialog.modalApi.setData(formSetting).open();
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
 }
 
 /** 处理条件配置保存 */

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

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { 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,
+);
+
+// 节点配置 Ref
+const nodeConfigRef = ref();
+
+/** 打开节点配置 */
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeConfigRef.value.showChildProcessNodeConfig(currentNode.value);
+};
+
+/** 删除节点。更新当前节点为孩子节点 */
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${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="nodeConfigRef"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+
+<style scoped></style>

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"

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"

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

@@ -126,7 +126,8 @@ function updateModel() {
       name: '发起人',
       type: BpmNodeTypeEnum.START_USER_NODE,
       id: NodeId.START_USER_NODE_ID,
-      showText: '默认配置',
+      // 默认为空，需要进行配置
+      showText: '',
       childNode: {
         id: NodeId.END_EVENT_NODE_ID,
         name: '结束',

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 = [

apps/web-antd/src/components/table-action/table-action.vue

@@ -60,39 +60,14 @@ function isIfShow(action: ActionItem): boolean {
 
 /** 处理按钮 actions */
 const getActions = computed(() => {
-  return (props.actions || [])
-    .filter((action: ActionItem) => isIfShow(action))
-    .map((action: ActionItem) => {
-      const { popConfirm } = action;
-      return {
-        type: action.type || 'link',
-        ...action,
-        ...popConfirm,
-        onConfirm: popConfirm?.confirm,
-        onCancel: popConfirm?.cancel,
-        enable: !!popConfirm,
-      };
-    });
+  return (props.actions || []).filter((action: ActionItem) => isIfShow(action));
 });
 
 /** 处理下拉菜单 actions */
 const getDropdownList = computed(() => {
-  return (props.dropDownActions || [])
-    .filter((action: ActionItem) => isIfShow(action))
-    .map((action: ActionItem, index: number) => {
-      const { label, popConfirm } = action;
-      const processedAction = { ...action };
-      delete processedAction.icon;
-      return {
-        ...processedAction,
-        ...popConfirm,
-        onConfirm: popConfirm?.confirm,
-        onCancel: popConfirm?.cancel,
-        text: label,
-        divider:
-          index < props.dropDownActions.length - 1 ? props.divider : false,
-      };
-    });
+  return (props.dropDownActions || []).filter((action: ActionItem) =>
+    isIfShow(action),
+  );
 });
 
 /** Space 组件的 size */
@@ -103,18 +78,27 @@ const spaceSize = computed(() => {
 });
 
 /** 获取 PopConfirm 属性 */
-function getPopConfirmProps(attrs: PopConfirm) {
-  const originAttrs: any = { ...attrs };
-  delete originAttrs.icon;
-  if (attrs.confirm && isFunction(attrs.confirm)) {
-    originAttrs.onConfirm = attrs.confirm;
-    delete originAttrs.confirm;
+function getPopConfirmProps(popConfirm: PopConfirm) {
+  if (!popConfirm) return {};
+
+  const attrs: Record<string, any> = {};
+
+  // 复制基本属性，排除函数
+  Object.keys(popConfirm).forEach((key) => {
+    if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
+      attrs[key] = popConfirm[key as keyof PopConfirm];
+    }
+  });
+
+  // 单独处理事件函数
+  if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
+    attrs.onConfirm = popConfirm.confirm;
   }
-  if (attrs.cancel && isFunction(attrs.cancel)) {
-    originAttrs.onCancel = attrs.cancel;
-    delete originAttrs.cancel;
+  if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
+    attrs.onCancel = popConfirm.cancel;
   }
-  return originAttrs;
+
+  return attrs;
 }
 
 /** 获取 Button 属性 */
@@ -146,6 +130,13 @@ function handleMenuClick(e: any) {
 function getActionKey(action: ActionItem, index: number) {
   return `${action.label || ''}-${action.type || ''}-${index}`;
 }
+
+/** 处理按钮点击 */
+function handleButtonClick(action: ActionItem) {
+  if (action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
 </script>
 
 <template>
@@ -172,7 +163,10 @@ function getActionKey(action: ActionItem, index: number) {
           </Tooltip>
         </Popconfirm>
         <Tooltip v-else v-bind="getTooltipProps(action.tooltip)">
-          <Button v-bind="getButtonProps(action)" @click="action.onClick">
+          <Button
+            v-bind="getButtonProps(action)"
+            @click="handleButtonClick(action)"
+          >
             <template v-if="action.icon" #icon>
               <IconifyIcon :icon="action.icon" />
             </template>
@@ -184,7 +178,7 @@ function getActionKey(action: ActionItem, index: number) {
 
     <Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
       <slot name="more">
-        <Button :type="getDropdownList[0]?.type">
+        <Button type="link">
           <template #icon>
             {{ $t('page.action.more') }}
             <IconifyIcon icon="lucide:ellipsis-vertical" />
@@ -213,7 +207,7 @@ function getActionKey(action: ActionItem, index: number) {
                 >
                   <IconifyIcon v-if="action.icon" :icon="action.icon" />
                   <span :class="action.icon ? 'ml-1' : ''">
-                    {{ action.text }}
+                    {{ action.label }}
                   </span>
                 </div>
               </Popconfirm>