feat：【antd】【ele】统一 infra 和 system 的代码风格（demo03/erp）

apps/web-antd/src/views/crm/product/category/index.vue

@@ -37,7 +37,7 @@ function handleRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */

apps/web-antd/src/views/infra/demo/demo01/index.vue

@@ -39,7 +39,7 @@ async function handleExport() {
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */

apps/web-antd/src/views/infra/demo/demo01/modules/form.vue

@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
+    modalApi.lock();
-      modalApi.lock();
+    try {
-      try {
+      formData.value = await getDemo01Contact(data.id);
-        data = await getDemo01Contact(data.id);
+      // 设置到 values
-      } finally {
+      if (formData.value) {
-        modalApi.unlock();
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>

apps/web-antd/src/views/infra/demo/demo03/erp/index.vue

@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, Trash2 } from '@vben/icons';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { Button, message, Tabs } from 'ant-design-vue';
+import { message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,48 +33,53 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
-function onCreate() {
+function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
-function onEdit(row: Demo03StudentApi.Demo03Student) {
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生 */
-async function onDelete(row: Demo03StudentApi.Demo03Student) {
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03Student(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -85,17 +89,11 @@ const checkedIds = ref<number[]>([]);
 function handleRowCheckboxChange({
   records,
 }: {
-  records: Demo03StudentApi.Demo03Grade[];
+  records: Demo03StudentApi.Demo03Student[];
 }) {
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -139,39 +137,37 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
-
     <div>
       <Grid table-title="学生列表">
         <template #toolbar-tools>
-          <Button
+          <TableAction
-            :icon="h(Plus)"
+            :actions="[
-            type="primary"
+              {
-            @click="onCreate"
+                label: $t('ui.actionTitle.create', ['学生']),
-            v-access:code="['infra:demo03-student:create']"
+                type: 'primary',
-          >
+                icon: ACTION_ICON.ADD,
-            {{ $t('ui.actionTitle.create', ['学生']) }}
+                auth: ['infra:demo03-student:create'],
-          </Button>
+                onClick: handleCreate,
-          <Button
+              },
-            :icon="h(Download)"
+              {
-            type="primary"
+                label: $t('ui.actionTitle.export'),
-            class="ml-2"
+                type: 'primary',
-            @click="onExport"
+                icon: ACTION_ICON.DOWNLOAD,
-            v-access:code="['infra:demo03-student:export']"
+                auth: ['infra:demo03-student:export'],
-          >
+                onClick: handleExport,
-            {{ $t('ui.actionTitle.export') }}
+              },
-          </Button>
+              {
-          <Button
+                label: $t('ui.actionTitle.deleteBatch'),
-            :icon="h(Trash2)"
+                type: 'primary',
-            type="primary"
+                danger: true,
-            danger
+                icon: ACTION_ICON.DELETE,
-            class="ml-2"
+                disabled: isEmpty(checkedIds),
-            :disabled="isEmpty(checkedIds)"
+                auth: ['infra:demo03-student:delete'],
-            @click="onDeleteBatch"
+                onClick: handleDeleteBatch,
-            v-access:code="['infra:demo03-student:delete']"
+              },
-          >
+            ]"
-            批量删除
+          />
-          </Button>
         </template>
         <template #actions="{ row }">
           <TableAction
@@ -181,17 +177,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 type: 'link',
                 icon: ACTION_ICON.EDIT,
                 auth: ['infra:demo03-student:update'],
-                onClick: onEdit.bind(null, row),
+                onClick: handleEdit.bind(null, row),
               },
               {
                 label: $t('common.delete'),
-                danger: true,
                 type: 'link',
+                danger: true,
                 icon: ACTION_ICON.DELETE,
                 auth: ['infra:demo03-student:delete'],
                 popConfirm: {
                   title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-                  confirm: onDelete.bind(null, row),
+                  confirm: handleDelete.bind(null, row),
                 },
               },
             ]"

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue

@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
     if (!data) {

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue

@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
-import { Plus, Trash2 } from '@vben/icons';
 import { isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,7 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 创建学生课程 */
-function onCreate() {
+function handleCreate() {
   if (!props.studentId) {
     message.warning('请先选择一个学生!');
     return;
@@ -43,38 +42,37 @@ function onCreate() {
 }
 
 /** 编辑学生课程 */
-function onEdit(row: Demo03StudentApi.Demo03Course) {
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生课程 */
-async function onDelete(row: Demo03StudentApi.Demo03Course) {
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03Course(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生课程 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -130,9 +128,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function handleRefresh() {
   await gridApi.query();
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -142,35 +140,36 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生课程列表">
     <template #toolbar-tools>
-      <Button
+      <TableAction
-        :icon="h(Plus)"
+        :actions="[
-        type="primary"
+          {
-        @click="onCreate"
+            label: $t('ui.actionTitle.create', ['学生课程']),
-        v-access:code="['infra:demo03-student:create']"
+            type: 'primary',
-      >
+            icon: ACTION_ICON.ADD,
-        {{ $t('ui.actionTitle.create', ['学生课程']) }}
+            auth: ['infra:demo03-student:create'],
-      </Button>
+            onClick: handleCreate,
-      <Button
+          },
-        :icon="h(Trash2)"
+          {
-        type="primary"
+            label: $t('ui.actionTitle.deleteBatch'),
-        danger
+            type: 'primary',
-        class="ml-2"
+            danger: true,
-        :disabled="isEmpty(checkedIds)"
+            icon: ACTION_ICON.DELETE,
-        @click="onDeleteBatch"
+            auth: ['infra:demo03-student:delete'],
-        v-access:code="['infra:demo03-student:delete']"
+            disabled: isEmpty(checkedIds),
-      >
+            onClick: handleDeleteBatch,
-        批量删除
+          },
-      </Button>
+        ]"
+      />
     </template>
     <template #actions="{ row }">
       <TableAction
@@ -180,17 +179,17 @@ watch(
             type: 'link',
             icon: ACTION_ICON.EDIT,
             auth: ['infra:demo03-student:update'],
-            onClick: onEdit.bind(null, row),
+            onClick: handleEdit.bind(null, row),
           },
           {
             label: $t('common.delete'),
-            danger: true,
             type: 'link',
+            danger: true,
             icon: ACTION_ICON.DELETE,
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue

@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
     if (!data) {

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue

@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
-import { Plus, Trash2 } from '@vben/icons';
 import { isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,7 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 创建学生班级 */
-function onCreate() {
+function handleCreate() {
   if (!props.studentId) {
     message.warning('请先选择一个学生!');
     return;
@@ -43,38 +42,37 @@ function onCreate() {
 }
 
 /** 编辑学生班级 */
-function onEdit(row: Demo03StudentApi.Demo03Grade) {
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生班级 */
-async function onDelete(row: Demo03StudentApi.Demo03Grade) {
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03Grade(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生班级 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    await onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -130,9 +128,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function handleRefresh() {
   await gridApi.query();
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -142,35 +140,36 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生班级列表">
     <template #toolbar-tools>
-      <Button
+      <TableAction
-        :icon="h(Plus)"
+        :actions="[
-        type="primary"
+          {
-        @click="onCreate"
+            label: $t('ui.actionTitle.create', ['学生班级']),
-        v-access:code="['infra:demo03-student:create']"
+            type: 'primary',
-      >
+            icon: ACTION_ICON.ADD,
-        {{ $t('ui.actionTitle.create', ['学生班级']) }}
+            auth: ['infra:demo03-student:create'],
-      </Button>
+            onClick: handleCreate,
-      <Button
+          },
-        :icon="h(Trash2)"
+          {
-        type="primary"
+            label: $t('ui.actionTitle.deleteBatch'),
-        danger
+            type: 'primary',
-        class="ml-2"
+            danger: true,
-        :disabled="isEmpty(checkedIds)"
+            icon: ACTION_ICON.DELETE,
-        @click="onDeleteBatch"
+            auth: ['infra:demo03-student:delete'],
-        v-access:code="['infra:demo03-student:delete']"
+            disabled: isEmpty(checkedIds),
-      >
+            onClick: handleDeleteBatch,
-        批量删除
+          },
-      </Button>
+        ]"
+      />
     </template>
     <template #actions="{ row }">
       <TableAction
@@ -180,7 +179,7 @@ watch(
             type: 'link',
             icon: ACTION_ICON.EDIT,
             auth: ['infra:demo03-student:update'],
-            onClick: onEdit.bind(null, row),
+            onClick: handleEdit.bind(null, row),
           },
           {
             label: $t('common.delete'),
@@ -190,7 +189,7 @@ watch(
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"

apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue

@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
+    modalApi.lock();
-      modalApi.lock();
+    try {
-      try {
+      formData.value = await getDemo03Student(data.id);
-        data = await getDemo03Student(data.id);
+      // 设置到 values
-      } finally {
+      if (formData.value) {
-        modalApi.unlock();
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>

apps/web-antd/src/views/infra/demo/demo03/inner/index.vue

@@ -39,7 +39,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */

apps/web-antd/src/views/infra/demo/demo03/normal/index.vue

@@ -34,7 +34,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */

apps/web-antd/src/views/infra/demo/general/demo01/index.vue

@@ -87,7 +87,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */

apps/web-antd/src/views/infra/demo/general/demo02/index.vue

@@ -69,7 +69,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例分类 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */

apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue

@@ -98,7 +98,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */

apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue

@@ -94,7 +94,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */

apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue

@@ -88,7 +88,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */

apps/web-antd/src/views/mall/product/category/index.vue

@@ -28,7 +28,7 @@ function onRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */

apps/web-antd/src/views/system/menu/index.vue

@@ -29,7 +29,7 @@ function handleRefresh() {
 
 /** 创建菜单 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级菜单 */

apps/web-ele/src/views/infra/demo/demo01/index.vue

@@ -39,7 +39,7 @@ async function handleExport() {
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */

apps/web-ele/src/views/infra/demo/demo01/modules/form.vue

@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
+    modalApi.lock();
-      modalApi.lock();
+    try {
-      try {
+      formData.value = await getDemo01Contact(data.id);
-        data = await getDemo01Contact(data.id);
+      // 设置到 values
-      } finally {
+      if (formData.value) {
-        modalApi.unlock();
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>

apps/web-ele/src/views/infra/demo/demo03/erp/data.ts

@@ -143,7 +143,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -258,7 +258,7 @@ export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentA
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -373,7 +373,7 @@ export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentAp
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-ele/src/views/infra/demo/demo03/erp/index.vue

@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
@@ -33,13 +33,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -51,12 +57,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -64,15 +69,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 
 /** 批量删除学生 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
+    text: $t('ui.actionMessage.deletingBatch'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -87,12 +92,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -136,8 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
-
     <div>
       <Grid table-title="学生列表">
         <template #toolbar-tools>

apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue

@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
     if (!data) {

apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue

@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -50,12 +50,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Course) {
 async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Course(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +62,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Course) {
 
 /** 批量删除学生课程 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
+    text: $t('ui.actionMessage.deletingBatch'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -127,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.query();
 }
 
@@ -139,20 +138,20 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生课程列表">
     <template #toolbar-tools>
       <TableAction
         :actions="[
           {
-            label: $t('ui.actionTitle.create', ['学生']),
+            label: $t('ui.actionTitle.create', ['学生课程']),
             type: 'primary',
             icon: ACTION_ICON.ADD,
             auth: ['infra:demo03-student:create'],

apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue

@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
     if (!data) {

apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue

@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -50,12 +50,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Grade) {
 async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Grade(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +62,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
 
 /** 批量删除学生班级 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
+    text: $t('ui.actionMessage.deletingBatch'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -127,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.query();
 }
 
@@ -139,20 +138,20 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生班级列表">
     <template #toolbar-tools>
       <TableAction
         :actions="[
           {
-            label: $t('ui.actionTitle.create', ['学生']),
+            label: $t('ui.actionTitle.create', ['学生班级']),
             type: 'primary',
             icon: ACTION_ICON.ADD,
             auth: ['infra:demo03-student:create'],

apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue

@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
+    modalApi.lock();
-      modalApi.lock();
+    try {
-      try {
+      formData.value = await getDemo03Student(data.id);
-        data = await getDemo03Student(data.id);
+      // 设置到 values
-      } finally {
+      if (formData.value) {
-        modalApi.unlock();
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>

apps/web-ele/src/views/infra/demo/demo03/inner/index.vue

@@ -38,7 +38,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -50,7 +50,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -65,7 +64,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);

apps/web-ele/src/views/infra/demo/demo03/normal/index.vue

@@ -33,7 +33,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -45,7 +45,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -60,7 +59,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);

apps/web-ele/src/views/infra/demo/general/demo01/index.vue

@@ -89,7 +89,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
@@ -101,7 +101,6 @@ function handleEdit(row: Demo01ContactApi.Demo01Contact) {
 async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo01Contact(row.id!);
@@ -116,7 +115,6 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo01ContactList(checkedIds.value);

apps/web-ele/src/views/infra/demo/general/demo02/index.vue

@@ -76,7 +76,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */
@@ -93,7 +93,6 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
 async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo02Category(row.id!);

apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue

@@ -101,7 +101,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -113,7 +113,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -128,7 +127,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);

apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue

@@ -56,7 +56,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Course) {
 async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Course(row.id!);
@@ -71,7 +70,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Course) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);

apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue

@@ -56,7 +56,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Grade) {
 async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Grade(row.id!);
@@ -71,7 +70,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);

apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue

@@ -97,7 +97,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -109,7 +109,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -124,7 +123,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);

apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue

@@ -90,7 +90,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -102,7 +102,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -117,7 +116,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);

apps/web-ele/src/views/mall/product/category/index.vue

@@ -28,7 +28,7 @@ function onRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */

apps/web-ele/src/views/system/menu/index.vue

@@ -29,7 +29,7 @@ function handleRefresh() {
 
 /** 创建菜单 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级菜单 */