Ver Fonte

代码生成

ys há 2 semanas atrás
pai
commit
3b7648eda9

+ 8 - 2
yushu-backend/yushu-generator/src/main/java/com/yushu/generator/util/VelocityUtils.java

@@ -129,8 +129,14 @@ public class VelocityUtils
      */
     public static List<String> getTemplateList(String tplCategory, String tplWebType)
     {
-        String useWebType = "vm/vue";
-        if ("element-plus".equals(tplWebType))
+        // Ant Design Vue 项目默认使用 v3 模板,只有明确选择 element-ui 时才使用 Vue 2 模板
+        String useWebType = "vm/vue/v3";
+        if ("element-ui".equals(tplWebType))
+        {
+            useWebType = "vm/vue";
+        }
+        // antdv 和 element-plus 都使用 Vue 3 模板
+        else if ("antdv".equals(tplWebType) || "element-plus".equals(tplWebType))
         {
             useWebType = "vm/vue/v3";
         }

+ 312 - 195
yushu-backend/yushu-generator/src/main/resources/vm/vue/index-tree.vue.vm

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <a-form :model="queryParams" ref="queryForm" size="small" layout="inline" v-show="showSearch" class="search-form" :label-col="{ style: { width: '68px' } }">
 #foreach($column in $columns)
 #if($column.query)
 #set($dictType=$column.dictType)
@@ -12,92 +12,85 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.htmlType == "input")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-input
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-input
           v-model="queryParams.${column.javaField}"
           placeholder="请输入${comment}"
-          clearable
-          @keyup.enter.native="handleQuery"
+          allow-clear
+          @pressEnter="handleQuery"
         />
-      </el-form-item>
+      </a-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" allow-clear>
+          <a-select-option
             v-for="dict in dict.type.${dictType}"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
-        </el-select>
-      </el-form-item>
+        </a-select>
+      </a-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" allow-clear>
+          <a-select-option label="请选择字典生成" value="" />
+        </a-select>
+      </a-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-date-picker clearable
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-date-picker
           v-model="queryParams.${column.javaField}"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择${comment}">
-        </el-date-picker>
-      </el-form-item>
+          value-format="YYYY-MM-DD"
+          placeholder="请选择${comment}"
+          allow-clear
+        />
+      </a-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}">
-        <el-date-picker
+      <a-form-item label="${comment}">
+        <a-range-picker
           v-model="daterange${AttrName}"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-#end
