review：【antd/ele】【bpm】流程模型的迁移

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue

@@ -32,7 +32,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       await formRef.value?.validate();
       emit('confirm', { ...form.value });
-      modalApi.close();
+      await modalApi.close();
     } catch {
       // validate failed
     }

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

@@ -193,7 +193,6 @@ const childFormFieldOptions = ref<any[]>([]);
 const saveConfig = async () => {
   activeTabName.value = 'child';
   if (!formRef.value) return false;
-
   const valid = await formRef.value.validate().catch(() => false);
   if (!valid) return false;
 

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

@@ -137,7 +137,7 @@ const {
 } = useNodeForm(BpmNodeTypeEnum.COPY_TASK_NODE);
 
 const configForm = tempConfigForm as Ref<CopyTaskFormType>;
-// 抄送人策略， 去掉发起人自选 和 发起人自己
+// 抄送人策略，去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
   return CANDIDATE_STRATEGY.filter(
     (item) => item.value !== CandidateStrategy.START_USER,

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

@@ -348,7 +348,7 @@ function getShowText(): string {
   return showText;
 }
 
-/** 显示触发器节点配置， 由父组件传过来 */
+/** 显示触发器节点配置，由父组件传过来 */
 function showTriggerNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   originalSetting = node.triggerSetting

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

@@ -532,7 +532,7 @@ function useTimeoutHandler() {
     if (timeUnit.value === TimeUnitType.HOUR) {
       configForm.value.timeDuration = 6;
     }
-    // 天， 默认 1天
+    // 天， 默认 1 天
     if (timeUnit.value === TimeUnitType.DAY) {
       configForm.value.timeDuration = 1;
     }

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

@@ -19,7 +19,7 @@ const props = defineProps<{
   flowNode: SimpleFlowNode;
 }>();
 
-/** 定义事件，更新父组件。 */
+/** 定义事件，更新父组件 */
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();

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

@@ -22,7 +22,7 @@ const props = defineProps({
     required: true,
   },
 });
-// 定义事件，更新父组件。
+// 定义事件，更新父组件
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();

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

@@ -20,7 +20,7 @@ const props = defineProps({
     required: true,
   },
 });
-// 定义事件，更新父组件。
+// 定义事件，更新父组件
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();

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

@@ -289,7 +289,7 @@ function recursiveFindParentNode(
           :condition-node="item"
           :ref="item.id"
         />
-        <!-- 递归显示子节点  -->
+        <!-- 递归显示子节点 -->
         <ProcessNodeTree
           v-if="item && item.childNode"
           :parent-node="item"

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

@@ -291,7 +291,7 @@ function recursiveFindParentNode(
           :condition-node="item"
           :ref="item.id"
         />
-        <!-- 递归显示子节点  -->
+        <!-- 递归显示子节点 -->
         <ProcessNodeTree
           v-if="item && item.childNode"
           :parent-node="item"

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

@@ -53,10 +53,10 @@ const showInputs = ref<boolean[]>([]);
 watch(
   showInputs,
   (newValues) => {
-    // 当输入框显示时, 自动聚焦
+    // 当输入框显示时 自动聚焦
     newValues.forEach((value, index) => {
       if (value) {
-        // 当显示状态从 false 变为 true 时, 自动聚焦
+        // 当显示状态从 false 变为 true 时 自动聚焦
         nextTick(() => {
           inputRefs.value[index]?.focus();
         });
@@ -212,7 +212,7 @@ function recursiveFindParentNode(
             />
           </div>
         </div>
-        <!-- 递归显示子节点  -->
+        <!-- 递归显示子节点 -->
         <ProcessNodeTree
           v-if="item && item.childNode"
           :parent-node="item"

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

@@ -27,7 +27,7 @@ const props = defineProps({
   },
 });
 
-// 定义事件，更新父组件。
+// 定义事件，更新父组件
 defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();

apps/web-antd/src/views/bpm/oa/leave/index.vue

@@ -17,6 +17,7 @@ import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
+// TODO @jason：这里是不是要迁移下？
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();

apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue

@@ -16,6 +16,7 @@ const emit = defineEmits<{
   select: [expression: BpmProcessExpressionApi.ProcessExpression];
 }>();
 
+// TODO @jason：这里是不是要迁移下？
 // 查询参数
 const queryParams = ref({
   status: CommonStatusEnum.ENABLE,

apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue

@@ -18,6 +18,7 @@ const emit = defineEmits<{
   select: [listener: BpmProcessListenerApi.ProcessListener];
 }>();
 
+// TODO @jason：这里是不是要迁移下？
 // 查询参数
 const queryParams = ref({
   type: '',

apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts

@@ -3,9 +3,7 @@ import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
-// TODO @puhui999：样式问题：设计器那，位置不太对；
 
 export { default as MyProcessDesigner } from './designer';
-// TODO @puhui999：流程发起时，预览相关的，需要使用；
 export { default as MyProcessViewer } from './designer/index2';
 export { default as MyProcessPenal } from './penal';

apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue

@@ -32,7 +32,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       await formRef.value?.validate();
       emit('confirm', { ...form.value });
-      modalApi.close();
+      await modalApi.close();
     } catch {
       // validate failed
     }

apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue

@@ -65,6 +65,7 @@ watch(
   <div class="panel-tab__content">
     <ElForm>
       <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
+      <!-- TODO @jaosn：这里 antd 属性地 hidden，需要关注么？ -->
       <ElFormItem label="异步延续" class="!hidden">
         <ElCheckbox
           v-model="taskConfigForm.asyncBefore"

apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue

@@ -43,6 +43,7 @@ import {
   MULTI_LEVEL_DEPT,
 } from '#/views/bpm/components/simple-process-design/consts';
 import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
+// TODO @jason：antd 是不是导入对齐这个？
 import { ProcessExpressionSelectModal } from '#/views/bpm/processExpression/components';
 
 defineOptions({ name: 'UserTask' });

apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue

@@ -28,6 +28,7 @@ const bpmnInstances = () => (window as any).bpmnInstances;
 const type: Ref<string> = ref('time');
 const condition: Ref<string> = ref('');
 const valid: Ref<boolean> = ref(false);
+// TODO @jason：const dateValue = ref<Dayjs>(); 需要么？
 const dateValue = ref();
 
 const placeholder = computed<string>(() => {
@@ -106,6 +107,7 @@ function validate(): boolean {
 // 选择时间 Modal
 const [DateModal, dateModalApi] = useVbenModal({
   title: '选择时间',
+  // TODO @jason：antd 这里有个属性，需要么？
   onConfirm: onDateConfirm,
 });
 
@@ -123,6 +125,7 @@ function onDateConfirm(): void {
 // 持续时长 Modal
 const [DurationModal, durationModalApi] = useVbenModal({
   title: '时间配置',
+  // TODO @jason：antd 这里有个属性，需要么？
   onConfirm: onDurationConfirm,
 });
 
@@ -137,6 +140,7 @@ function onDurationConfirm(): void {
 // 循环配置 Modal
 const [CycleModal, cycleModalApi] = useVbenModal({
   title: '时间配置',
+  // TODO @jason：antd 这里有个属性，需要么？
   onConfirm: onCycleConfirm,
 });
 

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

@@ -194,10 +194,10 @@ const saveConfig = async () => {
     // 3. 是否跳过发起人
     currentNode.value.childProcessSetting.skipStartUserNode =
       configForm.value.skipStartUserNode;
-    // 4. 主→子变量
+    // 4. 主->子变量
     currentNode.value.childProcessSetting.inVariables =
       configForm.value.inVariables;
-    // 5. 子→主变量
+    // 5. 子->主变量
     currentNode.value.childProcessSetting.outVariables =
       configForm.value.outVariables;
     // 6. 发起人设置
@@ -256,9 +256,9 @@ const showChildProcessNodeConfig = (node: SimpleFlowNode) => {
     // 3. 是否跳过发起人
     configForm.value.skipStartUserNode =
       node.childProcessSetting.skipStartUserNode;
-    // 4. 主流程→子流程变量
+    // 4. 主->子变量
     configForm.value.inVariables = node.childProcessSetting.inVariables ?? [];
-    // 5. 子流程→主流程变量
+    // 5. 子->主变量
     configForm.value.outVariables = node.childProcessSetting.outVariables ?? [];
     // 6. 发起人设置
     configForm.value.startUserType =

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

@@ -96,7 +96,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 function open() {
-  // 使用三元表达式代替if-else，解决linter 警告
+  // 使用三元表达式代替 if-else，解决 linter 警告
   condition.value = currentNode.value.conditionSetting
     ? cloneDeep(currentNode.value.conditionSetting)
     : {
@@ -132,7 +132,7 @@ watch(
 const showInput = ref(false);
 // 输入框的引用
 const inputRef = ref<HTMLInputElement | null>(null);
-// 监听 showInput 的变化，当变为true 时自动聚焦
+// 监听 showInput 的变化，当变为 true 时自动聚焦
 watch(showInput, (value) => {
   if (value) {
     nextTick(() => {
@@ -158,6 +158,7 @@ function changeNodeName() {
 defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 </script>
 <template>
+  <!-- TODO @jason：antd 是 1/3，这里要统一么？ -->
   <Drawer class="w-2/5">
     <template #title>
       <div class="flex items-center">

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

@@ -40,6 +40,7 @@ defineOptions({
 const props = defineProps({
   modelValue: {
     type: Object,
+    // TODO @jason：这里 required: false,
     default: () => ({}),
   },
 });

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

@@ -262,7 +262,7 @@ function updateFormFieldKey(
   formSetting.updateFormFields[String(newKey)] = value;
 }
 
-/** 删除修改字段设置 */
+/** 删除修改字段设置项 */
 function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
   if (!formSetting?.updateFormFields) return;
   delete formSetting.updateFormFields[key];
@@ -383,6 +383,7 @@ onMounted(() => {
 });
 </script>
 <template>
+  <!-- TODO @jason：antd 这里是 1/3，需要保持一致么？ -->
   <Drawer class="w-2/5">
     <template #title>
       <div class="config-header">

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

@@ -373,7 +373,7 @@ function showUserTaskNodeConfig(node: SimpleFlowNode) {
     return;
   }
 
-  // 2.1 审批人设置策略
+  // 2.1 审批人设置
   configForm.value.candidateStrategy = node.candidateStrategy!;
   // 解析候选人参数
   parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
@@ -402,7 +402,7 @@ function showUserTaskNodeConfig(node: SimpleFlowNode) {
   // 2.5 设置审批人为空时
   configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type;
   configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds;
-  // 2.6 设置用户任务的审批人与发起人相同处理
+  // 2.6 设置用户任务的审批人与发起人相同时
   configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType;
   // 3. 操作按钮设置
   buttonsSetting.value =
@@ -456,7 +456,7 @@ function useButtonsSetting() {
 
   const changeBtnDisplayName = (index: number) => {
     btnDisplayNameEdit.value[index] = true;
-    // 输入框自动聚焦
+    // 输入框自动聚集
     nextTick(() => {
       if (_btnDisplayNameInputRefs.value[index]) {
         _btnDisplayNameInputRefs.value[index]?.focus();
@@ -533,7 +533,7 @@ function useTimeoutHandler() {
       configForm.value.timeDuration = 1;
     }
   };
-  // 超时时间 ISO 表示
+  // 超时时间的 ISO 表示
   const isoTimeDuration = computed(() => {
     if (!configForm.value.timeoutHandlerEnable) {
       return undefined;
@@ -586,12 +586,12 @@ function updatePermission(type: string) {
   });
 }
 
-// 在组件初始化时记录初始值
+// 在组件初始化时记录初始位置
 onMounted(() => {
   // 固定添加发起人ID字段
   formFieldOptions.unshift({
     field: ProcessVariableEnum.START_USER_ID,
-    title: '发起人ID',
+    title: '发起人',
     type: 'UserSelect',
     required: true,
   });

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

@@ -59,10 +59,10 @@ const showInputs = ref<boolean[]>([]);
 watch(
   showInputs,
   (newValues) => {
-    // 当状态为 true 时
+    // 当状态为 true 时, 自动聚焦
     newValues.forEach((value, index) => {
       if (value) {
-        // 当显示状态从 false 变为 true 时
+        // 当显示状态从 false 变为 true 时, 自动聚焦
         nextTick(() => {
           inputRefs.value[index]?.focus();
         });
@@ -137,7 +137,7 @@ function deleteCondition(index: number) {
 
 // 移动节点
 function moveNode(index: number, to: number) {
-  // -1 ：向左 1：向右
+  // -1 ：向左  1： 向右
   if (
     currentNode.value.conditionNodes &&
     currentNode.value.conditionNodes[index]

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

@@ -64,10 +64,10 @@ const showInputs = ref<boolean[]>([]);
 watch(
   showInputs,
   (newValues) => {
-    // 当状态为 true 时
+    // 当状态为 true 时, 自动聚焦
     newValues.forEach((value, index) => {
       if (value) {
-        // 当显示状态从 false 变为 true 时
+        // 当显示状态从 false 变为 true 时, 自动聚焦
         nextTick(() => {
           inputRefs.value[index]?.focus();
         });
@@ -141,7 +141,7 @@ function deleteCondition(index: number) {
 
 // 移动节点
 function moveNode(index: number, to: number) {
-  // -1 ：向左 1：向右
+  // -1 ：向左  1： 向右
   if (
     currentNode.value.conditionNodes &&
     currentNode.value.conditionNodes[index]

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

@@ -30,7 +30,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data = modalApi.getData<any[]>();
       // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
     } finally {
       modalApi.unlock();
     }

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

@@ -33,7 +33,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data = modalApi.getData<any[]>();
       // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
     } finally {
       modalApi.unlock();
     }

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

@@ -71,7 +71,7 @@ function recursiveFindParentNode(
 }
 </script>
 <template>
-  <!-- 发起人节<EFBFBD>?-->
+  <!-- 发起人节点 -->
   <StartUserNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.START_USER_NODE"
     :flow-node="currentNode"
@@ -87,7 +87,7 @@ function recursiveFindParentNode(
     @update:flow-node="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
-  <!-- 抄送节<EFBFBD>?-->
+  <!-- 抄送节点 -->
   <CopyTaskNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.COPY_TASK_NODE"
     :flow-node="currentNode"
@@ -120,7 +120,7 @@ function recursiveFindParentNode(
     @update:model-value="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
-  <!-- 延迟器节<EFBFBD>?-->
+  <!-- 延迟器节点 -->
   <DelayTimerNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.DELAY_TIMER_NODE"
     :flow-node="currentNode"
@@ -134,13 +134,13 @@ function recursiveFindParentNode(
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
-  <!-- 触发器节<EFBFBD>?-->
+  <!-- 触发器节点 -->
   <TriggerNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.TRIGGER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
-  <!-- 子流程节<EFBFBD>?-->
+  <!-- 子流程节点 -->
   <ChildProcessNode
     v-if="
       currentNode && currentNode.type === BpmNodeTypeEnum.CHILD_PROCESS_NODE

apps/web-ele/src/views/bpm/model/form/index.vue

@@ -263,6 +263,7 @@ const saveLoading = ref<boolean>(false);
 /** 保存操作 */
 async function handleSave() {
   try {
+    saveLoading.value = true;
     // 保存前校验所有步骤的数据
     const result = await validateAllSteps();
     if (!result) {
@@ -273,7 +274,7 @@ async function handleSave() {
     const modelData = {
       ...formData.value,
     };
-    saveLoading.value = true;
+
     switch (actionType) {
       case 'copy': {
         // 情况三：复制场景
@@ -323,11 +324,10 @@ async function handleDeploy() {
     if (!formData.value.id) {
       await confirm('是否确认发布该流程？');
     }
+    deployLoading.value = true;
     // 1.2 校验所有步骤
     await validateAllSteps();
 
-    deployLoading.value = true;
-
     // 2.1 更新表单数据
     const modelData = {
       ...formData.value,

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

@@ -8,6 +8,8 @@ import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
 import { ContentWrap } from '@vben/common-ui';
 import { BpmModelFormType } from '@vben/constants';
 
+import { ElMessage } from 'element-plus';
+
 import { getForm } from '#/api/bpm/form';
 import {
   MyProcessDesigner,
@@ -47,7 +49,6 @@ const controlForm = ref({
   headerButtonSize: 'mini',
   additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
 });
-
 const model = ref<BpmModelApi.Model>(); // 流程模型的信息
 
 /** 初始化 modeler */
@@ -63,7 +64,7 @@ const save = async (bpmnXml: string) => {
     emit('success', bpmnXml);
   } catch (error) {
     console.error('保存失败:', error);
-    // ElMessage.error('保存失败');
+    ElMessage.error('保存失败');
   }
 };
 

apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue

@@ -30,6 +30,7 @@ import {
 } from 'element-plus';
 
 import { getForm } from '#/api/bpm/form';
+// TODO @jason：这里要迁移下么？
 // import {
 //   HttpRequestSetting,
 //   parseFormFields,

apps/web-ele/src/views/bpm/processInstance/create/index.vue

@@ -185,6 +185,7 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
+    <!-- TODO @jason：这里交互，可以做成类似 vue3 + element-plus 那个一样，滚动切换分类哈？对标钉钉、飞书哈； -->
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <template v-if="!selectProcessDefinition">
       <ElCard

apps/web-ele/src/views/bpm/processInstance/detail/index.vue

@@ -223,8 +223,8 @@ watch(
 const loading = ref(false);
 /** 初始化 */
 onMounted(async () => {
-  loading.value = true;
   try {
+    loading.value = true;
     await getDetail();
     // 获得用户列表
     userOptions.value = await getSimpleUserList();

apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
+// TODO @jason：这个貌似暂时还没迁移的样子？
 // import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
 
 defineOptions({ name: 'ProcessInstanceBpmnViewer' });

apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -275,6 +275,7 @@ async function openPopover(type: string) {
     }
   }
   Object.keys(popOverVisible.value).forEach((item) => {
+    // TODO @jason：这里是不是保持和 antd 一致？
     popOverVisible.value[item] = item === type;
   });
 }
@@ -704,6 +705,8 @@ function handleSignFinish(url: string) {
   approveFormRef.value?.validateField('signPicUrl');
 }
 
+// TODO @jason：handlePopoverVisible 需要要有么？
+
 defineExpose({ loadTodoTask });
 </script>
 <template>
@@ -725,9 +728,9 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain type="primary" @click="openPopover('approve')">
             <IconifyIcon icon="lucide:check" />
-            <span class="ml-1">{{
+            <span class="ml-1">
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE)
+              {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE) }}
-            }}</span>
+            </span>
           </ElButton>
         </template>
         <!-- 办理表单 -->
@@ -979,6 +982,7 @@ defineExpose({ loadTodoTask });
             label-width="100px"
           >
             <ElFormItem label="新审批人" prop="assigneeUserId">
+              <!-- TODO @jason：是不是用 unocss 哈？antd 和 ele 都要改下 -->
               <ElSelect
                 v-model="transferForm.assigneeUserId"
                 clearable
@@ -1040,9 +1044,11 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain @click="openPopover('delegate')">
             <IconifyIcon :size="14" icon="icon-park-outline:user-positioning" />
-            <span class="ml-1">{{
+            <span class="ml-1">
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE)
+              {{
-            }}</span>
+                getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE)
+              }}
+            </span>
           </ElButton>
         </template>
         <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
@@ -1116,9 +1122,11 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain @click="openPopover('addSign')">
             <IconifyIcon :size="14" icon="icon-park-outline:plus" />
-            <span class="ml-1">{{
+            <span class="ml-1">
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+              {{
-            }}</span>
+                getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+              }}
+            </span>
           </ElButton>
         </template>
         <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
@@ -1272,9 +1280,9 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain @click="openPopover('return')">
             <IconifyIcon :size="14" icon="lucide:arrow-left" />
-            <span class="ml-1">{{
+            <span class="ml-1">
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN)
+              {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN) }}
-            }}</span>
+            </span>
           </ElButton>
         </template>
         <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">

apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue

@@ -54,7 +54,6 @@ const [Modal, modalApi] = useVbenModal({
           </ElButton>
         </ElTooltip>
       </div>
-
       <Vue3Signature
         class="h-full flex-1 border border-solid border-gray-300"
         ref="signature"

apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue

@@ -86,6 +86,8 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
+// TODO @jason：是不是要 const formRef = ref<formCreate>();
+
 const formRef = ref();
 const taskForm = ref<TaskForm>({
   rule: [],
@@ -187,6 +189,7 @@ defineExpose({
     </Grid>
   </div>
   <Modal class="w-3/5">
+    <!-- TODO @jason：是不是 antd 和 ele 保持统一？ -->
     <FormCreate
       ref="formRef"
       v-model="taskForm.value"