smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions 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', formatter: 'formatDateTime',
}, },
{ {
field: 'actions',
title: '操作', title: '操作',
width: 280, width: 280,
fixed: 'right', fixed: 'right',
@@ -170,7 +169,6 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
slots: { default: 'score' }, slots: { default: 'score' },
}, },
{ {
field: 'actions',
title: '操作', title: '操作',
width: 280, width: 280,
fixed: 'right', 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 { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner'; 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 { confirm, Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus, Trash2 } from '@vben/icons';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils'; 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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { import {
@@ -33,48 +32,53 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.reload(); 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(); formModalApi.setData(null).open();
} }
/** 编辑学生 */ /** 编辑学生 */
function onEdit(row: Demo03StudentApi.Demo03Student) { function handleEdit(row: Demo03StudentApi.Demo03Student) {
formModalApi.setData(row).open(); formModalApi.setData(row).open();
} }
/** 删除学生 */ /** 删除学生 */
async function onDelete(row: Demo03StudentApi.Demo03Student) { async function handleDelete(row: Demo03StudentApi.Demo03Student) {
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]), content: $t('ui.actionMessage.deleting', [row.id]),
duration: 0, duration: 0,
key: 'action_process_msg',
}); });
try { try {
await deleteDemo03Student(row.id!); await deleteDemo03Student(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.id])); message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
} }
/** 批量删除学生 */ /** 批量删除学生 */
async function onDeleteBatch() { async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'), content: $t('ui.actionMessage.deletingBatch'),
duration: 0, duration: 0,
key: 'action_process_msg',
}); });
try { try {
await deleteDemo03StudentList(checkedIds.value); await deleteDemo03StudentList(checkedIds.value);
checkedIds.value = []; checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess')); message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
@@ -89,12 +93,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!); 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({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
@@ -134,8 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<FormModal @success="onRefresh" /> <FormModal @success="handleRefresh" />
<Grid table-title="学生列表"> <Grid table-title="学生列表">
<template #expand_content="{ row }"> <template #expand_content="{ row }">
<!-- 子表的表单 --> <!-- 子表的表单 -->
@@ -149,34 +146,33 @@ const [Grid, gridApi] = useVbenVxeGrid({
</Tabs> </Tabs>
</template> </template>
<template #toolbar-tools> <template #toolbar-tools>
<Button <TableAction
:icon="h(Plus)" :actions="[
type="primary" {
@click="onCreate" label: $t('ui.actionTitle.create', ['学生']),
v-access:code="['infra:demo03-student:create']" type: 'primary',
> icon: ACTION_ICON.ADD,
{{ $t('ui.actionTitle.create', ['学生']) }} auth: ['infra:demo03-student:create'],
</Button> onClick: handleCreate,
<Button },
:icon="h(Download)" {
type="primary" label: $t('ui.actionTitle.export'),
class="ml-2" type: 'primary',
@click="onExport" icon: ACTION_ICON.DOWNLOAD,
v-access:code="['infra:demo03-student:export']" auth: ['infra:demo03-student:export'],
> onClick: handleExport,
{{ $t('ui.actionTitle.export') }} },
</Button> {
<Button label: $t('ui.actionTitle.deleteBatch'),
:icon="h(Trash2)" type: 'primary',
type="primary" danger: true,
danger icon: ACTION_ICON.DELETE,
class="ml-2" auth: ['infra:demo03-student:delete'],
:disabled="isEmpty(checkedIds)" disabled: isEmpty(checkedIds),
@click="onDeleteBatch" onClick: handleDeleteBatch,
v-access:code="['infra:demo03-student:delete']" },
> ]"
批量删除 />
</Button>
</template> </template>
<template #actions="{ row }"> <template #actions="{ row }">
<TableAction <TableAction
@@ -186,7 +182,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
type: 'link', type: 'link',
icon: ACTION_ICON.EDIT, icon: ACTION_ICON.EDIT,
auth: ['infra:demo03-student:update'], auth: ['infra:demo03-student:update'],
onClick: onEdit.bind(null, row), onClick: handleEdit.bind(null, row),
}, },
{ {
label: $t('common.delete'), label: $t('common.delete'),
@@ -196,7 +192,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
auth: ['infra:demo03-student:delete'], auth: ['infra:demo03-student:delete'],
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]), 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, keepSource: true,
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
pagerConfig: { pagerConfig: {
enabled: false, enabled: false,
@@ -37,14 +38,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
}); });
/** 添加学生课程 */ /** 添加学生课程 */
const onAdd = async () => { async function handleAdd() {
await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1); 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); await gridApi.grid.remove(row);
}; }
/** 提供获取表格数据的方法供父组件调用 */ /** 提供获取表格数据的方法供父组件调用 */
defineExpose({ defineExpose({
@@ -98,7 +99,7 @@ watch(
auth: ['infra:demo03-student:delete'], auth: ['infra:demo03-student:delete'],
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]), 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)" :icon="h(Plus)"
type="primary" type="primary"
ghost ghost
@click="onAdd" @click="handleAdd"
v-access:code="['infra:demo03-student:create']" v-access:code="['infra:demo03-student:create']"
> >
{{ $t('ui.actionTitle.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 gridApi.grid.loadData(
await getDemo03CourseListByStudentId(props.studentId!), await getDemo03CourseListByStudentId(props.studentId!),
); );
@@ -45,7 +45,7 @@ watch(
return; return;
} }
await nextTick(); await nextTick();
await onRefresh(); await handleRefresh();
}, },
{ immediate: true }, { 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 gridApi.grid.loadData([
await getDemo03GradeByStudentId(props.studentId!), await getDemo03GradeByStudentId(props.studentId!),
]); ]);
@@ -45,7 +45,7 @@ watch(
return; return;
} }
await nextTick(); await nextTick();
await onRefresh(); await handleRefresh();
}, },
{ immediate: true }, { 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: '操作', title: '操作',
width: 200, width: 280,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, slots: { default: 'actions' },
}, },
@@ -170,7 +170,7 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
}, },
{ {
title: '操作', title: '操作',
width: 200, width: 280,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, 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 { 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 { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus'; import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
@@ -32,10 +32,16 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.reload(); gridApi.reload();
} }
/** 导出表格 */
async function handleExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
}
/** 创建学生 */ /** 创建学生 */
function handleCreate() { function handleCreate() {
formModalApi.setData(null).open(); formModalApi.setData(null).open();
@@ -54,7 +60,7 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
try { try {
await deleteDemo03Student(row.id!); await deleteDemo03Student(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id])); ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh(); handleRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
@@ -62,14 +68,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
/** 批量删除学生 */ /** 批量删除学生 */
async function handleDeleteBatch() { async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'), text: $t('ui.actionMessage.deletingBatch'),
}); });
try { try {
await deleteDemo03StudentList(checkedIds.value); await deleteDemo03StudentList(checkedIds.value);
checkedIds.value = []; checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess')); ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh(); handleRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
@@ -84,12 +91,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!); 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({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
@@ -129,8 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<FormModal @success="onRefresh" /> <FormModal @success="handleRefresh" />
<Grid table-title="学生列表"> <Grid table-title="学生列表">
<template #expand_content="{ row }"> <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, keepSource: true,
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
pagerConfig: { pagerConfig: {
enabled: false, 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: { gridOptions: {
columns: useDemo03CourseGridColumns(), columns: useDemo03CourseGridColumns(),
pagerConfig: { pagerConfig: {
nabled: false, enabled: false,
}, },
toolbarConfig: { toolbarConfig: {
enabled: false, enabled: false,
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}); });
/** 刷新表格 */ /** 刷新表格 */
async function onRefresh() { async function handleRefresh() {
await gridApi.grid.loadData( await gridApi.grid.loadData(
await getDemo03CourseListByStudentId(props.studentId!), await getDemo03CourseListByStudentId(props.studentId!),
); );
@@ -45,7 +45,7 @@ watch(
return; return;
} }
await nextTick(); await nextTick();
await onRefresh(); await handleRefresh();
}, },
{ immediate: true }, { 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: { gridOptions: {
columns: useDemo03GradeGridColumns(), columns: useDemo03GradeGridColumns(),
pagerConfig: { pagerConfig: {
nabled: false, enabled: false,
}, },
toolbarConfig: { toolbarConfig: {
enabled: false, enabled: false,
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}); });
/** 刷新表格 */ /** 刷新表格 */
async function onRefresh() { async function handleRefresh() {
await gridApi.grid.loadData([ await gridApi.grid.loadData([
await getDemo03GradeByStudentId(props.studentId!), await getDemo03GradeByStudentId(props.studentId!),
]); ]);
@@ -45,7 +45,7 @@ watch(
return; return;
} }
await nextTick(); await nextTick();
await onRefresh(); await handleRefresh();
}, },
{ immediate: true }, { immediate: true },
); );