代码生成：重构 vue2 模版，适配树表和主子表（80%）

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/index.vue.vm

@@ -47,18 +47,67 @@
     <!-- 操作工具栏 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
                    v-hasPermi="['${permissionPrefix}:create']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                    v-hasPermi="['${permissionPrefix}:export']">导出</el-button>
       </el-col>
+        #if ( $table.templateType == 2 )
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">
+              展开/折叠
+            </el-button>
+          </el-col>
+        #end
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
+      ## 特殊：主子表专属逻辑 TODO puhui999: 普通模式
+      #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
+      <el-table
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :highlight-current-row="true"
+          :show-overflow-tooltip="true"
+          @current-change="handleCurrentChange"
+      >
+          ## 特殊：树表专属逻辑
+      #elseif ( $table.templateType == 2 )
+      <el-table
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          v-if="refreshTable"
+          row-key="id"
+          :default-expand-all="isExpandAll"
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      >
+      #else
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      #end
+      ## 特殊：主子表专属逻辑 TODO puhui999: 内嵌模式
+      #if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
+        <!-- 子表的列表 -->
+        <el-table-column type="expand">
+          <template #default="scope">
+            <el-tabs value="$subClassNameVars.get(0)">
+                #foreach ($subTable in $subTables)
+                    #set ($index = $foreach.count - 1)
+                    #set ($subClassNameVar = $subClassNameVars.get($index))
+                    #set ($subSimpleClassName = $subSimpleClassNames.get($index))
+                    #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
+                  <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
+                    <${subSimpleClassName}List :${subJoinColumn_strikeCase}="scope.row.id" />
+                  </el-tab-pane>
+                #end
+            </el-tabs>
+          </template>
+        </el-table-column>
+      #end
 #foreach($column in $columns)
 #if ($column.listOperationResult)
     #set ($dictType=$column.dictType)
@@ -84,7 +133,7 @@
 #end
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.${primaryColumn.javaField})"
                      v-hasPermi="['${permissionPrefix}:update']">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['${permissionPrefix}:delete']">删除</el-button>
@@ -96,90 +145,28 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-#foreach($column in $columns)
-#if ($column.createOperation || $column.updateOperation)
-    #set ($dictType = $column.dictType)
-    #set ($javaField = $column.javaField)
-    #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-    #set ($comment = $column.columnComment)
-#if ($column.htmlType == "input")
-  #if (!$column.primaryKey)## 忽略主键，不用在表单里
-        <el-form-item label="${comment}" prop="${javaField}">
-          <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
-        </el-form-item>
+    <${simpleClassName}Form ref="formRef" @success="getList" />
+  ## 特殊：主子表专属逻辑  TODO puhui999: ERP 模式
+  #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
+    <!-- 子表的列表 -->
+      <el-tabs model-value="$subClassNameVars.get(0)">
+          #foreach ($subTable in $subTables)
+              #set ($index = $foreach.count - 1)
+              #set ($subClassNameVar = $subClassNameVars.get($index))
+              #set ($subSimpleClassName = $subSimpleClassNames.get($index))
+              #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
+            <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
+              <${subSimpleClassName}List :${subJoinColumn_strikeCase}="currentRow.id" />
+            </el-tab-pane>
+          #end
+      </el-tabs>
   #end
