From 4be312fb837fe67846db0ed8c1e69528ffcca200 Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Wed, 22 Jul 2020 22:10:10 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=8A=A8=E6=80=81=E6=A0=87?= =?UTF-8?q?=E9=A2=98=20=E8=AF=A6=E6=83=85=E9=A1=B5=E7=BC=93=E5=AD=98?= =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/src/layout/components/Navbar/style.scss | 11 ++-- vue/src/router/authority/modules/purchase.js | 28 ++++++++-- vue/src/router/authority/modules/sell.js | 28 ++++++++-- vue/src/router/index.js | 59 ++++++++++---------- vue/src/router/util.js | 13 ++++- vue/src/views/app/redirect.vue | 2 +- 6 files changed, 89 insertions(+), 52 deletions(-) diff --git a/vue/src/layout/components/Navbar/style.scss b/vue/src/layout/components/Navbar/style.scss index 60870e8..1a0d8ae 100644 --- a/vue/src/layout/components/Navbar/style.scss +++ b/vue/src/layout/components/Navbar/style.scss @@ -42,15 +42,12 @@ .avatar-container { .avatar-wrapper { - margin-top: 2px; - - .el-avatar { - position: relative; - top: 5px; - margin-right: 5px; - } + display: flex; + align-items: center; + height: 100%; span { + margin-right: 5px; font-size: 18px; } } diff --git a/vue/src/router/authority/modules/purchase.js b/vue/src/router/authority/modules/purchase.js index 1ecc570..c3fd53c 100644 --- a/vue/src/router/authority/modules/purchase.js +++ b/vue/src/router/authority/modules/purchase.js @@ -17,13 +17,21 @@ const router = { { path: 'order/detail/:type(see|add|edit)/:id?', name: 'purchaseOrderDetail', - hidden: true, props: true, component: lazyLoadView(import('@/views/purchase/order/detail')), meta: { - title: '采购订单详情', + dynamicTitle(to) { + const {type, id} = to.params + switch (type) { + case 'add': + return '添加采购订单' + case 'edit': + return `编辑采购订单${id}` + case 'see': + return `查看采购订单${id}` + } + }, activeMenu: '/document/purchase/order', - noCache: true, isDetailPage: true } }, @@ -36,13 +44,21 @@ const router = { { path: 'inbound/detail/:type(see|add|edit)/:id?', name: 'purchaseInboundDetail', - hidden: true, props: true, component: lazyLoadView(import('@/views/purchase/inbound/detail')), meta: { - title: '采购入库详情', + dynamicTitle(to) { + const {type, id} = to.params + switch (type) { + case 'add': + return '添加采购入库单' + case 'edit': + return `编辑采购入库单${id}` + case 'see': + return `查看采购入库单${id}` + } + }, activeMenu: '/document/purchase/inbound', - noCache: true, isDetailPage: true } } diff --git a/vue/src/router/authority/modules/sell.js b/vue/src/router/authority/modules/sell.js index 5aa1fb2..cdd90ba 100644 --- a/vue/src/router/authority/modules/sell.js +++ b/vue/src/router/authority/modules/sell.js @@ -17,13 +17,21 @@ const router = { { path: 'order/detail/:type(see|add|edit)/:id?', name: 'sellOrderDetail', - hidden: true, props: true, component: lazyLoadView(import('@/views/sell/order/detail')), meta: { - title: '销售订单详情', + dynamicTitle(to) { + const {type, id} = to.params + switch (type) { + case 'add': + return '添加销售订单' + case 'edit': + return `编辑销售订单${id}` + case 'see': + return `查看销售订单${id}` + } + }, activeMenu: '/document/sell/order', - noCache: true, isDetailPage: true } }, @@ -36,13 +44,21 @@ const router = { { path: 'outbound/detail/:type(see|add|edit)/:id?', name: 'purchaseOutboundDetail', - hidden: true, props: true, component: lazyLoadView(import('@/views/sell/outbound/detail')), meta: { - title: '销售出库详情', + dynamicTitle(to) { + const {type, id} = to.params + switch (type) { + case 'add': + return '添加销售出库单' + case 'edit': + return `编辑销售出库单${id}` + case 'see': + return `查看销售出库单${id}` + } + }, activeMenu: '/document/outbound/order', - noCache: true, isDetailPage: true } } diff --git a/vue/src/router/index.js b/vue/src/router/index.js index 3536179..c51c0f2 100644 --- a/vue/src/router/index.js +++ b/vue/src/router/index.js @@ -3,11 +3,11 @@ * * 需要鉴权的路由：!meta.noAuth * 左侧菜单显示：name && !hidden && meta.title -* 左侧菜单排序：能显示 && sort，升序排列 +* 左侧菜单排序：能在左侧菜单中显示 && sort，升序排列 * 左侧菜单不折叠只有一个children的路由：alwaysShow -* 面包屑显示：meta.title +* 面包屑显示：meta.title || meta.dynamicTitle * 搜索选项显示：name && meta.title -* tab栏显示：name && meta.title +* tab栏显示：name && (meta.title || meta.dynamicTitle) * tab栏固定显示：meta.affix * 页面不缓存：!name && !meta.isDetailPage || meta.noCache * 打开iframe：meta.iframe，不会重复打开相同src的iframe @@ -18,7 +18,7 @@ import store from "@/store" import NProgress from 'nprogress' import {isUserExist} from "@/utils/storage" import {auth, needAuth} from "@/utils/auth" -import {getPageTitle, transformWhiteList, metaExtend} from './util' +import {setPageTitle, specifyRouteTitle, transformWhiteList, metaExtend} from './util' import {contextPath, routerMode} from '@/config' import constantRoutes from '@/router/constant' import authorityRoutes from '@/router/authority' @@ -27,13 +27,13 @@ Vue.use(Router) NProgress.configure({showSpinner: false}) +metaExtend(constantRoutes) +metaExtend(authorityRoutes) + const endRoute = [{path: '*', redirect: '/404', hidden: true}] const whiteList = transformWhiteList(['/login', '/register', '/404', '/403']) -metaExtend(constantRoutes) -metaExtend(authorityRoutes) - const router = new Router({ base: contextPath, mode: routerMode, @@ -45,29 +45,22 @@ router.beforeEach(async (to, from, next) => { //使用redirect进行跳转时不显示进度条 !to.path.startsWith('/redirect') && NProgress.start() - //若是详情页之间的跳转，借助redirect避免组件复用 - const isToDetailPage = to.meta && to.meta.isDetailPage, - isFromDetailPage = from.meta && from.meta.isDetailPage - if (isToDetailPage !== undefined && isToDetailPage === isFromDetailPage) { - //这里vue-router会报redirect错误 - return next({path: `/redirect${to.path}`, query: to.query}) + if (needExtraRedirect(to, from)) { + //这里vue-router会报redirect错误，已在main.js中忽略 + return next(`/redirect${to.fullPath}`) } - document.title = getPageTitle(to) + specifyRouteTitle(to, from) + + setPageTitle(to) //白名单内不需要进行权限控制 if (whiteList.some(reg => reg.test(to.path))) return next() - const isLogin = isUserExist() - //未登录时返回登录页 - if (!isLogin) return next({path: '/login', query: {redirect: to.fullPath}}) + if (!isUserExist()) return next({path: '/login', query: {redirect: to.fullPath}}) - //初始化菜单 - await initMenu() - - //已登录时访问登录页则跳转至首页 - if (to.path === '/login') return next({path: '/'}) + await initMenuAndResource() //页面不需要鉴权或有访问权限时通过 if (!needAuth(to) || auth(to.path)) { @@ -76,13 +69,22 @@ router.beforeEach(async (to, from, next) => { } //用户无权限访问时的动作 - next({path: '/403'}) + next('/403') }) router.afterEach(() => NProgress.done()) +//判断是否需要一次额外的redirect跳转 +function needExtraRedirect(to, from) { + //若是详情页之间的跳转，借助redirect避免组件复用 + const isToDetailPage = to.meta.isDetailPage, + isFromDetailPage = from.meta.isDetailPage + + return isToDetailPage !== undefined && isToDetailPage === isFromDetailPage +} + //初始化菜单和权限 -function initMenu() { +function initMenuAndResource() { if (!store.state.resource.hasInitRoutes) { return store.dispatch('resource/init', store.state.user) } @@ -91,12 +93,11 @@ function initMenu() { //判断是否需要打开iframe function iframeControl(to, from) { - const isRefresh = to.path === '/redirect' + from.path - let iframe = to.meta && to.meta.iframe + let iframe = to.meta.iframe const operate = iframe ? 'open' : 'close' - - if (isRefresh) iframe = from.meta && from.meta.iframe - + if (to.path === `/redirect${from.path}`) { + iframe = from.meta.iframe + } return store.dispatch(`iframe/${operate}`, iframe) } diff --git a/vue/src/router/util.js b/vue/src/router/util.js index df73a29..3547796 100644 --- a/vue/src/router/util.js +++ b/vue/src/router/util.js @@ -4,9 +4,16 @@ import {title} from "@/config" import PageSkeleton from "@/components/Skeleton/PageSkeleton" //拼接页面标题 -export function getPageTitle(route) { - const pageTitle = route.meta && route.meta.title - return pageTitle ? `${pageTitle} - ${title}` : title +export function setPageTitle(route) { + const pageTitle = route.meta.title + document.title= pageTitle ? `${pageTitle} - ${title}` : title +} + +//确定路由的标题 +export function specifyRouteTitle(to, from) { + if (typeof to.meta.dynamicTitle === 'function') { + to.meta.title = to.meta.dynamicTitle(to, from) + } } //将给定的白名单url转换为正则 diff --git a/vue/src/views/app/redirect.vue b/vue/src/views/app/redirect.vue index cbda638..15cf06e 100644 --- a/vue/src/views/app/redirect.vue +++ b/vue/src/views/app/redirect.vue @@ -7,7 +7,7 @@ const {name, params} = JSON.parse(query.params) this.$router.replace({name, params}) } - else this.$router.replace({path: '/' + params.path, query}) + else this.$router.replace({path: `/${params.path}`, query}) }, render: h => h()