Kaynağa Gözat

代码生成修改

ys 2 hafta önce
ebeveyn
işleme
78b8039d33

+ 305 - 159
yushu-backend/yushu-generator/src/main/resources/vm/vue/v3/index-tree.vue.vm

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <a-form :model="queryParams" ref="queryRef" 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,89 +12,85 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.htmlType == "input")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-input
-          v-model="queryParams.${column.javaField}"
+      <a-form-item label="${comment}" name="${column.javaField}">
+        <a-input
+          v-model:value="queryParams.${column.javaField}"
           placeholder="请输入${comment}"
-          clearable
-          @keyup.enter="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:value="queryParams.${column.javaField}" placeholder="请选择${comment}" allow-clear>
+          <a-select-option
             v-for="dict in ${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:value="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
-          v-model="queryParams.${column.javaField}"
-          type="date"
+      <a-form-item label="${comment}" name="${column.javaField}">
+        <a-date-picker
+          v-model:value="queryParams.${column.javaField}"
           value-format="YYYY-MM-DD"
-          placeholder="选择${comment}">
-        </el-date-picker>
-      </el-form-item>
+          placeholder="请选择${comment}"
+          allow-clear
+        />
+      </a-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}" style="width: 308px">
-        <el-date-picker
-          v-model="daterange${AttrName}"
+      <a-form-item label="${comment}">
+        <a-range-picker
+          v-model:value="daterange${AttrName}"
           value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
+          style="width: 308px"
+        />
+      </a-form-item>
 #end
 #end
 #end
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+      <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="Plus"
-          @click="handleAdd"
-          v-hasPermi="['${permissionPrefix}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="Sort"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="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 v-model:showSearch="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("("))
@@ -105,47 +101,50 @@
 #end
 #if($column.pk)
 #elseif($column.list && $column.htmlType == "datetime")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template #default="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 #default="scope">
-          <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
+        <template v-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 #default="scope">
+        <template v-if="column.key === '${javaField}'">
 #if($column.htmlType == "checkbox")
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
+          <dict-tag :options="${column.dictType}" :value="record.${javaField} ? record.${javaField}.split(',') : []"/>
 #else
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
+          <dict-tag :options="${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-if="column.key === '${javaField}'">
+          <span>{{ record.${javaField} }}</span>
+        </template>
 #else
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
+        <template v-else-if="column.key === '${javaField}'">
+          <span>{{ record.${javaField} }}</span>
+        </template>
 #end
 #end
 #end
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${permissionPrefix}:edit']">修改</el-button>
-          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${permissionPrefix}:add']">新增</el-button>
-          <el-button link type="primary" 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" @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>
-      </el-table-column>
-    </el-table>
+      </template>
+    </a-table>
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
+    <a-modal :title="title" v-model:open="open" width="500px" @ok="submitForm" @cancel="cancel">
+      <a-form ref="${businessName}Ref" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
 #foreach($column in $columns)
 #set($field=$column.javaField)
 #if($column.insert && !$column.pk)
@@ -158,36 +157,35 @@
 #end
 #set($dictType=$column.dictType)
 #if("" != $treeParentCode && $column.javaField == $treeParentCode)
-        <el-form-item label="${comment}" prop="${treeParentCode}">
-          <el-tree-select
-            v-model="form.${treeParentCode}"
-            :data="${businessName}Options"
-            :props="{ value: '${treeCode}', label: '${treeName}', children: 'children' }"
-            value-key="${treeCode}"
+        <a-form-item label="${comment}" name="${treeParentCode}">
+          <a-tree-select
+            v-model:value="form.${treeParentCode}"
+            :tree-data="${businessName}Options"
+            :field-names="{ value: '${treeCode}', label: '${treeName}', children: 'children' }"
+            :tree-default-expand-all="true"
             placeholder="请选择${comment}"
-            check-strictly
           />
-        </el-form-item>
+        </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:value="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:value="form.${field}" placeholder="请选择${comment}">
+            <a-select-option
               v-for="dict in ${dictType}"
               :key="dict.value"
               :label="dict.label"
@@ -196,82 +194,77 @@
 #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:value="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:value="form.${field}">
+            <a-checkbox
               v-for="dict in ${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:value="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:value="form.${field}">
+            <a-radio
               v-for="dict in ${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:value="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
-            v-model="form.${field}"
-            type="date"
+        <a-form-item label="${comment}" name="${field}">
+          <a-date-picker
+            v-model:value="form.${field}"
             value-format="YYYY-MM-DD"
-            placeholder="选择${comment}">
-          </el-date-picker>
-        </el-form-item>
+            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:value="form.${field}" placeholder="请输入内容" />
+        </a-form-item>
 #end
 #end
 #end
 #end
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script setup name="${BusinessName}">
 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}"
