'add'

src/constant/dict.js

@@ -27,16 +27,16 @@ export const sys_user_gender = [
 ];
 
 export const menu_show_hide = [
-  {
-    label: "隐藏",
-    value: "0",
-    elTagType: "warning",
-  },
   {
     label: "显示",
     value: "1",
     elTagType: "success",
   },
+  {
+    label: "隐藏",
+    value: "0",
+    elTagType: "warning",
+  }
 ];
 
 export const sys_yes_no = [

src/views/system/menu/index.vue

@@ -1,38 +1,17 @@
 <template>
   <div class="app-container">
-    <el-form
+    <el-form v-show="showSearch" ref="queryRef" :inline="true" :model="queryParams">
-      v-show="showSearch"
-      ref="queryRef"
-      :inline="true"
-      :model="queryParams"
-    >
       <el-form-item label="菜单名称" prop="menuName">
-        <el-input
+        <el-input v-model="queryParams.menuName" clearable placeholder="请输入菜单名称" style="width: 200px"
-          v-model="queryParams.menuName"
+          @keyup.enter="handleQuery" />
-          clearable
-          placeholder="请输入菜单名称"
-          style="width: 200px"
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="展示状态" prop="isVisible">
-        <el-select
+        <el-select v-model="queryParams.isVisible" clearable placeholder="展示状态" style="width: 200px">
-          v-model="queryParams.isVisible"
+          <el-option v-for="dict in menu_show_hide" :key="dict.value" :label="dict.label" :value="dict.value" />
-          clearable
-          placeholder="展示状态"
-          style="width: 200px"
-        >
-          <el-option
-            v-for="dict in sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button icon="Search" type="primary" @click="handleQuery"
+        <el-button icon="Search" type="primary" @click="handleQuery">搜索
-          >搜索
         </el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
@@ -40,143 +19,64 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button v-hasPermi="['system:menu:add']" icon="Plus" plain type="primary" @click="handleAdd">新增
-          v-hasPermi="['system:menu:add']"
-          icon="Plus"
-          plain
-          type="primary"
-          @click="handleAdd"
-          >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button icon="Sort" plain type="info" @click="toggleExpandAll"
+        <el-button icon="Sort" plain type="info" @click="toggleExpandAll">展开/折叠
-          >展开/折叠
         </el-button>
       </el-col>
-      <right-toolbar
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        v-model:showSearch="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
     </el-row>
 
-    <el-table
+    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" :default-expand-all="isExpandAll"
-      v-if="refreshTable"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="menuId">
-      v-loading="loading"
+      <el-table-column :show-overflow-tooltip="true" align="center" label="菜单名称" prop="menuName"
-      :data="menuList"
+        width="160"></el-table-column>
-      :default-expand-all="isExpandAll"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      row-key="menuId"
-    >
-      <el-table-column
-        :show-overflow-tooltip="true"
-        align="center"
-        label="菜单名称"
-        prop="menuName"
-        width="160"
-      ></el-table-column>
       <el-table-column align="center" label="图标" prop="icon" width="100">
         <template #default="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column align="center" label="排序" prop="orderNum" width="60"></el-table-column>
-        align="center"
-        label="排序"
-        prop="orderNum"
-        width="60"
-      ></el-table-column>
       <el-table-column width="120"></el-table-column>
-      <el-table-column
+      <el-table-column :show-overflow-tooltip="true" label="权限标识" prop="perms"></el-table-column>
-        :show-overflow-tooltip="true"
+      <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component"></el-table-column>
-        label="权限标识"
+      <el-table-column align="center" label="是否显示" prop="isVisible" width="80">
-        prop="perms"
-      ></el-table-column>
-      <el-table-column
-        :show-overflow-tooltip="true"
-        label="组件路径"
-        prop="component"
-      ></el-table-column>
-      <el-table-column
-        align="center"
-        label="是否显示"
-        prop="isVisible"
-        width="80"
-      >
         <template #default="scope">
           <dict-tag :options="menu_show_hide" :value="scope.row.isVisible" />
         </template>
       </el-table-column>
       <el-table-column width="120"></el-table-column>
-      <el-table-column
+      <el-table-column align="center" label="创建时间" prop="createTime" width="160">
-        align="center"
-        label="创建时间"
-        prop="createTime"
-        width="160"
-      >
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="210">
-        align="center"
-        class-name="small-padding fixed-width"
-        label="操作"
-        width="210"
-      >
         <template #default="scope">
-          <el-button
+          <el-button v-hasPermi="['system:menu:edit']" icon="Edit" link type="primary" @click="handleUpdate(scope.row)">修改
-            v-hasPermi="['system:menu:edit']"
-            icon="Edit"
-            link
-            type="primary"
-            @click="handleUpdate(scope.row)"
-            >修改
           </el-button>
-          <el-button
+          <el-button v-hasPermi="['system:menu:add']" icon="Plus" link type="primary" @click="handleAdd(scope.row)">新增
-            v-hasPermi="['system:menu:add']"
-            icon="Plus"
-            link
-            type="primary"
-            @click="handleAdd(scope.row)"
-            >新增
           </el-button>
-          <el-button
+          <el-button v-hasPermi="['system:menu:remove']" icon="Delete" link type="primary"
-            v-hasPermi="['system:menu:remove']"
+            @click="handleDelete(scope.row)">删除
-            icon="Delete"
-            link
-            type="primary"
-            @click="handleDelete(scope.row)"
-            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog
+    <el-dialog draggable v-model="open" :title="title" append-to-body width="680px">
-      draggable
-      v-model="open"
-      :title="title"
-      append-to-body
-      width="680px"
-    >
       <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单">
-              <el-tree-select
+              <el-tree-select v-model="form.parentId" :data="menuOptions" :props="{
-                v-model="form.parentId"
+                value: 'menuId',
-                :data="menuOptions"
+                label: 'menuName',
-                :props="{
+                children: 'children',
-                  value: 'menuId',
+              }" check-strictly placeholder="选择上级菜单" value-key="menuId" />
-                  label: 'menuName',
-                  children: 'children',
-                }"
-                check-strictly
-                placeholder="选择上级菜单"
-                value-key="menuId"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -190,39 +90,21 @@
           </el-col>
           <el-col v-if="form.menuType != 'F'" :span="24">
             <el-form-item label="菜单图标" prop="icon">
