refactor: 菜单列表优化

Former-commit-id: f5a697443ddcf5ef0a5c90416eb7e9267875e66d

README.md

@@ -121,7 +121,7 @@
 1. 访问后端项目仓库地址：https://gitee.com/youlaiorg/youlai-boot.git
 
 2. 根据项目说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 的描述完成数据库的创建和后端工程的启动；
-3. 进入 [vite.config.ts](vite.config.ts) 文件修改代理线上接口地址地址 http://sapi.youlai.tech 为本地接口地址 http://localhost:8989 即可。
+3. 进入 [vite.config.ts](vite.config.ts) 文件修改代理线上接口地址 http://sapi.youlai.tech 为本地接口地址 http://localhost:8989 即可。
 
 
 

src/types/api/menu.d.ts

@@ -2,7 +2,7 @@
  * 菜单查询参数类型声明
  */
 export interface MenuQueryParam {
-  name: string;
+  keywords?: string;
 }
 
 /**

src/views/system/menu/index.vue

@@ -1,120 +1,128 @@
 <template>
   <div class="app-container">
-    <!-- 搜索表单 -->
+    <div class="search">
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="菜单名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <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>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-card>
+      <template #header>
         <el-button type="success" :icon="Plus" @click="handleAdd"
           >新增</el-button
         >
-      </el-form-item>
+      </template>
 
-      <el-form-item prop="name">
+      <el-table
-        <el-input
+        v-loading="loading"
-          v-model="queryParams.name"
+        :data="menuList"
-          placeholder="菜单名称"
+        highlight-current-row
-          clearable
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          @keyup.enter="handleQuery"
+        @row-click="handleRowClick"
+        row-key="id"
+        border
+        default-expand-all
+      >
+        <el-table-column label="菜单名称">
+          <template #default="scope">
+            <svg-icon
+              :icon-class="
+                scope.row.type === 'BUTTON' ? 'button' : scope.row.icon
+              "
+            />
+            {{ scope.row.name }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="菜单类型" align="center" width="150">
+          <template #default="scope">
+            <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
+              >目录</el-tag
+            >
+            <el-tag v-if="scope.row.type === 'MENU'" type="success"
+              >菜单</el-tag
+            >
+            <el-tag v-if="scope.row.type === 'BUTTON'" type="danger"
+              >按钮</el-tag
+            >
+            <el-tag v-if="scope.row.type === 'EXTLINK'" type="info"
+              >外链</el-tag
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="权限标识"
+          align="center"
+          width="200"
+          prop="perm"
         />
-      </el-form-item>
+
-      <el-form-item>
+        <el-table-column label="状态" align="center" width="150">
-        <el-button type="primary" :icon="Search" @click="handleQuery"
+          <template #default="scope">
-          >搜索</el-button
+            <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
+            <el-tag v-else type="info">隐藏</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="排序" align="center" width="100" prop="sort" />
+
+        <el-table-column
+          label="创建时间"
+          align="center"
+          width="200"
+          prop="createTime"
         >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-table-column>
-      </el-form-item>
-    </el-form>
 
-    <!-- 数据表格 -->
+        <el-table-column
-    <el-table
+          label="修改时间"
-      v-loading="loading"
+          align="center"
-      :data="menuList"
+          width="200"
-      highlight-current-row
+          prop="updateTime"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
-      @row-click="handleRowClick"
+        </el-table-column>
-      row-key="id"
-      border
-      default-expand-all
-    >
-      <el-table-column label="菜单名称">
-        <template #default="scope">
-          <svg-icon
-            :icon-class="
-              scope.row.type === 'BUTTON' ? 'button' : scope.row.icon
-            "
-          />
-          {{ scope.row.name }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="菜单类型" align="center" width="150">
-        <template #default="scope">
-          <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
-            >目录</el-tag
-          >
-          <el-tag v-if="scope.row.type === 'MENU'" type="success">菜单</el-tag>
-          <el-tag v-if="scope.row.type === 'BUTTON'" type="danger">按钮</el-tag>
-          <el-tag v-if="scope.row.type === 'EXTLINK'" type="info">外链</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="权限标识"
-        align="center"
-        width="200"
-        prop="perm"
-      />
-
-      <el-table-column label="状态" align="center" width="150">
-        <template #default="scope">
-          <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
-          <el-tag v-else type="info">隐藏</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="排序" align="center" width="100" prop="sort" />
-
-      <el-table-column
-        label="创建时间"
-        align="center"
-        width="200"
-        prop="createTime"
-      >
-      </el-table-column>
-
-      <el-table-column
-        label="修改时间"
-        align="center"
-        width="200"
-        prop="updateTime"
-      >
-      </el-table-column>
-
-      <el-table-column label="操作" align="center" width="200">
-        <template #default="scope">
-          <el-button
-            type="success"
-            :icon="Plus"
-            circle
-            plain
-            @click.stop="handleAdd(scope.row)"
-          />
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
 
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button
+              type="success"
+              :icon="Plus"
+              circle
+              plain
+              @click.stop="handleAdd(scope.row)"
+            />
+            <el-button
+              type="primary"
+              :icon="Edit"
+              circle
+              plain
+              @click.stop="handleUpdate(scope.row)"
+            />
+            <el-button
+              type="danger"
+              :icon="Delete"
+              circle
+              plain
+              @click.stop="handleDelete(scope.row)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
     <!-- dialog -->
     <el-dialog
       :title="dialog.title"