Merge branch 'feature/bpm' of gitee.com:yudaocode/yudao-ui-admin-vue3 into feature/bpm-审核超时跳转任意节点

Signed-off-by: Lemon <1599456917@qq.com>
2025-02-25 07:19:10 +00:00 · 2025-02-25 07:19:10 +00:00 · 9b04918118
parent 994211e693 de35fd0a7c
commit 9b04918118
16 changed files with 1008 additions and 113 deletions
--- a/src/assets/svgs/bpm/child-process.svg
+++ b/src/assets/svgs/bpm/child-process.svg
@ -0,0 +1 @@
+<svg t="1740116949537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" width="200" height="200"><path d="M440.32 296.96h283.30496v145.92h66.56V230.4H440.32V17.92H17.92v424.96H440.32V296.96zM373.76 376.32H84.48v-291.84H373.76v291.84zM586.24 588.8v143.36512H298.66496V586.24h-66.56v212.48512H586.24V1013.76H1008.64v-424.96h-422.4z m355.84 358.4h-289.28v-291.84H942.08v291.84z" p-id="1154" fill="#ffffff"></path></svg>
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@ -63,6 +63,12 @@
            </div>
            <div class="handler-item-text">触发器</div>
          </div>
+          <div class="handler-item" @click="addNode(NodeType.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"><Icon icon="ep:plus" /></div>
@ -283,6 +289,28 @@ const addNode = (type: number) => {
    }
    emits('update:childNode', data)
  }
