feat(route): add hideChildrenInMenu option close #346

This commit is contained in:
Vben 2021-03-18 21:13:15 +08:00
parent f55ad2f90a
commit b67cf22dfc
11 changed files with 43 additions and 70 deletions

View File

@ -118,14 +118,15 @@
"vite-plugin-style-import": "^0.8.1", "vite-plugin-style-import": "^0.8.1",
"vite-plugin-svg-icons": "^0.3.5", "vite-plugin-svg-icons": "^0.3.5",
"vite-plugin-theme": "^0.5.0", "vite-plugin-theme": "^0.5.0",
"vite-plugin-windicss": "0.9.1", "vite-plugin-windicss": "0.9.2",
"vue-eslint-parser": "^7.6.0", "vue-eslint-parser": "^7.6.0",
"yargs": "^16.2.0" "yargs": "^16.2.0"
}, },
"resolutions": { "resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it", "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
"bin-wrapper": "npm:bin-wrapper-china", "bin-wrapper": "npm:bin-wrapper-china",
"rollup": "2.41.4" "rollup": "2.41.5",
"vite": "2.0.5"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

View File

@ -3,12 +3,10 @@
--> -->
<script lang="ts"> <script lang="ts">
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { defineComponent, unref } from 'vue'; import { defineComponent } from 'vue';
import { PermissionModeEnum } from '/@/enums/appEnum';
import { RoleEnum } from '/@/enums/roleEnum'; import { RoleEnum } from '/@/enums/roleEnum';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { usePermission } from '/@/hooks/web/usePermission'; import { usePermission } from '/@/hooks/web/usePermission';
import { getSlot } from '/@/utils/helper/tsxHelper'; import { getSlot } from '/@/utils/helper/tsxHelper';
@ -28,23 +26,12 @@
}, },
}, },
setup(props, { slots }) { setup(props, { slots }) {
const { getPermissionMode } = useRootSetting();
const { hasPermission } = usePermission(); const { hasPermission } = usePermission();
/** /**
* Render role button * Render role button
*/ */
function renderRoleAuth() { function renderAuth() {
const { value } = props;
if (!value) {
return getSlot(slots);
}
return hasPermission(value) ? getSlot(slots) : null;
}
// Render coding button
// Here only judge whether it is included, the specific implementation can be written according to the project logic
function renderCodeAuth() {
const { value } = props; const { value } = props;
if (!value) { if (!value) {
return getSlot(slots); return getSlot(slots);
@ -53,18 +40,8 @@
} }
return () => { return () => {
const mode = unref(getPermissionMode);
// Role-based value control // Role-based value control
if (mode === PermissionModeEnum.ROLE) { return renderAuth();
return renderRoleAuth();
}
// Based on background role permission control
if (mode === PermissionModeEnum.BACK) {
return renderCodeAuth();
}
return getSlot(slots);
}; };
}, },
}); });

View File