-#end
-#end
-      <el-form-item>
-	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+          value-format="YYYY-MM-DD"
+          style="width: 308px"
+        />
+      </a-form-item>
+#end
+#end
+#end
+      <a-form-item>
+        <a-button type="primary" @click="handleQuery"><SearchOutlined />搜索</a-button>
+        <a-button style="margin-left: 8px" @click="resetQuery"><ReloadOutlined />重置</a-button>
+      </a-form-item>
+    </a-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['${permissionPrefix}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-sort"
-          size="mini"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <div class="button-toolbar">
+      <a-row :gutter="10">
+        <a-col :span="1.5">
+          <a-button
+            type="primary"
+            @click="handleAdd"
+            v-hasPermi="['${permissionPrefix}:add']"
+          ><PlusOutlined />新增</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button
+            @click="toggleExpandAll"
+          ><SortAscendingOutlined />展开/折叠</a-button>
+        </a-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </a-row>
+    </div>
 
-    <el-table
+    <a-table
       v-if="refreshTable"
-      v-loading="loading"
-      :data="${businessName}List"
-      row-key="${treeCode}"
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :loading="loading"
+      :data-source="${businessName}List"
+      :columns="tableColumns"
+      :row-key="record => record.${treeCode}"
+      :default-expand-all-rows="isExpandAll"
+      :pagination="false"
     >
+      <template #bodyCell="{ column, record }">
 #foreach($column in $columns)
 #set($javaField=$column.javaField)
 #set($parentheseIndex=$column.columnComment.indexOf("("))
@@ -108,65 +101,50 @@
 #end
 #if($column.pk)
 #elseif($column.list && $column.htmlType == "datetime")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
+        <template v-if="column.key === '${javaField}'">
+          <span>{{ parseTime(record.${javaField}, '{y}-{m}-{d}') }}</span>
         </template>
-      </el-table-column>
 #elseif($column.list && $column.htmlType == "imageUpload")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
-        <template slot-scope="scope">
-          <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
+        <template v-else-if="column.key === '${javaField}'">
+          <image-preview :src="record.${javaField}" :width="50" :height="50"/>
         </template>
-      </el-table-column>
 #elseif($column.list && "" != $column.dictType)
-      <el-table-column label="${comment}" align="center" prop="${javaField}">
-        <template slot-scope="scope">
+        <template v-else-if="column.key === '${javaField}'">
 #if($column.htmlType == "checkbox")
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
+          <dict-tag :options="dict.type.${column.dictType}" :value="record.${javaField} ? record.${javaField}.split(',') : []"/>
 #else
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
+          <dict-tag :options="dict.type.${column.dictType}" :value="record.${javaField}"/>
 #end
         </template>
-      </el-table-column>
 #elseif($column.list && "" != $javaField)
 #if(${foreach.index} == 1)
-      <el-table-column label="${comment}" prop="${javaField}" />
+        <template v-else-if="column.key === '${javaField}'">
+          <span>{{ record.${javaField} }}</span>
+        </template>
 #else
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
-#end
-#end
-#end
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['${permissionPrefix}:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-            v-hasPermi="['${permissionPrefix}:add']"
-          >新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['${permissionPrefix}:remove']"
-          >删除</el-button>
+        <template v-else-if="column.key === '${javaField}'">
+          <span>{{ record.${javaField} }}</span>
         </template>
-      </el-table-column>
-    </el-table>
+#end
+#end
+#end
+        <template v-else-if="column.key === 'action'">
+          <a-tooltip title="修改">
+            <a-button type="link" size="small" @click="handleUpdate(record)" v-hasPermi="['${permissionPrefix}:edit']"><EditOutlined /></a-button>
+          </a-tooltip>
+          <a-tooltip title="新增">
+            <a-button type="link" size="small" @click="handleAdd(record)" v-hasPermi="['${permissionPrefix}:add']"><PlusOutlined /></a-button>
+          </a-tooltip>
+          <a-tooltip title="删除">
+            <a-button type="link" size="small" danger @click="handleDelete(record)" v-hasPermi="['${permissionPrefix}:remove']"><DeleteOutlined /></a-button>
+          </a-tooltip>
+        </template>
+      </template>
+    </a-table>
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <a-modal :title="title" :visible="open" @ok="submitForm" @cancel="cancel" @update:visible="val => { open = val }" width="500px">
+      <a-form ref="form" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
 #foreach($column in $columns)
 #set($field=$column.javaField)
 #if($column.insert && !$column.pk)
@@ -179,29 +157,35 @@
 #end
 #set($dictType=$column.dictType)
 #if("" != $treeParentCode && $column.javaField == $treeParentCode)
-        <el-form-item label="${comment}" prop="${treeParentCode}">
-          <treeselect v-model="form.${treeParentCode}" :options="${businessName}Options" :normalizer="normalizer" placeholder="请选择${comment}" />
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${treeParentCode}">
+          <a-tree-select
+            v-model="form.${treeParentCode}"
+            :tree-data="${businessName}Options"
+            :field-names="{ value: '${treeCode}', label: '${treeName}', children: 'children' }"
+            :tree-default-expand-all="true"
+            placeholder="请选择${comment}"
+          />
+        </a-form-item>
 #elseif($column.htmlType == "input")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" placeholder="请输入${comment}" />
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-input v-model="form.${field}" placeholder="请输入${comment}" />
+        </a-form-item>
 #elseif($column.htmlType == "imageUpload")
-        <el-form-item label="${comment}" prop="${field}">
+        <a-form-item label="${comment}" :name="${field}">
           <image-upload v-model="form.${field}"/>
-        </el-form-item>
+        </a-form-item>
 #elseif($column.htmlType == "fileUpload")
-        <el-form-item label="${comment}" prop="${field}">
+        <a-form-item label="${comment}" :name="${field}">
           <file-upload v-model="form.${field}"/>
-        </el-form-item>
+        </a-form-item>
 #elseif($column.htmlType == "editor")
-        <el-form-item label="${comment}">
+        <a-form-item label="${comment}">
           <editor v-model="form.${field}" :min-height="192"/>
-        </el-form-item>
+        </a-form-item>
 #elseif($column.htmlType == "select" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option
+        <a-form-item label="${comment}" :name="${field}">
+          <a-select v-model="form.${field}" placeholder="请选择${comment}">
+            <a-select-option
               v-for="dict in dict.type.${dictType}"
               :key="dict.value"
               :label="dict.label"
@@ -210,91 +194,83 @@
 #else
               :value="dict.value"
 #end
-            ></el-option>
-          </el-select>
-        </el-form-item>
+            />
+          </a-select>
+        </a-form-item>
 #elseif($column.htmlType == "select" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-select v-model="form.${field}" placeholder="请选择${comment}">
+            <a-select-option label="请选择字典生成" value="" />
+          </a-select>
+        </a-form-item>
 #elseif($column.htmlType == "checkbox" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox
+        <a-form-item label="${comment}" :name="${field}">
+          <a-checkbox-group v-model="form.${field}">
+            <a-checkbox
               v-for="dict in dict.type.${dictType}"
               :key="dict.value"
-              :label="dict.value">
+              :value="dict.value">
               {{dict.label}}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
+            </a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
 #elseif($column.htmlType == "checkbox" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox>请选择字典生成</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-checkbox-group v-model="form.${field}">
+            <a-checkbox>请选择字典生成</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
 #elseif($column.htmlType == "radio" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio
+        <a-form-item label="${comment}" :name="${field}">
+          <a-radio-group v-model="form.${field}">
+            <a-radio
               v-for="dict in dict.type.${dictType}"
               :key="dict.value"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
-              :label="parseInt(dict.value)"
+              :value="parseInt(dict.value)"
 #else
-              :label="dict.value"
+              :value="dict.value"
 #end
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
+            >{{dict.label}}</a-radio>
+          </a-radio-group>
+        </a-form-item>
 #elseif($column.htmlType == "radio" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-radio-group v-model="form.${field}">
+            <a-radio value="1">请选择字典生成</a-radio>
+          </a-radio-group>
+        </a-form-item>
 #elseif($column.htmlType == "datetime")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-date-picker clearable
+        <a-form-item label="${comment}" :name="${field}">
+          <a-date-picker
             v-model="form.${field}"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择${comment}">
-          </el-date-picker>
-        </el-form-item>
+            value-format="YYYY-MM-DD"
+            placeholder="请选择${comment}"
+            allow-clear
+          />
+        </a-form-item>
 #elseif($column.htmlType == "textarea")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-textarea v-model="form.${field}" placeholder="请输入内容" />
+        </a-form-item>
 #end
 #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>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}"
-import Treeselect from "@riophae/vue-treeselect"
-import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import { SearchOutlined, ReloadOutlined, PlusOutlined, EditOutlined, DeleteOutlined, SortAscendingOutlined } from '@ant-design/icons-vue'
 
 export default {
   name: "${BusinessName}",
 #if(${dicts} != '')
   dicts: [${dicts}],
 #end
-  components: {
-    Treeselect
-  },
   data() {
     return {
       // 遮罩层
@@ -345,7 +321,65 @@ export default {
         ]#if($foreach.count != $columns.size()),#end
 #end
 #end
-      }
+      },
+      // 表格列配置
+      tableColumns: [
+#foreach($column in $columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("("))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.pk)
+#elseif($column.list && $column.htmlType == "datetime")
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          width: 180,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && $column.htmlType == "imageUpload")
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          width: 100,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && "" != $column.dictType)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && "" != $javaField)
+#if(${foreach.index} == 1)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          dataIndex: '${javaField}'
+        },
+#else
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          dataIndex: '${javaField}'
+        },
+#end
+#end
+#end
+        {
+          key: 'action',
+          title: '操作',
+          align: 'center',
+          width: 200
+        }
+      ]
     }
   },
   created() {
@@ -374,17 +408,6 @@ export default {
         this.${businessName}List = this.handleTree(response.data, "${treeCode}", "${treeParentCode}")
         this.loading = false
       })
