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

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

View File

@ -252,6 +252,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
{ {
label: $t('ui.actionTitle.deleteBatch'), label: $t('ui.actionTitle.deleteBatch'),
type: 'primary', type: 'primary',
danger: true,
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
disabled: isEmpty(deleteIds), disabled: isEmpty(deleteIds),
auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'], auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],

View File

@ -6,19 +6,17 @@
#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 { useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, 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}';
@ -44,7 +42,7 @@ const props = defineProps<{
}); });
/** 创建${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,23 +102,6 @@ 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)
@ -126,7 +111,7 @@ function onActionClick({
#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) => {
@ -152,7 +137,7 @@ function onActionClick({
#else #else
columns: use${subSimpleClassName}GridColumns(), columns: use${subSimpleClassName}GridColumns(),
pagerConfig: { pagerConfig: {
enabled: false, nabled: false,
}, },
toolbarConfig: { toolbarConfig: {
enabled: false, enabled: false,
@ -173,7 +158,7 @@ function onActionClick({
}); });
/** 刷新表格 */ /** 刷新表格 */
const onRefresh = async ()=> { async function onRefresh() {
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
await gridApi.query(); await gridApi.query();
#else #else
@ -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> {
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) #if ($table.templateType == 11 && $deleteBatchEnable)
<Button {
:icon="h(Trash2)" label: $t('ui.actionTitle.deleteBatch'),
type="primary" type: 'primary',
danger danger: true,
class="ml-2" icon: ACTION_ICON.DELETE,
:disabled="isEmpty(deleteIds)" disabled: isEmpty(deleteIds),
@click="onDeleteBatch" auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']" onClick: handleDeleteBatch,
> },
批量删除
</Button>
#end #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