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