+import { SearchOutlined, ReloadOutlined, PlusOutlined, EditOutlined, DeleteOutlined, SortAscendingOutlined } from '@ant-design/icons-vue'
 
 const { proxy } = getCurrentInstance()
 #if(${dicts} != '')
@@ -294,6 +287,65 @@ const daterange${AttrName} = ref([])
 #end
 #end
 
+// 表格列配置
+const 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
+  }
+]
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -472,3 +524,97 @@ function handleDelete(row) {
 
 getList()
 </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>

+ 423 - 220
yushu-backend/yushu-generator/src/main/resources/vm/vue/v3/index.vue.vm

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <a-form :model="queryParams" ref="queryRef" 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,104 +12,104 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.htmlType == "input")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-input
-          v-model="queryParams.${column.javaField}"
+      <a-form-item label="${comment}" name="${column.javaField}">
+        <a-input
+          v-model:value="queryParams.${column.javaField}"
           placeholder="请输入${comment}"
-          clearable
-          @keyup.enter="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:value="queryParams.${column.javaField}" placeholder="请选择${comment}" allow-clear>
+          <a-select-option
             v-for="dict in ${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:value="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
-          v-model="queryParams.${column.javaField}"
-          type="date"
+      <a-form-item label="${comment}" name="${column.javaField}">
+        <a-date-picker
+          v-model:value="queryParams.${column.javaField}"
           value-format="YYYY-MM-DD"
-          placeholder="请选择${comment}">
-        </el-date-picker>
-      </el-form-item>
+          placeholder="请选择${comment}"
+          allow-clear
+        />
+      </a-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}" style="width: 308px">
-        <el-date-picker
-          v-model="daterange${AttrName}"
+      <a-form-item label="${comment}">
+        <a-range-picker
+          v-model:value="daterange${AttrName}"
           value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
+          style="width: 308px"
+        />
+      </a-form-item>
 #end
 #end
 #end
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+      <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="Plus"
-          @click="handleAdd"
-          v-hasPermi="['${permissionPrefix}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['${permissionPrefix}:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['${permissionPrefix}:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['${permissionPrefix}:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="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 v-model:showSearch="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("("))
@@ -119,40 +119,41 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.pk)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
+        <template v-else-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 #default="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 #default="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 #default="scope">
+        <template v-else-if="column.key === '${javaField}'">
 #if($column.htmlType == "checkbox")
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
+          <dict-tag :options="${column.dictType}" :value="record.${javaField} ? record.${javaField}.split(',') : []"/>
 #else
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
+          <dict-tag :options="${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 #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${permissionPrefix}:edit']">修改</el-button>
-          <el-button link type="primary" 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"
@@ -163,8 +164,8 @@
     />
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
+    <a-modal :title="title" v-model:open="open" width="500px" @ok="submitForm" @cancel="cancel">
+      <a-form ref="${businessName}Ref" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
 #foreach($column in $columns)
 #set($field=$column.javaField)
 #if($column.insert && !$column.pk)
@@ -177,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:value="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:value="form.${field}" placeholder="请选择${comment}">
+            <a-select-option
               v-for="dict in ${dictType}"
               :key="dict.value"
               :label="dict.label"
@@ -204,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:value="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:value="form.${field}">
+            <a-checkbox
               v-for="dict in ${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:value="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:value="form.${field}">
+            <a-radio
               v-for="dict in ${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:value="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
