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/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', field: 'id',
title: '编号', title: '编号',
minWidth: 120,
}, },
{ {
field: 'name', field: 'name',
title: '名字', title: '名字',
minWidth: 120,
}, },
{ {
field: 'sex', field: 'sex',
title: '性别', title: '性别',
minWidth: 120,
cellRender: { cellRender: {
name: 'CellDict', name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX }, props: { type: DICT_TYPE.SYSTEM_USER_SEX },
@@ -124,21 +127,23 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
{ {
field: 'birthday', field: 'birthday',
title: '出生日期', title: '出生日期',
minWidth: 120,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {
field: 'description', field: 'description',
title: '简介', title: '简介',
minWidth: 120,
}, },
{ {
field: 'createTime', field: 'createTime',
title: '创建时间', title: '创建时间',
minWidth: 120,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {
field: 'actions',
title: '操作', title: '操作',
width: 280, width: 200,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, slots: { default: 'actions' },
}, },
@@ -153,17 +158,18 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
{ {
field: 'name', field: 'name',
title: '名字', title: '名字',
minWidth: 120,
slots: { default: 'name' }, slots: { default: 'name' },
}, },
{ {
field: 'score', field: 'score',
title: '分数', title: '分数',
minWidth: 120,
slots: { default: 'score' }, slots: { default: 'score' },
}, },
{ {
field: 'actions',
title: '操作', title: '操作',
width: 280, width: 200,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, 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 { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal'; 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 { 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 } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { import {
@@ -28,31 +27,53 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); 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(); 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 {
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 { } finally {
hideLoading(); hideLoading();
} }
@@ -66,28 +87,6 @@ function handleRowCheckboxChange({
}) { }) {
checkedIds.value = records.map((item) => item.id!); 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({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
@@ -128,38 +127,36 @@ 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 #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" disabled: isEmpty(checkedIds),
:disabled="isEmpty(checkedIds)" auth: ['infra:demo03-student:delete'],
@click="onDeleteBatch" onClick: handleDeleteBatch,
v-access:code="['infra:demo03-student:delete']" },
> ]"
批量删除 />
</Button>
</template> </template>
<template #actions="{ row }"> <template #actions="{ row }">
<TableAction <TableAction
@@ -169,17 +166,17 @@ 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'),
danger: true,
type: 'link', type: 'link',
danger: true,
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
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),
}, },
}, },
]" ]"

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); 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 +98,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 +110,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', ['学生课程']) }}

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 { 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 } from 'element-plus'; import { ElLoading, ElMessage } from 'element-plus';
@@ -27,10 +27,16 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
/** 导出表格 */
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();
@@ -49,7 +55,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();
} }
@@ -57,14 +63,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();
} }
@@ -79,12 +86,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(),
@@ -124,8 +125,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 #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction