feat: ✨ 菜单新增目录在只有一个子路由情况下是否始终显示的设置

Former-commit-id: fcbd963b9c74b7bdf09c59420bd62ad2bf2592bd
2023-10-22 00:05:34 +08:00
parent 6b5cbba7cd
commit ab0851d439
4 changed files with 119 additions and 76 deletions
--- a/src/api/menu/types.ts
+++ b/src/api/menu/types.ts
@@ -112,4 +112,13 @@ export interface MenuForm {
   * 权限标识
   */
  perm?: string;
+  /**
+   * 【菜单】是否开启页面缓存
+   */
+  keepAlive?: number;
+
+  /**
+   * 【目录】只有一个子路由是否始终显示
+   */
+  alwaysShow?: number;
 }
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -3,12 +3,11 @@ import path from "path-browserify";
 import { isExternal } from "@/utils/index";
 import AppLink from "./Link.vue";

-import { translateRouteTitleI18n } from "@/utils/i18n";
-import SvgIcon from "@/components/SvgIcon/index.vue";
+import Item from "./Item.vue";

 const props = defineProps({
  /**
-   * 路由(eg:level_3_1)
+   * 路由(eg:user)
   */
  item: {
    type: Object,
@@ -16,12 +15,16 @@ const props = defineProps({
  },

  /**
-   * 父层级完整路由路径(eg:/level/level_3/level_3_1)
+   * 父层级完整路由路径(eg:/system)
   */
  basePath: {
    type: String,
    required: true,
  },
+  isNest: {
+    type: Boolean,
+    default: false,
+  },
 });

 const onlyOneChild = ref(); // 临时变量，唯一子路由
@@ -36,32 +39,33 @@ const onlyOneChild = ref(); // 临时变量，唯一子路由
 * @param parent 当前路由
 */
 function hasOneShowingChild(children = [], parent: any) {
-  // 需要显示的子路由数组
+  // 子路由集合
  const showingChildren = children.filter((item: any) => {
    if (item.meta?.hidden) {
-      return false; // 过滤不显示的子路由
+      // 过滤不显示的子路由
+      return false;
    } else {
-      onlyOneChild.value = item; // 唯一子路由赋值（多个子路由情况 onlyOneChild 变量是用不上的）
+      // 临时变量（多个子路由 onlyOneChild 变量是用不上的）
+      onlyOneChild.value = item;
      return true;
    }
  });

-  // 1：如果只有一个子路由, 返回 true
+  // 如果只有一个子路由, 返回 true
  if (showingChildren.length === 1) {
    return true;
  }

-  // 2：如果无子路由, 复制当前路由信息作为其子路由，满足只拥有一个子路由的条件，所以返回 true
+  // 如果没有子路由，显示父级路由
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
-
    return true;
  }
  return false;
 }

 /**
- * 解析路径
+ *  解析路由路径(相对路径 → 绝对路径)
 *
 * @param routePath 路由路径
 */
@@ -73,53 +77,48 @@ function resolvePath(routePath: string) {
    return props.basePath;
  }

-  // 完整路径 = 父级路径(/level/level_3) + 路由路径
-  const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
+  // 完整路径(/system/user) = 父级路径(/system) + 路由路径(user)
+  const fullPath = path.resolve(props.basePath, routePath);
  return fullPath;
 }
 </script>
 <template>
  <div v-if="!item.meta || !item.meta.hidden">
-    <!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
+    <!-- 无子路由 || 一个子路由（始终显示 alwaysShow = false 情况） -->
    <template
      v-if="
        hasOneShowingChild(item.children, item) &&