-#elseif($column.htmlType == "imageUpload")## 图片上传
-        #set ($hasImageUploadColumn = true)
-        <el-form-item label="${comment}">
-          <imageUpload v-model="form.${javaField}"/>
-        </el-form-item>
-#elseif($column.htmlType == "fileUpload")## 文件上传
-        #set ($hasFileUploadColumn = true)
-        <el-form-item label="${comment}">
-          <fileUpload v-model="form.${javaField}"/>
-        </el-form-item>
-#elseif($column.htmlType == "editor")## 文本编辑器
-        #set ($hasEditorColumn = true)
-        <el-form-item label="${comment}">
-          <editor v-model="form.${javaField}" :min-height="192"/>
-        </el-form-item>
-#elseif($column.htmlType == "select")## 下拉框
-        <el-form-item label="${comment}" prop="${javaField}">
-          <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
-    #if ("" != $dictType)## 有数据字典
-            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
-                       :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
-    #else##没数据字典
-            <el-option label="请选择字典生成" value="" />
-    #end
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox")## 多选框
-        <el-form-item label="${comment}" prop="${javaField}">
-          <el-checkbox-group v-model="form.${javaField}">
-    #if ("" != $dictType)## 有数据字典
-            <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
-                         :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
-    #else##没数据字典
-            <el-checkbox>请选择字典生成</el-checkbox>
-    #end
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio")## 单选框
-        <el-form-item label="${comment}" prop="${javaField}">
-          <el-radio-group v-model="form.${javaField}">
-    #if ("" != $dictType)## 有数据字典
-            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
-                      :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-radio>
-    #else##没数据字典
-            <el-radio label="1">请选择字典生成</el-radio>
-    #end
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "datetime")## 时间框
-        <el-form-item label="${comment}" prop="${javaField}">
-          <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
-        </el-form-item>
-#elseif($column.htmlType == "textarea")## 文本框
-        <el-form-item label="${comment}" prop="${javaField}">
-          <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-#end
-#end
-#end
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { create${simpleClassName}, update${simpleClassName}, delete${simpleClassName}, get${simpleClassName}, get${simpleClassName}Page, export${simpleClassName}Excel } from "@/api/${table.moduleName}/${classNameVar}";
+import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}';
+import ${simpleClassName}Form from './${simpleClassName}Form.vue';
 #if ($hasImageUploadColumn)
 import ImageUpload from '@/components/ImageUpload';
 #end
@@ -189,10 +176,22 @@ import FileUpload from '@/components/FileUpload';
 #if ($hasEditorColumn)
 import Editor from '@/components/Editor';
 #end
-
+## 特殊：主子表专属逻辑
+#if ( $subTables && $subTables.size() > 0 )
+    #foreach ($subSimpleClassName in $subSimpleClassNames)
+    import ${subSimpleClassName}List from './components/${subSimpleClassName}List.vue'
+    #end
+#end
 export default {
   name: "${simpleClassName}",
   components: {
+          ${simpleClassName}Form,
+## 特殊：主子表专属逻辑
+#if ( $subTables && $subTables.size() > 0 )
+      #foreach ($subSimpleClassName in $subSimpleClassNames)
+          ${subSimpleClassName}List,
+      #end
+#end
 #if ($hasImageUploadColumn)
     ImageUpload,
 #end
@@ -212,17 +211,25 @@ export default {
       // 显示搜索条件
       showSearch: true,
       // 总条数
-      total: 0,
+      ## 特殊：树表专属逻辑（树不需要分页接口）
+      #if ( $table.templateType != 2 )
+        total: 0,
+      #end
       // ${table.classComment}列表
       list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 选中行
+      currentRow: {},
       // 查询参数
       queryParams: {
-        pageNo: 1,
-        pageSize: 10,
+        ## 特殊：树表专属逻辑（树不需要分页接口）
+        #if ( $table.templateType != 2 )
+            pageNo: 1,
+            pageSize: 10,
+        #end
         #foreach ($column in $columns)
         #if ($column.listOperation)
         #if ($column.listOperationCondition != 'BETWEEN')
@@ -233,17 +240,6 @@ export default {
         #end
         #end
         #end
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      #foreach ($column in $columns)
-      #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
-        #set($comment=$column.columnComment)
-        $column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }],
-      #end
-      #end
       }
     };
   },
@@ -253,33 +249,22 @@ export default {
   methods: {
     /** 查询列表 */
     getList() {
+      try {
       this.loading = true;
-      // 执行查询
-      get${simpleClassName}Page(this.queryParams).then(response => {
+      ## 特殊：树表专属逻辑（树不需要分页接口）
+      #if ( $table.templateType == 2 )
+        ${simpleClassName}Api.get${simpleClassName}List(queryParams).then(response => {
+          this.list = this.handleTree(response.data, 'id', '${treeParentColumn.javaField}');
+        })
+      #else
+      ${simpleClassName}Api.get${simpleClassName}Page(this.queryParams).then(response => {
         this.list = response.data.list;
         this.total = response.data.total;
-        this.loading = false;
       });
-    },
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    /** 表单重置 */
-    reset() {
-      this.form = {
-        #foreach ($column in $columns)
-        #if ($column.createOperation || $column.updateOperation)
-        #if ($column.htmlType == "checkbox")
-        $column.javaField: [],
-        #else
-        $column.javaField: undefined,
-        #end
-        #end
-        #end
-      };
-      this.resetForm("form");
+      #end
+      } finally {
+        this.loading = false;
+      }
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -291,79 +276,56 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加${table.classComment}";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
-      get${simpleClassName}(${primaryColumn.javaField}).then(response => {
-        this.form = response.data;
-        #foreach ($column in $columns)
-        #if($column.htmlType == "checkbox")## checkbox 特殊处理
-        this.form.$column.javaField = this.form.${column.javaField}.split(",");
-        #end
-        #end
-        this.open = true;
-        this.title = "修改${table.classComment}";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.#[[$]]#refs["form"].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        #foreach ($column in $columns)
-        #if($column.htmlType == "checkbox")
-        this.form.$column.javaField = this.form.${column.javaField}.join(",");
-        #end
-        #end
-        // 修改的提交
-        if (this.form.${primaryColumn.javaField} != null) {
-          update${simpleClassName}(this.form).then(response => {
-            this.#[[$modal]]#.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
-          });
-          return;
-        }
-        // 添加的提交
-        create${simpleClassName}(this.form).then(response => {
-          this.#[[$modal]]#.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
-        });
-      });
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.#[[$]]#refs["formRef"].open(id)
     },
     /** 删除按钮操作 */
     handleDelete(row) {
+      const that = this;
+      try {
       const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
-      this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?').then(function() {
-          return delete${simpleClassName}(${primaryColumn.javaField});
+      this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?').then(()=>{
+          return ${simpleClassName}Api.delete${simpleClassName}(${primaryColumn.javaField});
         }).then(() => {
-          this.getList();
-          this.#[[$modal]]#.msgSuccess("删除成功");
+        that.getList();
+        that.#[[$modal]]#.msgSuccess("删除成功");
         }).catch(() => {});
+      } catch {}
     },
     /** 导出按钮操作 */
     handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.#[[$modal]]#.confirm('是否确认导出所有${table.classComment}数据项?').then(() => {
-          this.exportLoading = true;
-          return export${simpleClassName}Excel(params);
-        }).then(response => {
-          this.#[[$]]#download.excel(response, '${table.classComment}.xls');
-          this.exportLoading = false;
-        }).catch(() => {});
-    }
+      const that = this;
+      try {
+          this.#[[$modal]]#.confirm('是否确认导出所有${table.classComment}数据项?').then(() => {
+              that.exportLoading = true;
+              return ${simpleClassName}Api.export${simpleClassName}Excel(params);
+            }).then(response => {
+              that.#[[$]]#download.excel(response, '${table.classComment}.xls');
+            }));
+      } catch {
+      } finally {
+        that.exportLoading = false;
+      }
+    },
+      ## 特殊：主子表专属逻辑
+      #if ( $subTables && $subTables.size() > 0 )
+        /** 选中行操作 */
+        handleCurrentChange(row) {
+         this.currentRow = row
+        },
+      #end
+      ## 特殊：树表专属逻辑
+      #if ( $table.templateType == 2 )
+        /** 展开/折叠操作 */
+        toggleExpandAll() {
+          this.refreshTable = false
+          this.isExpandAll = !this.isExpandAll
+          this.$nextTick(function () {
+            this.refreshTable = true
+          })
+        }
+      #end
   }
 };
 </script>