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

This commit is contained in:
puhui999 2025-05-03 15:06:09 +08:00
parent 28c818e9bc
commit b0f4a252c7
2 changed files with 76 additions and 13 deletions

View File

@ -5,11 +5,11 @@ import type { Rule } from 'ant-design-vue/es/form';
import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from "#/components/upload";
import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
#if($table.templateType == 2)## 树表需要导入这些
import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { handleTree } from '#/utils/tree';
import { handleTree } from '@vben/utils'
#end
## 特殊:主子表专属逻辑
#if ( $table.templateType == 10 || $table.templateType == 12 )
@ -90,10 +90,12 @@ const resetForm = () => {
/** 获得${table.classComment}树 */
const get${simpleClassName}Tree = async () => {
${classNameVar}Tree.value = []
const data = await get${simpleClassName}List()
const root: Tree = { id: 0, name: '顶级${table.classComment}', children: [] }
root.children = handleTree(data, 'id', '${treeParentColumn.javaField}')
${classNameVar}Tree.value.push(root)
const data = await get${simpleClassName}List({});
data.unshift({
id: 0,
name: '顶级${table.classComment}',
});
${classNameVar}Tree.value = handleTree(data);
}
#end
@ -205,9 +207,17 @@ const [Modal, modalApi] = useVbenModal({
v-model:value="formData.${javaField}"
:treeData="${classNameVar}Tree"
#if ($treeNameColumn.javaField == "name")
:fieldNames="defaultProps"
:fieldNames="{
label: 'name',
value: 'id',
children: 'children',
}"
#else
:fieldNames="{...defaultProps, label: '$treeNameColumn.javaField'}"
:fieldNames="{
label: '$treeNameColumn.javaField',
value: 'id',
children: 'children',
}"
#end
checkable
treeDefaultExpandAll

View File

@ -26,7 +26,7 @@ import { getRangePickerDefaultProps } from '#/utils/date';
import { ref, h, reactive,onMounted,nextTick } from 'vue';
import { $t } from '#/locales';
#if (${table.templateType} == 2)## 树表接口
import { handleTree } from '@/utils/tree'
import { handleTree,isEmpty } from '@vben/utils'
import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#else## 标准表接口
import { get${simpleClassName}Page, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
@ -42,7 +42,12 @@ const select${simpleClassName} = ref<${simpleClassName}Api.${simpleClassName}>()
#end
const loading = ref(true) // 列表的加载中
#if ( $table.templateType == 2 )
const list = ref<any[]>([]) // 树列表的数据
#else
const list = ref<${simpleClassName}Api.${simpleClassName}[]>([]) // 列表的数据
#end
## 特殊:树表专属逻辑(树不需要分页接口)
#if ( $table.templateType != 2 )
const total = ref(0) // 列表的总页数
@ -83,8 +88,7 @@ const getList = async () => {
#end
## 特殊:树表专属逻辑(树不需要分页接口)
#if ( $table.templateType == 2 )
const data = await get${simpleClassName}List(params)
list.value = handleTree(data, 'id', '${treeParentColumn.javaField}')
list.value = await get${simpleClassName}List(params);
#else
const data = await get${simpleClassName}Page(params)
list.value = data.list
@ -97,7 +101,9 @@ const getList = async () => {
/** 搜索按钮操作 */
const handleQuery = () => {
#if ( $table.templateType != 2 )
queryParams.pageNo = 1
#end
getList()
}
@ -163,6 +169,16 @@ try {
const hiddenSearchBar = ref(false);
const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
const tableRef = ref<VxeTableInstance>();
#if (${table.templateType} == 2)
/** 切换树形展开/收缩状态 */
const isExpanded = ref(true);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
tableRef.value?.setAllTreeExpand(isExpanded.value);
}
#end
/** 初始化 */
onMounted(async () => {
await getList();
@ -270,6 +286,11 @@ onMounted(async () => {
ref="tableToolbarRef"
v-model:hidden-search="hiddenSearchBar"
>
#if (${table.templateType} == 2)
<Button @click="toggleExpand" class="mr-2">
{{ isExpanded ? '收缩' : '展开' }}
</Button>
#end
<Button
class="ml-2"
:icon="h(Plus)"
@ -277,7 +298,7 @@ onMounted(async () => {
@click="onCreate"
v-access:code="['${permissionPrefix}:create']"
>
{{ $t('ui.actionTitle.create', ['示例联系人']) }}
{{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
</Button>
<Button
:icon="h(Download)"
@ -291,7 +312,21 @@ onMounted(async () => {
</Button>
</TableToolbar>
</template>
<vxe-table ref="tableRef" :data="list" show-overflow :loading="loading">
<vxe-table
ref="tableRef"
:data="list"
#if ( $table.templateType == 2 )
:tree-config="{
parentField: '${treeParentColumn.javaField}',
rowField: 'id',
transform: true,
expandAll: true,
reserve: true,
}"
#end
show-overflow
:loading="loading"
>
## 特殊:主子表专属逻辑
#if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
<!-- 子表的列表 -->
@ -330,6 +365,8 @@ onMounted(async () => {
<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
@ -337,6 +374,16 @@ onMounted(async () => {
#end
<vxe-column field="operation" title="操作" align="center">
<template #default="{row}">
#if ( $table.templateType == 2 )
<Button
size="small"
type="link"
@click="onAppend(row as any)"
v-access:code="['${permissionPrefix}:create']"
>
新增下级
</Button>
#end
<Button
size="small"
type="link"
@ -348,7 +395,11 @@ onMounted(async () => {
<Button
size="small"
type="link"
danger
class="ml-2"
#if ( $table.templateType == 2 )
:disabled="!isEmpty(row?.children)"
#end
@click="onDelete(row as any)"
v-access:code="['${permissionPrefix}:delete']"
>
@ -357,6 +408,7 @@ onMounted(async () => {
</template>
</vxe-column>
</vxe-table>
#if ( $table.templateType != 2 )
<!-- 分页 -->
<div class="mt-2 flex justify-end">
<Pagination
@ -367,6 +419,7 @@ onMounted(async () => {
@change="getList"
/>
</div>
#end
</ContentWrap>
#if ($table.templateType == 11) ## erp情况