+  if (type === NodeType.CHILD_PROCESS_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
+      showText: '',
+      type: NodeType.CHILD_PROCESS_NODE,
+      childNode: props.childNode,
+      childProcessSetting: {
+        calledProcessDefinitionKey: '',
+        calledProcessDefinitionName: '',
+        async: false,
+        skipStartUserNode: false,
+        startUserSetting: {
+          type: 1
+        },
+        timeoutSetting: {
+          enable: false
+        }
+      }
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>

--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@ -60,6 +60,12 @@
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
  />
+  <!-- 子流程节点 -->
+  <ChildProcessNode
+    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
  <!-- 递归显示孩子节点  -->
  <ProcessNodeTree
    v-if="currentNode && currentNode.childNode"
@ -86,8 +92,7 @@ import InclusiveNode from './nodes/InclusiveNode.vue'
 import DelayTimerNode from './nodes/DelayTimerNode.vue'
 import RouterNode from './nodes/RouterNode.vue'
 import TriggerNode from './nodes/TriggerNode.vue'
-
-
+import ChildProcessNode from './nodes/ChildProcessNode.vue'
 import { SimpleFlowNode, NodeType } from './consts'
 import { useWatchNode } from './node'

--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@ -38,6 +38,11 @@ export enum NodeType {
   */
  TRIGGER_NODE = 15,

+  /**
+   * 子流程节点
+   */
+  CHILD_PROCESS_NODE = 20,
+
  /**
   * 条件节点
   */
@ -128,6 +133,8 @@ export interface SimpleFlowNode {
  reasonRequire?: boolean
  // 触发器设置
  triggerSetting?: TriggerSetting
+  // 子流程
+  childProcessSetting?: ChildProcessSetting
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@ -528,6 +535,7 @@ NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器')
 NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点')
 NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器')
 NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人')
+NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程')

 export const NODE_DEFAULT_NAME = new Map<number, string>()
 NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
@ -538,6 +546,7 @@ NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器')
 NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支')
 NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器')
 NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人')
+NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程')

 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
 export const CANDIDATE_STRATEGY: DictDataVO[] = [
@ -764,10 +773,20 @@ export enum TriggerTypeEnum {
   * 发送 HTTP 请求触发器
   */
  HTTP_REQUEST = 1,
+  // TODO @jason：要不把 FORM_UPDATE、FORM_DELETE 调整从 10、11 这样？
  /**
-   * 流程表单更新触发器
+   * 表单数据更新触发器
   */
-  FORM_UPDATE = 2 
+  FORM_UPDATE = 2,
+  /**
+   * 表单数据删除触发器
+   */
+  FORM_DELETE = 3,
+  // TODO @jason：1）HTTP_CALLBACK 这个枚举值？然后，相关注释，朝着“HTTP 回调”走；2）枚举值改成 2？
+  /**
+   * 发起异步 HTTP 请求
+   */
+  ASYNC_HTTP_REQUEST = 4
 }

 /**
@ -794,11 +813,45 @@ export type FormTriggerSetting = {
  conditionExpression?: string
  // 条件组
  conditionGroups?: ConditionGroup
-  // 更新表单字段
+  // 更新表单字段配置
  updateFormFields?: Record<string, any>
+  // 删除表单字段配置
+  deleteFields?: string[]
 }

 export const TRIGGER_TYPES: DictDataVO[] = [
  { label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST },
-  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE }
+  { label: '异步 HTTP 请求', value: TriggerTypeEnum.ASYNC_HTTP_REQUEST },
+  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE },
+  { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE }
 ]
+
+/**
+ * 子流程节点结构定义
+ */
+export type ChildProcessSetting = {
+  calledProcessDefinitionKey: string
+  calledProcessDefinitionName: string
+  async: boolean,
+  inVariables?: IOParameter[],
+  outVariables?: IOParameter[],
+  skipStartUserNode: boolean,
+  startUserSetting: StartUserSetting,
+  timeoutSetting: TimeoutSetting,
+}
+export type IOParameter = {
+  source: string
+  sourceExpression: string
+  target: string
+  targetExpression: string
+}
+export type StartUserSetting = {
+  type: number
+  formField?: string
+  emptyType?: number
+}
+export type TimeoutSetting = {
+  enable: boolean,
+  type?: DelayTypeEnum,
+  timeExpression?: string,
+}
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue
@ -0,0 +1,470 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="子流程" name="child">
+        <div>
+          <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+            <el-form-item label="是否异步" prop="async">
+              <el-switch v-model="configForm.async" active-text="异步" inactive-text="不异步" />
+            </el-form-item>
+            <el-form-item label="选择子流程" prop="calledProcessDefinitionKey">
+              <el-select
+                v-model="configForm.calledProcessDefinitionKey"
+                clearable
+                @change="handleCalledElementChange"
+              >
+                <el-option
+                  v-for="(item, index) in childProcessOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.key"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否自动跳过子流程发起节点" prop="skipStartUserNode">
+              <el-switch
+                v-model="configForm.skipStartUserNode"
+                active-text="跳过"
+                inactive-text="不跳过"
+              />
+            </el-form-item>
+            <el-form-item label="主→子变量传递" prop="inVariables">
+              <div class="flex pt-2" v-for="(item, index) in configForm.inVariables" :key="index">
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`inVariables.${index}.source`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.source">
+                      <el-option
+                        v-for="(field, fIdx) in formFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`inVariables.${index}.target`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.target">
+                      <el-option
+                        v-for="(field, fIdx) in childFormFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-1 flex items-center">
+                  <Icon
+                    icon="ep:delete"
+                    :size="18"
+                    @click="deleteVariable(configForm.inVariables, index)"
+                  />
+                </div>
+              </div>
+              <el-button type="primary" text @click="addVariable(configForm.inVariables)">
+                <Icon icon="ep:plus" class="mr-5px" />添加一行
+              </el-button>
+            </el-form-item>
+            <!-- TODO @lesan：async、source、target 几个字段，会告警 -->
+            <el-form-item
+              v-if="configForm.async === false"
+              label="子→主变量传递"
+              prop="outVariables"
+            >
+              <div class="flex pt-2" v-for="(item, index) in configForm.outVariables" :key="index">
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`outVariables.${index}.source`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.source">
+                      <el-option
+                        v-for="(field, fIdx) in childFormFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`outVariables.${index}.target`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.target">
+                      <el-option
+                        v-for="(field, fIdx) in formFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-1 flex items-center">
+                  <Icon
+                    icon="ep:delete"
+                    :size="18"
+                    @click="deleteVariable(configForm.outVariables, index)"
+                  />
+                </div>
+              </div>
+              <el-button type="primary" text @click="addVariable(configForm.outVariables)">
+                <Icon icon="ep:plus" class="mr-5px" />添加一行
+              </el-button>
+            </el-form-item>
+            <!-- TODO @lesan：startUserType、startUserEmptyType 要不走写下枚举类？ -->
+            <el-form-item label="子流程发起人" prop="startUserType">
+              <el-radio-group v-model="configForm.startUserType">
+                <el-radio :value="1">同主流程发起人</el-radio>
+                <el-radio :value="2">表单</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.startUserType === 2"
+              label="当子流程发起人为空时"
+              prop="startUserType"
+            >
+              <el-radio-group v-model="configForm.startUserEmptyType">
+                <el-radio :value="1">同主流程发起人</el-radio>
+                <el-radio :value="2">子流程管理员</el-radio>
+                <el-radio :value="3">主流程管理员</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.startUserType === 2"
+              label="发起人表单"
+              prop="startUserFormField"
+            >
+              <el-select class="w-200px!" v-model="configForm.startUserFormField">
+                <el-option
+                  v-for="(field, fIdx) in formFieldOptions"
+                  :key="fIdx"
+                  :label="field.title"
+                  :value="field.field"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-divider content-position="left">超时设置</el-divider>
+            <el-form-item label="启用开关" prop="timeoutEnable">
+              <el-switch
+                v-model="configForm.timeoutEnable"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-form-item>
+            <div v-if="configForm.timeoutEnable">
+              <el-form-item prop="timeoutType">
+                <el-radio-group v-model="configForm.timeoutType">
+                  <el-radio-button
+                    v-for="item in DELAY_TYPE"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item v-if="configForm.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION">
+                <el-form-item prop="timeDuration">
+                  <el-input-number
+                    class="mr-2"
+                    :style="{ width: '100px' }"
+                    v-model="configForm.timeDuration"
+                    :min="1"
+                    controls-position="right"
+                  />
+                </el-form-item>
+                <el-select v-model="configForm.timeUnit" class="mr-2" :style="{ width: '100px' }">
+                  <el-option
+                    v-for="item in TIME_UNIT_TYPES"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <el-text>后进入下一节点</el-text>
+              </el-form-item>
+              <el-form-item
+                v-if="configForm.timeoutType === DelayTypeEnum.FIXED_DATE_TIME"
+                prop="dateTime"
+              >
+                <el-date-picker
+                  class="mr-2"
+                  v-model="configForm.dateTime"
+                  type="datetime"
+                  placeholder="请选择日期和时间"
+                  value-format="YYYY-MM-DDTHH:mm:ss"
+                />
+                <el-text>后进入下一节点</el-text>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { getModelList } from '@/api/bpm/model'
+import { getForm } from '@/api/bpm/form'
+import {
+  SimpleFlowNode,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+  DelayTypeEnum,
+  DELAY_TYPE
+} from '../consts'
+import { useWatchNode, useDrawer, useNodeName, useFormFieldsAndStartUser } from '../node'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+import { convertTimeUnit } from '../utils'
+defineOptions({
+  name: 'ChildProcessNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.CHILD_PROCESS_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('child')
+// 子流程表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const 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' }]
+})
+const configForm = ref({
+  async: false,
+  calledProcessDefinitionKey: '',
+  skipStartUserNode: false,
+  inVariables: [],
+  outVariables: [],
+  startUserType: 1,
+  startUserEmptyType: 1,
+  startUserFormField: '',
+  timeoutEnable: false,
+  timeoutType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: ''
+})
+const childProcessOptions = ref()
+const formFieldOptions = useFormFieldsAndStartUser()
+const childFormFieldOptions = ref()
+
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'child'
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  // TODO @lesan：这里的 option 黄色告警，也处理下哈
+  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
+      }
+    }
+  }
+
+  currentNode.value.showText = `调用子流程：${childInfo.name}`
+  settingVisible.value = false
+  return true
+}
+// 显示子流程节点配置， 由父组件传过来
+// TODO @lesan：inVariables、outVariables 红色告警
+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 ?? 1
+    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 ?? ''
+        let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
+        let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
+        configForm.value.timeDuration = parseInt(parseTime)
+        configForm.value.timeUnit = convertTimeUnit(parseTimeUnit)
+      }
+      // 固定日期时间
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        configForm.value.dateTime = node.childProcessSetting.timeoutSetting.timeExpression ?? ''
+      }
+    }
+  }
+  loadFormInfo()
+}
+
+defineExpose({ openDrawer, showChildProcessNodeConfig }) // 暴露方法给父组件
+
+// TODO @lesan：这里的 arr 黄色告警，也处理下哈，可以用 cursor quick fix 哈
+const addVariable = (arr) => {
+  arr.push({
+    source: '',
+    target: ''
+  })
+}
+const deleteVariable = (arr, index: number) => {
+  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
+  )
+  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
+}
+
+onMounted(async () => {
+  childProcessOptions.value = await getModelList(undefined)
+})
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@ -47,6 +47,7 @@ import { SimpleFlowNode, ConditionType } from '../consts'
 import { getDefaultConditionNodeName } from '../utils'
 import { useFormFieldsAndStartUser, getConditionShowText } from '../node'
 import Condition from './components/Condition.vue'
+import { cloneDeep } from 'lodash-es'
 const message = useMessage() // 消息弹窗
 defineOptions({
  name: 'ConditionNodeConfig'
@ -63,9 +64,43 @@ const props = defineProps({
 })
 const settingVisible = ref(false)
 const currentNode = ref<SimpleFlowNode>(props.conditionNode)
-const condition = ref<any>()
+const condition = ref<any>({
+  conditionType: ConditionType.RULE, // 设置默认值
+  conditionExpression: '',
+  conditionGroups: {
+    and: true,
+    conditions: [{
+      and: true,
+      rules: [{
+        opCode: '==',
+        leftSide: '',
+        rightSide: ''
+      }]
+    }]
+  }
+})
 const open = () => {
-  condition.value = currentNode.value.conditionSetting
+  // 如果有已存在的配置则使用，否则使用默认值
+  if (currentNode.value.conditionSetting) {
+    condition.value = cloneDeep(currentNode.value.conditionSetting)
+  } else {
+    // 重置为默认值
+    condition.value = {
+      conditionType: ConditionType.RULE,
+      conditionExpression: '',
+      conditionGroups: {
+        and: true,
+        conditions: [{
+          and: true,
+          rules: [{
+            opCode: '==',
+            leftSide: '',
+            rightSide: ''
+          }]
+        }]
+      }
+    }
+  }
  settingVisible.value = true
 }

@ -123,15 +158,13 @@ const saveConfig = async () => {
      return false
    }
    currentNode.value.showText = showText
-    currentNode.value.conditionSetting!.conditionType = condition.value?.conditionType
-    if (currentNode.value.conditionSetting?.conditionType === ConditionType.EXPRESSION) {
-      currentNode.value.conditionSetting.conditionGroups = undefined
-      currentNode.value.conditionSetting.conditionExpression = condition.value?.conditionExpression
-    }
-    if (currentNode.value.conditionSetting!.conditionType === ConditionType.RULE) {
-      currentNode.value.conditionSetting!.conditionExpression = undefined
-      currentNode.value.conditionSetting!.conditionGroups = condition.value?.conditionGroups
-    }
+    // 使用 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
+    })
  }
  settingVisible.value = false
  return true
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
@ -26,7 +26,7 @@
    <div>
      <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
        <el-form-item label="触发器类型" prop="type">
-          <el-select v-model="configForm.type">
+          <el-select v-model="configForm.type" @change="changeTriggerType">
            <el-option
              v-for="(item, index) in TRIGGER_TYPES"
              :key="index"
@ -36,8 +36,13 @@
          </el-select>
        </el-form-item>
        <!-- HTTP 请求触发器 -->
+        <!-- TODO @jason：可以考虑用 [].include 更简洁 -->
        <div
-          v-if="configForm.type === TriggerTypeEnum.HTTP_REQUEST && configForm.httpRequestSetting"
+          v-if="
+            (configForm.type === TriggerTypeEnum.HTTP_REQUEST ||
+              configForm.type === TriggerTypeEnum.ASYNC_HTTP_REQUEST) &&
+            configForm.httpRequestSetting
+          "
        >
          <el-form-item>
            <el-alert
@ -58,69 +63,74 @@
            :bind="'httpRequestSetting'"
          />
          <!-- 返回值设置-->
-          <el-form-item label="返回值">
-            <el-alert
-              title="通过请求返回值, 可以修改流程表单的值"
-              type="warning"
-              show-icon
-              :closable="false"
-            />
-          </el-form-item>
-          <el-form-item>
-            <div
-              class="flex pt-2"
-              v-for="(item, index) in configForm.httpRequestSetting.response"
-              :key="index"
-            >
-              <div class="mr-2">
-                <el-form-item
-                  :prop="`httpRequestSetting.response.${index}.key`"
-                  :rules="{
-                    required: true,
-                    message: '表单字段不能为空',
-                    trigger: 'blur'
-                  }"
-                >
-                  <el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
-                    <el-option
-                      v-for="(field, fIdx) in formFields"
-                      :key="fIdx"
-                      :label="field.title"
-                      :value="field.field"
-                      :disabled="!field.required"
-                    />
-                  </el-select>
-                </el-form-item>
+          <div v-if="configForm.type === TriggerTypeEnum.HTTP_REQUEST">
+            <el-form-item label="返回值">
+              <el-alert
+                title="通过请求返回值, 可以修改流程表单的值"
+                type="warning"
+                show-icon
+                :closable="false"
+              />
+            </el-form-item>
+            <el-form-item>
+              <div
+                class="flex pt-2"
+                v-for="(item, index) in configForm.httpRequestSetting.response"
+                :key="index"
+              >
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`httpRequestSetting.response.${index}.key`"
+                    :rules="{
+                      required: true,
+                      message: '表单字段不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
+                      <el-option
+                        v-for="(field, fIdx) in formFields"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                        :disabled="!field.required"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`httpRequestSetting.response.${index}.value`"
+                    :rules="{
+                      required: true,
+                      message: '请求返回字段不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-input class="w-160px" v-model="item.value" placeholder="请求返回字段" />
+                  </el-form-item>
+                </div>
+                <div class="mr-1 pt-1 cursor-pointer">
+                  <Icon
+                    icon="ep:delete"
+                    :size="18"
+                    @click="
+                      deleteHttpResponseSetting(configForm.httpRequestSetting.response!, index)
+                    "
+                  />
+                </div>
              </div>
