From 7ab66aa3637b6f1261cd5fd26b94b33eddf23e26 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 21 Apr 2025 15:55:09 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=96=B0=E7=94=9F?= =?UTF-8?q?=E6=88=90=E4=B8=BB=E5=AD=90=E8=A1=A8=E6=A0=87=E5=87=86=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=BB=A3=E7=A0=81=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/api/infra/demo/demo03/normal/index.ts | 2 + .../views/infra/demo/demo03/normal/data.ts | 7 +- .../views/infra/demo/demo03/normal/index.vue | 20 +- ...3CourseForm.vue => demo03-course-form.vue} | 48 +- ...o03GradeForm.vue => demo03-grade-form.vue} | 16 +- .../infra/demo/demo03/normal/modules/form.vue | 6 +- pnpm-lock.yaml | 5222 ++++++++++------- 7 files changed, 3020 insertions(+), 2301 deletions(-) rename apps/web-antd/src/views/infra/demo/demo03/normal/modules/{Demo03CourseForm.vue => demo03-course-form.vue} (61%) rename apps/web-antd/src/views/infra/demo/demo03/normal/modules/{Demo03GradeForm.vue => demo03-grade-form.vue} (64%) 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 85352c516..a14733ee9 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 @@ -10,6 +10,7 @@ export namespace Demo03StudentApi { name?: string; // 名字 score?: number; // 分数 } + /** 学生班级信息 */ export interface Demo03Grade { id: number; // 编号 @@ -17,6 +18,7 @@ export namespace Demo03StudentApi { name?: string; // 名字 teacher?: string; // 班主任 } + /** 学生信息 */ export interface Demo03Student { id: number; // 编号 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 0de86dbce..0f80d3810 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 @@ -56,7 +56,7 @@ export function useFormSchema(): VbenFormSchema[] { fieldName: 'description', label: '简介', rules: 'required', - component: 'Textarea', + component: 'RichTextarea', }, ]; } @@ -176,7 +176,8 @@ export function useGridColumns( } // ==================== 子表（学生课程） ==================== -/** 新增/修改的列表的字段 */ + +/** 新增/修改列表的字段 */ export function useDemo03CourseGridEditColumns( onActionClick?: OnActionClickFn, ): VxeTableGridOptions['columns'] { @@ -218,7 +219,9 @@ export function useDemo03CourseGridEditColumns( }, ]; } + // ==================== 子表（学生班级） ==================== + /** 新增/修改的表单 */ export function useDemo03GradeFormSchema(): VbenFormSchema[] { return [ 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 0a499d7dc..f844248b7 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 @@ -25,12 +25,6 @@ function onRefresh() { gridApi.query(); } -/** 导出表格 */ -async function onExport() { - const data = await exportDemo03Student(await gridApi.formApi.getValues()); - downloadByData(data, '学生.xls'); -} - /** 创建学生 */ function onCreate() { formModalApi.setData({}).open(); @@ -60,17 +54,23 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) { } } +/** 导出表格 */ +async function onExport() { + const data = await exportDemo03Student(await gridApi.formApi.getValues()); + downloadByData(data, '学生.xls'); +} + /** 表格操作按钮的回调函数 */ function onActionClick({ code, row }: OnActionClickParams) { switch (code) { - case 'delete': { - onDelete(row); - break; - } case 'edit': { onEdit(row); break; } + case 'delete': { + onDelete(row); + break; + } } } diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/Demo03CourseForm.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue similarity index 61% rename from apps/web-antd/src/views/infra/demo/demo03/normal/modules/Demo03CourseForm.vue rename to apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue index 15d1978cc..5153c0ca7 100644 --- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/Demo03CourseForm.vue +++ b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue @@ -13,7 +13,7 @@ import { h, nextTick, watch } from 'vue'; import { useDemo03CourseGridEditColumns } from '../data'; const props = defineProps<{ - studentId?: any; // 学生编号（主表的关联字段） + studentId?: number; // 学生编号（主表的关联字段） }>(); /** 表格操作按钮的回调函数 */ @@ -26,7 +26,7 @@ function onActionClick({ code, row }: OnActionClickParams { - await demo03CourseGridApi.grid.remove(row); +/** 添加学生课程 */ +const onAdd = async () => { + await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1); }; -/** 添加学生课程 */ -const handleAdd = async () => { - await demo03CourseGridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1); +/** 删除学生课程 */ +const onDelete = async (row: Demo03StudentApi.Demo03Course) => { + await gridApi.grid.remove(row); }; /** 提供获取表格数据的方法供父组件调用 */ defineExpose({ getData: (): Demo03StudentApi.Demo03Course[] => { - // 获取当前数据，但排除已删除的记录 - const allData = demo03CourseGridApi.grid.getData(); - const removedData = demo03CourseGridApi.grid.getRemoveRecords(); - const removedIds = new Set(removedData.map((row) => row.id)); - - // 过滤掉已删除的记录 - const currentData = allData.filter((row) => !removedIds.has(row.id)); - - // 获取新插入的记录并移除id - const insertedData = demo03CourseGridApi.grid.getInsertRecords().map((row) => { - delete row.id; - return row; - }); - - return [...currentData, ...insertedData]; + const data = gridApi.grid.getData() as Demo03StudentApi.Demo03Course[]; + const removeRecords = gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[]; + const insertRecords = gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[]; + return data + .filter((row) => !removeRecords.some((removed) => removed.id === row.id)) + .concat(insertRecords.map((row: any) => ({ ...row, id: undefined }))); }, }); @@ -83,25 +74,24 @@ watch( if (!val) { return; } - await nextTick(); - await demo03CourseGridApi.grid.loadData(await getDemo03CourseListByStudentId(props.studentId!)); + await gridApi.grid.loadData(await getDemo03CourseListByStudentId(props.studentId!)); }, { immediate: true }, );