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

puhui999
1 parent 28c818e9
Showing 2 changed files with 76 additions and 13 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/form.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/index.vue.vm
@@ -5,11 +5,11 @@ import type { Rule } from &#39;ant-design-vue/es/form&#39;;
 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 = () =&gt; {
 /** 获得${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
@@ -26,7 +26,7 @@ import { getRangePickerDefaultProps } from &#39;#/utils/date&#39;;
 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&lt;${simpleClassName}Api.${simpleClassName}&gt;()
 #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 () =&gt; {
       #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 () =&gt; {
 /** 搜索按钮操作 */
 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 () =&gt; {
             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 () =&gt; {
               @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 () =&gt; {
           </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 () =&gt; {
                         <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 () =&gt; {
           #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 () =&gt; {
             <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 () =&gt; {
           </template>
         </vxe-column>
       </vxe-table>
+#if ( $table.templateType != 2 )
       <!-- 分页 -->
       <div class="mt-2 flex justify-end">
         <Pagination
@@ -367,6 +419,7 @@ onMounted(async () =&gt; {
             @change="getList"
         />
       </div>
+#end
     </ContentWrap>
 #if ($table.templateType == 11) ## erp情况