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 的代码风格（demo01、demo02）

Browse Source
This commit is contained in:
YunaiV
2025-10-01 09:49:04 +08:00
parent cdc0cbc431
commit 67b39cfe8a
9 changed files with 93 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/web-antd/src/views/infra/demo/demo01/index.vue
View File

@@ -4,7 +4,7 @@ import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
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 { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
@@ -27,10 +27,16 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
/** 导出表格 */
async function handleExport() {
const data = await exportDemo01Contact(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
}
/** 创建示例联系人 */ /** 创建示例联系人 */
function handleCreate() { function handleCreate() {
formModalApi.setData({}).open(); formModalApi.setData({}).open();
@@ -46,12 +52,11 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
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 deleteDemo01Contact(row.id!); await deleteDemo01Contact(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.id])); message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
@@ -59,16 +64,16 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
/** 批量删除示例联系人 */ /** 批量删除示例联系人 */
async function handleDeleteBatch() { 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 deleteDemo01ContactList(checkedIds.value); await deleteDemo01ContactList(checkedIds.value);
checkedIds.value = []; checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess')); message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
@@ -83,12 +88,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!); checkedIds.value = records.map((item) => item.id!);
} }
/** 导出表格 */
async function handleExport() {
const data = await exportDemo01Contact(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
}
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
@@ -128,8 +127,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
@@ -149,11 +147,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
onClick: handleExport, onClick: handleExport,
}, },
{ {
label: '批量删除', label: $t('ui.actionTitle.deleteBatch'),
type: 'primary', type: 'primary',
danger: true, danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
auth: ['infra:demo01-contact:delete'], auth: ['infra:demo01-contact:delete'],
onClick: handleDeleteBatch, onClick: handleDeleteBatch,
}, },

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

@@ -54,10 +54,7 @@ const [Modal, modalApi] = useVbenModal({
// 关闭并提示 // 关闭并提示
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
message.success({ message.success($t('ui.actionMessage.operationSuccess'));
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
@@ -67,7 +64,6 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined; formData.value = undefined;
return; return;
} }
// 加载数据 // 加载数据
let data = modalApi.getData<Demo01ContactApi.Demo01Contact>(); let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
if (!data) { if (!data) {

31
apps/web-antd/src/views/infra/demo/demo02/index.vue
View File

@@ -25,15 +25,8 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
/** 切换树形展开/收缩状态 */
const isExpanded = ref(true);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
@@ -61,20 +54,25 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
/** 删除示例分类 */ /** 删除示例分类 */
async function handleDelete(row: Demo02CategoryApi.Demo02Category) { async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]), content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0, duration: 0,
}); });
try { try {
await deleteDemo02Category(row.id!); await deleteDemo02Category(row.id!);
message.success({ message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
content: $t('ui.actionMessage.deleteSuccess', [row.name]), handleRefresh();
});
onRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
} }
/** 切换树形展开/收缩状态 */
const isExpanded = ref(true);
function handleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
@@ -113,14 +111,13 @@ 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
:actions="[ :actions="[
{ {
label: $t('ui.actionTitle.create', ['菜单']), label: $t('ui.actionTitle.create', ['示例分类']),
type: 'primary', type: 'primary',
icon: ACTION_ICON.ADD, icon: ACTION_ICON.ADD,
auth: ['infra:demo02-category:create'], auth: ['infra:demo02-category:create'],
@@ -129,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
{ {
label: isExpanded ? '收缩' : '展开', label: isExpanded ? '收缩' : '展开',
type: 'primary', type: 'primary',
onClick: toggleExpand, onClick: handleExpand,
}, },
{ {
label: $t('ui.actionTitle.export'), label: $t('ui.actionTitle.export'),

31
apps/web-antd/src/views/infra/demo/demo02/modules/form.vue
View File

@@ -19,14 +19,9 @@ import { useFormSchema } from '../data';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formData = ref<Demo02CategoryApi.Demo02Category>(); const formData = ref<Demo02CategoryApi.Demo02Category>();
const parentId = ref<number>(); // 新增下级时的父级 ID
const getTitle = computed(() => { const getTitle = computed(() => {
if (formData.value?.id) { return formData.value?.id
return $t('ui.actionTitle.edit', ['示例分类']); ? $t('ui.actionTitle.edit', ['示例分类'])
}
return parentId.value
? $t('ui.actionTitle.create', ['下级示例分类'])
: $t('ui.actionTitle.create', ['示例分类']); : $t('ui.actionTitle.create', ['示例分类']);
}); });
@@ -36,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full', class: 'w-full',
}, },
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 80, labelWidth: 100,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema(), schema: useFormSchema(),
@@ -70,25 +65,23 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined; formData.value = undefined;
return; return;
} }
// 加载数据 // 加载数据
let data = modalApi.getData<Demo02CategoryApi.Demo02Category>(); const data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
if (!data) { if (!data || !data.id) {
// 设置上级
await formApi.setValues(data);
return; return;
} }
if (data.id) {
// 编辑
modalApi.lock(); modalApi.lock();
try { try {
data = await getDemo02Category(data.id); formData.value = await getDemo02Category(data.id);
// 设置到 values
if (formData.value) {
await formApi.setValues(formData.value);
}
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
}, },
}); });
</script> </script>

