From d49def855f6b70c575a68da9b6220bb8e759b56b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 27 May 2025 18:40:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E4=BA=BA=E8=8A=82=E7=82=B9=2080%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/start-user-node-config.vue   |  180 +--
 .../nodes-config/user-task-node-config.vue    | 1252 +++++++++++++++++
 .../components/nodes-config/utils.ts          |   48 +
 .../components/nodes/user-task-node.vue       |  138 ++
 .../components/process-node-tree.vue          |   15 +-
 .../styles/simple-process-designer.scss       |   76 -
 6 files changed, 1538 insertions(+), 171 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index 80b7b3a11..348a47317 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -12,10 +12,11 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
-  Divider,
+  Col,
   Input,
   Radio,
   RadioGroup,
+  Row,
   TabPane,
   Tabs,
   Tooltip,
@@ -91,8 +92,8 @@ const getDeptNames = (deptIds: number[]): string => {
 
 // 使用 VbenDrawer
 const [Drawer, drawerApi] = useVbenDrawer({
-  header: false,
-  closable: false,
+  header: true,
+  closable: true,
   onCancel() {
     drawerApi.close();
   },
@@ -142,28 +143,28 @@ defineExpose({ showStartUserNodeConfig });
 </script>
 <template>
   <Drawer>
-    <div class="config-header">
-      <!--    TODO v-mountedFocus 自动聚集 需要迁移一下 -->
-      <Input
-        v-if="showInput"
-        type="text"
-        class="config-editable-input"
-        @blur="blurEvent()"
-        v-model:value="nodeName"
-        :placeholder="nodeName"
-      />
-      <div v-else class="node-name">
-        {{ nodeName }}
-        <IconifyIcon
-          class="ml-1"
-          icon="ep:edit-pen"
-          :size="16"
-          @click="clickIcon()"
+    <template #title>
+      <div class="config-header">
+        <!--    TODO v-mountedFocus 自动聚集 需要迁移一下 -->
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
         />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon
+            class="ml-1"
+            icon="ep:edit-pen"
+            :size="16"
+            @click="clickIcon()"
+          />
+        </div>
       </div>
-      <Divider />
-    </div>
-
+    </template>
     <Tabs v-model:active-key="activeTabName" type="card">
       <TabPane tab="权限" key="user">
         <TypographyText
@@ -212,69 +213,76 @@ defineExpose({ showStartUserNodeConfig });
         key="fields"
         v-if="formType === BpmModelFormType.NORMAL"
       >
-        <div class="field-setting-pane">
-          <div class="field-setting-desc">字段权限</div>
-          <div class="field-permit-title">
-            <div class="setting-title-label first-title">字段名称</div>
-            <div class="other-titles">
-              <span
-                class="setting-title-label cursor-pointer"
-                @click="updatePermission('READ')"
-              >
-                只读
-              </span>
-              <span
-                class="setting-title-label cursor-pointer"
-                @click="updatePermission('WRITE')"
-              >
-                可编辑
-              </span>
-              <span
-                class="setting-title-label cursor-pointer"
-                @click="updatePermission('NONE')"
-              >
-                隐藏
-              </span>
-            </div>
-          </div>
-          <div
-            class="field-setting-item"
-            v-for="(item, index) in fieldsPermissionConfig"
-            :key="index"
-          >
-            <div class="field-setting-item-label">{{ item.title }}</div>
-            <RadioGroup
-              class="field-setting-item-group"
-              v-model:value="item.permission"
-            >
-              <div class="item-radio-wrap">
-                <Radio
-                  :value="FieldPermissionType.READ"
-                  size="large"
-                  :label="FieldPermissionType.READ"
-                >
-                  <span></span>
-                </Radio>
-              </div>
-              <div class="item-radio-wrap">
-                <Radio
-                  :value="FieldPermissionType.WRITE"
-                  size="large"
-                  :label="FieldPermissionType.WRITE"
-                >
-                  <span></span>
-                </Radio>
-              </div>
-              <div class="item-radio-wrap">
-                <Radio
-                  :value="FieldPermissionType.NONE"
-                  size="large"
-                  :label="FieldPermissionType.NONE"
-                >
-                  <span></span>
-                </Radio>
-              </div>
-            </RadioGroup>
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
           </div>
         </div>
       </TabPane>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
new file mode 100644
index 000000000..fdeac0433
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -0,0 +1,1252 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import type { ButtonSetting, SimpleFlowNode } from '../../consts';
+import type { UserTaskFormType } from '../../helpers';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  Switch,
+  TabPane,
+  Tabs,
+  Textarea,
+  TreeSelect,
+  TypographyText,
+} from 'ant-design-vue';
+
+// TODO import { defaultProps4AntTree } from '#/utils/tree';
+import {
+  APPROVE_METHODS,
+  APPROVE_TYPE,
+  ApproveMethodType,
+  ApproveType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  ASSIGN_START_USER_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  DEFAULT_BUTTON_SETTING,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+  NodeType,
+  OPERATION_BUTTON_NAME,
+  ProcessVariableEnum,
+  REJECT_HANDLER_TYPES,
+  RejectHandlerType,
+  TIME_UNIT_TYPES,
+  TIMEOUT_HANDLER_TYPES,
+  TimeoutHandlerType,
+  TimeUnitType,
+  TRANSACTOR_DEFAULT_BUTTON_SETTING,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import { convertTimeUnit, getApproveTypeText } from './utils';
+
+// TODO import UserTaskListener from './components/UserTaskListener.vue';
+
+defineOptions({ name: 'UserTaskNodeConfig' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const emits = defineEmits<{
+  findReturnTaskNodes: [nodeList: SimpleFlowNode[]];
+}>();
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  if (
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+  ) {
+    label = `${label}(指定部门向上)`;
+  } else if (
+    configForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    label = `${label}(表单内部门向上)`;
+  } else {
+    label = `${label}(发起人部门向上)`;
+  }
+  return label;
+});
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+// 节点名称配置
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.USER_TASK_NODE,
+);
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+// 表单字段权限设置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+// 操作按钮设置
+const {
+  buttonsSetting,
+  btnDisplayNameEdit,
+  changeBtnDisplayName,
+  btnDisplayNameBlurEvent,
+} = useButtonsSetting();
+const approveType = ref(ApproveType.USER);
+// 审批人表单设置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  candidateStrategy: [
+    { required: true, message: '审批人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+  approveMethod: [
+    { required: true, message: '多人审批方式不能为空', trigger: 'change' },
+  ],
+  approveRatio: [
+    { required: true, message: '通过比例不能为空', trigger: 'blur' },
+  ],
+  returnNodeId: [
+    { required: true, message: '驳回节点不能为空', trigger: 'change' },
+  ],
+  timeoutHandlerEnable: [{ required: true }],
+  timeoutHandlerType: [{ required: true }],
+  timeDuration: [
+    { required: true, message: '超时时间不能为空', trigger: 'blur' },
+  ],
+  maxRemindCount: [
+    { required: true, message: '提醒次数不能为空', trigger: 'blur' },
+  ],
+  assignEmptyHandlerType: [{ required: true }],
+  assignEmptyHandlerUserIds: [
+    { required: true, message: '用户不能为空', trigger: 'change' },
+  ],
+  assignStartUserHandlerType: [{ required: true }],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  handleCandidateParam,
+  parseCandidateParam,
+  getShowText,
+} = useNodeForm(currentNode.value.type);
+const configForm = tempConfigForm as Ref<UserTaskFormType>;
+
+// 改变审批人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+  configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
+};
+
+// 审批方式改变
+const approveMethodChanged = () => {
+  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = 100;
+  }
+  formRef.value.clearValidate('approveRatio');
+};
+// 审批拒绝 可退回的节点
+const returnTaskList = ref<SimpleFlowNode[]>([]);
+// 审批人超时未处理设置
+const {
+  timeoutHandlerChange,
+  cTimeoutType,
+  timeoutHandlerTypeChanged,
+  timeUnit,
+  timeUnitChange,
+  isoTimeDuration,
+  cTimeoutMaxRemindCount,
+} = useTimeoutHandler();
+
+// TODO 监听器待实现
+// const userTaskListenerRef = ref();
+
+/** 节点类型名称 */
+const nodeTypeName = computed(() => {
+  return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
+});
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!;
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value;
+  // 如果不是人工审批。返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.showText = getApproveTypeText(approveType.value);
+    drawerApi.close();
+    return true;
+  }
+  // TODO 监听器待实现
+  // activeTabName.value = 'listener';
+  // await nextTick();
+  activeTabName.value = 'user';
+
+  if (!formRef.value) return false;
+  //   TODO 监听器待实现
+  // if (!userTaskListenerRef.value) return false;
+  // const valid =
+  //   (await formRef.value.validate()) &&
+  //   (await userTaskListenerRef.value.validate());
+
+  if (!(await formRef.value.validate())) {
+    activeTabName.value = 'user';
+  }
+  //   TODO 监听器待实现
+  // if (!(await userTaskListenerRef.value.validate())) {
+  //   activeTabName.value = 'listener';
+  // }
+
+  const showText = getShowText();
+  if (!showText) return false;
+
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  // 处理 candidateParam 参数
+  currentNode.value.candidateParam = handleCandidateParam();
+  // 设置审批方式
+  currentNode.value.approveMethod = configForm.value.approveMethod;
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.approveRatio = configForm.value.approveRatio;
+  }
+  // 设置拒绝处理
+  currentNode.value.rejectHandler = {
+    type: configForm.value.rejectHandlerType!,
+    returnNodeId: configForm.value.returnNodeId,
+  };
+  // 设置超时处理
+  currentNode.value.timeoutHandler = {
+    enable: configForm.value.timeoutHandlerEnable!,
+    type: cTimeoutType.value,
+    timeDuration: isoTimeDuration.value,
+    maxRemindCount: cTimeoutMaxRemindCount.value,
+  };
+  // 设置审批人为空时
+  currentNode.value.assignEmptyHandler = {
+    type: configForm.value.assignEmptyHandlerType!,
+    userIds:
+      configForm.value.assignEmptyHandlerType ===
+      AssignEmptyHandlerType.ASSIGN_USER
+        ? configForm.value.assignEmptyHandlerUserIds
+        : undefined,
+  };
+  // 设置审批人与发起人相同时
+  currentNode.value.assignStartUserHandlerType =
+    configForm.value.assignStartUserHandlerType;
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  // 设置按钮权限
+  currentNode.value.buttonsSetting = buttonsSetting.value;
+  // 创建任务监听器
+  currentNode.value.taskCreateListener = {
+    enable: configForm.value.taskCreateListenerEnable ?? false,
+    path: configForm.value.taskCreateListenerPath,
+    header: configForm.value.taskCreateListener?.header,
+    body: configForm.value.taskCreateListener?.body,
+  };
+  // 指派任务监听器
+  currentNode.value.taskAssignListener = {
+    enable: configForm.value.taskAssignListenerEnable ?? false,
+    path: configForm.value.taskAssignListenerPath,
+    header: configForm.value.taskAssignListener?.header,
+    body: configForm.value.taskAssignListener?.body,
+  };
+  // 完成任务监听器
+  currentNode.value.taskCompleteListener = {
+    enable: configForm.value.taskCompleteListenerEnable ?? false,
+    path: configForm.value.taskCompleteListenerPath,
+    header: configForm.value.taskCompleteListener?.header,
+    body: configForm.value.taskCompleteListener?.body,
+  };
+  // 签名
+  currentNode.value.signEnable = configForm.value.signEnable;
+  // 审批意见
+  currentNode.value.reasonRequire = configForm.value.reasonRequire;
+
+  currentNode.value.showText = showText;
+  drawerApi.close();
+  return true;
+};
+
+/** 显示审批节点配置， 由父组件传过来 */
+const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  // 1 审批类型
+  approveType.value =
+    node?.approveType === undefined ? ApproveType.USER : node.approveType;
+  // 如果审批类型不是人工审批返回
+  if (approveType.value !== ApproveType.USER) {
+    drawerApi.open();
+    return;
+  }
+
+  // 2.1 审批人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  // 解析候选人参数
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 2.2 设置审批方式
+  configForm.value.approveMethod = node.approveMethod!;
+  if (node.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = node.approveRatio!;
+  }
+  // 2.3 设置审批拒绝处理
+  configForm.value.rejectHandlerType = node.rejectHandler?.type;
+  configForm.value.returnNodeId = node.rejectHandler?.returnNodeId;
+  const matchNodeList: SimpleFlowNode[] = [];
+  emits('findReturnTaskNodes', matchNodeList);
+  returnTaskList.value = matchNodeList;
+  // 2.4 设置审批超时处理
+  configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable;
+  if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
+    const strTimeDuration = node.timeoutHandler.timeDuration;
+    const parseTime = strTimeDuration.slice(2, -1);
+    const parseTimeUnit = strTimeDuration.slice(-1);
+    configForm.value.timeDuration = Number.parseInt(parseTime);
+    timeUnit.value = convertTimeUnit(parseTimeUnit);
+  }
+  configForm.value.timeoutHandlerType = node.timeoutHandler?.type;
+  configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount;
+  // 2.5 设置审批人为空时
+  configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type;
+  configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds;
+  // 2.6 设置用户任务的审批人与发起人相同时
+  configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType;
+  // 3. 操作按钮设置
+  buttonsSetting.value =
+    cloneDeep(node.buttonsSetting) ||
+    (node.type === NodeType.TRANSACTOR_NODE
+      ? TRANSACTOR_DEFAULT_BUTTON_SETTING
+      : DEFAULT_BUTTON_SETTING);
+  // 4. 表单字段权限配置
+  getNodeConfigFormFields(node.fieldsPermission);
+  // 5. 监听器
+  // 5.1 创建任务
+  configForm.value.taskCreateListenerEnable = node.taskCreateListener?.enable;
+  configForm.value.taskCreateListenerPath = node.taskCreateListener?.path;
+  configForm.value.taskCreateListener = {
+    header: node.taskCreateListener?.header ?? [],
+    body: node.taskCreateListener?.body ?? [],
+  };
+  // 5.2 指派任务
+  configForm.value.taskAssignListenerEnable = node.taskAssignListener?.enable;
+  configForm.value.taskAssignListenerPath = node.taskAssignListener?.path;
+  configForm.value.taskAssignListener = {
+    header: node.taskAssignListener?.header ?? [],
+    body: node.taskAssignListener?.body ?? [],
+  };
+  // 5.3 完成任务
+  configForm.value.taskCompleteListenerEnable =
+    node.taskCompleteListener?.enable;
+  configForm.value.taskCompleteListenerPath = node.taskCompleteListener?.path;
+  configForm.value.taskCompleteListener = {
+    header: node.taskCompleteListener?.header ?? [],
+    body: node.taskCompleteListener?.body ?? [],
+  };
+  // 6. 签名
+  configForm.value.signEnable = node?.signEnable ?? false;
+  // 7. 审批意见
+  configForm.value.reasonRequire = node?.reasonRequire ?? false;
+
+  drawerApi.open();
+};
+
+defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件
+
+/** 操作按钮设置 */
+function useButtonsSetting() {
+  const buttonsSetting = ref<ButtonSetting[]>();
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([]);
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true;
+  };
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false;
+    const buttonItem = buttonsSetting.value![index];
+    if (buttonItem)
+      buttonItem.displayName =
+        buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
+  };
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent,
+  };
+}
+
+/** 审批人超时未处理配置 */
+function useTimeoutHandler() {
+  // 时间单位
+  const timeUnit = ref(TimeUnitType.HOUR);
+
+  // 超时开关改变
+  const timeoutHandlerChange = () => {
+    if (configForm.value.timeoutHandlerEnable) {
+      timeUnit.value = 2;
+      configForm.value.timeDuration = 6;
+      configForm.value.timeoutHandlerType = 1;
+      configForm.value.maxRemindCount = 1;
+    }
+  };
+  // 超时执行的动作
+  const cTimeoutType = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    return configForm.value.timeoutHandlerType;
+  });
+
+  // 超时处理动作改变
+  const timeoutHandlerTypeChanged = () => {
+    if (configForm.value.timeoutHandlerType === TimeoutHandlerType.REMINDER) {
+      configForm.value.maxRemindCount = 1; // 超时提醒次数，默认为1
+    }
+  };
+
+  // 时间单位改变
+  const timeUnitChange = () => {
+    // 分钟，默认是 60 分钟
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      configForm.value.timeDuration = 60;
+    }
+    // 小时，默认是 6 个小时
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      configForm.value.timeDuration = 6;
+    }
+    // 天， 默认 1天
+    if (timeUnit.value === TimeUnitType.DAY) {
+      configForm.value.timeDuration = 1;
+    }
+  };
+  // 超时时间的 ISO 表示
+  const isoTimeDuration = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    let strTimeDuration = 'PT';
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      strTimeDuration += `${configForm.value.timeDuration}M`;
+    }
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      strTimeDuration += `${configForm.value.timeDuration}H`;
+    }
+    if (timeUnit.value === TimeUnitType.DAY) {
+      strTimeDuration += `${configForm.value.timeDuration}D`;
+    }
+    return strTimeDuration;
+  });
+
+  // 超时最大提醒次数
+  const cTimeoutMaxRemindCount = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    if (configForm.value.timeoutHandlerType !== TimeoutHandlerType.REMINDER) {
+      return undefined;
+    }
+    return configForm.value.maxRemindCount;
+  });
+
+  return {
+    timeoutHandlerChange,
+    cTimeoutType,
+    timeoutHandlerTypeChanged,
+    timeUnit,
+    timeUnitChange,
+    isoTimeDuration,
+    cTimeoutMaxRemindCount,
+  };
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+};
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  // 固定添加发起人ID字段
+  formFieldOptions.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    type: 'UserSelect',
+    required: true,
+  });
+});
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="config-header">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div
+      v-if="currentNode.type === NodeType.USER_TASK_NODE"
+      class="mb-3 flex items-center"
+    >
+      <span class="mr-3 text-[16px]">审批类型 :</span>
+      <RadioGroup v-model:value="approveType">
+        <RadioButton
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </RadioButton>
+      </RadioGroup>
+    </div>
+    <Tabs
+      v-model:active-key="activeTabName"
+      v-if="approveType === ApproveType.USER"
+    >
+      <TabPane :tab="`${nodeTypeName}人`" key="user">
+        <div>
+          <Form
+            ref="formRef"
+            :model="configForm"
+            :label-wrap="true"
+            :label-col="{ span: 24 }"
+            :wrapper-col="{ span: 24 }"
+            :rules="formRules"
+          >
+            <!-- 审批/办理 人设置 -->
+            <FormItem :label="`${nodeTypeName}人设置`" name="candidateStrategy">
+              <RadioGroup
+                v-model:value="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <Row :gutter="[0, 8]">
+                  <Col
+                    v-for="(dict, index) in CANDIDATE_STRATEGY"
+                    :key="index"
+                    :span="8"
+                  >
+                    <Radio :value="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </Radio>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.roleIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <!-- TODO :replace-fields="defaultProps4AntTree" -->
+              <TreeSelect
+                v-model:value="configForm.deptIds"
+                :tree-data="deptTreeOptions"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                :check-strictly="true"
+                allow-clear
+                style="width: 100%"
+                tree-checkable
+              />
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.postIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.userIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.userGroups"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.formUser"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.formDept"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <Select filterable v-model:value="configForm.deptLevel" clearable>
+                <SelectOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <Textarea
+                v-model:value="configForm.expression"
+                clearable
+                style="width: 100%"
+              />
+            </FormItem>
+            <!-- 多人审批/办理 方式 -->
+            <FormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
+              <RadioGroup
+                v-model:value="configForm.approveMethod"
+                @change="approveMethodChanged"
+              >
+                <Row :gutter="[0, 8]">
+                  <Col
+                    :span="24"
+                    v-for="(item, index) in APPROVE_METHODS"
+                    :key="index"
+                  >
+                    <div class="flex items-center">
+                      <Radio :value="item.value" :label="item.value">
+                        {{ item.label }}
+                      </Radio>
+                      <InputNumber
+                        v-if="
+                          item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                          configForm.approveMethod ===
+                            ApproveMethodType.APPROVE_BY_RATIO
+                        "
+                        v-model:value="configForm.approveRatio"
+                        :min="10"
+                        :max="100"
+                        :step="10"
+                        size="small"
+                      />
+                    </div>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">审批人拒绝时</Divider>
+              <FormItem name="rejectHandlerType">
+                <RadioGroup
+                  v-model:value="configForm.rejectHandlerType"
+                  class="w-full"
+                >
+                  <Row :gutter="24">
+                    <Col
+                      :span="8"
+                      v-for="(item, index) in REJECT_HANDLER_TYPES"
+                      :key="index"
+                    >
+                      <Radio :value="item.value" :label="item.label">
+                        {{ item.label }}
+                      </Radio>
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </FormItem>
+
+              <FormItem
+                v-if="
+                  configForm.rejectHandlerType ===
+                  RejectHandlerType.RETURN_USER_TASK
+                "
+                label="驳回节点"
+                name="returnNodeId"
+              >
+                <Select
+                  filterable
+                  v-model:value="configForm.returnNodeId"
+                  clearable
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in returnTaskList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  >
+                    {{ item.name }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">审批人超时未处理时</Divider>
+              <FormItem
+                label="启用开关"
+                name="timeoutHandlerEnable"
+                label-align="left"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 4 }"
+              >
+                <Switch
+                  v-model:checked="configForm.timeoutHandlerEnable"
+                  checked-children="开"
+                  un-checked-children="关"
+                  @change="timeoutHandlerChange"
+                />
+              </FormItem>
+              <FormItem
+                label="执行动作"
+                name="timeoutHandlerType"
+                v-if="configForm.timeoutHandlerEnable"
+                label-align="left"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
+                <RadioGroup
+                  v-model:value="configForm.timeoutHandlerType"
+                  @change="timeoutHandlerTypeChanged"
+                >
+                  <RadioButton
+                    v-for="item in TIMEOUT_HANDLER_TYPES"
+                    :key="item.value"
+                    :value="item.value"
+                    :label="item.label"
+                  >
+                    {{ item.label }}
+                  </RadioButton>
+                </RadioGroup>
+              </FormItem>
+              <FormItem
+                label="超时时间设置"
+                v-if="configForm.timeoutHandlerEnable"
+                label-align="left"
+                class="h-[32px]"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
+                <Row>
+                  <Col>
+                    <TypographyText class="mr-2 mt-2 inline-flex text-sm">
+                      当超过
+                    </TypographyText>
+                  </Col>
+                  <Col>
+                    <FormItem name="timeDuration">
+                      <InputNumber
+                        class="mr-2"
+                        :style="{ width: '100px' }"
+                        v-model:value="configForm.timeDuration"
+                        :min="1"
+                        controls-position="right"
+                      />
+                    </FormItem>
+                  </Col>
+                  <Col>
+                    <Select
+                      filterable
+                      v-model:value="timeUnit"
+                      class="mr-2"
+                      :style="{ width: '100px' }"
+                      @change="timeUnitChange"
+                    >
+                      <SelectOption
+                        v-for="item in TIME_UNIT_TYPES"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                        {{ item.label }}
+                      </SelectOption>
+                    </Select>
+                    <TypographyText class="mr-2 mt-2 inline-flex text-sm">
+                      未处理
+                    </TypographyText>
+                  </Col>
+                </Row>
+              </FormItem>
+              <FormItem
+                label="最大提醒次数"
+                name="maxRemindCount"
+                v-if="
+                  configForm.timeoutHandlerEnable &&
+                  configForm.timeoutHandlerType === 1
+                "
+                label-align="left"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
+                <InputNumber
+                  v-model:value="configForm.maxRemindCount"
+                  :min="1"
+                  :max="10"
+                />
+              </FormItem>
+            </div>
+
+            <Divider content-position="left">
+              {{ nodeTypeName }}人为空时
+            </Divider>
+            <FormItem name="assignEmptyHandlerType">
+              <RadioGroup v-model:value="configForm.assignEmptyHandlerType">
+                <Row :gutter="[0, 16]">
+                  <Col
+                    :span="24"
+                    v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES"
+                    :key="index"
+                  >
+                    <Radio :value="item.value" :label="item.label">
+                      {{ item.label }}
+                    </Radio>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.assignEmptyHandlerType ===
+                AssignEmptyHandlerType.ASSIGN_USER
+              "
+              label="指定用户"
+              name="assignEmptyHandlerUserIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.assignEmptyHandlerUserIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">
+                审批人与提交人为同一人时
+              </Divider>
+              <FormItem name="assignStartUserHandlerType">
+                <RadioGroup
+                  v-model:value="configForm.assignStartUserHandlerType"
+                >
+                  <Row :gutter="[0, 16]">
+                    <Col
+                      :span="24"
+                      v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES"
+                      :key="index"
+                    >
+                      <Radio :value="item.value" :label="item.label">
+                        {{ item.label }}
+                      </Radio>
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </FormItem>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">是否需要签名</Divider>
+              <FormItem name="signEnable">
+                <Switch
+                  v-model:checked="configForm.signEnable"
+                  checked-children="是"
+                  un-checked-children="否"
+                />
+              </FormItem>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">审批意见</Divider>
+              <FormItem name="reasonRequire">
+                <Switch
+                  v-model:checked="configForm.reasonRequire"
+                  checked-children="必填"
+                  un-checked-children="非必填"
+                />
+              </FormItem>
+            </div>
+          </Form>
+        </div>
+      </TabPane>
+      <TabPane
+        tab="操作按钮设置"
+        v-if="currentNode.type === NodeType.USER_TASK_NODE"
+        key="buttons"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">操作按钮</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">操作按钮</Col>
+            <Col :span="12" class="font-bold">显示名称</Col>
+            <Col :span="4" class="flex items-center justify-center font-bold">
+              启用
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in buttonsSetting" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ OPERATION_BUTTON_NAME.get(item.id) }}
+              </Col>
+              <Col :span="12" class="flex items-center">
+                <!-- TODO  v-mountedFocus 自动聚集需要迁移 -->
+                <Input
+                  v-if="btnDisplayNameEdit[index]"
+                  type="text"
+                  class="input-edit max-w-[130px]"
+                  @blur="btnDisplayNameBlurEvent(index)"
+                  v-model:value="item.displayName"
+                  :placeholder="item.displayName"
+                />
+                <Button v-else text @click="changeBtnDisplayName(index)">
+                  <div class="flex items-center">
+                    {{ item.displayName }}
+                    <IconifyIcon icon="ep:edit" class="ml-2" />
+                  </div>
+                </Button>
+              </Col>
+              <Col :span="4" class="flex items-center justify-center">
+                <Switch v-model:checked="item.enable" />
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane tab="表单字段权限" key="fields" v-if="formType === 10">
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane tab="监听器" key="listener">
+        <!-- TODO 待实现 -->
+        <span>待实现</span>
+        <!-- <UserTaskListener
+          ref="userTaskListenerRef"
+          v-model:value="configForm"
+          :form-field-options="formFieldOptions"
+        /> -->
+      </TabPane>
+    </Tabs>
+    <template #footer>
+      <Button type="primary" @click="saveConfig">确 定</Button>
+      <Button @click="drawerApi.close()">取 消</Button>
+    </template>
+  </Drawer>
+</template>
+<style lang="scss" scoped>
+.input-edit {
+  &:focus {
+    outline: 0;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
new file mode 100644
index 000000000..c6ab47eca
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
@@ -0,0 +1,48 @@
+import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
+
+/** 获取条件节点默认的名称 */
+export const getDefaultConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+};
+
+/** 获取包容分支条件节点默认的名称 */
+export const getDefaultInclusiveConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+};
+
+/** 转换时间单位字符串为枚举值 */
+export const convertTimeUnit = (strTimeUnit: string) => {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE;
+  }
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR;
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY;
+  }
+  return TimeUnitType.HOUR;
+};
+
+/** 根据审批类型获取对应的文本描述 */
+export const getApproveTypeText = (approveType: ApproveType): string => {
+  let approveTypeText = '';
+  APPROVE_TYPE.forEach((item) => {
+    if (item.value === approveType) {
+      approveTypeText = item.label;
+    }
+  });
+  return approveTypeText;
+};
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
new file mode 100644
index 000000000..b2a2055fc
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'UserTaskNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.START_USER_NODE,
+);
+const nodeSetting = ref();
+
+const nodeClick = () => {
+  if (readonly) {
+    if (tasks && tasks.value) {
+      // 只读模式，弹窗显示任务信息 TODO 待实现
+      console.warn('只读模式，弹窗显示任务信息待实现');
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
+  }
+};
+
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+// 查找可以驳回用户节点
+const findReturnTaskNodes = (
+  matchNodeList: SimpleFlowNode[], // 匹配的节点
+) => {
+  // 从父节点查找
+  emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
+};
+
+// const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
+            >
+            </span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(currentNode.type) }}
+          </div>
+          <IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+  <UserTaskNodeConfig
+    v-if="currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+    @find-return-task-nodes="findReturnTaskNodes"
+  />
+  <!--  TODO 审批记录 -->
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 3e9e7de1e..9060b6c62 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -5,6 +5,7 @@ import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import EndEventNode from './nodes/end-event-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
+import UserTaskNode from './nodes/user-task-node.vue';
 
 defineOptions({ name: 'ProcessNodeTree' });
 const props = defineProps({
@@ -29,16 +30,12 @@ const emits = defineEmits<{
 const currentNode = useWatchNode(props);
 
 // 用于删除节点
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+
 const handleModelValueUpdate = (updateValue: any) => {
   emits('update:flowNode', updateValue);
 };
 
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
-const triggerFromParentNode = (
-  nodeList: SimpleFlowNode[],
-  nodeType: number,
-) => {
+const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
   emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
 };
 
@@ -69,7 +66,7 @@ const recursiveFindParentNode = (
     :flow-node="currentNode"
   />
   <!-- 审批节点 -->
-  <!-- <UserTaskNode
+  <UserTaskNode
     v-if="
       currentNode &&
       (currentNode.type === NodeType.USER_TASK_NODE ||
@@ -77,8 +74,8 @@ const recursiveFindParentNode = (
     "
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 抄送节点 -->
   <!-- <CopyTaskNode
     v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index dbda6573b..8c3afd37f 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -44,82 +44,6 @@
     }
   }
 }
-
-// 表单字段权限
-.field-setting-pane {
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-
-  .field-setting-desc {
-    padding-right: 8px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 700;
-  }
-
-  .field-permit-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 45px;
-    padding-left: 12px;
-    line-height: 45px;
-    background-color: #f8fafc0a;
-    border: 1px solid #1f38581a;
-
-    .first-title {
-      text-align: left !important;
-    }
-
-    .other-titles {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .setting-title-label {
-      display: inline-block;
-      width: 110px;
-      padding: 5px 0;
-      font-size: 13px;
-      font-weight: 700;
-      color: #000;
-      text-align: center;
-    }
-  }
-
-  .field-setting-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
-    padding-left: 12px;
-    border: 1px solid #1f38581a;
-    border-top: 0;
-
-    .field-setting-item-label {
-      display: inline-block;
-      width: 110px;
-      min-height: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: text;
-    }
-
-    .field-setting-item-group {
-      display: flex;
-      justify-content: space-between;
-
-      .item-radio-wrap {
-        display: inline-block;
-        width: 110px;
-        text-align: center;
-      }
-    }
-  }
-}
-
 // 节点连线气泡卡片样式
 .handler-item-wrapper {
   display: flex;