szz
/
ShiShiYiBan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: vben5 代码生成 使用 table action

This commit is contained in:
xingyu4j 2025-05-21 14:37:57 +08:00
parent 39e7d782a7
commit 78e69421db
3 changed files with 187 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/data.ts.vm
View File

@ -218,43 +218,10 @@ export function useGridColumns(): VxeTableGridOptions<${simpleClassName}Api.${si
#end
#end
{
field: 'operation',
title: '操作',
minWidth: 200,
align: 'center',
width: 200,
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: '${columns[0].javaField}',
nameTitle: '${table.classComment}',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
#if (${table.templateType} == 2)## 树表特有操作
{
code: 'append',
text: '新增下级',
show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:create']),
},
#end
{
code: 'edit',
show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']),
#if (${table.templateType} == 2)## 树表禁止删除带有子节点的数据
disabled: (row: ${simpleClassName}Api.${simpleClassName}) => {
return !!(row.children && row.children.length > 0);
},
#end
},
],
},
slots: { default: 'actions' },
},
];
}
@ -422,9 +389,7 @@ export function use${subSimpleClassName}GridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function use${subSimpleClassName}GridColumns(
onActionClick?: OnActionClickFn<${simpleClassName}Api.${subSimpleClassName}>,
): VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>['columns'] {
export function use${subSimpleClassName}GridColumns(): VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>['columns'] {
return [
#if ($table.templateType != 2 && $deleteBatchEnable)
{ type: 'checkbox', width: 40 },
@ -450,31 +415,10 @@ export function use${subSimpleClassName}GridColumns(
#end
#end
{
field: 'operation',
title: '操作',
minWidth: 200,
align: 'center',
width: 200,
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: '${columns[0].javaField}',
nameTitle: '${subTable.classComment}',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']),
},
],
},
slots: { default: 'actions' },
},
];
}
@ -520,27 +464,10 @@ export function use${subSimpleClassName}GridColumns(
#end
#end
{
field: 'operation',
title: '操作',
minWidth: 60,
align: 'center',
width: 200,
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
cellRender: {
attrs: {
nameField: '${columns[0].javaField}',
nameTitle: '${table.classComment}',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'delete',
show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']),
},
],
},
slots: { default: 'actions' },
},
];
}
@ -675,7 +602,6 @@ export function use${subSimpleClassName}GridColumns(
#end
];
}
#end
#end
#end

67
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/index.vue.vm
View File

@ -11,7 +11,7 @@ import Form from './modules/form.vue';
#foreach ($subSimpleClassName in $subSimpleClassNames)
#set ($index = $foreach.count - 1)
#set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($index))
import ${subSimpleClassName}List from './modules/${subSimpleClassName_strikeCase}-list.vue'
import ${subSimpleClassName}List from './modules/${subSimpleClassName_strikeCase}-list.vue'
#end
#end
@ -227,38 +227,39 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template #toolbar-tools>
<TableAction
:actions="[
#if (${table.templateType} == 2)## 树表特有：展开/收缩按钮
{
label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
},
#end
{
label: $t('ui.actionTitle.create', ['${table.classComment}']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:export'],
onClick: handleExport,
},
#if ($table.templateType != 2 && $deleteBatchEnable)
{
label: $t('ui.actionTitle.deleteBatch'),
type: 'primary',
icon: ACTION_ICON.DELETE,
disabled: isEmpty(deleteIds),
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
onClick: handleDeleteBatch,
},
#end
]"
#if (${table.templateType} == 2)## 树表特有：展开/收缩按钮
{
label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
},
#end
{
label: $t('ui.actionTitle.create', ['${table.classComment}']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:export'],
onClick: handleExport,
},
#if ($table.templateType != 2 && $deleteBatchEnable)
{
label: $t('ui.actionTitle.deleteBatch'),
type: 'primary',
danger: true,
icon: ACTION_ICON.DELETE,
disabled: isEmpty(deleteIds),
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
onClick: handleDeleteBatch,
},
#end
]"
/>
</template>
<template #actions="{ row }">

277
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/list_sub_erp.vue.vm
View File