-              <div class="mr-2">
-                <el-form-item
-                  :prop="`httpRequestSetting.response.${index}.value`"
-                  :rules="{
-                    required: true,
-                    message: '请求返回字段不能为空',
-                    trigger: 'blur'
-                  }"
-                >
-                  <el-input class="w-160px" v-model="item.value" placeholder="请求返回字段" />
-                </el-form-item>
-              </div>
-              <div class="mr-1 pt-1 cursor-pointer">
-                <Icon
-                  icon="ep:delete"
-                  :size="18"
-                  @click="deleteHttpResponseSetting(configForm.httpRequestSetting.response!, index)"
-                />
-              </div>
-            </div>
-            <el-button
-              type="primary"
-              text
-              @click="addHttpResponseSetting(configForm.httpRequestSetting.response!)"
-            >
-              <Icon icon="ep:plus" class="mr-5px" />添加一行
-            </el-button>
-          </el-form-item>
+              <el-button
+                type="primary"
+                text
+                @click="addHttpResponseSetting(configForm.httpRequestSetting.response!)"
+              >
+                <Icon icon="ep:plus" class="mr-5px" />添加一行
+              </el-button>
+            </el-form-item>
+          </div>
        </div>
+
        <!-- 表单数据修改触发器 -->
        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
          <div v-for="(formSetting, index) in configForm.formSettings" :key="index">
