aiotagro/admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-01 12:44:06 +08:00
parent 2e2a147815
commit 599e1b342a
10 changed files with 82 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -143,7 +143,6 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
formatter: 'formatDateTime',
},
{
field: 'actions',
title: '操作',
width: 280,
fixed: 'right',
@@ -170,7 +169,6 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
slots: { default: 'score' },
},
{
field: 'actions',
title: '操作',
width: 280,
fixed: 'right',

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

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

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

@@ -26,6 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
keepSource: true,
rowConfig: {
keyField: 'id',
isHover: true,
},
pagerConfig: {
enabled: false,
@@ -37,14 +38,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
/** 添加学生课程 */
const onAdd = async () => {
async function handleAdd() {
await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
};
}
/** 删除学生课程 */
const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
async function handleDelete(row: Demo03StudentApi.Demo03Course) {
await gridApi.grid.remove(row);
};
}
/** 提供获取表格数据的方法供父组件调用 */
defineExpose({
@@ -98,7 +99,7 @@ watch(
auth: ['infra:demo03-student:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]),
confirm: onDelete.bind(null, row),
confirm: handleDelete.bind(null, row),
},
},
]"
@@ -110,7 +111,7 @@ watch(
:icon="h(Plus)"
type="primary"
ghost
@click="onAdd"
@click="handleAdd"
v-access:code="['infra:demo03-student:create']"
>
{{ $t('ui.actionTitle.create', ['学生课程']) }}

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

@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
/** 刷新表格 */
async function onRefresh() {
async function handleRefresh() {
await gridApi.grid.loadData(
await getDemo03CourseListByStudentId(props.studentId!),
);
@@ -45,7 +45,7 @@ watch(
return;
}
await nextTick();
await onRefresh();
await handleRefresh();
},
{ immediate: true },
);

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

@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
/** 刷新表格 */
async function onRefresh() {
async function handleRefresh() {
await gridApi.grid.loadData([
await getDemo03GradeByStudentId(props.studentId!),
]);
@@ -45,7 +45,7 @@ watch(
return;
}
await nextTick();
await onRefresh();
await handleRefresh();
},
{ immediate: true },
);

5
apps/web-ele/src/views/infra/demo/demo03/inner/data.ts
View File

@@ -144,7 +144,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
},
{
title: '操作',
width: 200,
width: 280,
fixed: 'right',
slots: { default: 'actions' },
},
@@ -170,7 +170,7 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
},
{
title: '操作',
width: 200,
width: 280,
fixed: 'right',
slots: { default: 'actions' },
},
@@ -208,6 +208,7 @@ export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentA
},
];
}
// ==================== 子表（学生班级） ====================
/** 新增/修改的表单 */

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

@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
@@ -32,10 +32,16 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.reload();
}
/** 导出表格 */
async function handleExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
}
/** 创建学生 */
function handleCreate() {
formModalApi.setData(null).open();
@@ -54,7 +60,7 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
try {
await deleteDemo03Student(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@@ -62,14 +68,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
/** 批量删除学生 */
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
text: $t('ui.actionMessage.deletingBatch'),
});
try {
await deleteDemo03StudentList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@@ -84,12 +91,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!);
}
/** 导出表格 */
async function handleExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@@ -129,8 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="学生列表">
<template #expand_content="{ row }">
<!-- 子表的表单 -->

1
apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
View File

@@ -26,6 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
keepSource: true,
rowConfig: {
keyField: 'id',
isHover: true,
},
pagerConfig: {
enabled: false,

6
apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
View File

@@ -17,7 +17,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDemo03CourseGridColumns(),
pagerConfig: {
nabled: false,
enabled: false,
},
toolbarConfig: {
enabled: false,
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
/** 刷新表格 */
async function onRefresh() {
async function handleRefresh() {
await gridApi.grid.loadData(
await getDemo03CourseListByStudentId(props.studentId!),
);
@@ -45,7 +45,7 @@ watch(
return;
}
await nextTick();
await onRefresh();
await handleRefresh();
},
{ immediate: true },
);

6
apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
View File

@@ -17,7 +17,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDemo03GradeGridColumns(),
pagerConfig: {
nabled: false,
enabled: false,
},
toolbarConfig: {
enabled: false,
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
/** 刷新表格 */
async function onRefresh() {
async function handleRefresh() {
await gridApi.grid.loadData([
await getDemo03GradeByStudentId(props.studentId!),
]);
@@ -45,7 +45,7 @@ watch(
return;
}
await nextTick();
await onRefresh();
await handleRefresh();
},
{ immediate: true },
);