yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!77 feat: 新增主子表erp模式代码预览 

Merge pull request !77 from puhui999/v-next
pull/78/head
芋道源码 2025-04-21 12:19:58 +00:00 committed by Gitee
parent d6d44b65ee 3adcec7841
commit 598e8083a5
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
22 changed files with 4313 additions and 2372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
apps/web-antd/src/api/infra/demo/demo03/erp/index.ts Normal file
View File

@ -0,0 +1,116 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace Demo03StudentApi {
/** 学生课程信息 */
export interface Demo03Course {
id: number; // 编号
studentId?: number; // 学生编号
name?: string; // 名字
score?: number; // 分数
}
/** 学生班级信息 */
export interface Demo03Grade {
id: number; // 编号
studentId?: number; // 学生编号
name?: string; // 名字
teacher?: string; // 班主任
}
/** 学生信息 */
export interface Demo03Student {
id: number; // 编号
name?: string; // 名字
sex?: number; // 性别
birthday?: Date; // 出生日期
description?: string; // 简介
}
}
/** 查询学生分页 */
export function getDemo03StudentPage(params: PageParam) {
return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>('/infra/demo03-student/page', { params });
}
/** 查询学生详情 */
export function getDemo03Student(id: number) {
return requestClient.get<Demo03StudentApi.Demo03Student>(`/infra/demo03-student/get?id=${id}`);
}
/** 新增学生 */
export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
return requestClient.post('/infra/demo03-student/create', data);
}
/** 修改学生 */
export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
return requestClient.put('/infra/demo03-student/update', data);
}
/** 删除学生 */
export function deleteDemo03Student(id: number) {
return requestClient.delete(`/infra/demo03-student/delete?id=${id}`);
}
/** 导出学生 */
export function exportDemo03Student(params: any) {
return requestClient.download('/infra/demo03-student/export-excel', params);
}
// ==================== 子表（学生课程） ====================
/** 获得学生课程分页 */
export function getDemo03CoursePage(params: PageParam) {
return requestClient.get<PageResult<Demo03StudentApi.Demo03Course>>(`/infra/demo03-student/demo03-course/page`, {
params,
});
}
/** 新增学生课程 */
export function createDemo03Course(data: Demo03StudentApi.Demo03Course) {
return requestClient.post(`/infra/demo03-student/demo03-course/create`, data);
}
/** 修改学生课程 */
export function updateDemo03Course(data: Demo03StudentApi.Demo03Course) {
return requestClient.put(`/infra/demo03-student/demo03-course/update`, data);
}
/** 删除学生课程 */
export function deleteDemo03Course(id: number) {
return requestClient.delete(`/infra/demo03-student/demo03-course/delete?id=${id}`);
}
/** 获得学生课程 */
export function getDemo03Course(id: number) {
return requestClient.get<Demo03StudentApi.Demo03Course>(`/infra/demo03-student/demo03-course/get?id=${id}`);
}
// ==================== 子表（学生班级） ====================
/** 获得学生班级分页 */
export function getDemo03GradePage(params: PageParam) {
return requestClient.get<PageResult<Demo03StudentApi.Demo03Grade>>(`/infra/demo03-student/demo03-grade/page`, {
params,
});
}
/** 新增学生班级 */
export function createDemo03Grade(data: Demo03StudentApi.Demo03Grade) {
return requestClient.post(`/infra/demo03-student/demo03-grade/create`, data);
}
/** 修改学生班级 */
export function updateDemo03Grade(data: Demo03StudentApi.Demo03Grade) {
return requestClient.put(`/infra/demo03-student/demo03-grade/update`, data);
}
/** 删除学生班级 */
export function deleteDemo03Grade(id: number) {
return requestClient.delete(`/infra/demo03-student/demo03-grade/delete?id=${id}`);
}
/** 获得学生班级 */
export function getDemo03Grade(id: number) {
return requestClient.get<Demo03StudentApi.Demo03Grade>(`/infra/demo03-student/demo03-grade/get?id=${id}`);
}

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