@ -6,45 +6,43 @@
#set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
#if ($table.templateType == 11) ## erp
import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
#end
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus, Trash2 } from '@vben/icons';
import { ref, computed, h, nextTick,watch } from 'vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { ref, computed, nextTick,watch } from 'vue';
import { $t } from '#/locales';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
#if ($table.templateType == 11) ## erp
import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}ListByIds,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${table.businessName}';
import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';
import { isEmpty } from '@vben/utils';
#else
#if ($subTable.subJoinMany) ## 一对多
import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
#else
import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
#end
import { use${subSimpleClassName}GridColumns } from '../data';
import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}ListByIds,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${table.businessName}';
import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';
import { isEmpty } from '@vben/utils';
#else
#if ($subTable.subJoinMany) ## 一对多
import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
#else
import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
#end
import { use${subSimpleClassName}GridColumns } from '../data';
#end
const props = defineProps<{
${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}（主表的关联字段）
${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}（主表的关联字段）
}>()
#if ($table.templateType == 11) ## erp
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ${subSimpleClassName}Form,
destroyOnClose: true,
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ${subSimpleClassName}Form,
destroyOnClose: true,
});
/** 创建${subTable.classComment} */
function onCreate() {
function handleCreate() {
if (!props.${subJoinColumn.javaField}){
message.warning("请先选择一个${table.classComment}!")
return
@ -53,20 +51,22 @@ function onCreate() {
}
/** 编辑${subTable.classComment} */
function onEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
function handleEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
formModalApi.setData(row).open();
}
/** 删除${subTable.classComment} */
async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]),
duration: 0,
key: 'action_process_msg',
});
try {
await delete${subSimpleClassName}(row.id as number);
message.success( $t('ui.actionMessage.deleteSuccess', [row.id]) );
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
@ -75,15 +75,17 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
#if ($deleteBatchEnable)
/** 批量删除${subTable.classComment} */
async function onDeleteBatch() {
async function handleDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await delete${subSimpleClassName}ListByIds(deleteIds.value);
message.success( $t('ui.actionMessage.deleteSuccess') );
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
@ -100,103 +102,86 @@ function setDeleteIds({
}
#end
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
#end
const [Grid, gridApi] = useVbenVxeGrid({
const [Grid, gridApi] = useVbenVxeGrid({
#if ($table.templateType == 11)
formOptions: {
schema: use${subSimpleClassName}GridFormSchema(),
},
formOptions: {
schema: use${subSimpleClassName}GridFormSchema(),
},
#end
gridOptions: {
gridOptions: {
#if ($table.templateType == 11)
columns: use${subSimpleClassName}GridColumns(onActionClick),
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (!props.${subJoinColumn.javaField}){
return []
}
return await get${subSimpleClassName}Page({
pageNo: page.currentPage,
pageSize: page.pageSize,
${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
...formValues,
});
},
columns: use${subSimpleClassName}GridColumns(),
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (!props.${subJoinColumn.javaField}){
return []
}
return await get${subSimpleClassName}Page({
pageNo: page.currentPage,
pageSize: page.pageSize,
${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
...formValues,
});
},
},
pagerConfig: {
enabled: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
pagerConfig: {
enabled: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
#else
columns: use${subSimpleClassName}GridColumns(),
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
columns: use${subSimpleClassName}GridColumns(),
pagerConfig: {
nabled: false,
},
toolbarConfig: {
enabled: false,
},
#end
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
#if (${table.templateType} == 11 && $deleteBatchEnable)
gridEvents:{
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
}
#end
});
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
#if (${table.templateType} == 11 && $deleteBatchEnable)
gridEvents:{
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
}
#end
});
/** 刷新表格 */
const onRefresh = async ()=> {
async function onRefresh() {
#if ($table.templateType == 11) ## erp
await gridApi.query();
await gridApi.query();
#else
#if ($subTable.subJoinMany) ## 一对多
await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
#else
await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
#end
#if ($subTable.subJoinMany) ## 一对多
await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
#else
await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
#end
#end
}
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.${subJoinColumn.javaField},
async (val) => {
if (!val) {
return;
}
await nextTick();
await onRefresh()
},
{ immediate: true },
);
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.${subJoinColumn.javaField},
async (val) => {
if (!val) {
return;
}
await nextTick();
await onRefresh()
},
{ immediate: true },
);
</script>
<template>
@ -204,22 +189,52 @@ const onRefresh = async ()=> {
<FormModal @success="onRefresh" />
<Grid table-title="${subTable.classComment}列表">
<template #toolbar-tools>
<Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:create']">
{{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
</Button>
#if ($table.templateType == 11 && $deleteBatchEnable)
<Button
:icon="h(Trash2)"
type="primary"
danger
class="ml-2"
:disabled="isEmpty(deleteIds)"
@click="onDeleteBatch"
v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']"
>
批量删除
</Button>
#end
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['${table.classComment}']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
onClick: handleCreate,
},
#if ($table.templateType == 11 && $deleteBatchEnable)
{
label: $t('ui.actionTitle.deleteBatch'),
type: 'primary',
danger: true,
icon: ACTION_ICON.DELETE,
disabled: isEmpty(deleteIds),
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
onClick: handleDeleteBatch,
},
#end
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
#else