From 3806835e9980339f51da0f2b9eb0669d4a545336 Mon Sep 17 00:00:00 2001 From: FairyEver <1711467488@qq.com> Date: Mon, 8 Jun 2020 15:13:41 +0800 Subject: [PATCH] feat: :sparkles: 1.14.0 --- package.json | 2 +- src/api/service.js | 5 +- .../header-aside/components/libs/util.menu.js | 68 +++++++++------- .../components/menu-header/index.js | 80 ++++++++++--------- .../components/menu-side/index.js | 34 ++++---- .../header-aside/components/tabs/index.vue | 6 +- 6 files changed, 113 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index b4891d1..73caa73 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "d2-admin", - "version": "1.12.0", + "version": "1.14.0", "scripts": { "serve": "vue-cli-service serve --open", "start": "npm run serve", diff --git a/src/api/service.js b/src/api/service.js index bb530c3..fe397b2 100644 --- a/src/api/service.js +++ b/src/api/service.js @@ -48,8 +48,9 @@ function createService () { } }, error => { - if (error && error.response) { - switch (error.response.status) { + if (error) { + const status = get(error, 'response.status') + switch (status) { case 400: error.message = '请求错误'; break case 401: error.message = '未授权，请登录'; break case 403: error.message = '拒绝访问'; break diff --git a/src/layout/header-aside/components/libs/util.menu.js b/src/layout/header-aside/components/libs/util.menu.js index a13f3a3..c403492 100644 --- a/src/layout/header-aside/components/libs/util.menu.js +++ b/src/layout/header-aside/components/libs/util.menu.js @@ -1,32 +1,46 @@ -// 创建 el-menu-item +/** + * @description 创建菜单 + * @param {Function} h createElement + * @param {Object} menu 菜单项 + */ export function elMenuItem (h, menu) { - return h('el-menu-item', { key: menu.path, props: { index: menu.path } }, [ - ...menu.icon ? [ - h('i', { attrs: { class: `fa fa-${menu.icon}` } }) - ] : [], - ...menu.icon === undefined & !menu.iconSvg ? [ - h('i', { attrs: { class: 'fa fa-file-o' } }) - ] : [], - ...menu.iconSvg ? [ - h('d2-icon-svg', { props: { name: menu.iconSvg } }) - ] : [], - h('span', { slot: 'title' }, menu.title || '未命名菜单') - ]) + let icon = null + if (menu.icon) icon = + else if (menu.iconSvg) icon = + else icon = + return + { icon } + { menu.title || '未命名菜单' } + } -// 创建 el-submenu +/** + * @description 创建子菜单 + * @param {Function} h createElement + * @param {Object} menu 菜单项 + */ export function elSubmenu (h, menu) { - return h('el-submenu', { key: menu.path, props: { index: menu.path } }, [ - ...menu.icon ? [ - h('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } }) - ] : [], - ...menu.icon === undefined & !menu.iconSvg ? [ - h('i', { slot: 'title', attrs: { class: 'fa fa-folder-o' } }) - ] : [], - ...menu.iconSvg ? [ - h('d2-icon-svg', { slot: 'title', props: { name: menu.iconSvg } }) - ] : [], - h('span', { slot: 'title' }, menu.title || '未命名菜单'), - ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, h, child)) - ]) + let icon = null + if (menu.icon) icon = + else if (menu.iconSvg) icon = + else icon = + return + { icon } + { menu.title || '未命名菜单' } + { menu.children.map(child => createMenu.call(this, h, child)) } + +} + +/** + * @description 在组件中调用此方法渲染菜单项目 + * @param {Function} h createElement + * @param {Object} menu 菜单项 + */ +export function createMenu (h, menu) { + if (menu.children === undefined) return elMenuItem.call(this, h, menu) + return elSubmenu.call(this, h, menu) } diff --git a/src/layout/header-aside/components/menu-header/index.js b/src/layout/header-aside/components/menu-header/index.js index 55d7fd9..bd34c80 100644 --- a/src/layout/header-aside/components/menu-header/index.js +++ b/src/layout/header-aside/components/menu-header/index.js @@ -1,7 +1,7 @@ import { throttle } from 'lodash' import { mapState } from 'vuex' import menuMixin from '../mixin/menu' -import { elMenuItem, elSubmenu } from '../libs/util.menu' +import { createMenu } from '../libs/util.menu' export default { name: 'd2-layout-header-aside-menu-header', @@ -9,41 +9,49 @@ export default { menuMixin ], render (h) { - return h('div', { - attrs: { flex: 'cross:center' }, - class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll }, - ref: 'page' - }, [ - h('div', { - attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' }, - ref: 'content' - }, [ - h('div', { - attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' }, - style: { transform: `translateX(${this.currentTranslateX}px)` }, - ref: 'scroll' - }, [ - h('el-menu', { - props: { mode: 'horizontal', defaultActive: this.active }, - on: { select: this.handleMenuSelect } - }, this.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))) - ]) - ]), - ...this.isScroll ? [ - h('div', { - attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' }, - on: { click: () => this.scroll('left') } - }, [ - h('i', { attrs: { class: 'el-icon-arrow-left' } }) - ]), - h('div', { - attrs: { class: 'd2-theme-header-menu__next', flex: 'main:center cross:center', 'flex-box': '0' }, - on: { click: () => this.scroll('right') } - }, [ - h('i', { attrs: { class: 'el-icon-arrow-right' } }) - ]) - ] : [] - ]) + return
+
+
+ + { this.header.map(menu => createMenu.call(this, h, menu)) } + +
+
+ { + this.isScroll + ? [ +
this.scroll('left') }> + +
, +
this.scroll('right') }> + +
+ ] + : [] + } +
}, computed: { ...mapState('d2admin/menu', [ diff --git a/src/layout/header-aside/components/menu-side/index.js b/src/layout/header-aside/components/menu-side/index.js index f1bf980..8ce3cbc 100644 --- a/src/layout/header-aside/components/menu-side/index.js +++ b/src/layout/header-aside/components/menu-side/index.js @@ -1,6 +1,6 @@ import { mapState } from 'vuex' import menuMixin from '../mixin/menu' -import { elMenuItem, elSubmenu } from '../libs/util.menu' +import { createMenu } from '../libs/util.menu' import BScroll from 'better-scroll' export default { @@ -9,19 +9,25 @@ export default { menuMixin ], render (h) { - return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [ - h('el-menu', { - props: { collapse: this.asideCollapse, collapseTransition: this.asideTransition, uniqueOpened: true, defaultActive: this.$route.fullPath }, - ref: 'menu', - on: { select: this.handleMenuSelect } - }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))), - ...this.aside.length === 0 && !this.asideCollapse ? [ - h('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [ - h('d2-icon', { props: { name: 'inbox' } }), - h('span', {}, '没有侧栏菜单') - ]) - ] : [] - ]) + return
+ + { this.aside.map(menu => createMenu.call(this, h, menu)) } + + { + this.aside.length === 0 && !this.asideCollapse + ?
+ + 没有侧栏菜单 +
+ : null + } +
}, data () { return { diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue index 830e54d..d83e4f4 100644 --- a/src/layout/header-aside/components/tabs/index.vue +++ b/src/layout/header-aside/components/tabs/index.vue @@ -157,8 +157,10 @@ export default { handleClick (tab, event) { // 找到点击的页面在 tag 列表里是哪个 const page = this.opened.find(page => page.fullPath === tab.name) - const { name, params, query } = page - if (page) this.$router.push({ name, params, query }) + if (page) { + const { name, params, query } = page + this.$router.push({ name, params, query }) + } }, /** * @description 点击 tab 上的删除按钮触发这里