!110 perf: 【ANTD】优化代码生成示例 demo03

Merge pull request !110 from puhui999/dev-new

apps/web-antd/src/api/infra/demo/demo03/erp/index.ts

@@ -34,7 +34,7 @@ export namespace Demo03StudentApi {
 /** 查询学生分页 */
 export function getDemo03StudentPage(params: PageParam) {
   return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>(
-    '/infra/demo03-student/page',
+    '/infra/demo03-student-erp/page',
     { params },
   );
 }
@@ -42,28 +42,38 @@ export function getDemo03StudentPage(params: PageParam) {
 /** 查询学生详情 */
 export function getDemo03Student(id: number) {
   return requestClient.get<Demo03StudentApi.Demo03Student>(
-    `/infra/demo03-student/get?id=${id}`,
+    `/infra/demo03-student-erp/get?id=${id}`,
   );
 }
 
 /** 新增学生 */
 export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
-  return requestClient.post('/infra/demo03-student/create', data);
+  return requestClient.post('/infra/demo03-student-erp/create', data);
 }
 
 /** 修改学生 */
 export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
-  return requestClient.put('/infra/demo03-student/update', data);
+  return requestClient.put('/infra/demo03-student-erp/update', data);
 }
 
 /** 删除学生 */
 export function deleteDemo03Student(id: number) {
-  return requestClient.delete(`/infra/demo03-student/delete?id=${id}`);
+  return requestClient.delete(`/infra/demo03-student-erp/delete?id=${id}`);
+}
+
+// 批量删除学生
+export function deleteDemo03StudentByIds(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/delete-batch?ids=${ids.join(',')}`,
+  );
 }
 
 /** 导出学生 */
 export function exportDemo03Student(params: any) {
-  return requestClient.download('/infra/demo03-student/export-excel', params);
+  return requestClient.download(
+    '/infra/demo03-student-erp/export-excel',
+    params,
+  );
 }
 
 // ==================== 子表（学生课程） ====================
@@ -71,33 +81,44 @@ export function exportDemo03Student(params: any) {
 /** 获得学生课程分页 */
 export function getDemo03CoursePage(params: PageParam) {
   return requestClient.get<PageResult<Demo03StudentApi.Demo03Course>>(
-    `/infra/demo03-student/demo03-course/page`,
+    `/infra/demo03-student-erp/demo03-course/page`,
-    {
+    { params },
-      params,
-    },
   );
 }
 /** 新增学生课程 */
 export function createDemo03Course(data: Demo03StudentApi.Demo03Course) {
-  return requestClient.post(`/infra/demo03-student/demo03-course/create`, data);
+  return requestClient.post(
+    `/infra/demo03-student-erp/demo03-course/create`,
+    data,
+  );
 }
 
 /** 修改学生课程 */
 export function updateDemo03Course(data: Demo03StudentApi.Demo03Course) {
-  return requestClient.put(`/infra/demo03-student/demo03-course/update`, data);
+  return requestClient.put(
+    `/infra/demo03-student-erp/demo03-course/update`,
+    data,
+  );
 }
 
 /** 删除学生课程 */
 export function deleteDemo03Course(id: number) {
   return requestClient.delete(
-    `/infra/demo03-student/demo03-course/delete?id=${id}`,
+    `/infra/demo03-student-erp/demo03-course/delete?id=${id}`,
+  );
+}
+
+// 批量删除学生课程
+export function deleteDemo03CourseByIds(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/demo03-course/delete-batch?ids=${ids.join(',')}`,
   );
 }
 
 /** 获得学生课程 */
 export function getDemo03Course(id: number) {
   return requestClient.get<Demo03StudentApi.Demo03Course>(
-    `/infra/demo03-student/demo03-course/get?id=${id}`,
+    `/infra/demo03-student-erp/demo03-course/get?id=${id}`,
   );
 }
 
