diff --git a/apps/web-antd/src/api/infra/demo/demo03/erp/index.ts b/apps/web-antd/src/api/infra/demo/demo03/erp/index.ts index f9704bf14..8998589d5 100644 --- a/apps/web-antd/src/api/infra/demo/demo03/erp/index.ts +++ b/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>( - '/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( - `/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>( - `/infra/demo03-student/demo03-course/page`, - { - params, - }, + `/infra/demo03-student-erp/demo03-course/page`, + { 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( - `/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>( - `/infra/demo03-student/demo03-grade/page`, - { - params, - }, + `/infra/demo03-student-erp/demo03-grade/page`, + { 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( - `/infra/demo03-student/demo03-grade/get?id=${id}`, + `/infra/demo03-student-erp/demo03-grade/get?id=${id}`, ); } diff --git a/apps/web-antd/src/api/infra/demo/demo03/inner/index.ts b/apps/web-antd/src/api/infra/demo/demo03/inner/index.ts index a83cf4215..ebf306abe 100644 --- a/apps/web-antd/src/api/infra/demo/demo03/inner/index.ts +++ b/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>( - '/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( - `/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( - `/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( - `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=${studentId}`, + `/infra/demo03-student-inner/demo03-grade/get-by-student-id?studentId=${studentId}`, ); } diff --git a/apps/web-antd/src/api/infra/demo/demo03/normal/index.ts b/apps/web-antd/src/api/infra/demo/demo03/normal/index.ts index a04a919e9..4d620725f 100644 --- a/apps/web-antd/src/api/infra/demo/demo03/normal/index.ts +++ b/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>( - '/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( - `/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( - `/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( - `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=${studentId}`, + `/infra/demo03-student-normal/demo03-grade/get-by-student-id?studentId=${studentId}`, ); } diff --git a/apps/web-antd/src/views/infra/demo/demo01/index.vue b/apps/web-antd/src/views/infra/demo/demo01/index.vue index 4262d8375..29301a7a4 100644 --- a/apps/web-antd/src/views/infra/demo/demo01/index.vue +++ b/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([]); // 待删除示例联系人 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, gridEvents: { - checkboxAll: ({ - records, - }: { - records: Demo01ContactApi.Demo01Contact[]; - }) => { - deleteIds.value = records.map((item) => item.id); - }, - checkboxChange: ({ - records, - }: { - records: Demo01ContactApi.Demo01Contact[]; - }) => { - deleteIds.value = records.map((item) => item.id); - }, + checkboxAll: setDeleteIds, + checkboxChange: setDeleteIds, }, }); diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts b/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts index d0c360f30..4122efdee 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts +++ b/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts @@ -107,6 +107,7 @@ export function useGridColumns( onActionClick?: OnActionClickFn, ): VxeTableGridOptions['columns'] { return [ + { type: 'checkbox', width: 40 }, { field: 'id', title: '编号', @@ -254,6 +255,7 @@ export function useDemo03CourseGridColumns( onActionClick?: OnActionClickFn, ): VxeTableGridOptions['columns'] { return [ + { type: 'checkbox', width: 40 }, { field: 'id', title: '编号', @@ -391,6 +393,7 @@ export function useDemo03GradeGridColumns( onActionClick?: OnActionClickFn, ): VxeTableGridOptions['columns'] { return [ + { type: 'checkbox', width: 40 }, { field: 'id', title: '编号', diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue index 1f561d18d..e605774d5 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue +++ b/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 { downloadFileFromBlobPart } from '@vben/utils'; +import { Download, Plus, Trash2 } from '@vben/icons'; +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([]); // 待删除学生 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); + }, }, }); @@ -152,6 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({ > {{ $t('ui.actionTitle.export') }} + diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue index 32da0b650..3d6eb4a18 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue +++ b/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([]); // 待删除学生课程 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, + gridEvents: { + checkboxAll: setDeleteIds, + checkboxChange: setDeleteIds, + }, }); /** 刷新表格 */ @@ -148,6 +179,17 @@ watch( > {{ $t('ui.actionTitle.create', ['学生课程']) }} + diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue index 7b20a705a..bf044b3db 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue +++ b/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([]); // 待删除学生班级 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, + gridEvents: { + checkboxAll: setDeleteIds, + checkboxChange: setDeleteIds, + }, }); /** 刷新表格 */ @@ -148,6 +179,17 @@ watch( > {{ $t('ui.actionTitle.create', ['学生班级']) }} + diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue index 50cfa2cf6..3c83ff97a 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue +++ b/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(); if (!data) { diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts b/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts index 64024093b..1c4077973 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts +++ b/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts @@ -107,6 +107,7 @@ export function useGridColumns( onActionClick?: OnActionClickFn, ): VxeTableGridOptions['columns'] { return [ + { type: 'checkbox', width: 40 }, { type: 'expand', width: 80, slots: { content: 'expand_content' } }, { field: 'id', diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue index a784aa93f..b8199fb6c 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue +++ b/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 { downloadFileFromBlobPart } from '@vben/utils'; +import { Download, Plus, Trash2 } from '@vben/icons'; +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([]); // 待删除学生 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, + gridEvents: { + checkboxAll: setDeleteIds, + checkboxChange: setDeleteIds, + }, }); @@ -155,6 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({ > {{ $t('ui.actionTitle.export') }} + diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue index c0d159d17..fec5ee912 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue +++ b/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, + height: '600px', + rowConfig: { + keyField: 'id', + isHover: true, + }, + } as VxeTableGridOptions, }); /** 刷新表格 */ diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue index bdfff11fc..3e2854608 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue +++ b/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, diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue index 7806df602..64ac13e3e 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue +++ b/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, + height: '600px', + rowConfig: { + keyField: 'id', + isHover: true, + }, + } as VxeTableGridOptions, }); /** 刷新表格 */ diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue index ace0ddd5a..58dc7b547 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue +++ b/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.demo03grade = await demo03GradeFormRef.value?.getValues(); + data.demo03Courses = demo03CourseFormRef.value?.getData(); + 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(); if (!data) { diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts index 6520e9b39..532029bf5 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts +++ b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts @@ -107,6 +107,7 @@ export function useGridColumns( onActionClick?: OnActionClickFn, ): VxeTableGridOptions['columns'] { return [ + { type: 'checkbox', width: 40 }, { field: 'id', title: '编号', diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue index 01cd47f8f..f4e2975c7 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue +++ b/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 { downloadFileFromBlobPart } from '@vben/utils'; +import { Download, Plus, Trash2 } from '@vben/icons'; +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([]); // 待删除学生 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, + gridEvents: { + checkboxAll: setDeleteIds, + checkboxChange: setDeleteIds, + }, }); @@ -139,6 +169,17 @@ const [Grid, gridApi] = useVbenVxeGrid({ > {{ $t('ui.actionTitle.export') }} + diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue index 75a8147dc..5d5f396bf 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue +++ b/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, diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue index 14a525858..72cbf278d 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue +++ b/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.demo03grade = await demo03GradeFormRef.value?.getValues(); + data.demo03Courses = demo03CourseFormRef.value?.getData(); + 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(); if (!data) {