@ -18,8 +18,8 @@
export default defineComponent({ export default defineComponent({
name: 'CountDownInput', name: 'CountDownInput',
inheritAttrs: false,
components: { [Input.name]: Input, CountButton }, components: { [Input.name]: Input, CountButton },
inheritAttrs: false,
props: { props: {
value: propTypes.string, value: propTypes.string,
size: propTypes.oneOf(['default', 'large', 'small']), size: propTypes.oneOf(['default', 'large', 'small']),

View File

@ -30,11 +30,11 @@
export default defineComponent({ export default defineComponent({
name: 'ApiSelect', name: 'ApiSelect',
inheritAttrs: false,
components: { components: {
Select, Select,
LoadingOutlined, LoadingOutlined,
}, },
inheritAttrs: false,
props: { props: {
value: propTypes.string, value: propTypes.string,
numberToString: propTypes.bool, numberToString: propTypes.bool,

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="table-settings"> <div class="table-settings">
<RedoSetting v-if="getSetting.size" /> <RedoSetting v-if="getSetting.redo" />
<SizeSetting v-if="getSetting.redo" /> <SizeSetting v-if="getSetting.size" />
<ColumnSetting v-if="getSetting.setting" /> <ColumnSetting v-if="getSetting.setting" />
<FullScreenSetting v-if="getSetting.fullScreen" /> <FullScreenSetting v-if="getSetting.fullScreen" />
</div> </div>

View File

@ -54,6 +54,7 @@
watchEffect(async () => { watchEffect(async () => {
if (currentRoute.value.name === REDIRECT_NAME) return; if (currentRoute.value.name === REDIRECT_NAME) return;
const menus = await getMenus(); const menus = await getMenus();
const routeMatched = currentRoute.value.matched; const routeMatched = currentRoute.value.matched;
const cur = routeMatched?.[routeMatched.length - 1]; const cur = routeMatched?.[routeMatched.length - 1];
let path = currentRoute.value.path; let path = currentRoute.value.path;
@ -63,26 +64,20 @@
} }
const parent = getAllParentPath(menus, path); const parent = getAllParentPath(menus, path);
const filterMenus = menus.filter((item) => item.path === parent[0]); const filterMenus = menus.filter((item) => item.path === parent[0]);
const matched = getMatched(filterMenus, parent) as any; const matched = getMatched(filterMenus, parent) as any;
if (!matched || matched.length === 0) return; if (!matched || matched.length === 0) return;
let breadcrumbList = filterItem(matched); const breadcrumbList = filterItem(matched);
const filterBreadcrumbList = breadcrumbList.filter(
(item) => item.path !== PageEnum.BASE_HOME
);
if (currentRoute.value.meta?.currentActiveMenu) { if (currentRoute.value.meta?.currentActiveMenu) {
filterBreadcrumbList.push(({ breadcrumbList.push(({
...currentRoute.value, ...currentRoute.value,
name: currentRoute.value.meta?.title || currentRoute.value.name, name: currentRoute.value.meta?.title || currentRoute.value.name,
} as unknown) as RouteLocationMatched); } as unknown) as RouteLocationMatched);
} }
routes.value = filterBreadcrumbList; routes.value = breadcrumbList;
}); });
function getMatched(menus: Menu[], parent: string[]) { function getMatched(menus: Menu[], parent: string[]) {
@ -103,12 +98,10 @@
function filterItem(list: RouteLocationMatched[]) { function filterItem(list: RouteLocationMatched[]) {
let resultList = filter(list, (item) => { let resultList = filter(list, (item) => {
const { meta } = item; const { meta, name } = item;
if (!meta) { if (!meta) {
return false; return !!name;
} }
const { title, hideBreadcrumb, hideMenu } = meta; const { title, hideBreadcrumb, hideMenu } = meta;
if (!title || hideBreadcrumb || hideMenu) { if (!title || hideBreadcrumb || hideMenu) {
return false; return false;

View File

@ -13,11 +13,15 @@ export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
function joinParentPath(menus: Menu[], parentPath = '') { function joinParentPath(menus: Menu[], parentPath = '') {
for (let index = 0; index < menus.length; index++) { for (let index = 0; index < menus.length; index++) {
const menu = menus[index]; const menu = menus[index];
const p = menu.path.startsWith('/') ? menu.path : `/${menu.path}`; // https://next.router.vuejs.org/guide/essentials/nested-routes.html
const parent = isUrl(menu.path) ? menu.path : `${parentPath}${p}`; // Note that nested paths that start with / will be treated as a root path.
menus[index].path = parent; // This allows you to leverage the component nesting without having to use a nested URL.
if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
// path doesn't start with /, nor is it a url, join parent path
menu.path = `${parentPath}/${menu.path}`;
}
if (menu?.children?.length) { if (menu?.children?.length) {
joinParentPath(menu.children, parent); joinParentPath(menu.children, menu.path);
} }
} }
} }

View File

@ -66,9 +66,9 @@ export async function getShallowMenus(): Promise<Menu[]> {
// Get the children of the menu // Get the children of the menu
export async function getChildrenMenus(parentPath: string) { export async function getChildrenMenus(parentPath: string) {
const menus = await getAsyncMenus(); const menus = await getMenus();
const parent = menus.find((item) => item.path === parentPath); const parent = menus.find((item) => item.path === parentPath);
if (!parent || !parent.children) return [] as Menu[]; if (!parent || !parent.children || !!parent?.meta?.hideChildrenInMenu) return [] as Menu[];
const routes = router.getRoutes(); const routes = router.getRoutes();
return !isBackMode() ? filter(parent.children, basicFilter(routes)) : parent.children; return !isBackMode() ? filter(parent.children, basicFilter(routes)) : parent.children;

View File

@ -11,7 +11,6 @@ const dashboard: AppRouteModule = {
meta: { meta: {
icon: 'ion:grid-outline', icon: 'ion:grid-outline',
title: t('routes.dashboard.dashboard'), title: t('routes.dashboard.dashboard'),
hideChildrenInMenu: true,
}, },
children: [ children: [
{ {

View File

@ -18,7 +18,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// The boolean type read by loadEnv is a string. This function can be converted to boolean type // The boolean type read by loadEnv is a string. This function can be converted to boolean type
const viteEnv = wrapperEnv(env); const viteEnv = wrapperEnv(env);
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv; const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;
const isBuild = command === 'build'; const isBuild = command === 'build';
@ -45,7 +45,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
build: { build: {
// minify: 'esbuild', // minify: 'esbuild',
outDir: OUTPUT_DIR, outDir: OUTPUT_DIR,
polyfillDynamicImport: VITE_LEGACY,
terserOptions: { terserOptions: {
compress: { compress: {
keep_infinity: true, keep_infinity: true,

View File

@ -2379,15 +2379,15 @@
dependencies: dependencies:
vue-demi latest vue-demi latest
"@windicss/plugin-utils@0.9.1": "@windicss/plugin-utils@0.9.2":
version "0.9.1" version "0.9.2"
resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.9.1.tgz#6219854bbf87e142617b79234820b0c1a151cc6e" resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.9.2.tgz#0cf68a7fc978c1cdba172d2aa5e89f52e45f54bb"
integrity sha512-DLxOg1mJTio9W069g3RK5KpSljD/aeDJvqwgAf9JSwXxkg/9xOcDWNEWo8MIkkrq0WtpdaokM+quvdlRCl2IVA== integrity sha512-mYKqjRVc2NYHp5uA5cDyHtqHFNK1pBC6RYYLywuUPTxsUVszYGnRbUXSeZwisGrHqD5dlHtpcefM5QOuTm53KA==
dependencies: dependencies:
fast-glob "^3.2.5" fast-glob "^3.2.5"
micromatch "^4.0.2" micromatch "^4.0.2"
sucrase "^3.17.1" sucrase "^3.17.1"
windicss "^2.4.7" windicss "^2.5.0"
"@zxcvbn-ts/core@^0.3.0": "@zxcvbn-ts/core@^0.3.0":
version "0.3.0" version "0.3.0"
@ -9920,10 +9920,10 @@ rollup-plugin-visualizer@^4.2.1:
source-map "^0.7.3" source-map "^0.7.3"
yargs "^16.2.0" yargs "^16.2.0"
rollup@2.41.4, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0: rollup@2.41.5, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0:
version "2.41.4" version "2.41.5"
resolved "https://registry.npmjs.org/rollup/-/rollup-2.41.4.tgz#2a674d64db4322482d440699acb060dc6dd9e65f" resolved "https://registry.npmjs.org/rollup/-/rollup-2.41.5.tgz#e79cef8cc5c121612528f590319639b1f32da2d7"
integrity sha512-f9IHfMO8p2Y8OdisI7Oj3oKkPuaQ6cgSwYqAi0TDvP3w2p+oX1VejX/w28a1h8WTnrapzfO5d4Uqhww+gL0b0g== integrity sha512-uG+WNNxhOYyeuO7oRt98GA2CNVRgQ67zca75UQVMPzMrLG9FUKzTCgvYVWhtB18TNbV7Uqxo97h+wErAnpFNJw==
optionalDependencies: optionalDependencies:
fsevents "~2.3.1" fsevents "~2.3.1"
@ -11722,14 +11722,14 @@ vite-plugin-theme@^0.5.0:
tinycolor2 "^1.4.2" tinycolor2 "^1.4.2"
ts-jest "^26.5.3" ts-jest "^26.5.3"
vite-plugin-windicss@0.9.1: vite-plugin-windicss@0.9.2:
version "0.9.1" version "0.9.2"
resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.9.1.tgz#870690d6fe9f1067b9177d49d6db26f73b2a07ee" resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.9.2.tgz#60caaa7966aa3dbb2cb11bf2210c09a71cac84dd"
integrity sha512-fyhW2Wg98QaEVSgEGUYOyvG+dZMfqHcZsSBPg2k1REBxjv5eAG/p5JG3SchSOh59Clo+2GiZnpfM1GHaqDp19A== integrity sha512-JM7Q7EfkxGRXklqH84LzQnVjXWOVnTPfi0AnXdnJuxmVMW8YidtEq/2rqf4GiYVXLdya8CQHNdYWnkZFSl47Yw==
dependencies: dependencies:
"@windicss/plugin-utils" "0.9.1" "@windicss/plugin-utils" "0.9.2"
body-parser "^1.19.0" body-parser "^1.19.0"
windicss "^2.4.7" windicss "^2.5.0"
vite@2.0.5: vite@2.0.5:
version "2.0.5" version "2.0.5"
@ -11920,7 +11920,7 @@ which@^2.0.1, which@^2.0.2:
dependencies: dependencies:
isexe "^2.0.0" isexe "^2.0.0"
windicss@^2.4.7: windicss@^2.5.0:
version "2.5.0" version "2.5.0"
resolved "https://registry.npmjs.org/windicss/-/windicss-2.5.0.tgz#12910cead975778b8aee6511b563e1d6ce03362f" resolved "https://registry.npmjs.org/windicss/-/windicss-2.5.0.tgz#12910cead975778b8aee6511b563e1d6ce03362f"
integrity sha512-mQt42RmDPK9XayP8L+mJW4Gon2X/ftGlNB3/BKaz6hqi4Hywys0piuUjGQIG6KhMfC0LLIzDpHz5b9GFqxYMrQ== integrity sha512-mQt42RmDPK9XayP8L+mJW4Gon2X/ftGlNB3/BKaz6hqi4Hywys0piuUjGQIG6KhMfC0LLIzDpHz5b9GFqxYMrQ==