@ -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; // 编号
@ -60,6 +62,7 @@ export function exportDemo03Student(params: any) {
}
// ==================== 子表（学生课程） ====================
/** 获得学生课程列表 */
export function getDemo03CourseListByStudentId(studentId: number) {
return requestClient.get<Demo03StudentApi.Demo03Course[]>(
@ -68,6 +71,7 @@ export function getDemo03CourseListByStudentId(studentId: number) {
}
// ==================== 子表（学生班级） ====================
/** 获得学生班级 */
export function getDemo03GradeByStudentId(studentId: number) {
return requestClient.get<Demo03StudentApi.Demo03Grade>(

450
apps/web-antd/src/views/infra/demo/demo03/erp/data.ts Normal file
View File

@ -0,0 +1,450 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'name',
label: '名字',
rules: 'required',
component: 'Input',
componentProps: {
placeholder: '请输入名字',
},
},
{
fieldName: 'sex',
label: '性别',
rules: 'required',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
},
{
fieldName: 'birthday',
label: '出生日期',
rules: 'required',
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
},
},
{
fieldName: 'description',
label: '简介',
rules: 'required',
component: 'RichTextarea',
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '名字',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入名字',
},
},
{
fieldName: 'sex',
label: '性别',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
placeholder: '请选择性别',
},
},
{
fieldName: 'description',
label: '简介',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入简介',
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 120,
},
{
field: 'name',
title: '名字',
minWidth: 120,
},
{
field: 'sex',
title: '性别',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX },
},
},
{
field: 'birthday',
title: '出生日期',
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'description',
title: '简介',
minWidth: 120,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 200,
align: 'center',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: 'id',
nameTitle: '学生',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['infra:demo03-student:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['infra:demo03-student:delete']),
},
],
},
},
];
}
// ==================== 子表（学生课程） ====================
/** 新增/修改的表单 */
export function useDemo03CourseFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'name',
label: '名字',
rules: 'required',
component: 'Input',
componentProps: {
placeholder: '请输入名字',
},
},
{
fieldName: 'score',
label: '分数',
rules: 'required',
component: 'Input',
componentProps: {
placeholder: '请输入分数',
},
},
];
}
/** 列表的搜索表单 */
export function useDemo03CourseGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'studentId',
label: '学生编号',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入学生编号',
},
},
{
fieldName: 'name',
label: '名字',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入名字',
},
},
{
fieldName: 'score',
label: '分数',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入分数',
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useDemo03CourseGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 120,
},
{
field: 'studentId',
title: '学生编号',
minWidth: 120,
},
{
field: 'name',
title: '名字',
minWidth: 120,
},
{
field: 'score',
title: '分数',
minWidth: 120,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 200,
align: 'center',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: 'id',
nameTitle: '学生课程',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['infra:demo03-student:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['infra:demo03-student:delete']),
},
],
},
},
];
}
// ==================== 子表（学生班级） ====================
/** 新增/修改的表单 */
export function useDemo03GradeFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'name',
label: '名字',
rules: 'required',
component: 'Input',
componentProps: {
placeholder: '请输入名字',
},
},
{
fieldName: 'teacher',
label: '班主任',
rules: 'required',
component: 'Input',
componentProps: {
placeholder: '请输入班主任',
},
},
];
}
/** 列表的搜索表单 */
export function useDemo03GradeGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'studentId',
label: '学生编号',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入学生编号',
},
},
{
fieldName: 'name',
label: '名字',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入名字',
},
},
{
fieldName: 'teacher',
label: '班主任',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入班主任',
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useDemo03GradeGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Grade>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 120,
},
{
field: 'studentId',
title: '学生编号',
minWidth: 120,
},
{
field: 'name',
title: '名字',
minWidth: 120,
},
{
field: 'teacher',
title: '班主任',
minWidth: 120,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 200,
align: 'center',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: 'id',
nameTitle: '学生班级',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['infra:demo03-student:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['infra:demo03-student:delete']),
},
],
},
},
];
}

155
apps/web-antd/src/views/infra/demo/demo03/erp/index.vue Normal file
View File

@ -0,0 +1,155 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import Demo03CourseList from './modules/demo03-course-list.vue';
import Demo03GradeList from './modules/demo03-grade-list.vue';
import Form from './modules/form.vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message, Tabs } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDemo03Student, exportDemo03Student, getDemo03StudentPage } from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { h, ref } from 'vue';
import { useGridColumns, useGridFormSchema } from './data';
/** 子表的列表 */
const subTabsName = ref('demo03Course');
const selectDemo03Student = ref<Demo03StudentApi.Demo03Student>();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建学生 */
function onCreate() {
formModalApi.setData({}).open();
}
/** 编辑学生 */
function onEdit(row: Demo03StudentApi.Demo03Student) {
formModalApi.setData(row).open();
}
/** 删除学生 */
async function onDelete(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 as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_process_msg',
});
onRefresh();
} catch {
hideLoading();
}
}
/** 导出表格 */
async function onExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadByData(data, '学生.xls');
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<Demo03StudentApi.Demo03Student>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
height: '600px',
pagerConfig: {
enabled: true,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getDemo03StudentPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
isCurrent: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
gridEvents: {
cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
selectDemo03Student.value = row;
},
},
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<div>
<Grid table-title="学生列表">
<template #toolbar-tools>
<Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo03-student:create']">
{{ $t('ui.actionTitle.create', ['学生']) }}
</Button>
<Button
:icon="h(Download)"
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['infra:demo03-student:export']"
>
{{ $t('ui.actionTitle.export') }}
</Button>
</template>
</Grid>
<!-- 子表的表单 -->
<Tabs v-model:active-key="subTabsName" class="mt-2">
<Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
<Demo03CourseList :student-id="selectDemo03Student?.id" />
</Tabs.TabPane>
<Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
<Demo03GradeList :student-id="selectDemo03Student?.id" />
</Tabs.TabPane>
</Tabs>
</div>
</Page>
</template>

80
apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts" setup>
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createDemo03Course, getDemo03Course, updateDemo03Course } from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useDemo03CourseFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<Demo03StudentApi.Demo03Course>();
const getTitle = computed(() => {
return formData.value?.id ? $t('ui.actionTitle.edit', ['学生课程']) : $t('ui.actionTitle.create', ['学生课程']);
});
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useDemo03CourseFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
data.studentId = formData.value?.studentId;
try {
await (formData.value?.id ? updateDemo03Course(data) : createDemo03Course(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
if (!data) {
return;
}
if (data.id) {
modalApi.lock();
try {
data = await getDemo03Course(data.id);
} finally {
modalApi.lock(false);
}
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
},
});
</script>
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

137
apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue Normal file
View File

@ -0,0 +1,137 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDemo03Course, getDemo03CoursePage } from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
import { h, nextTick, watch } from 'vue';
import { useDemo03CourseGridColumns, useDemo03CourseGridFormSchema } from '../data';
import Demo03CourseForm from './demo03-course-form.vue';
const props = defineProps<{
studentId?: number; // 学生编号（主表的关联字段）
}>();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Demo03CourseForm,
destroyOnClose: true,
});
/** 创建学生课程 */
function onCreate() {
if (!props.studentId) {
message.warning('请先选择一个学生!');
return;
}
formModalApi.setData({ studentId: props.studentId }).open();
}
/** 编辑学生课程 */
function onEdit(row: Demo03StudentApi.Demo03Course) {
formModalApi.setData(row).open();
}
/** 删除学生课程 */
async function onDelete(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 as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_process_msg',
});
onRefresh();
} catch {
hideLoading();
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<Demo03StudentApi.Demo03Course>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useDemo03CourseGridFormSchema(),
},
gridOptions: {
columns: useDemo03CourseGridColumns(onActionClick),
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (!props.studentId) {
return [];
}
return await getDemo03CoursePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
studentId: props.studentId,
...formValues,
});
},
},
},
pagerConfig: {
enabled: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
});
/** 刷新表格 */
const onRefresh = async () => {
await gridApi.query();
};
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.studentId,
async (val) => {
if (!val) {
return;
}
await nextTick();
await onRefresh();
},
{ immediate: true },
);
</script>
<template>
<FormModal @success="onRefresh" />
<Grid table-title="学生课程列表">
<template #toolbar-tools>
<Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo03-student:create']">
{{ $t('ui.actionTitle.create', ['学生课程']) }}
</Button>
</template>
</Grid>
</template>

