【功能完善】INFRA:代码生成 vben5 antd 主子表 inner 模版

This commit is contained in:
puhui999 2025-05-03 17:31:09 +08:00
parent 57138d7995
commit 515cbbb285
3 changed files with 303 additions and 100 deletions

View File

@ -1,2 +1,2 @@
## 主表的 normal 和 inner 使用相同的 form 表单
#parse("codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm")
#parse("codegen/vue3_vben5_antd/general/views/modules/form_sub_normal.vue.vm")

View File

@ -6,30 +6,33 @@
#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}/${simpleClassName_strikeCase}';
import type { VxeTableInstance } from 'vxe-table';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { VxeColumn, VxeTable } from 'vxe-table';
import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
import { cloneDeep, formatDateTime } from '@vben/utils';
#if ($table.templateType == 11) ## erp
import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
import { useVbenModal } from '@vben/common-ui';
import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
import { Button, message } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import { $t } from '#/locales';
import { TableToolbar } from '#/components/table-toolbar';
import { getRangePickerDefaultProps } from '#/utils/date';
#end
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import { #if($table.templateType != 11)ref,#end h, nextTick,watch } from 'vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
#if ($table.templateType == 11) ## erp
import { delete${subSimpleClassName}, get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';
#else
#if ($subTable.subJoinMany) ## 一对多
import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#else
import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#end
import { use${subSimpleClassName}GridColumns } from '../data';
#end
const props = defineProps<{
@ -69,90 +72,82 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_process_msg',
});
onRefresh();
getList();
} catch {
hideLoading();
}
}
#end
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
const loading = ref(true) // 列表的加载中
const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
#if ($table.templateType == 11) ## erp
const total = ref(0) // 列表的总页数
#end
#if ($table.templateType == 11) ## erp
const queryFormRef = ref() // 搜索的表单
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
#foreach ($column in $subColumns)
#if ($column.listOperation)
#if ($column.listOperationCondition != 'BETWEEN')
$column.javaField: undefined,
#end
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
$column.javaField: undefined,
#end
#end
#end
${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
})
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
#end
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
if (!props.${subJoinColumn.javaField}){
return []
}
## 特殊:树表专属逻辑(树不需要分页接口)
#if ($table.templateType == 11) ## erp
const params = cloneDeep(queryParams) as any;
#foreach ($column in $columns)
#if ($column.listOperation)
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
}
#end
#end
#end
const data = await get${subSimpleClassName}Page(params)
list.value = data.list
total.value = data.total
#else
#if ($subTable.subJoinMany) ## 一对多
list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
#else
list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
#end
#end
} finally {
loading.value = false
}
}
}
#end
const [Grid, gridApi] = useVbenVxeGrid({
#if ($table.templateType == 11)
formOptions: {
schema: use${subSimpleClassName}GridFormSchema(),
},
#end
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,
});
},
},
},
pagerConfig: {
enabled: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
#else
columns: use${subSimpleClassName}GridColumns(),
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
#end
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
});
/** 刷新表格 */
const onRefresh = async ()=> {
#if ($table.templateType == 11) ## erp
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
#end
}
/** 监听主表的关联字段的变化,加载对应的子表数据 */
watch(
@ -162,23 +157,231 @@ const onRefresh = async ()=> {
return;
}
await nextTick();
await onRefresh()
await getList()
},
{ immediate: true },
);
#if ($table.templateType == 11) ## erp
/** 隐藏搜索栏 */
const hiddenSearchBar = ref(false);
const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
const tableRef = ref<VxeTableInstance>();
/** 初始化 */
onMounted(async () => {
await getList();
await nextTick();
// 挂载 toolbar 工具栏
const table = tableRef.value;
const tableToolbar = tableToolbarRef.value;
if (table && tableToolbar) {
await table.connect(tableToolbar.getToolbarRef()!);
}
});
#end
</script>
<template>
#if ($table.templateType == 11) ## erp
<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>
</template>
</Grid>
<FormModal @success="getList" />
<div class="h-[600px]">
<ContentWrap v-if="!hiddenSearchBar">
<!-- 搜索工作栏 -->
<Form
:model="queryParams"
ref="queryFormRef"
layout="inline"
>
#foreach($column in $subColumns)
#if ($column.listOperation)
#set ($dictType = $column.dictType)
#set ($javaField = $column.javaField)
#set ($javaType = $column.javaType)
#set ($comment = $column.columnComment)
#if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
#set ($dictMethod = "number")
#elseif ($javaType == "String")
#set ($dictMethod = "string")
#elseif ($javaType == "Boolean")
#set ($dictMethod = "boolean")
#end
#if ($column.htmlType == "input")
<Form.Item label="${comment}" name="${javaField}">
<Input
v-model:value="queryParams.${javaField}"
placeholder="请输入${comment}"
allowClear
@pressEnter="handleQuery"
class="w-full"
/>
</Form.Item>
#elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
<Form.Item label="${comment}" name="${javaField}">
<Select
v-model:value="queryParams.${javaField}"
placeholder="请选择${comment}"
allowClear
class="w-full"
>
#if ("" != $dictType)## 设置了 dictType 数据字典的情况
<Select.Option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</Select.Option>
#else## 未设置 dictType 数据字典的情况
<Select.Option label="请选择字典生成" value="" />
#end
</Select>
</Form.Item>
#elseif($column.htmlType == "datetime")
#if ($column.listOperationCondition != "BETWEEN")## 非范围
<Form.Item label="${comment}" name="${javaField}">
<DatePicker
v-model:value="queryParams.${javaField}"
valueFormat="YYYY-MM-DD"
placeholder="选择${comment}"
allowClear
class="w-full"
/>
</Form.Item>
#else## 范围
<Form.Item label="${comment}" name="${javaField}">
<RangePicker
v-model:value="queryParams.${javaField}"
v-bind="getRangePickerDefaultProps()"
class="w-full"
/>
</Form.Item>
#end
#end
#end
#end
<Form.Item>
<Button class="ml-2" @click="resetQuery"> 重置 </Button>
<Button class="ml-2" @click="handleQuery" type="primary">
搜索
</Button>
</Form.Item>
</Form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap title="${table.classComment}">
<template #extra>
<TableToolbar
ref="tableToolbarRef"
v-model:hidden-search="hiddenSearchBar"
>
<Button
class="ml-2"
:icon="h(Plus)"
type="primary"
@click="onCreate"
v-access:code="['${permissionPrefix}:create']"
>
{{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
</Button>
</TableToolbar>
</template>
<vxe-table
ref="tableRef"
:data="list"
show-overflow
:loading="loading"
>
#foreach($column in $subColumns)
#if ($column.listOperationResult)
#set ($dictType=$column.dictType)
#set ($javaField = $column.javaField)
#set ($comment=$column.columnComment)
#if ($column.javaType == "LocalDateTime")## 时间类型
<vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}">
{{formatDateTime(row.${javaField})}}
</template>
</vxe-column>
#elseif($column.dictType && "" != $column.dictType)## 数据字典
<vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}">
<dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
</template>
</vxe-column>
#elseif ($table.templateType == 2 && $javaField == $treeNameColumn.javaField)
<vxe-column field="${javaField}" title="${comment}" align="center" tree-node/>
#else
<vxe-column field="${javaField}" title="${comment}" align="center" />
#end
#end
#end
<vxe-column field="operation" title="操作" align="center">
<template #default="{row}">
<Button
size="small"
type="link"
@click="onEdit(row as any)"
v-access:code="['${permissionPrefix}:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button
size="small"
type="link"
danger
class="ml-2"
@click="onDelete(row as any)"
v-access:code="['${permissionPrefix}:delete']"
>
{{ $t('ui.actionTitle.delete') }}
</Button>
</template>
</vxe-column>
</vxe-table>
<!-- 分页 -->
<div class="mt-2 flex justify-end">
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
show-size-changer
@change="getList"
/>
</div>
</ContentWrap>
</div>
#else
<Grid table-title="${subTable.classComment}列表" />
<ContentWrap title="${subTable.classComment}列表">
<vxe-table
:data="list"
show-overflow
:loading="loading"
>
#foreach($column in $subColumns)
#if ($column.listOperationResult)
#set ($dictType=$column.dictType)
#set ($javaField = $column.javaField)
#set ($comment=$column.columnComment)
#if ($column.javaType == "LocalDateTime")## 时间类型
<vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}">
{{formatDateTime(row.${javaField})}}
</template>
</vxe-column>
#elseif($column.dictType && "" != $column.dictType)## 数据字典
<vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}">
<dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
</template>
</vxe-column>
#else
<vxe-column field="${javaField}" title="${comment}" align="center" />
#end
#end
#end
</vxe-table>
</ContentWrap>
#end
</template>

View File

@ -1,4 +1,4 @@
## 子表的 erp 和 inner 使用相似的 list 列表,差异主要两点:
## 1inner 使用 list 不分页erp 使用 page 分页
## 2erp 支持单个子表的新增、修改、删除inner 不支持
#parse("codegen/vue3_vben5_antd/schema/views/modules/list_sub_erp.vue.vm")
#parse("codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm")