perf: vben5 代码生成 使用 table action
This commit is contained in:
parent
39e7d782a7
commit
78e69421db
|
@ -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
|
||||||
|
|
|
@ -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'],
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue