【功能完善】INFRA:代码生成 vben5 antd 树表模版
This commit is contained in:
parent
28c818e9bc
commit
b0f4a252c7
@ -5,11 +5,11 @@ import type { Rule } from 'ant-design-vue/es/form';
|
|||||||
import { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
import { Tinymce as RichTextarea } from '#/components/tinymce';
|
import { Tinymce as RichTextarea } from '#/components/tinymce';
|
||||||
import { ImageUpload, FileUpload } from "#/components/upload";
|
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';
|
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||||
#if($table.templateType == 2)## 树表需要导入这些
|
#if($table.templateType == 2)## 树表需要导入这些
|
||||||
import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
||||||
import { handleTree } from '#/utils/tree';
|
import { handleTree } from '@vben/utils'
|
||||||
#end
|
#end
|
||||||
## 特殊:主子表专属逻辑
|
## 特殊:主子表专属逻辑
|
||||||
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
||||||
@ -90,10 +90,12 @@ const resetForm = () => {
|
|||||||
/** 获得${table.classComment}树 */
|
/** 获得${table.classComment}树 */
|
||||||
const get${simpleClassName}Tree = async () => {
|
const get${simpleClassName}Tree = async () => {
|
||||||
${classNameVar}Tree.value = []
|
${classNameVar}Tree.value = []
|
||||||
const data = await get${simpleClassName}List()
|
const data = await get${simpleClassName}List({});
|
||||||
const root: Tree = { id: 0, name: '顶级${table.classComment}', children: [] }
|
data.unshift({
|
||||||
root.children = handleTree(data, 'id', '${treeParentColumn.javaField}')
|
id: 0,
|
||||||
${classNameVar}Tree.value.push(root)
|
name: '顶级${table.classComment}',
|
||||||
|
});
|
||||||
|
${classNameVar}Tree.value = handleTree(data);
|
||||||
}
|
}
|
||||||
#end
|
#end
|
||||||
|
|
||||||
@ -205,9 +207,17 @@ const [Modal, modalApi] = useVbenModal({
|
|||||||
v-model:value="formData.${javaField}"
|
v-model:value="formData.${javaField}"
|
||||||
:treeData="${classNameVar}Tree"
|
:treeData="${classNameVar}Tree"
|
||||||
#if ($treeNameColumn.javaField == "name")
|
#if ($treeNameColumn.javaField == "name")
|
||||||
:fieldNames="defaultProps"
|
:fieldNames="{
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
children: 'children',
|
||||||
|
}"
|
||||||
#else
|
#else
|
||||||
:fieldNames="{...defaultProps, label: '$treeNameColumn.javaField'}"
|
:fieldNames="{
|
||||||
|
label: '$treeNameColumn.javaField',
|
||||||
|
value: 'id',
|
||||||
|
children: 'children',
|
||||||
|
}"
|
||||||
#end
|
#end
|
||||||
checkable
|
checkable
|
||||||
treeDefaultExpandAll
|
treeDefaultExpandAll
|
||||||
|
@ -26,7 +26,7 @@ import { getRangePickerDefaultProps } from '#/utils/date';
|
|||||||
import { ref, h, reactive,onMounted,nextTick } from 'vue';
|
import { ref, h, reactive,onMounted,nextTick } from 'vue';
|
||||||
import { $t } from '#/locales';
|
import { $t } from '#/locales';
|
||||||
#if (${table.templateType} == 2)## 树表接口
|
#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}';
|
import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
||||||
#else## 标准表接口
|
#else## 标准表接口
|
||||||
import { get${simpleClassName}Page, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
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
|
#end
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
const loading = ref(true) // 列表的加载中
|
||||||
|
#if ( $table.templateType == 2 )
|
||||||
|
const list = ref<any[]>([]) // 树列表的数据
|
||||||
|
#else
|
||||||
const list = ref<${simpleClassName}Api.${simpleClassName}[]>([]) // 列表的数据
|
const list = ref<${simpleClassName}Api.${simpleClassName}[]>([]) // 列表的数据
|
||||||
|
#end
|
||||||
|
|
||||||
## 特殊:树表专属逻辑(树不需要分页接口)
|
## 特殊:树表专属逻辑(树不需要分页接口)
|
||||||
#if ( $table.templateType != 2 )
|
#if ( $table.templateType != 2 )
|
||||||
const total = ref(0) // 列表的总页数
|
const total = ref(0) // 列表的总页数
|
||||||
@ -83,8 +88,7 @@ const getList = async () => {
|
|||||||
#end
|
#end
|
||||||
## 特殊:树表专属逻辑(树不需要分页接口)
|
## 特殊:树表专属逻辑(树不需要分页接口)
|
||||||
#if ( $table.templateType == 2 )
|
#if ( $table.templateType == 2 )
|
||||||
const data = await get${simpleClassName}List(params)
|
list.value = await get${simpleClassName}List(params);
|
||||||
list.value = handleTree(data, 'id', '${treeParentColumn.javaField}')
|
|
||||||
#else
|
#else
|
||||||
const data = await get${simpleClassName}Page(params)
|
const data = await get${simpleClassName}Page(params)
|
||||||
list.value = data.list
|
list.value = data.list
|
||||||
@ -97,7 +101,9 @@ const getList = async () => {
|
|||||||
|
|
||||||
/** 搜索按钮操作 */
|
/** 搜索按钮操作 */
|
||||||
const handleQuery = () => {
|
const handleQuery = () => {
|
||||||
|
#if ( $table.templateType != 2 )
|
||||||
queryParams.pageNo = 1
|
queryParams.pageNo = 1
|
||||||
|
#end
|
||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -163,6 +169,16 @@ try {
|
|||||||
const hiddenSearchBar = ref(false);
|
const hiddenSearchBar = ref(false);
|
||||||
const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
|
const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
|
||||||
const tableRef = ref<VxeTableInstance>();
|
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 () => {
|
onMounted(async () => {
|
||||||
await getList();
|
await getList();
|
||||||
@ -270,6 +286,11 @@ onMounted(async () => {
|
|||||||
ref="tableToolbarRef"
|
ref="tableToolbarRef"
|
||||||
v-model:hidden-search="hiddenSearchBar"
|
v-model:hidden-search="hiddenSearchBar"
|
||||||
>
|
>
|
||||||
|
#if (${table.templateType} == 2)
|
||||||
|
<Button @click="toggleExpand" class="mr-2">
|
||||||
|
{{ isExpanded ? '收缩' : '展开' }}
|
||||||
|
</Button>
|
||||||
|
#end
|
||||||
<Button
|
<Button
|
||||||
class="ml-2"
|
class="ml-2"
|
||||||
:icon="h(Plus)"
|
:icon="h(Plus)"
|
||||||
@ -277,7 +298,7 @@ onMounted(async () => {
|
|||||||
@click="onCreate"
|
@click="onCreate"
|
||||||
v-access:code="['${permissionPrefix}:create']"
|
v-access:code="['${permissionPrefix}:create']"
|
||||||
>
|
>
|
||||||
{{ $t('ui.actionTitle.create', ['示例联系人']) }}
|
{{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
:icon="h(Download)"
|
:icon="h(Download)"
|
||||||
@ -291,7 +312,21 @@ onMounted(async () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</TableToolbar>
|
</TableToolbar>
|
||||||
</template>
|
</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 )
|
#if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
|
||||||
<!-- 子表的列表 -->
|
<!-- 子表的列表 -->
|
||||||
@ -330,6 +365,8 @@ onMounted(async () => {
|
|||||||
<dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
|
<dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
|
#elseif ($table.templateType == 2 && $javaField == $treeNameColumn.javaField)
|
||||||
|
<vxe-column field="${javaField}" title="${comment}" align="center" tree-node/>
|
||||||
#else
|
#else
|
||||||
<vxe-column field="${javaField}" title="${comment}" align="center" />
|
<vxe-column field="${javaField}" title="${comment}" align="center" />
|
||||||
#end
|
#end
|
||||||
@ -337,6 +374,16 @@ onMounted(async () => {
|
|||||||
#end
|
#end
|
||||||
<vxe-column field="operation" title="操作" align="center">
|
<vxe-column field="operation" title="操作" align="center">
|
||||||
<template #default="{row}">
|
<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
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
type="link"
|
type="link"
|
||||||
@ -348,7 +395,11 @@ onMounted(async () => {
|
|||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
type="link"
|
type="link"
|
||||||
|
danger
|
||||||
class="ml-2"
|
class="ml-2"
|
||||||
|
#if ( $table.templateType == 2 )
|
||||||
|
:disabled="!isEmpty(row?.children)"
|
||||||
|
#end
|
||||||
@click="onDelete(row as any)"
|
@click="onDelete(row as any)"
|
||||||
v-access:code="['${permissionPrefix}:delete']"
|
v-access:code="['${permissionPrefix}:delete']"
|
||||||
>
|
>
|
||||||
@ -357,6 +408,7 @@ onMounted(async () => {
|
|||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
|
#if ( $table.templateType != 2 )
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div class="mt-2 flex justify-end">
|
<div class="mt-2 flex justify-end">
|
||||||
<Pagination
|
<Pagination
|
||||||
@ -367,6 +419,7 @@ onMounted(async () => {
|
|||||||
@change="getList"
|
@change="getList"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
#end
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
|
||||||
#if ($table.templateType == 11) ## erp情况
|
#if ($table.templateType == 11) ## erp情况
|
||||||
|
Loading…
Reference in New Issue
Block a user