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

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

Browse Source
This commit is contained in:
YunaiV
2025-10-01 13:00:13 +08:00
parent 599e1b342a
commit 92c433a6aa
4 changed files with 91 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -108,14 +108,17 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
{
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 },
@@ -124,21 +127,23 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
{
field: 'birthday',
title: '出生日期',
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'description',
title: '简介',
minWidth: 120,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'actions',
title: '操作',
width: 280,
width: 200,
fixed: 'right',
slots: { default: 'actions' },
},
@@ -153,17 +158,18 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
{
field: 'name',
title: '名字',
minWidth: 120,
slots: { default: 'name' },
},
{
field: 'score',
title: '分数',
minWidth: 120,
slots: { default: 'score' },
},
{
field: 'actions',
title: '操作',
width: 280,
width: 200,
fixed: 'right',
slots: { default: 'actions' },
},

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

@@ -2,13 +2,12 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
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 } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@@ -28,31 +27,53 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出表格 */
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 handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const hideLoading = message.loading({
content: $t('ui.actionMessage.deletingBatch'),
duration: 0,
});
try {
await deleteDemo03StudentList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
hideLoading();
}
@@ -66,28 +87,6 @@ function handleRowCheckboxChange({
}) {
checkedIds.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 deleteDemo03StudentList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
/** 导出表格 */
async function onExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
@@ -128,38 +127,36 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<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>
<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,
disabled: isEmpty(checkedIds),
auth: ['infra:demo03-student:delete'],
onClick: handleDeleteBatch,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
@@ -169,17 +166,17 @@ 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'),
danger: true,
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['infra:demo03-student:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]),
confirm: onDelete.bind(null, row),
confirm: handleDelete.bind(null, row),
},
},
]"

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

@@ -37,14 +37,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 +98,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 +110,7 @@ watch(
:icon="h(Plus)"
type="primary"
ghost
@click="onAdd"
@click="handleAdd"
v-access:code="['infra:demo03-student:create']"
>
{{ $t('ui.actionTitle.create', ['学生课程']) }}

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

@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
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 } from 'element-plus';
@@ -27,10 +27,16 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出表格 */
async function handleExport() {
const data = await exportDemo03Student(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
}
/** 创建学生 */
function handleCreate() {
formModalApi.setData(null).open();
@@ -49,7 +55,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();
}
@@ -57,14 +63,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();
}
@@ -79,12 +86,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(),
@@ -124,8 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="学生列表">
<template #toolbar-tools>
<TableAction