-    },
-    /** 转换${functionName}数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children
-      }
-      return {
-        id: node.${treeCode},
-        label: node.${treeName},
-        children: node.children
-      }
     },
 	/** 查询${functionName}下拉树结构 */
     getTreeselect() {
@@ -503,3 +526,97 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+// 搜索表单布局
+.search-form.ant-form-inline {
+  background: #fff;
+  padding: 0;
+  border-radius: 4px;
+  
+  .ant-form-item {
+    margin-right: 16px;
+    margin-bottom: 16px;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    
+    .ant-form-item-label {
+      padding-right: 8px;
+      flex-shrink: 0;
+      
+      > label {
+        white-space: nowrap;
+        height: 32px;
+        line-height: 32px;
+        margin-bottom: 0;
+      }
+    }
+    
+    .ant-form-item-control {
+      flex: 0 0 auto;
+      display: inline-block;
+    }
+    
+    .ant-form-item-control-input {
+      min-height: 32px;
+      display: flex;
+      align-items: center;
+    }
+    
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+// 按钮工具栏
+.button-toolbar {
+  background: #fff;
+  padding: 0;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  
+  .ant-row {
+    margin: 0;
+    
+    .ant-col {
+      .ant-btn {
+        margin-right: 8px;
+        
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+// 表格容器
+.ant-table-wrapper {
+  background: #fff;
+  padding: 0;
+  border-radius: 4px;
+}
+
+// 表格样式
+.ant-table {
+  .ant-table-thead > tr > th {
+    background-color: #fafafa;
+    font-weight: 600;
+    color: #262626;
+  }
+  
+  .ant-table-tbody > tr > td {
+    padding: 12px 16px;
+  }
+}
+
+// 按钮图标间距
+.ant-btn {
+  .anticon + span,
+  span + .anticon {
+    margin-left: 4px;
+  }
+}
+</style>

+ 426 - 229
yushu-backend/yushu-generator/src/main/resources/vm/vue/index.vue.vm

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <a-form :model="queryParams" ref="queryForm" size="small" layout="inline" v-show="showSearch" class="search-form" :label-col="{ style: { width: '68px' } }">
 #foreach($column in $columns)
 #if($column.query)
 #set($dictType=$column.dictType)
@@ -12,109 +12,104 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.htmlType == "input")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-input
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-input
           v-model="queryParams.${column.javaField}"
           placeholder="请输入${comment}"
-          clearable
-          @keyup.enter.native="handleQuery"
+          allow-clear
+          @pressEnter="handleQuery"
         />
-      </el-form-item>
+      </a-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" allow-clear>
+          <a-select-option
             v-for="dict in dict.type.${dictType}"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
-        </el-select>
-      </el-form-item>
+        </a-select>
+      </a-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" allow-clear>
+          <a-select-option label="请选择字典生成" value="" />
+        </a-select>
+      </a-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-date-picker clearable
+      <a-form-item label="${comment}" :name="${column.javaField}">
+        <a-date-picker
           v-model="queryParams.${column.javaField}"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择${comment}">
-        </el-date-picker>
-      </el-form-item>
+          value-format="YYYY-MM-DD"
+          placeholder="请选择${comment}"
+          allow-clear
+        />
+      </a-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}">
-        <el-date-picker
+      <a-form-item label="${comment}">
+        <a-range-picker
           v-model="daterange${AttrName}"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-#end
-#end
-#end
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+          value-format="YYYY-MM-DD"
+          style="width: 308px"
+        />
+      </a-form-item>
+#end
+#end
+#end
+      <a-form-item>
+        <a-button type="primary" @click="handleQuery"><SearchOutlined />搜索</a-button>
+        <a-button style="margin-left: 8px" @click="resetQuery"><ReloadOutlined />重置</a-button>
+      </a-form-item>
+    </a-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['${permissionPrefix}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['${permissionPrefix}:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['${permissionPrefix}:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['${permissionPrefix}:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <div class="button-toolbar">
+      <a-row :gutter="10">
+        <a-col :span="1.5">
+          <a-button
+            type="primary"
+            @click="handleAdd"
+            v-hasPermi="['${permissionPrefix}:add']"
+          ><PlusOutlined />新增</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button
+            type="primary"
+            style="background-color: #52c41a; border-color: #52c41a"
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['${permissionPrefix}:edit']"
+          ><EditOutlined />修改</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button
+            danger
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['${permissionPrefix}:remove']"
+          ><DeleteOutlined />删除</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button
+            type="primary"
+            style="background-color: #faad14; border-color: #faad14"
+            @click="handleExport"
+            v-hasPermi="['${permissionPrefix}:export']"
+          ><DownloadOutlined />导出</a-button>
+        </a-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </a-row>
+    </div>
 
-    <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+    <a-table 
+      :loading="loading" 
+      :data-source="${businessName}List" 
+      :columns="tableColumns"
+      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectionChange }"
+      :row-key="record => record.${pkColumn.javaField}"
+      :pagination="false"
+    >
+      <template #bodyCell="{ column, record }">
 #foreach($column in $columns)
 #set($javaField=$column.javaField)
 #set($parentheseIndex=$column.columnComment.indexOf("("))
@@ -124,52 +119,41 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.pk)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
+        <template v-if="column.key === '${javaField}'">
+          <span>{{ record.${javaField} }}</span>
+        </template>
 #elseif($column.list && $column.htmlType == "datetime")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
+        <template v-else-if="column.key === '${javaField}'">
+          <span>{{ parseTime(record.${javaField}, '{y}-{m}-{d}') }}</span>
         </template>
-      </el-table-column>
 #elseif($column.list && $column.htmlType == "imageUpload")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
-        <template slot-scope="scope">
-          <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
+        <template v-else-if="column.key === '${javaField}'">
+          <image-preview :src="record.${javaField}" :width="50" :height="50"/>
         </template>
-      </el-table-column>
 #elseif($column.list && "" != $column.dictType)
-      <el-table-column label="${comment}" align="center" prop="${javaField}">
-        <template slot-scope="scope">
+        <template v-else-if="column.key === '${javaField}'">
 #if($column.htmlType == "checkbox")
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
+          <dict-tag :options="dict.type.${column.dictType}" :value="record.${javaField} ? record.${javaField}.split(',') : []"/>
 #else
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
+          <dict-tag :options="dict.type.${column.dictType}" :value="record.${javaField}"/>
 #end
         </template>
-      </el-table-column>
 #elseif($column.list && "" != $javaField)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
+        <template v-else-if="column.key === '${javaField}'">
+          <span>{{ record.${javaField} }}</span>
+        </template>
 #end
 #end
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['${permissionPrefix}:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['${permissionPrefix}:remove']"
-          >删除</el-button>
+        <template v-else-if="column.key === 'action'">
+          <a-tooltip title="修改">
+            <a-button type="link" size="small" @click="handleUpdate(record)" v-hasPermi="['${permissionPrefix}:edit']"><EditOutlined /></a-button>
+          </a-tooltip>
+          <a-tooltip title="删除">
+            <a-button type="link" size="small" danger @click="handleDelete(record)" v-hasPermi="['${permissionPrefix}:remove']"><DeleteOutlined /></a-button>
+          </a-tooltip>
         </template>
-      </el-table-column>
-    </el-table>
+      </template>
+    </a-table>
     
     <pagination
       v-show="total>0"
@@ -180,8 +164,8 @@
     />
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <a-modal :title="title" :visible="open" @ok="submitForm" @cancel="cancel" @update:visible="val => { open = val }" width="500px">
+      <a-form ref="form" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
 #foreach($column in $columns)
 #set($field=$column.javaField)
 #if($column.insert && !$column.pk)
@@ -194,25 +178,25 @@
 #end
 #set($dictType=$column.dictType)
 #if($column.htmlType == "input")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" placeholder="请输入${comment}" />
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-input v-model="form.${field}" placeholder="请输入${comment}" />
+        </a-form-item>
 #elseif($column.htmlType == "imageUpload")
-        <el-form-item label="${comment}" prop="${field}">
+        <a-form-item label="${comment}" :name="${field}">
           <image-upload v-model="form.${field}"/>
-        </el-form-item>
+        </a-form-item>
 #elseif($column.htmlType == "fileUpload")
-        <el-form-item label="${comment}" prop="${field}">
+        <a-form-item label="${comment}" :name="${field}">
           <file-upload v-model="form.${field}"/>
-        </el-form-item>
+        </a-form-item>
 #elseif($column.htmlType == "editor")
-        <el-form-item label="${comment}">
+        <a-form-item label="${comment}">
           <editor v-model="form.${field}" :min-height="192"/>
-        </el-form-item>
+        </a-form-item>
 #elseif($column.htmlType == "select" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option
+        <a-form-item label="${comment}" :name="${field}">
+          <a-select v-model="form.${field}" placeholder="请选择${comment}">
+            <a-select-option
               v-for="dict in dict.type.${dictType}"
               :key="dict.value"
               :label="dict.label"
@@ -221,82 +205,90 @@
 #else
               :value="dict.value"
 #end
-            ></el-option>
-          </el-select>
-        </el-form-item>
+            />
+          </a-select>
+        </a-form-item>
 #elseif($column.htmlType == "select" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-select v-model="form.${field}" placeholder="请选择${comment}">
+            <a-select-option label="请选择字典生成" value="" />
+          </a-select>
+        </a-form-item>
 #elseif($column.htmlType == "checkbox" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox
+        <a-form-item label="${comment}" :name="${field}">
+          <a-checkbox-group v-model="form.${field}">
+            <a-checkbox
               v-for="dict in dict.type.${dictType}"
               :key="dict.value"
-              :label="dict.value">
+              :value="dict.value">
               {{dict.label}}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
+            </a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
 #elseif($column.htmlType == "checkbox" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox>请选择字典生成</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-checkbox-group v-model="form.${field}">
+            <a-checkbox>请选择字典生成</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
 #elseif($column.htmlType == "radio" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio
+        <a-form-item label="${comment}" :name="${field}">
+          <a-radio-group v-model="form.${field}">
+            <a-radio
               v-for="dict in dict.type.${dictType}"
               :key="dict.value"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
-              :label="parseInt(dict.value)"
+              :value="parseInt(dict.value)"
 #else
-              :label="dict.value"
+              :value="dict.value"
 #end
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
+            >{{dict.label}}</a-radio>
+          </a-radio-group>
+        </a-form-item>
 #elseif($column.htmlType == "radio" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-radio-group v-model="form.${field}">
+            <a-radio value="1">请选择字典生成</a-radio>
+          </a-radio-group>
+        </a-form-item>
 #elseif($column.htmlType == "datetime")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-date-picker clearable
+        <a-form-item label="${comment}" :name="${field}">
+          <a-date-picker
             v-model="form.${field}"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择${comment}">
-          </el-date-picker>
-        </el-form-item>
+            value-format="YYYY-MM-DD"
+            placeholder="请选择${comment}"
+            allow-clear
+          />
+        </a-form-item>
 #elseif($column.htmlType == "textarea")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+        <a-form-item label="${comment}" :name="${field}">
+          <a-textarea v-model="form.${field}" placeholder="请输入内容" />
+        </a-form-item>
 #end
 #end
 #end
 #end
 #if($table.sub)
-        <el-divider content-position="center">${subTable.functionName}信息</el-divider>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd${subClassName}">添加</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete${subClassName}">删除</el-button>
-          </el-col>
-        </el-row>
-        <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="序号" align="center" prop="index" width="50"/>
+        <a-divider>${subTable.functionName}信息</a-divider>
+        <a-row :gutter="10" class="mb8">
+          <a-col :span="1.5">
+            <a-button type="primary" @click="handleAdd${subClassName}"><PlusOutlined />添加</a-button>
+          </a-col>
+          <a-col :span="1.5">
+            <a-button danger @click="handleDelete${subClassName}"><DeleteOutlined />删除</a-button>
+          </a-col>
+        </a-row>
+        <a-table 
+          :data-source="${subclassName}List" 
+          :columns="subTableColumns"
+          :row-selection="{ selectedRowKeys: checked${subClassName}, onChange: handle${subClassName}SelectionChange }"
+          :row-key="(record, index) => index"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record, index }">
+            <template v-if="column.key === 'index'">
+              <span>{{ index + 1 }}</span>
+            </template>
 #foreach($column in $subTable.columns)
 #set($javaField=$column.javaField)
 #set($parentheseIndex=$column.columnComment.indexOf("("))
@@ -307,53 +299,48 @@
 #end
 #if($column.pk || $javaField == ${subTableFkclassName})
 #elseif($column.list && $column.htmlType == "input")
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
+            <template v-else-if="column.key === '${javaField}'">
+              <a-input v-model="record.${javaField}" placeholder="请输入${comment}" />
             </template>
-          </el-table-column>
 #elseif($column.list && $column.htmlType == "datetime")
-          <el-table-column label="$comment" prop="${javaField}" width="240">
-            <template slot-scope="scope">
-              <el-date-picker clearable v-model="scope.row.$javaField" type="date" value-format="yyyy-MM-dd" placeholder="请选择$comment" />
+            <template v-else-if="column.key === '${javaField}'">
+              <a-date-picker
+                v-model="record.${javaField}"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择${comment}"
+                allow-clear
+              />
             </template>
-          </el-table-column>
 #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" != $column.dictType)
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
-                <el-option
-                  v-for="dict in dict.type.$column.dictType"
+            <template v-else-if="column.key === '${javaField}'">
+              <a-select v-model="record.${javaField}" placeholder="请选择${comment}">
+                <a-select-option
+                  v-for="dict in dict.type.${column.dictType}"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
-                ></el-option>
-              </el-select>
+                />
+              </a-select>
             </template>
-          </el-table-column>
 #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" == $column.dictType)
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
-                <el-option label="请选择字典生成" value="" />
-              </el-select>
+            <template v-else-if="column.key === '${javaField}'">
+              <a-select v-model="record.${javaField}" placeholder="请选择${comment}">
+                <a-select-option label="请选择字典生成" value="" />
+              </a-select>
             </template>
-          </el-table-column>
 #end
 #end
-        </el-table>
+          </template>
+        </a-table>
 #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>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}"
+import { SearchOutlined, ReloadOutlined, PlusOutlined, EditOutlined, DeleteOutlined, DownloadOutlined } from '@ant-design/icons-vue'
 
 export default {
   name: "${BusinessName}",
@@ -366,6 +353,7 @@ export default {
       loading: true,
       // 选中数组
       ids: [],
+      selectedRowKeys: [],
 #if($table.sub)
       // 子表选中数据
       checked${subClassName}: [],
@@ -422,7 +410,114 @@ export default {
         ]#if($foreach.count != $columns.size()),#end
 #end
 #end
-      }
+      },
+      // 表格列配置
+      tableColumns: [
+#foreach($column in $columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("("))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.pk)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && $column.htmlType == "datetime")
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          width: 180,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && $column.htmlType == "imageUpload")
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          width: 100,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && "" != $column.dictType)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && "" != $javaField)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          align: 'center',
+          dataIndex: '${javaField}'
+        },
+#end
+#end
+        {
+          key: 'action',
+          title: '操作',
+          align: 'center',
+          width: 150
+        }
+      ]
+#if($table.sub)
+      ,
+      // 子表列配置
+      subTableColumns: [
+        {
+          key: 'index',
+          title: '序号',
+          align: 'center',
+          width: 50
+        },
+#foreach($column in $subTable.columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("("))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.pk || $javaField == ${subTableFkclassName})
+#elseif($column.list && $column.htmlType == "input")
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          width: 150,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && $column.htmlType == "datetime")
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          width: 240,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" != $column.dictType)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          width: 150,
+          dataIndex: '${javaField}'
+        },
+#elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" == $column.dictType)
+        {
+          key: '${javaField}',
+          title: '${comment}',
+          width: 150,
+          dataIndex: '${javaField}'
+        },
+#end
+#end
+      ]
+#end
     }
   },
   created() {
@@ -491,10 +586,11 @@ export default {
       this.handleQuery()
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.${pkColumn.javaField})
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+    handleSelectionChange(selectedKeys, selectedRows) {
+      this.selectedRowKeys = selectedKeys
+      this.ids = selectedRows.map(item => item.${pkColumn.javaField})
+      this.single = selectedRows.length !== 1
+      this.multiple = !selectedRows.length
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -565,7 +661,9 @@ export default {
     },
     /** ${subTable.functionName}添加按钮操作 */
     handleAdd${subClassName}() {
-      let obj = {}
+      let obj = {
+        index: this.${subclassName}List.length + 1
+      }
 #foreach($column in $subTable.columns)
 #if($column.pk || $column.javaField == ${subTableFkclassName})
 #elseif($column.list && "" != $javaField)
@@ -581,14 +679,19 @@ export default {
       } else {
         const ${subclassName}List = this.${subclassName}List
         const checked${subClassName} = this.checked${subClassName}
-        this.${subclassName}List = ${subclassName}List.filter(function(item) {
-          return checked${subClassName}.indexOf(item.index) == -1
+        this.${subclassName}List = ${subclassName}List.filter((item, index) => {
+          return !checked${subClassName}.includes(index)
         })
+        // 重新计算序号
+        this.${subclassName}List.forEach((item, index) => {
+          item.index = index + 1
+        })
+        this.checked${subClassName} = []
       }
     },
     /** 复选框选中数据 */
-    handle${subClassName}SelectionChange(selection) {
-      this.checked${subClassName} = selection.map(item => item.index)
+    handle${subClassName}SelectionChange(selectedKeys, selectedRows) {
+      this.checked${subClassName} = selectedKeys
     },
 #end
     /** 导出按钮操作 */
@@ -600,3 +703,97 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+// 搜索表单布局
+.search-form.ant-form-inline {
+  background: #fff;
+  padding: 0;
+  border-radius: 4px;
+  
+  .ant-form-item {
+    margin-right: 16px;
+    margin-bottom: 16px;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    
+    .ant-form-item-label {
+      padding-right: 8px;
+      flex-shrink: 0;
+      
+      > label {
+        white-space: nowrap;
+        height: 32px;
+        line-height: 32px;
+        margin-bottom: 0;
+      }
+    }
+    
+    .ant-form-item-control {
+      flex: 0 0 auto;
+      display: inline-block;
+    }
+    
+    .ant-form-item-control-input {
+      min-height: 32px;
+      display: flex;
+      align-items: center;
+    }
+    
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+// 按钮工具栏
+.button-toolbar {
+  background: #fff;
+  padding: 0;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  
+  .ant-row {
+    margin: 0;
+    
+    .ant-col {
+      .ant-btn {
+        margin-right: 8px;
+        
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+// 表格容器
+.ant-table-wrapper {
+  background: #fff;
+  padding: 0;
+  border-radius: 4px;
+}
+
+// 表格样式
+.ant-table {
+  .ant-table-thead > tr > th {
+    background-color: #fafafa;
+    font-weight: 600;
+    color: #262626;
+  }
+  
+  .ant-table-tbody > tr > td {
+    padding: 12px 16px;
+  }
+}
+
+// 按钮图标间距
+.ant-btn {
+  .anticon + span,
+  span + .anticon {
+    margin-left: 4px;
+  }
+}
+</style>

+ 13 - 9
yushu-uivue3/src/views/tool/gen/genInfoForm.vue

@@ -13,9 +13,8 @@
 
       <a-col :span="12">
         <a-form-item name="tplWebType" label="前端类型">
-          <a-select v-model:value="info.tplWebType">
-            <a-select-option value="element-ui">Vue2 Element UI 模版</a-select-option>
-            <a-select-option value="element-plus">Vue3 Ant Design Vue 模版</a-select-option>
+          <a-select v-model:value="info.tplWebType" disabled>
+            <a-select-option value="antdv">Ant Design Vue 模版</a-select-option>
           </a-select>
         </a-form-item>
       </a-col>
@@ -286,17 +285,22 @@ function getMenuTreeselect() {
   })
 }
 
-onMounted(() => {
-  getMenuTreeselect()
-})
+// 确保前端类型始终为 antdv(Ant Design Vue)
+watch(() => props.info.tplWebType, val => {
+  if (!val || val === '' || val === 'element-ui' || val === 'element-plus') {
+    props.info.tplWebType = "antdv"
+  }
+}, { immediate: true })
 
 watch(() => props.info.subTableName, val => {
   setSubTableColumns(val)
 })
 
-watch(() => props.info.tplWebType, val => {
-  if (val === '') {
-    props.info.tplWebType = "element-plus"
+onMounted(() => {
+  getMenuTreeselect()
+  // 初始化时确保前端类型为 antdv
+  if (!props.info.tplWebType || props.info.tplWebType === '' || props.info.tplWebType === 'element-ui' || props.info.tplWebType === 'element-plus') {
+    props.info.tplWebType = "antdv"
   }
 })