-        (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.meta?.alwaysShow
      "
    >
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          <svg-icon
-            class="mr-1"
-            :icon-class="
-              onlyOneChild.meta && onlyOneChild.meta.icon
-                ? onlyOneChild.meta.icon
-                : 'menu'
-            "
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            :title="onlyOneChild.meta.title"
          />
-
-          <template #title>
-            {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
-          </template>
        </el-menu-item>
      </app-link>
    </template>

-    <!-- 包含多个子路由  -->
+    <!-- 有子路由  -->
    <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
      <template #title>
-        <svg-icon
-          v-if="item.meta && item.meta.icon"
-          :icon-class="item.meta.icon"
+        <item
+          v-if="item.meta"
+          :icon="item.meta && item.meta.icon"
+          :title="item.meta.title"
        />
-        <span v-if="item.meta && item.meta.title">{{
-          translateRouteTitleI18n(item.meta.title)
-        }}</span>
      </template>

      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
+        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
      />
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -38,6 +38,7 @@ export const constantRoutes: RouteRecordRaw[] = [
          icon: "homepage",
          affix: true,
          keepAlive: true,
+          alwaysShow: false,
        },
      },
      {
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,4 +1,10 @@
 <script setup lang="ts">
+defineOptions({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Menu",
+  inheritAttrs: false,
+});
+
 import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
 import {
  listMenus,
@@ -14,12 +20,6 @@ import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconSelect from "@/components/IconSelect/index.vue";

-defineOptions({
-  // eslint-disable-next-line vue/no-reserved-component-names
-  name: "Menu",
-  inheritAttrs: false,
-});
-
 const queryFormRef = ref(ElForm);
 const menuFormRef = ref(ElForm);

@@ -38,6 +38,8 @@ const formData = reactive<MenuForm>({
  visible: 1,
  sort: 1,
  type: MenuTypeEnum.MENU,
+  alwaysShow: 0,
+  keepAlive: 0,
 });

 const rules = reactive({
@@ -45,9 +47,9 @@ const rules = reactive({
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
  path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
-  component: [
-    { required: true, message: "请输入组件完整路径", trigger: "blur" },
-  ],
+
+  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
+  visible: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
 });

 // 选择表格的行菜单ID
@@ -183,6 +185,8 @@ function resetForm() {
  formData.component = undefined;
  formData.path = undefined;
  formData.redirect = undefined;
+  formData.alwaysShow = undefined;
+  formData.keepAlive = undefined;
 }

 onMounted(() => {
@@ -214,7 +218,7 @@ onMounted(() => {
      </el-form>
    </div>

-    <el-card shadow="never" size="small">
+    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button
          v-hasPerm="['sys:menu:add']"
@@ -230,25 +234,17 @@ onMounted(() => {
        v-loading="loading"
        :data="menuList"
        highlight-current-row
+        row-key="id"
+        :expand-row-keys="['1']"
+        @row-click="onRowClick"
        :tree-props="{
          children: 'children',
          hasChildren: 'hasChildren',
        }"
-        row-key="id"
-        default-expand-all
-        border
-        size="small"
-        @row-click="onRowClick"
      >
        <el-table-column label="菜单名称" min-width="200">
          <template #default="scope">
-            <svg-icon
-              :icon-class="
-                scope.row.type === MenuTypeEnum.BUTTON
-                  ? 'button'
-                  : scope.row.icon
-              "
-            />
+            <svg-icon :icon-class="scope.row.icon" />
            {{ scope.row.name }}
          </template>
        </el-table-column>
@@ -343,14 +339,15 @@ onMounted(() => {
      :title="dialog.title"
      destroy-on-close
      append-to-body
-      width="750px"
+      width="1000px"
      @close="closeDialog"
+      top="5vh"
    >
      <el-form
        ref="menuFormRef"
        :model="formData"
        :rules="rules"
-        label-width="100px"
+        label-width="160px"
      >
        <el-form-item label="父级菜单" prop="parentId">
          <el-tree-select
@@ -420,9 +417,62 @@ onMounted(() => {
          </el-input>
        </el-form-item>

+        <el-form-item
+          v-if="formData.type !== MenuTypeEnum.BUTTON"
+          prop="visible"
+          label="显示状态"
+        >
+          <el-radio-group v-model="formData.visible">
+            <el-radio :label="1">显示</el-radio>
+            <el-radio :label="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type === MenuTypeEnum.CATALOG"
+          label="根目录始终显示"
+        >
+          <template #label>
+            <div>
+              根目录始终显示
+              <el-tooltip placement="bottom" effect="light">
+                <template #content
+                  >是：根目录只有一个子路由显示目录
+                  <br />否：根目录只有一个子路由不显示目录，只显示子路由
+                </template>
+                <i-ep-QuestionFilled class="inline-block" />
+              </el-tooltip>
+            </div>
+          </template>
+
+          <el-radio-group v-model="formData.alwaysShow">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type === MenuTypeEnum.MENU"
+          label="是否缓存"
+        >
+          <el-radio-group v-model="formData.keepAlive">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            style="width: 100px"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+
        <!-- 权限标识 -->
        <el-form-item
-          v-if="formData.type == 'BUTTON'"
+          v-if="formData.type == MenuTypeEnum.BUTTON"
          label="权限标识"
          prop="perm"
        >
@@ -430,7 +480,7 @@ onMounted(() => {
        </el-form-item>

        <el-form-item
-          v-if="formData.type !== 'BUTTON'"
+          v-if="formData.type !== MenuTypeEnum.BUTTON"
          label="图标"
          prop="icon"
        >
@@ -444,22 +494,6 @@ onMounted(() => {
        >
          <el-input v-model="formData.redirect" placeholder="跳转路由" />
        </el-form-item>
-
-        <el-form-item v-if="formData.type !== 'BUTTON'" label="状态">
-          <el-radio-group v-model="formData.visible">
-            <el-radio :label="1">显示</el-radio>
-            <el-radio :label="0">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 100px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
      </el-form>

      <template #footer>