-            v-model="form.${field}"
-            type="date"
+        <a-form-item label="${comment}" name="${field}">
+          <a-date-picker
+            v-model:value="form.${field}"
             value-format="YYYY-MM-DD"
-            placeholder="请选择${comment}">
-          </el-date-picker>
-        </el-form-item>
+            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:value="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="Plus" @click="handleAdd${subClassName}">添加</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" icon="Delete" @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>{{ record.index || (index + 1) }}</span>
+            </template>
 #foreach($column in $subTable.columns)
 #set($javaField=$column.javaField)
 #set($parentheseIndex=$column.columnComment.indexOf("("))
@@ -290,60 +299,48 @@
 #end
 #if($column.pk || $javaField == ${subTableFkclassName})
 #elseif($column.list && $column.htmlType == "input")
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template #default="scope">
-              <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
+            <template v-else-if="column.key === '${javaField}'">
+              <a-input v-model:value="record.${javaField}" placeholder="请输入${comment}" />
             </template>
-          </el-table-column>
 #elseif($column.list && $column.htmlType == "datetime")
-          <el-table-column label="$comment" prop="${javaField}" width="240">
-            <template #default="scope">
-              <el-date-picker clearable
-                v-model="scope.row.$javaField"
-                type="date"
+            <template v-else-if="column.key === '${javaField}'">
+              <a-date-picker
+                v-model:value="record.${javaField}"
                 value-format="YYYY-MM-DD"
-                placeholder="请选择$comment">
-              </el-date-picker>
+                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 #default="scope">
-              <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
-                <el-option
-                  v-for="dict in $column.dictType"
+            <template v-else-if="column.key === '${javaField}'">
+              <a-select v-model:value="record.${javaField}" placeholder="请选择${comment}">
+                <a-select-option
+                  v-for="dict in ${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 #default="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:value="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>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script setup name="${BusinessName}">
 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'
 
 const { proxy } = getCurrentInstance()
 #if(${dicts} != '')
@@ -359,6 +356,7 @@ const open = ref(false)
 const loading = ref(true)
 const showSearch = ref(true)
 const ids = ref([])
+const selectedRowKeys = ref([])
 #if($table.sub)
 const checked${subClassName} = ref([])
 #end
@@ -373,6 +371,114 @@ const daterange${AttrName} = ref([])
 #end
 #end
 
+// 表格列配置
+const 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)
+// 子表列配置
+const 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
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -470,10 +576,11 @@ function resetQuery() {
 }
 
 // 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.${pkColumn.javaField})
-  single.value = selection.length != 1
-  multiple.value = !selection.length
+function handleSelectionChange(selectedKeys, selectedRows) {
+  selectedRowKeys.value = selectedKeys
+  ids.value = selectedRows.map(item => item.${pkColumn.javaField})
+  single.value = selectedRows.length != 1
+  multiple.value = !selectedRows.length
 }
 
 /** 新增按钮操作 */
@@ -543,14 +650,11 @@ function handleDelete(row) {
 }
 
 #if($table.sub)
