【新增】菜单新增是否缓存、是否隐藏的字段

yudao-ui-admin/src/store/modules/permission.js

@@ -53,8 +53,10 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
     // 处理 meta 属性
     route.meta = {
       title: route.name,
-      icon: route.icon
+      icon: route.icon,
+      noCache: !route.keepAlive,
     }
+    route.hidden = !route.visible
     // 处理 component 属性
     if (route.children) { // 父节点
       if (route.parentId === 0) {

yudao-ui-admin/src/views/system/menu/index.vue

@@ -61,8 +61,8 @@
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单">
@@ -79,7 +79,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item v-if="form.type != '3'" label="菜单图标">
+            <el-form-item v-if="form.type !== 3" label="菜单图标">
               <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                 <IconSelect ref="iconSelect" @selected="selected" />
                 <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
@@ -101,28 +101,74 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-if="form.type != '3'" label="路由地址" prop="path">
+            <el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
+              <span slot="label">
+                <el-tooltip content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头" placement="top">
+                <i class="el-icon-question" />
+                </el-tooltip>
+                路由地址
+              </span>
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.type == '2'">
+          <el-col :span="12" v-if="form.type === 2">
             <el-form-item label="组件路径" prop="component">
               <el-input v-model="form.component" placeholder="请输入组件路径" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-if="form.type != '1'" label="权限标识">
+            <el-form-item v-if="form.type !== 1" label="权限标识">
+              <span slot="label">
+                <el-tooltip content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                权限字符
+              </span>
               <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="菜单状态">
+            <el-form-item label="菜单状态" prop="status">
+              <span slot="label">
+                <el-tooltip content="选择停用时，路由将不会出现在侧边栏，也不能被访问" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                菜单状态
+              </span>
               <el-radio-group v-model="form.status">
                 <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
                           :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.type !== 3" label="显示状态">
+              <span slot="label">
+                <el-tooltip content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                是否显示
+              </span>
+              <el-radio-group v-model="form.visible">
+                <el-radio :key="true" :label="true">显示</el-radio>
+                <el-radio :key="false" :label="false">隐藏</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.type === 2" label="显示状态">
+              <span slot="label">
+                <el-tooltip content="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                 是否缓存
+              </span>
+              <el-radio-group v-model="form.keepAlive">
+                <el-radio :key="true" :label="true">缓存</el-radio>
+                <el-radio :key="false" :label="false">不缓存</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -244,7 +290,9 @@ export default {
         icon: undefined,
         type: SystemMenuTypeEnum.DIR,
         sort: undefined,
-        status: CommonStatusEnum.ENABLE
+        status: CommonStatusEnum.ENABLE,
+        visible: true,
+        keepAlive: true,
       };
       this.resetForm("form");
     },