-              <el-popover
+              <el-popover v-model:visible="showChooseIcon" :width="540" placement="bottom-start" trigger="click"
-                v-model:visible="showChooseIcon"
+                @show="showSelectIcon">
-                :width="540"
-                placement="bottom-start"
-                trigger="click"
-                @show="showSelectIcon"
-              >
                 <template #reference>
-                  <el-input
+                  <el-input v-model="form.icon" v-click-outside="hideSelectIcon" placeholder="点击选择图标" readonly
-                    v-model="form.icon"
+                    @blur="showSelectIcon">
-                    v-click-outside="hideSelectIcon"
-                    placeholder="点击选择图标"
-                    readonly
-                    @blur="showSelectIcon"
-                  >
                     <template #prefix>
-                      <svg-icon
+                      <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon"
-                        v-if="form.icon"
+                        style="height: 32px; width: 16px" />
-                        :icon-class="form.icon"
-                        class="el-input__icon"
-                        style="height: 32px; width: 16px"
-                      />
                       <el-icon v-else style="height: 32px; width: 16px">
                         <search />
                       </el-icon>
                     </template>
                   </el-input>
                 </template>
-                <icon-select
+                <icon-select ref="iconSelectRef" :active-icon="form.icon" @selected="selected" />
-                  ref="iconSelectRef"
-                  :active-icon="form.icon"
-                  @selected="selected"
-                />
               </el-popover>
             </el-form-item>
           </el-col>
@@ -233,23 +115,15 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number
+              <el-input-number v-model="form.orderNum" :min="0" controls-position="right" />
-                v-model="form.orderNum"
-                :min="0"
-                controls-position="right"
-              />
             </el-form-item>
           </el-col>
           <el-col v-if="form.menuType != 'F'" :span="12">
             <el-form-item>
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
-                    content="选择是外链则路由地址需要以`http(s)://`开头"
+                    <el-icon><question-filled /></el-icon> </el-tooltip>是否外链
-                    placement="top"
-                  >
-                    <el-icon><question-filled /></el-icon> </el-tooltip
-                  >是否外链
                 </span>
               </template>
               <el-radio-group v-model="form.isFrame">