80
apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts" setup>
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createDemo03Grade, getDemo03Grade, updateDemo03Grade } from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useDemo03GradeFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<Demo03StudentApi.Demo03Grade>();
const getTitle = computed(() => {
return formData.value?.id ? $t('ui.actionTitle.edit', ['学生班级']) : $t('ui.actionTitle.create', ['学生班级']);
});
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useDemo03GradeFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
data.studentId = formData.value?.studentId;
try {
await (formData.value?.id ? updateDemo03Grade(data) : createDemo03Grade(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
if (!data) {
return;
}
if (data.id) {
modalApi.lock();
try {
data = await getDemo03Grade(data.id);
} finally {
modalApi.lock(false);
}
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
},
});
</script>
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

137
apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue Normal file
View File

@ -0,0 +1,137 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDemo03Grade, getDemo03GradePage } from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
import { h, nextTick, watch } from 'vue';
import { useDemo03GradeGridColumns, useDemo03GradeGridFormSchema } from '../data';
import Demo03GradeForm from './demo03-grade-form.vue';
const props = defineProps<{
studentId?: number; // 学生编号（主表的关联字段）
}>();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Demo03GradeForm,
destroyOnClose: true,
});
/** 创建学生班级 */
function onCreate() {
if (!props.studentId) {
message.warning('请先选择一个学生!');
return;
}
formModalApi.setData({ studentId: props.studentId }).open();
}
/** 编辑学生班级 */
function onEdit(row: Demo03StudentApi.Demo03Grade) {
formModalApi.setData(row).open();
}
/** 删除学生班级 */
async function onDelete(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 as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_process_msg',
});
onRefresh();
} catch {
hideLoading();
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<Demo03StudentApi.Demo03Grade>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useDemo03GradeGridFormSchema(),
},
gridOptions: {
columns: useDemo03GradeGridColumns(onActionClick),
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (!props.studentId) {
return [];
}
return await getDemo03GradePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
studentId: props.studentId,
...formValues,
});
},
},
},
pagerConfig: {
enabled: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
});
/** 刷新表格 */
const onRefresh = async () => {
await gridApi.query();
};
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.studentId,
async (val) => {
if (!val) {
return;
}
await nextTick();
await onRefresh();
},
{ immediate: true },
);
</script>
<template>
<FormModal @success="onRefresh" />
<Grid table-title="学生班级列表">
<template #toolbar-tools>
<Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo03-student:create']">
{{ $t('ui.actionTitle.create', ['学生班级']) }}
</Button>
</template>
</Grid>
</template>

78
apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue Normal file
View File

@ -0,0 +1,78 @@
<script lang="ts" setup>
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createDemo03Student, getDemo03Student, updateDemo03Student } from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<Demo03StudentApi.Demo03Student>();
const getTitle = computed(() => {
return formData.value?.id ? $t('ui.actionTitle.edit', ['学生']) : $t('ui.actionTitle.create', ['学生']);
});
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
try {
await (formData.value?.id ? updateDemo03Student(data) : createDemo03Student(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
if (!data) {
return;
}
if (data.id) {
modalApi.lock();
try {
data = await getDemo03Student(data.id);
} finally {
modalApi.lock(false);
}
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
},
});
</script>
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

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

@ -56,10 +56,7 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'description',
label: '简介',
rules: 'required',
component: 'Textarea',
componentProps: {
placeholder: '请输入简介',
},
component: 'RichTextarea',
},
];
}
@ -180,7 +177,8 @@ export function useGridColumns(
}
// ==================== 子表（学生课程） ====================
/** 新增/修改列表的字段 */ // TODO @puhui999： ==== 下面空一行；
/** 新增/修改列表的字段 */
export function useDemo03CourseGridEditColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
@ -222,7 +220,8 @@ export function useDemo03CourseGridEditColumns(
},
];
}
/** 列表的字段 */ // TODO @puhui999：这里空一行；
/** 列表的字段 */
export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
return [
{
@ -253,7 +252,9 @@ export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentA
},
];
}
// ==================== 子表（学生班级） ==================== // TODO @puhui999： ==== 前后都空一行；
// ==================== 子表（学生班级） ====================
/** 新增/修改的表单 */
export function useDemo03GradeFormSchema(): VbenFormSchema[] {
return [
@ -285,6 +286,7 @@ export function useDemo03GradeFormSchema(): VbenFormSchema[] {
},
];
}
/** 列表的字段 */
export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
return [

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

@ -2,8 +2,8 @@
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
import Demo03CourseList from './modules/Demo03CourseList.vue';
import Demo03GradeList from './modules/Demo03GradeList.vue';
import Demo03CourseList from './modules/demo03-course-list.vue';
import Demo03GradeList from './modules/demo03-grade-list.vue';
import Form from './modules/form.vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
@ -30,12 +30,6 @@ function onRefresh() {
gridApi.reload();
}
/** 导出表格 */
async function onExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadByData(data, '学生.xls');
}
/** 创建学生 */
function onCreate() {
formModalApi.setData({}).open();
@ -65,17 +59,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<Demo03StudentApi.Demo03Student>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
@ -119,8 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Grid table-title="学生列表">
<template #expand_content="{ row }">
<!-- 子表的表单 -->
<!-- TODO @puhui999：【样式优化】1）Tabs 和箭头对齐；2）子 Table 也和箭头对齐 -->
<Tabs v-model:active-key="subTabsName">
<Tabs v-model:active-key="subTabsName" class="mx-8">
<Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
<Demo03CourseList :student-id="row?.id" />
</Tabs.TabPane>

45
apps/web-antd/src/views/infra/demo/demo03/inner/modules/Demo03CourseForm.vue → apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup>
// TODO @puhui999：命名使用小写 + 中划线
import type { OnActionClickParams } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
@ -14,7 +13,7 @@ import { h, nextTick, watch } from 'vue';
import { useDemo03CourseGridEditColumns } from '../data';
const props = defineProps<{
studentId?: any; // 学生编号（主表的关联字段） TODO @puhui999：类型定义，应该是 number？
studentId?: number; // 学生编号（主表的关联字段）
}>();
/** 表格操作按钮的回调函数 */
@ -27,8 +26,7 @@ function onActionClick({ code, row }: OnActionClickParams<Demo03StudentApi.Demo0
}
}
// TODO @puhui999：对于当前来说，就 Grid，gridApi，更简洁一点？
const [Demo03CourseGrid, demo03CourseGridApi] = useVbenVxeGrid({
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDemo03CourseGridEditColumns(onActionClick),
border: true,
@ -47,27 +45,25 @@ const [Demo03CourseGrid, demo03CourseGridApi] = useVbenVxeGrid({
},
});
/** 删除学生课程 */
const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
await demo03CourseGridApi.grid.remove(row);
/** 添加学生课程 */
const onAdd = async () => {
await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
};
/** 添加学生课程 */
// TODO @puhui999：要不改成 onAdd？风格一致？；然后 add 放 delete 前面；
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[] => {
// TODO @puhui999 ： 要不简化成这样哈？
const data = demo03CourseGridApi.grid.getData() as Demo03StudentApi.Demo03Course[];
const removeRecords = demo03CourseGridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
const insertRecords = demo03CourseGridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
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 => ({ ...row, id: undefined })));
.filter((row) => !removeRecords.some((removed) => removed.id === row.id))
.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
},
});
@ -78,25 +74,24 @@ watch(
if (!val) {
return;
}
await nextTick(); // TODO @puhui999：上面的空行去掉
await demo03CourseGridApi.grid.loadData(await getDemo03CourseListByStudentId(props.studentId!));
await nextTick();
await gridApi.grid.loadData(await getDemo03CourseListByStudentId(props.studentId!));
},
{ immediate: true },
);
</script>
<template>
<Demo03CourseGrid class="mx-4">
<Grid class="mx-4">
<template #name="{ row }">
<Input v-model:value="row.name" />
</template>
<template #score="{ row }">
<Input v-model:value="row.score" />
</template>
</Demo03CourseGrid>
<!-- TODO @puhui999：-mt-4 把距离控制下哈； -->
<div class="flex justify-center -mt-4">
<Button :icon="h(Plus)" type="primary" ghost @click="handleAdd" v-access:code="['infra:demo03-student:create']">
</Grid>
<div class="-mt-4 flex justify-center">
<Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['infra:demo03-student:create']">
{{ $t('ui.actionTitle.create', ['学生课程']) }}
</Button>
</div>