@ -150,8 +160,8 @@
                  type="success"
                  effect="light"
                  closable
-                  @close="deleteFormUpdateCondition(formSetting)"
-                  @click="openFormUpdateCondition(index, formSetting)"
+                  @close="deleteFormSettingCondition(formSetting)"
+                  @click="openFormSettingCondition(index, formSetting)"
                >
                  {{ showConditionText(formSetting) }}
                </el-tag>
@ -160,7 +170,7 @@
                v-else
                type="primary"
                text
-                @click="addFormUpdateCondition(index, formSetting)"
+                @click="addFormSettingCondition(index, formSetting)"
              >
                <Icon icon="ep:link" class="mr-5px" />添加条件
              </el-button>
@ -231,6 +241,76 @@
            <Icon icon="ep:setting" class="mr-5px" />添加设置
          </el-button>
        </div>
+
+        <!-- 表单数据删除触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div v-for="(formSetting, index) in configForm.formSettings" :key="index">
+            <el-card class="w-580px mt-4">
+              <template #header>
+                <div class="flex items-center justify-between">
+                  <div>删除表单设置 {{ index + 1 }}</div>
+                  <el-button
+                    type="primary"
+                    plain
+                    circle
+                    v-if="configForm.formSettings!.length > 1"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <Icon icon="ep:close" />
+                  </el-button>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <div class="cursor-pointer" v-if="formSetting.conditionType">
+                <el-tag
+                  type="warning"
+                  effect="light"
+                  closable
+                  @close="deleteFormSettingCondition(formSetting)"
+                  @click="openFormSettingCondition(index, formSetting)"
+                >
+                  {{ showConditionText(formSetting) }}
+                </el-tag>
+              </div>
+              <el-button
+                v-else
+                type="primary"
+                text
+                @click="addFormSettingCondition(index, formSetting)"
+              >
+                <Icon icon="ep:link" class="mr-5px" />添加条件
+              </el-button>
+
+              <el-divider content-position="left">删除表单字段设置</el-divider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <el-select
+                  v-model="formSetting.deleteFields"
+                  multiple
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <el-option
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  />
+                </el-select>
+              </div>
+            </el-card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <el-button class="mt-6" type="primary" text @click="addFormSetting">
+            <Icon icon="ep:setting" class="mr-5px" />添加设置
+          </el-button>
+        </div>
      </el-form>
    </div>
    <template #footer>
@ -292,7 +372,8 @@ const configForm = ref<TriggerSetting>({
  formSettings: [
    {
      conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
-      updateFormFields: {}
+      updateFormFields: {},
+      deleteFields: []
    }
  ]
 })
@ -308,6 +389,70 @@ const optionalUpdateFormFields = computed(() => {
  }))
 })

+let originalSetting: TriggerSetting | undefined
+
+/** 触发器类型改变了 */
+const 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.ASYNC_HTTP_REQUEST) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.ASYNC_HTTP_REQUEST &&
+      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: 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: DEFAULT_CONDITION_GROUP_VALUE,
+              updateFormFields: undefined,
+              deleteFields: []
+            }
+          ]
+    configForm.value.httpRequestSetting = undefined
+    return
+  }
+}
+
 /** 添加 HTTP 请求返回值设置项 */
 const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
  responseSetting.push({
@ -325,7 +470,8 @@ const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], in
 const addFormSetting = () => {
  configForm.value.formSettings!.push({
    conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
-    updateFormFields: {}
+    updateFormFields: {},
+    deleteFields: []
  })
 }

@ -335,16 +481,16 @@ const deleteFormSetting = (index: number) => {
 }

 /** 添加条件配置 */
-const addFormUpdateCondition = (index: number, formSetting: FormTriggerSetting) => {
+const addFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
  const conditionDialog = proxy.$refs[`condition-${index}`][0]
  conditionDialog.open(formSetting)
 }
 /** 删除条件配置 */
-const deleteFormUpdateCondition = (formSetting: FormTriggerSetting) => {
+const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => {
  formSetting.conditionType = undefined
 }
 /** 打开条件配置弹窗 */
-const openFormUpdateCondition = (index: number, formSetting: FormTriggerSetting) => {
+const openFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
  const conditionDialog = proxy.$refs[`condition-${index}`][0]
  conditionDialog.open(formSetting)
 }
@ -397,9 +543,18 @@ const saveConfig = async () => {
  currentNode.value.showText = showText
  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
    configForm.value.formSettings = undefined
-  }
-  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
    configForm.value.httpRequestSetting = undefined
+    // 清理删除字段相关的数据
+    configForm.value.formSettings?.forEach((setting) => {
+      setting.deleteFields = undefined
+    })
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.httpRequestSetting = undefined
+    // 清理修改字段相关的数据
+    configForm.value.formSettings?.forEach((setting) => {
+      setting.updateFormFields = undefined
+    })
  }
  currentNode.value.triggerSetting = configForm.value
  settingVisible.value = false
@ -409,7 +564,10 @@ const saveConfig = async () => {
 /** 获取节点展示内容 */
 const getShowText = (): string => {
  let showText = ''
-  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+  if (
+    configForm.value.type === TriggerTypeEnum.HTTP_REQUEST ||
+    configForm.value.type === TriggerTypeEnum.ASYNC_HTTP_REQUEST
+  ) {
    showText = `${configForm.value.httpRequestSetting?.url}`
  } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
    for (const [index, setting] of configForm.value.formSettings!.entries()) {
@ -419,6 +577,14 @@ const getShowText = (): string => {
      }
    }
    showText = '修改表单数据'
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    for (const [index, setting] of configForm.value.formSettings!.entries()) {
+      if (!setting.deleteFields || setting.deleteFields.length === 0) {
+        message.warning(`请选择表单设置${index + 1}要删除的字段`)
+        return ''
+      }
+    }
+    showText = '删除表单数据'
  }
  return showText
 }
@ -426,6 +592,7 @@ const getShowText = (): string => {
 /** 显示触发器节点配置， 由父组件传过来 */
 const showTriggerNodeConfig = (node: SimpleFlowNode) => {
  nodeName.value = node.name
+  originalSetting = node.triggerSetting ? JSON.parse(JSON.stringify(node.triggerSetting)) : {}
  if (node.triggerSetting) {
    configForm.value = {
      type: node.triggerSetting.type,
@ -438,7 +605,8 @@ const showTriggerNodeConfig = (node: SimpleFlowNode) => {
      formSettings: node.triggerSetting.formSettings || [
        {
          conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
-          updateFormFields: {}
+          updateFormFields: {},
+          deleteFields: []
        }
      ]
    }
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
@ -1,4 +1,5 @@
-<!-- TODO @jason：有可能，它里面套 Condition 么？ -->
+<!-- TODO @jason：有可能，它里面套 Condition 么？  -->
+<!-- TODO 怕影响其它节点功能，后面看看如何如何复用 Condtion --> 
 <template>
  <Dialog v-model="dialogVisible" title="条件配置" width="600px" :fullscreen="false">
    <div class="h-410px">
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue
@ -0,0 +1,106 @@
+<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
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.CHILD_PROCESS_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <ChildProcessNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import ChildProcessNodeConfig from '../nodes-config/ChildProcessNodeConfig.vue'
+
+defineOptions({
+  name: 'ChildProcessNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.CHILD_PROCESS_NODE)
+const nodeSetting = ref()
+
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showChildProcessNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style scoped></style>
--- a/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
+++ b/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
--- a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff
+++ b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff
--- a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
+++ b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@ -181,6 +181,14 @@
    color: #330099;
  }

+  .child-process {
+    color: #996633;
+  }
+
+  .async-child-process {
+    color: #006666;
+  }
+
  .handler-item-text {
    margin-top: 4px;
    width: 80px;
@ -302,6 +310,14 @@
          &.transactor-task {
            color: #330099;
          }
+
+          &.child-process {
+            color: #996633;
+          }
+
+          &.async-child-process {
+            color: #006666;
+          }
        }

        .node-title {
@ -800,3 +816,11 @@
 .icon-parallel:before {
  content: "\e688";
 }
+
+.icon-async-child-process:before {
+  content: "\e6f2";
+}
+
+.icon-child-process:before {
+  content: "\e6c1";
+}
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@ -157,24 +157,25 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 }

 /** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
-watch(
-  detailForm.value,
-  (newValue) => {
-    if (newValue && Object.keys(newValue.value).length > 0) {
-      // 记录之前的节点审批人
-      tempStartUserSelectAssignees.value = startUserSelectAssignees.value
-      startUserSelectAssignees.value = {}
-      // 加载最新的审批详情
-      getApprovalDetail({
-        id: props.selectProcessDefinition.id,
-        processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
-      })
-    }
-  },
-  {
-    immediate: true
-  }
-)
+// TODO @芋艿：这里我执行填写表单的时候不知道为啥一直报错，先注释了 @lesan：可以和群里的小北说下
+// watch(
+//   detailForm.value,
+//   (newValue) => {
+//     if (newValue && Object.keys(newValue.value).length > 0) {
+//       // 记录之前的节点审批人
+//       tempStartUserSelectAssignees.value = startUserSelectAssignees.value
+//       startUserSelectAssignees.value = {}
+//       // 加载最新的审批详情
+//       getApprovalDetail({
+//         id: props.selectProcessDefinition.id,
+//         processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+//       })
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )

 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@ -85,7 +85,8 @@ const setSimpleModelNodeTaskStatus = (
  if (
    simpleModel.type === NodeType.START_USER_NODE ||
    simpleModel.type === NodeType.USER_TASK_NODE ||
-    simpleModel.type === NodeType.TRANSACTOR_NODE
+    simpleModel.type === NodeType.TRANSACTOR_NODE ||
+    simpleModel.type === NodeType.CHILD_PROCESS_NODE
  ) {
    simpleModel.activityStatus = TaskStatusEnum.NOT_START
    if (rejectedTaskActivityIds.includes(simpleModel.id)) {
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@ -181,6 +181,7 @@ import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
 import finishSvg from '@/assets/svgs/bpm/finish.svg'
 import transactorSvg from '@/assets/svgs/bpm/transactor.svg'
+import childProcessSvg from '@/assets/svgs/bpm/child-process.svg'

 defineOptions({ name: 'BpmProcessInstanceTimeline' })
 withDefaults(
@ -249,7 +250,9 @@ const nodeTypeSvgMap = {
  // 条件分支节点
  [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
  // 并行分支节点
-  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg },
+  // 子流程节点
+  [NodeType.CHILD_PROCESS_NODE]: { color: '#14bb83', svg: childProcessSvg },
 }

 // 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
@ -269,6 +272,7 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
    nodeType === NodeType.START_USER_NODE ||
    nodeType === NodeType.USER_TASK_NODE ||
    nodeType === NodeType.TRANSACTOR_NODE ||
+    nodeType === NodeType.CHILD_PROCESS_NODE ||
    nodeType === NodeType.END_EVENT_NODE
  ) {
    return statusIconMap[taskStatus]?.icon
				`@ -0,0 +1 @@`
				`<svg t="1740116949537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" width="200" height="200"><path d="M440.32 296.96h283.30496v145.92h66.56V230.4H440.32V17.92H17.92v424.96H440.32V296.96zM373.76 376.32H84.48v-291.84H373.76v291.84zM586.24 588.8v143.36512H298.66496V586.24h-66.56v212.48512H586.24V1013.76H1008.64v-424.96h-422.4z m355.84 358.4h-289.28v-291.84H942.08v291.84z" p-id="1154" fill="#ffffff"></path></svg>`