2
apps/web-antd/src/views/infra/fileConfig/index.vue
View File

@@ -50,7 +50,7 @@ async function handleMaster(row: InfraFileConfigApi.FileConfig) {
}); });
try { try {
await updateFileConfigMaster(row.id!); await updateFileConfigMaster(row.id!);
message.success($t('ui.actionMessage.updateSuccess', [row.name])); message.success($t('ui.actionMessage.updateSuccess'));
handleRefresh(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();

2
apps/web-ele/src/views/infra/demo/demo01/data.ts
View File

@@ -144,7 +144,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo01ContactApi.Demo01Con
}, },
{ {
title: '操作', title: '操作',
width: 200, width: 160,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, slots: { default: 'actions' },
}, },

30
apps/web-ele/src/views/infra/demo/demo01/index.vue
View File

@@ -4,7 +4,7 @@ import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
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 exportDemo01Contact(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
}
/** 创建示例联系人 */ /** 创建示例联系人 */
function handleCreate() { function handleCreate() {
formModalApi.setData({}).open(); formModalApi.setData({}).open();
@@ -45,12 +51,11 @@ function handleEdit(row: Demo01ContactApi.Demo01Contact) {
async function handleDelete(row: Demo01ContactApi.Demo01Contact) { async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.id]), text: $t('ui.actionMessage.deleting', [row.id]),
background: 'rgba(0, 0, 0, 0.7)',
}); });
try { try {
await deleteDemo01Contact(row.id!); await deleteDemo01Contact(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();
} }
@@ -58,15 +63,15 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
/** 批量删除示例联系人 */ /** 批量删除示例联系人 */
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'),
background: 'rgba(0, 0, 0, 0.7)',
}); });
try { try {
await deleteDemo01ContactList(checkedIds.value); await deleteDemo01ContactList(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();
} }
@@ -81,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 exportDemo01Contact(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
}
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
@@ -126,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
@@ -175,7 +173,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['infra:demo01-contact:delete'], auth: ['infra:demo01-contact:delete'],
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]), title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row), confirm: handleDelete.bind(null, row),
}, },
}, },

41
apps/web-ele/src/views/infra/demo/demo02/index.vue
View File

@@ -25,21 +25,20 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
/** 切换树形展开/收缩状态 */ /** 刷新表格 */
const isExpanded = ref(true); function handleRefresh() {
function toggleExpand() { gridApi.query();
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
} }
/** 刷新表格 */ /** 导出表格 */
function onRefresh() { async function handleExport() {
gridApi.query(); const data = await exportDemo02Category(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
} }
/** 创建示例分类 */ /** 创建示例分类 */
function handleCreate() { function handleCreate() {
formModalApi.setData({}).open(); formModalApi.setData(null).open();
} }
/** 编辑示例分类 */ /** 编辑示例分类 */
@@ -55,22 +54,22 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
/** 删除示例分类 */ /** 删除示例分类 */
async function handleDelete(row: Demo02CategoryApi.Demo02Category) { async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.id]), text: $t('ui.actionMessage.deleting', [row.name]),
background: 'rgba(0, 0, 0, 0.7)',
}); });
try { try {
await deleteDemo02Category(row.id!); await deleteDemo02Category(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id])); ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh(); handleRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
} }
/** 导出表格 */ /** 切换树形展开/收缩状态 */
async function handleExport() { const isExpanded = ref(true);
const data = await exportDemo02Category(await gridApi.formApi.getValues()); function handleExpand() {
downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data }); isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
} }
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
@@ -106,14 +105,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
search: true, search: true,
}, },
} as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>, } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,
gridEvents: {},
}); });
</script> </script>
<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
@@ -128,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
{ {
label: isExpanded ? '收缩' : '展开', label: isExpanded ? '收缩' : '展开',
type: 'primary', type: 'primary',
onClick: toggleExpand, onClick: handleExpand,
}, },
{ {
label: $t('ui.actionTitle.export'), label: $t('ui.actionTitle.export'),
@@ -166,7 +163,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['infra:demo02-category:delete'], auth: ['infra:demo02-category:delete'],
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]), title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row), confirm: handleDelete.bind(null, row),
}, },
}, },

19
apps/web-ele/src/views/infra/demo/demo02/modules/form.vue
View File

@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full', class: 'w-full',
}, },
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 80, labelWidth: 100,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema(), schema: useFormSchema(),
@@ -66,21 +66,22 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
// 加载数据 // 加载数据
let data = modalApi.getData<Demo02CategoryApi.Demo02Category>(); const data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
if (!data) { if (!data || !data.id) {
// 设置上级
await formApi.setValues(data);
return; return;
} }
if (data.id) {
modalApi.lock(); modalApi.lock();
try { try {
data = await getDemo02Category(data.id); formData.value = await getDemo02Category(data.id);
// 设置到 values
if (formData.value) {
await formApi.setValues(formData.value);
}
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
}, },
}); });
</script> </script>