-/** ${subTable.functionName}序号 */
-function row${subClassName}Index({ row, rowIndex }) {
-  row.index = rowIndex + 1
-}
-
 /** ${subTable.functionName}添加按钮操作 */
 function handleAdd${subClassName}() {
-  let obj = {}
+  let obj = {
+    index: ${subclassName}List.value.length + 1
+  }
 #foreach($column in $subTable.columns)
 #if($column.pk || $column.javaField == ${subTableFkclassName})
 #elseif($column.list && "" != $javaField)
@@ -567,15 +671,20 @@ function handleDelete${subClassName}() {
   } else {
     const ${subclassName}s = ${subclassName}List.value
     const checked${subClassName}s = checked${subClassName}.value
-    ${subclassName}List.value = ${subclassName}s.filter(function(item) {
-      return checked${subClassName}s.indexOf(item.index) == -1
+    ${subclassName}List.value = ${subclassName}s.filter(function(item, index) {
+      return !checked${subClassName}s.includes(index)
+    })
+    // 重新计算序号
+    ${subclassName}List.value.forEach((item, index) => {
+      item.index = index + 1
     })
+    checked${subClassName}.value = []
   }
 }
 
 /** 复选框选中数据 */
-function handle${subClassName}SelectionChange(selection) {
-  checked${subClassName}.value = selection.map(item => item.index)
+function handle${subClassName}SelectionChange(selectedKeys, selectedRows) {
+  checked${subClassName}.value = selectedKeys
 }
 
 #end
@@ -588,3 +697,97 @@ function handleExport() {
 
 getList()
 </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>

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

@@ -15,7 +15,7 @@
         <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 Element Plus 模版</a-select-option>
+            <a-select-option value="element-plus">Vue3 Ant Design Vue 模版</a-select-option>
           </a-select>
         </a-form-item>
       </a-col>

+ 101 - 69
yushu-uivue3/src/views/tool/gen/index.vue

@@ -19,79 +19,39 @@
           @pressEnter="handleQuery"
         />
       </a-form-item>
-      <a-form-item label="创建时间" style="width: 308px">
+      <a-form-item label="创建时间">
         <a-range-picker
           v-model:value="dateRange"
-          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          style="width: 308px"
         />
       </a-form-item>
       <a-form-item>
-        <a-button type="primary" @click="handleQuery">
-          <template #icon><SearchOutlined /></template>
-          搜索
-        </a-button>
-        <a-button @click="resetQuery" style="margin-left: 8px">
-          <template #icon><ReloadOutlined /></template>
-          重置
-        </a-button>
+        <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>
 
-    <a-row :gutter="10" class="mb8 button-toolbar">
-      <a-col :span="1.5">
-        <a-button
-          type="primary"
-          :disabled="multiple"
-          @click="handleGenTable"
-          v-hasPermi="['tool:gen:code']"
-        >
-          <template #icon><DownloadOutlined /></template>
-          生成
-        </a-button>
-      </a-col>
-      <a-col :span="1.5">
-        <a-button
-          type="primary"
-          @click="openCreateTable"
-          v-hasRole="['admin']"
-        >
-          <template #icon><PlusOutlined /></template>
-          创建
-        </a-button>
-      </a-col>
-      <a-col :span="1.5">
-        <a-button
-          @click="openImportTable"
-          v-hasPermi="['tool:gen:import']"
-        >
-          <template #icon><UploadOutlined /></template>
-          导入
-        </a-button>
-      </a-col>
-      <a-col :span="1.5">
-        <a-button
-          type="primary"
-          :disabled="single"
-          @click="handleEditTable"
-          v-hasPermi="['tool:gen:edit']"
-        >
-          <template #icon><EditOutlined /></template>
-          修改
-        </a-button>
-      </a-col>
-      <a-col :span="1.5">
-        <a-button
-          danger
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['tool:gen:remove']"
-        >
-          <template #icon><DeleteOutlined /></template>
-          删除
-        </a-button>
-      </a-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </a-row>
+    <div class="button-toolbar">
+      <a-row :gutter="10">
+        <a-col :span="1.5">
+          <a-button type="primary" :disabled="multiple" @click="handleGenTable" v-hasPermi="['tool:gen:code']"><DownloadOutlined />生成</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button type="primary" @click="openCreateTable" v-hasRole="['admin']"><PlusOutlined />创建</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button @click="openImportTable" v-hasPermi="['tool:gen:import']"><UploadOutlined />导入</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button type="primary" style="background-color: #52c41a; border-color: #52c41a" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']"><EditOutlined />修改</a-button>
+        </a-col>
+        <a-col :span="1.5">
+          <a-button danger :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']"><DeleteOutlined />删除</a-button>
+        </a-col>
+        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </a-row>
+    </div>
 
     <a-table 
       ref="genRef" 
@@ -352,24 +312,96 @@ function handleDelete(row) {
 getList()
 </script>
 
-<style scoped>
-.search-form {
+<style lang="scss" scoped>
+// 搜索表单布局
+.search-form.ant-form-inline {
   background: #fff;
   padding: 0;
   border-radius: 4px;
-  margin-bottom: 0;
+  
+  .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: 0;
+  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>