yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 重新生成单表和树表代码生成示例

pull/75/head
puhui999 2025-04-16 15:24:39 +08:00
parent 51d6e087cf
commit 0e3d3af66a
6 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web-antd/src/views/infra/demo/demo01/data.ts
View File

@ -1,6 +1,7 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
@ -105,9 +106,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = Demo01ContactApi.Demo01Contact>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(
onActionClick?: OnActionClickFn<Demo01ContactApi.Demo01Contact>,
): VxeTableGridOptions<Demo01ContactApi.Demo01Contact>['columns'] {
return [
{
field: 'id',
@ -153,9 +154,11 @@ export function useGridColumns<T = Demo01ContactApi.Demo01Contact>(
{
field: 'operation',
title: '操作',
minWidth: 180,
minWidth: 200,
align: 'center',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: 'id',

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

@ -11,6 +11,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDemo01Contact, exportDemo01Contact, getDemo01ContactPage } from '#/api/infra/demo/demo01';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { h } from 'vue';
import { useGridColumns, useGridFormSchema } from './data';
@ -62,14 +63,14 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<Demo01ContactApi.Demo01Contact>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -80,7 +81,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(onActionClick),
height: 'auto',
keepSource: true,
pagerConfig: {
enabled: true,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
@ -94,6 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: { code: 'query' },
@ -106,14 +110,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<Grid table-title="示例联系人列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['infra:demo01-contact:create']">
<Plus class="size-5" />
<Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo01-contact:create']">
{{ $t('ui.actionTitle.create', ['示例联系人']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:demo01-contact:export']">
<Download class="size-5" />
<Button
:icon="h(Download)"
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['infra:demo01-contact:export']"
>
{{ $t('ui.actionTitle.export') }}
</Button>
</template>

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

@ -20,7 +20,7 @@ const getTitle = computed(() => {
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
@ -49,19 +49,25 @@ const [Modal, modalApi] = useVbenModal({
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
if (!data || !data.id) {
let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
if (!data) {
return;
}
modalApi.lock();
try {
formData.value = await getDemo01Contact(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.lock(false);
if (data.id) {
// 编辑
modalApi.lock();
try {
data = await getDemo01Contact(data.id);
} finally {
modalApi.lock(false);
}
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
},
});
</script>

7
apps/web-antd/src/views/infra/demo/demo02/data.ts
View File

@ -4,6 +4,7 @@ import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import { getDemo02CategoryList } from '#/api/infra/demo/demo02';
import { getRangePickerDefaultProps } from '#/utils/date';
import { handleTree } from '#/utils/tree';
import { useAccess } from '@vben/access';
@ -82,8 +83,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
// TODO @puhui999：缺了你写的哪个时间选择哈
},
},
];
@ -120,7 +121,7 @@ export function useGridColumns(
field: 'operation',
title: '操作',
minWidth: 200,
align: 'right',
align: 'center',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
@ -133,7 +134,7 @@ export function useGridColumns(
name: 'CellOperation',
options: [
{
code: 'add_child', // TODO @puhui999：append 使用这个单词哈，和之前 vben 官方示例一致
code: 'append',
text: '新增下级',
show: hasAccessByCodes(['infra:demo02-category:create']),
},

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

@ -2,7 +2,6 @@
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
import { DocAlert } from '#/components/doc-alert';
import Form from './modules/form.vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
@ -12,7 +11,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDemo02Category, exportDemo02Category, getDemo02CategoryList } from '#/api/infra/demo/demo02';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { ref } from 'vue';
import { h, ref } from 'vue';
import { useGridColumns, useGridFormSchema } from './data';
@ -50,7 +49,7 @@ function onEdit(row: Demo02CategoryApi.Demo02Category) {
}
/** 新增下级示例分类 */
function onAddChild(row: Demo02CategoryApi.Demo02Category) {
function onAppend(row: Demo02CategoryApi.Demo02Category) {
formModalApi.setData({ parentId: row.id }).open();
}
@ -76,8 +75,8 @@ async function onDelete(row: Demo02CategoryApi.Demo02Category) {
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<Demo02CategoryApi.Demo02Category>) {
switch (code) {
case 'add_child': {
onAddChild(row);
case 'append': {
onAppend(row);
break;
}
case 'delete': {
@ -129,8 +128,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<DocAlert title="示例分类" url="https://doc.iocoder.cn/infra/" />
<FormModal @success="onRefresh" />
<Grid table-title="示例分类列表">
@ -138,12 +135,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Button @click="toggleExpand" class="mr-2">
{{ isExpanded ? '收缩' : '展开' }}
</Button>
<Button type="primary" @click="onCreate" v-access:code="['infra:demo02-category:create']">
<Plus class="size-5" />
<Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo02-category:create']">
{{ $t('ui.actionTitle.create', ['示例分类']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:demo02-category:export']">
<Download class="size-5" />
<Button
:icon="h(Download)"
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['infra:demo02-category:export']"
>
{{ $t('ui.actionTitle.export') }}
</Button>
</template>

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

@ -25,7 +25,7 @@ const getTitle = computed(() => {
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
@ -54,36 +54,25 @@ const [Modal, modalApi] = useVbenModal({
if (!isOpen) {
return;
}
// 加载数据
let data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
if (!data) {
return;
}
// 处理新增下级的情况
// TODO @puhui999：按照 dept 或者 menu 的 form 处理风格，可以更简洁一点；可能 parentId 也不用啦
if (!data.id && data.parentId) {
parentId.value = data.parentId;
formData.value = { parentId: parentId.value } as Demo02CategoryApi.Demo02Category;
await formApi.setValues(formData.value);
return;
}
if (data.id) {
// 编辑
modalApi.lock();
try {
data = await getDemo02Category(data.id);
formData.value = data;
await formApi.setValues(formData.value);
} finally {
modalApi.lock(false);
}
} else {
// 新增
formData.value = { parentId: 0 } as Demo02CategoryApi.Demo02Category;
await formApi.setValues(formData.value || {});
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
},
});
</script>