@@ -106,32 +127,43 @@ export function getDemo03Course(id: number) {
 /** 获得学生班级分页 */
 export function getDemo03GradePage(params: PageParam) {
   return requestClient.get<PageResult<Demo03StudentApi.Demo03Grade>>(
-    `/infra/demo03-student/demo03-grade/page`,
+    `/infra/demo03-student-erp/demo03-grade/page`,
-    {
+    { params },
-      params,
-    },
   );
 }
 /** 新增学生班级 */
 export function createDemo03Grade(data: Demo03StudentApi.Demo03Grade) {
-  return requestClient.post(`/infra/demo03-student/demo03-grade/create`, data);
+  return requestClient.post(
+    `/infra/demo03-student-erp/demo03-grade/create`,
+    data,
+  );
 }
 
 /** 修改学生班级 */
 export function updateDemo03Grade(data: Demo03StudentApi.Demo03Grade) {
-  return requestClient.put(`/infra/demo03-student/demo03-grade/update`, data);
+  return requestClient.put(
+    `/infra/demo03-student-erp/demo03-grade/update`,
+    data,
+  );
 }
 
 /** 删除学生班级 */
 export function deleteDemo03Grade(id: number) {
   return requestClient.delete(
-    `/infra/demo03-student/demo03-grade/delete?id=${id}`,
+    `/infra/demo03-student-erp/demo03-grade/delete?id=${id}`,
+  );
+}
+
+// 批量删除学生班级
+export function deleteDemo03GradeByIds(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/demo03-grade/delete-batch?ids=${ids.join(',')}`,
   );
 }
 
 /** 获得学生班级 */
 export function getDemo03Grade(id: number) {
   return requestClient.get<Demo03StudentApi.Demo03Grade>(
-    `/infra/demo03-student/demo03-grade/get?id=${id}`,
+    `/infra/demo03-student-erp/demo03-grade/get?id=${id}`,
   );
 }

apps/web-antd/src/api/infra/demo/demo03/inner/index.ts

@@ -1,3 +1,5 @@
+import type { Dayjs } from 'dayjs';
+
 import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
@@ -24,7 +26,7 @@ export namespace Demo03StudentApi {
     id: number; // 编号
     name?: string; // 名字
     sex?: number; // 性别
-    birthday?: Date; // 出生日期
+    birthday?: Dayjs | string; // 出生日期
     description?: string; // 简介
     demo03courses?: Demo03Course[];
     demo03grade?: Demo03Grade;
@@ -34,7 +36,7 @@ export namespace Demo03StudentApi {
 /** 查询学生分页 */
 export function getDemo03StudentPage(params: PageParam) {
   return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>(
-    '/infra/demo03-student/page',
+    '/infra/demo03-student-inner/page',
     { params },
   );
 }
@@ -42,28 +44,38 @@ export function getDemo03StudentPage(params: PageParam) {
 /** 查询学生详情 */
 export function getDemo03Student(id: number) {
   return requestClient.get<Demo03StudentApi.Demo03Student>(
-    `/infra/demo03-student/get?id=${id}`,
+    `/infra/demo03-student-inner/get?id=${id}`,
   );
 }
 
 /** 新增学生 */
 export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
-  return requestClient.post('/infra/demo03-student/create', data);
+  return requestClient.post('/infra/demo03-student-inner/create', data);
 }
 
 /** 修改学生 */
 export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
-  return requestClient.put('/infra/demo03-student/update', data);
+  return requestClient.put('/infra/demo03-student-inner/update', data);
 }
 
 /** 删除学生 */
 export function deleteDemo03Student(id: number) {
-  return requestClient.delete(`/infra/demo03-student/delete?id=${id}`);
+  return requestClient.delete(`/infra/demo03-student-inner/delete?id=${id}`);
+}
+
+// 批量删除学生
+export function deleteDemo03StudentByIds(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-inner/delete-batch?ids=${ids.join(',')}`,
+  );
 }
 
 /** 导出学生 */
 export function exportDemo03Student(params: any) {
-  return requestClient.download('/infra/demo03-student/export-excel', params);
+  return requestClient.download(
+    '/infra/demo03-student-inner/export-excel',
+    params,
+  );
 }
 
 // ==================== 子表（学生课程） ====================
@@ -71,7 +83,7 @@ export function exportDemo03Student(params: any) {
 /** 获得学生课程列表 */
 export function getDemo03CourseListByStudentId(studentId: number) {
   return requestClient.get<Demo03StudentApi.Demo03Course[]>(
-    `/infra/demo03-student/demo03-course/list-by-student-id?studentId=${studentId}`,
+    `/infra/demo03-student-inner/demo03-course/list-by-student-id?studentId=${studentId}`,
   );
 }
 
@@ -80,6 +92,6 @@ export function getDemo03CourseListByStudentId(studentId: number) {
 /** 获得学生班级 */
 export function getDemo03GradeByStudentId(studentId: number) {
   return requestClient.get<Demo03StudentApi.Demo03Grade>(
-    `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=${studentId}`,
+    `/infra/demo03-student-inner/demo03-grade/get-by-student-id?studentId=${studentId}`,
   );
 }

apps/web-antd/src/api/infra/demo/demo03/normal/index.ts

@@ -36,7 +36,7 @@ export namespace Demo03StudentApi {
 /** 查询学生分页 */
 export function getDemo03StudentPage(params: PageParam) {
   return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>(
-    '/infra/demo03-student/page',
+    '/infra/demo03-student-normal/page',
     { params },
   );
 }
@@ -44,28 +44,38 @@ export function getDemo03StudentPage(params: PageParam) {
 /** 查询学生详情 */
 export function getDemo03Student(id: number) {
   return requestClient.get<Demo03StudentApi.Demo03Student>(
-    `/infra/demo03-student/get?id=${id}`,
+    `/infra/demo03-student-normal/get?id=${id}`,
   );
 }
 
 /** 新增学生 */
 export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
-  return requestClient.post('/infra/demo03-student/create', data);
+  return requestClient.post('/infra/demo03-student-normal/create', data);
 }
 
 /** 修改学生 */
 export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
-  return requestClient.put('/infra/demo03-student/update', data);
+  return requestClient.put('/infra/demo03-student-normal/update', data);
 }
 
 /** 删除学生 */
 export function deleteDemo03Student(id: number) {
-  return requestClient.delete(`/infra/demo03-student/delete?id=${id}`);
+  return requestClient.delete(`/infra/demo03-student-normal/delete?id=${id}`);
+}
+
+// 批量删除学生
+export function deleteDemo03StudentByIds(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-normal/delete-batch?ids=${ids.join(',')}`,
+  );
 }
 
 /** 导出学生 */
 export function exportDemo03Student(params: any) {
-  return requestClient.download('/infra/demo03-student/export-excel', params);
+  return requestClient.download(
+    '/infra/demo03-student-normal/export-excel',
+    params,
+  );
 }
 
 // ==================== 子表（学生课程） ====================
@@ -73,7 +83,7 @@ export function exportDemo03Student(params: any) {
 /** 获得学生课程列表 */
 export function getDemo03CourseListByStudentId(studentId: number) {
   return requestClient.get<Demo03StudentApi.Demo03Course[]>(
-    `/infra/demo03-student/demo03-course/list-by-student-id?studentId=${studentId}`,
+    `/infra/demo03-student-normal/demo03-course/list-by-student-id?studentId=${studentId}`,
   );
 }
 
@@ -82,6 +92,6 @@ export function getDemo03CourseListByStudentId(studentId: number) {
 /** 获得学生班级 */
 export function getDemo03GradeByStudentId(studentId: number) {
   return requestClient.get<Demo03StudentApi.Demo03Grade>(
-    `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=${studentId}`,
+    `/infra/demo03-student-normal/demo03-grade/get-by-student-id?studentId=${studentId}`,
   );
 }

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

@@ -64,6 +64,13 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
 // TODO @puhui999：:1）/** 批量删除示例联系人 */ 是不是放在 deleteIds 上面；2）showDeleteBatchBtn 是不是直接 disabled 哪里判断哈；
 const deleteIds = ref<number[]>([]); // 待删除示例联系人 ID
 const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
+function setDeleteIds({
+  records,
+}: {
+  records: Demo01ContactApi.Demo01Contact[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
 /** 批量删除示例联系人 */
 async function onDeleteBatch() {
   const hideLoading = message.loading({
@@ -134,20 +141,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
   gridEvents: {
-    checkboxAll: ({
+    checkboxAll: setDeleteIds,
-      records,
+    checkboxChange: setDeleteIds,
-    }: {
-      records: Demo01ContactApi.Demo01Contact[];
-    }) => {
-      deleteIds.value = records.map((item) => item.id);
-    },
-    checkboxChange: ({
-      records,
-    }: {
-      records: Demo01ContactApi.Demo01Contact[];
-    }) => {
-      deleteIds.value = records.map((item) => item.id);
-    },
   },
 });
 </script>

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

@@ -107,6 +107,7 @@ export function useGridColumns(
   onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
 ): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',
@@ -254,6 +255,7 @@ export function useDemo03CourseGridColumns(
   onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
 ): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',
@@ -391,6 +393,7 @@ export function useDemo03GradeGridColumns(
   onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Grade>,
 ): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',

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

@@ -5,17 +5,18 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { Download, Plus, Trash2 } from '@vben/icons';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { Button, message, Tabs } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
+  deleteDemo03StudentByIds,
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/erp';
@@ -61,7 +62,25 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
     await deleteDemo03Student(row.id as number);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     onRefresh();
-  } catch {
+  } finally {
+    hideLoading();
+  }
+}
+
+const deleteIds = ref<number[]>([]); // 待删除学生 ID
+const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
+/** 批量删除学生 */
+async function onDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDemo03StudentByIds(deleteIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -124,6 +143,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
       selectDemo03Student.value = row;
     },
+    checkboxAll: ({
+      records,
+    }: {
+      records: Demo03StudentApi.Demo03Student[];
+    }) => {
+      deleteIds.value = records.map((item) => item.id);
+    },
+    checkboxChange: ({
+      records,
+    }: {
+      records: Demo03StudentApi.Demo03Student[];
+    }) => {
+      deleteIds.value = records.map((item) => item.id);
+    },
   },
 });
 </script>
@@ -152,6 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           >
             {{ $t('ui.actionTitle.export') }}
           </Button>
+          <Button
+            :icon="h(Trash2)"
+            type="primary"
+            danger
+            class="ml-2"
+            :disabled="showDeleteBatchBtn"
+            @click="onDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            批量删除
+          </Button>
         </template>
       </Grid>
 

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

@@ -5,16 +5,18 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, watch } from 'vue';
+import { computed, h, nextTick, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { Plus, Trash2 } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Course,
+  deleteDemo03CourseByIds,
   getDemo03CoursePage,
 } from '#/api/infra/demo/demo03/erp';
 import { $t } from '#/locales';
@@ -59,7 +61,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Course) {
     await deleteDemo03Course(row.id as number);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     onRefresh();
-  } catch {
+  } finally {
+    hideLoading();
+  }
+}
+
+const deleteIds = ref<number[]>([]); // 待删除学生课程 ID
+const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Course[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+/** 批量删除学生课程 */
+async function onDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDemo03CourseByIds(deleteIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -115,6 +142,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
+  gridEvents: {
+    checkboxAll: setDeleteIds,
+    checkboxChange: setDeleteIds,
+  },
 });
 
 /** 刷新表格 */
@@ -148,6 +179,17 @@ watch(
       >
         {{ $t('ui.actionTitle.create', ['学生课程']) }}
       </Button>
+      <Button
+        :icon="h(Trash2)"
+        type="primary"
+        danger
+        class="ml-2"
+        :disabled="showDeleteBatchBtn"
+        @click="onDeleteBatch"
+        v-access:code="['infra:demo03-student:delete']"
+      >
+        批量删除
+      </Button>
     </template>
   </Grid>
 </template>

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

@@ -5,16 +5,18 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, watch } from 'vue';
+import { computed, h, nextTick, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { Plus, Trash2 } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Grade,
+  deleteDemo03GradeByIds,
   getDemo03GradePage,
 } from '#/api/infra/demo/demo03/erp';
 import { $t } from '#/locales';
@@ -59,7 +61,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Grade) {
     await deleteDemo03Grade(row.id as number);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     onRefresh();
-  } catch {
+  } finally {
+    hideLoading();
+  }
+}
+
+const deleteIds = ref<number[]>([]); // 待删除学生班级 ID
+const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+/** 批量删除学生班级 */
+async function onDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDemo03GradeByIds(deleteIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -115,6 +142,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
+  gridEvents: {
+    checkboxAll: setDeleteIds,
+    checkboxChange: setDeleteIds,
+  },
 });
 
 /** 刷新表格 */
@@ -148,6 +179,17 @@ watch(
       >
         {{ $t('ui.actionTitle.create', ['学生班级']) }}
       </Button>
+      <Button
+        :icon="h(Trash2)"
+        type="primary"
+        danger
+        class="ml-2"
+        :disabled="showDeleteBatchBtn"
+        @click="onDeleteBatch"
+        v-access:code="['infra:demo03-student:delete']"
+      >
+        批量删除
+      </Button>
     </template>
   </Grid>
 </template>

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

@@ -64,7 +64,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
     if (!data) {

apps/web-antd/src/views/infra/demo/demo03/inner/data.ts

@@ -107,6 +107,7 @@ export function useGridColumns(
   onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
 ): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     { type: 'expand', width: 80, slots: { content: 'expand_content' } },
     {
       field: 'id',

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

@@ -5,17 +5,18 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
-import { h, ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { Download, Plus, Trash2 } from '@vben/icons';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { Button, message, Tabs } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
+  deleteDemo03StudentByIds,
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/inner';
@@ -60,7 +61,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
     await deleteDemo03Student(row.id as number);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     onRefresh();
-  } catch {
+  } finally {
+    hideLoading();
+  }
+}
+
+const deleteIds = ref<number[]>([]); // 待删除学生 ID
+const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+/** 批量删除学生 */
+async function onDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDemo03StudentByIds(deleteIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -118,6 +144,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    checkboxAll: setDeleteIds,
+    checkboxChange: setDeleteIds,
+  },
 });
 </script>
 
@@ -155,6 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
         >
           {{ $t('ui.actionTitle.export') }}
         </Button>
+        <Button
+          :icon="h(Trash2)"
+          type="primary"
+          danger
+          class="ml-2"
+          :disabled="showDeleteBatchBtn"
+          @click="onDeleteBatch"
+          v-access:code="['infra:demo03-student:delete']"
+        >
+          批量删除
+        </Button>
       </template>
     </Grid>
   </Page>

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

@@ -16,18 +16,18 @@ const props = defineProps<{
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDemo03CourseGridColumns(),
-    height: 'auto',
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
     pagerConfig: {
       enabled: false,
     },
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
 });
 
 /** 刷新表格 */

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

@@ -11,6 +11,13 @@ const props = defineProps<{
 }>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useDemo03GradeFormSchema(),
   showDefaultActions: false,

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

@@ -16,18 +16,18 @@ const props = defineProps<{
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDemo03GradeGridColumns(),
-    height: 'auto',
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
     pagerConfig: {
       enabled: false,
     },
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
 });
 
 /** 刷新表格 */

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

@@ -61,8 +61,8 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
     // 拼接子表的数据
-    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03Courses = demo03CourseFormRef.value?.getData();
-    data.demo03grade = await demo03GradeFormRef.value?.getValues();
+    data.demo03Grade = await demo03GradeFormRef.value?.getValues();
     try {
       await (formData.value?.id
         ? updateDemo03Student(data)
@@ -80,7 +80,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
     if (!data) {

apps/web-antd/src/views/infra/demo/demo03/normal/data.ts

@@ -107,6 +107,7 @@ export function useGridColumns(
   onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
 ): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',

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

@@ -5,17 +5,18 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
-import { h } from 'vue';
+import { computed, h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { Download, Plus, Trash2 } from '@vben/icons';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
+  deleteDemo03StudentByIds,
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/normal';
@@ -55,7 +56,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
     await deleteDemo03Student(row.id as number);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     onRefresh();
-  } catch {
+  } finally {
+    hideLoading();
+  }
+}
+
+const deleteIds = ref<number[]>([]); // 待删除学生 ID
+const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+/** 批量删除学生 */
+async function onDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDemo03StudentByIds(deleteIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -113,6 +139,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    checkboxAll: setDeleteIds,
+    checkboxChange: setDeleteIds,
+  },
 });
 </script>
 
@@ -139,6 +169,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
         >
           {{ $t('ui.actionTitle.export') }}
         </Button>
+        <Button
+          :icon="h(Trash2)"
+          type="primary"
+          danger
+          class="ml-2"
+          :disabled="showDeleteBatchBtn"
+          @click="onDeleteBatch"
+          v-access:code="['infra:demo03-student:delete']"
+        >
+          批量删除
+        </Button>
       </template>
     </Grid>
   </Page>

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

@@ -11,6 +11,13 @@ const props = defineProps<{
 }>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useDemo03GradeFormSchema(),
   showDefaultActions: false,

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

@@ -61,8 +61,8 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
     // 拼接子表的数据
-    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03Courses = demo03CourseFormRef.value?.getData();
-    data.demo03grade = await demo03GradeFormRef.value?.getValues();
+    data.demo03Grade = await demo03GradeFormRef.value?.getValues();
     try {
       await (formData.value?.id
         ? updateDemo03Student(data)
@@ -80,7 +80,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
     if (!data) {