@@ -262,10 +136,7 @@
             <el-form-item prop="path">
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
-                    content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
-                    placement="top"
-                  >
                     <el-icon><question-filled /></el-icon>
                   </el-tooltip>
                   路由地址
@@ -278,10 +149,7 @@
             <el-form-item prop="component">
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
-                    content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
-                    placement="top"
-                  >
                     <el-icon><question-filled /></el-icon>
                   </el-tooltip>
                   组件路径
@@ -292,17 +160,10 @@
           </el-col>
           <el-col v-if="form.menuType != 'M'" :span="12">
             <el-form-item>
-              <el-input
+              <el-input v-model="form.perms" maxlength="100" placeholder="请输入权限标识" />
-                v-model="form.perms"
-                maxlength="100"
-                placeholder="请输入权限标识"
-              />
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
-                    content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
-                    placement="top"
-                  >
                     <el-icon><question-filled /></el-icon>
                   </el-tooltip>
                   权限字符
@@ -312,17 +173,10 @@
           </el-col>
           <el-col v-if="form.menuType == 'C'" :span="12">
             <el-form-item>
-              <el-input
+              <el-input v-model="form.query" maxlength="255" placeholder="请输入路由参数" />
-                v-model="form.query"
-                maxlength="255"
-                placeholder="请输入路由参数"
-              />
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
-                    content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
-                    placement="top"
-                  >
                     <el-icon><question-filled /></el-icon>
                   </el-tooltip>
                   路由参数
@@ -334,10 +188,7 @@
             <el-form-item>
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
-                    content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
-                    placement="top"
-                  >
                     <el-icon><question-filled /></el-icon>
                   </el-tooltip>
                   是否缓存
@@ -353,45 +204,19 @@
             <el-form-item>
               <template #label>
                 <span>
-                  <el-tooltip
+                  <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
-                    content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
-                    placement="top"
-                  >
                     <el-icon><question-filled /></el-icon>
                   </el-tooltip>
                   显示状态
                 </span>
               </template>
               <el-radio-group v-model="form.isVisible">
-                <el-radio label="1"> 显示</el-radio>
+                <el-radio v-for="dict in menu_show_hide" :key="dict.value" :label="dict.value">
-                <el-radio label="0"> 隐藏</el-radio>
+                  {{ dict.label }}
-                <!--                        <el-radio-->
+                </el-radio>
-                <!--                           v-for="dict in sys_show_hide"-->
-                <!--                           :key="dict.value"-->
-                <!--                           :label="dict.value"-->
-                <!--                        >{{ dict.label }}</el-radio>-->
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <!--               <el-col :span="12" v-if="form.menuType != 'F'">-->
-          <!--                  <el-form-item>-->
-          <!--                     <template #label>-->
-          <!--                        <span>-->
-          <!--                           <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">-->
-          <!--                              <el-icon><question-filled /></el-icon>-->
-          <!--                           </el-tooltip>-->
-          <!--                           菜单状态-->
-          <!--                        </span>-->
-          <!--                     </template>-->
-          <!--                     <el-radio-group v-model="form.status">-->
-          <!--                        <el-radio-->
-          <!--                           v-for="dict in sys_normal_disable"-->
-          <!--                           :key="dict.value"-->
-          <!--                           :label="dict.value"-->
-          <!--                        >{{ dict.label }}</el-radio>-->
-          <!--                     </el-radio-group>-->
-          <!--                  </el-form-item>-->
-          <!--               </el-col>-->
         </el-row>
       </el-form>
       <template #footer>
@@ -599,7 +424,7 @@ function handleDelete(row) {
       getList();
       proxy.$modal.msgSuccess("删除成功");
     })
-    .catch(() => {});
+    .catch(() => { });
 }
 
 getList();