10
apps/web-antd/src/views/infra/demo/demo03/inner/modules/Demo03CourseList.vue → apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
View File

@ -9,7 +9,7 @@ import { nextTick, watch } from 'vue';
import { useDemo03CourseGridColumns } from '../data';
const props = defineProps<{
studentId?: any; // 学生编号（主表的关联字段） TODO @puhui999：类型定义，应该是 number？
studentId?: number; // 学生编号（主表的关联字段）
}>();
const [Grid, gridApi] = useVbenVxeGrid({
@ -41,8 +41,7 @@ watch(
if (!val) {
return;
}
await nextTick(); // TODO @puhui999：上面空行去掉？
await nextTick();
await onRefresh();
},
{ immediate: true },
@ -50,8 +49,5 @@ watch(
</script>
<template>
<!-- TODO @puhui999：这个边距可以调整下，还是“箭头”那相关的哈 -->
<div class="mx-4">
<Grid table-title="学生课程列表" />
</div>
<Grid table-title="学生课程列表" />
</template>

16
apps/web-antd/src/views/infra/demo/demo03/inner/modules/Demo03GradeForm.vue → apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue
View File

@ -6,10 +6,10 @@ import { nextTick, watch } from 'vue';
import { useDemo03GradeFormSchema } from '../data';
const props = defineProps<{
studentId?: any; // 学生编号（主表的关联字段） TODO @puhui999：类型定义，应该是 number？
studentId?: number; // 学生编号（主表的关联字段）
}>();
const [Demo03GradeForm, demo03GradeFormApi] = useVbenForm({
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useDemo03GradeFormSchema(),
showDefaultActions: false,
@ -18,10 +18,10 @@ const [Demo03GradeForm, demo03GradeFormApi] = useVbenForm({
/** 暴露出表单校验方法和表单值获取方法 */
defineExpose({
validate: async () => {
const { valid } = await demo03GradeFormApi.validate();
const { valid } = await formApi.validate();
return valid;
},
getValues: demo03GradeFormApi.getValues,
getValues: formApi.getValues,
});
/** 监听主表的关联字段的变化，加载对应的子表数据 */
@ -31,13 +31,13 @@ watch(
if (!val) {
return;
}
await nextTick(); // TODO @puhui999：上面的空行去掉
await demo03GradeFormApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
await nextTick();
await formApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
},
{ immediate: true },
);
</script>
<template>
<Demo03GradeForm class="mx-4" />
<Form class="mx-4" />
</template>

9
apps/web-antd/src/views/infra/demo/demo03/inner/modules/Demo03GradeList.vue → apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
View File

@ -9,7 +9,7 @@ import { nextTick, watch } from 'vue';
import { useDemo03GradeGridColumns } from '../data';
const props = defineProps<{
studentId?: any; // 学生编号（主表的关联字段） // TODO @puhui999：上面的空行去掉
studentId?: number; // 学生编号（主表的关联字段）
}>();
const [Grid, gridApi] = useVbenVxeGrid({
@ -41,8 +41,7 @@ watch(
if (!val) {
return;
}
await nextTick(); // TODO @puhui999：上面的空行去掉
await nextTick();
await onRefresh();
},
{ immediate: true },
@ -50,7 +49,5 @@ watch(
</script>
<template>
<div class="mx-4">
<Grid table-title="学生班级列表" />
</div>
<Grid table-title="学生班级列表" />
</template>

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

@ -10,8 +10,8 @@ import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useFormSchema } from '../data';
import Demo03CourseForm from './Demo03CourseForm.vue';
import Demo03GradeForm from './Demo03GradeForm.vue';
import Demo03CourseForm from './demo03-course-form.vue';
import Demo03GradeForm from './demo03-grade-form.vue';
const emit = defineEmits(['success']);
const formData = ref<Demo03StudentApi.Demo03Student>();
@ -72,9 +72,7 @@ const [Modal, modalApi] = useVbenModal({
if (!data) {
return;
}
if (data.id) {
// 编辑
modalApi.lock();
try {
data = await getDemo03Student(data.id);

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

@ -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<Demo03StudentApi.Demo03Course>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
@ -218,7 +219,9 @@ export function useDemo03CourseGridEditColumns(
},
];
}
// ==================== 子表（学生班级） ====================
/** 新增/修改的表单 */
export function useDemo03GradeFormSchema(): VbenFormSchema[] {
return [

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

@ -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<Demo03StudentApi.Demo03Student>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}

48
apps/web-antd/src/views/infra/demo/demo03/normal/modules/Demo03CourseForm.vue → apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
View File

@ -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<Demo03StudentApi.Demo0
}
}
const [Demo03CourseGrid, demo03CourseGridApi] = useVbenVxeGrid({
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDemo03CourseGridEditColumns(onActionClick),
border: true,
@ -45,34 +45,25 @@ const [Demo03CourseGrid, demo03CourseGridApi] = useVbenVxeGrid({
},
});
/** 删除学生课程 */
const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
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 },
);
</script>
<template>
<Demo03CourseGrid class="mx-4">
<Grid class="mx-4">
<template #name="{ row }">
<Input v-model:value="row.name" />
</template>
<template #score="{ row }">
<Input v-model:value="row.score" />
</template>
</Demo03CourseGrid>
<div class="flex justify-center">
<Button :icon="h(Plus)" type="primary" ghost @click="handleAdd" v-access:code="['infra:demo03-student:create']">
</Grid>
<div class="-mt-4 flex justify-center">
<Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['infra:demo03-student:create']">
{{ $t('ui.actionTitle.create', ['学生课程']) }}
</Button>
</div>

16
apps/web-antd/src/views/infra/demo/demo03/normal/modules/Demo03GradeForm.vue → apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue
View File

@ -1,15 +1,15 @@
<script lang="ts" setup>
import { useVbenForm } from '#/adapter/form';
import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
import { watch } from 'vue';
import { nextTick, watch } from 'vue';
import { useDemo03GradeFormSchema } from '../data';
const props = defineProps<{
studentId?: any; // 学生编号（主表的关联字段）
studentId?: number; // 学生编号（主表的关联字段）
}>();
const [Demo03GradeForm, demo03GradeFormApi] = useVbenForm({
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useDemo03GradeFormSchema(),
showDefaultActions: false,
@ -18,10 +18,10 @@ const [Demo03GradeForm, demo03GradeFormApi] = useVbenForm({
/** 暴露出表单校验方法和表单值获取方法 */
defineExpose({
validate: async () => {
const { valid } = await demo03GradeFormApi.validate();
const { valid } = await formApi.validate();
return valid;
},
getValues: demo03GradeFormApi.getValues,
getValues: formApi.getValues,
});
/** 监听主表的关联字段的变化，加载对应的子表数据 */
@ -31,13 +31,13 @@ watch(
if (!val) {
return;
}
await demo03GradeFormApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
await nextTick();
await formApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
},
{ immediate: true },
);
</script>
<template>
<Demo03GradeForm class="mx-4" />
<Form class="mx-4" />
</template>

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

@ -10,8 +10,8 @@ import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useFormSchema } from '../data';
import Demo03CourseForm from './Demo03CourseForm.vue';
import Demo03GradeForm from './Demo03GradeForm.vue';
import Demo03CourseForm from './demo03-course-form.vue';
import Demo03GradeForm from './demo03-grade-form.vue';
const emit = defineEmits(['success']);
const formData = ref<Demo03StudentApi.Demo03Student>();
@ -72,9 +72,7 @@ const [Modal, modalApi] = useVbenModal({
if (!data) {
return;
}
if (data.id) {
// 编辑
modalApi.lock();
try {
data = await getDemo03Student(data.id);

5222
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff