树形组件
<template> <div class="expand" style="float: left;width: 15%"> <div style="text-align: center;padding-top: 10px;font-size: 1.0em;font-weight: 600"><svg-icon :icon-class="icon"></svg-icon><span style="padding-left: 5px">{{title}}</span></div> <hr style="background-color: RGB(173,173,173);height: 2px"/> <div> <el-tree ref="myTree" class="expand-tree" v-if="isLoadingTree" :data="setTree" node-key="id" highlight-current :props="defaultProps" :expand-on-click-node="true" :render-content="renderContent" @node-click="handleNodeClick"></el-tree> </div> </div> </template> <!-- VUE饿了么树形控件添加增删改功能按钮 --> <script> import TreeRender from '@/components/nx-tree' export default{ props: [ 'title', 'icon', 'setTree' ], name: 'tree', data() { return { isLoadingTree: false, // 是否加载节点树 defaultProps: { children: 'children', label: 'name' }, all: { id: '', name: '全部', children: [] }, defaultExpandKeys: [] // 默认展开节点列表 } }, mounted() { this.initExpand() }, methods: { initExpand() { this.setTree.map((a) => { this.defaultExpandKeys.push(a.id) }) this.isLoadingTree = true }, handleNodeClick(d, n, s) { // 点击节点 if (d.children === undefined) { this.$emit('getInfo', d.id) } else if (d.children.length === 0) { this.$emit('getInfo', d.id) } d.isEdit = false// 放弃编辑状态 }, renderContent(h, { node, data, store }) { // 加载节点 return h(TreeRender, { props: { DATA: data, NODE: node, STORE: store } }) } } } </script>树形模板
<template> <span class="tree-expand" > <span class="tree-label" v-show="DATA.isEdit"> <el-input class="edit" size="mini" autofocus v-model="DATA.name" :ref="'treeInput'+DATA.id" @click.stop.native="nodeEditFocus" @blur.stop="nodeEditPass(STORE,DATA,NODE)" @keyup.enter.stop.native="nodeEditPass(STORE,DATA,NODE)"></el-input> </span> <span v-show="!DATA.isEdit" :class="[DATA.id > maxexpandId ? 'tree-new tree-label' : 'tree-label']"> <span>{{DATA.name}}</span> </span> <span class="tree-btn" v-show="!DATA.isEdit" style="width: 15%"> <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i> <!-- <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>--> <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i> </span> </span> </template> <script> export default{ name: 'nx-tree-render', props: ['NODE', 'DATA', 'STORE', 'maxexpandId'], methods: { nodeAdd(s, d, n) { // 新增 this.$emit('nodeAdd', s, d, n) }, nodeEdit(s, d, n) { // 编辑 d.isEdit = true this.$nextTick(() => { this.$refs['treeInput' + d.id].$refs.input.focus() }) this.$emit('nodeEdit', s, d, n) }, nodeDel(s, d, n) { // 删除 this.$emit('nodeDel', s, d, n) }, nodeEditPass(s, d, n) { // 编辑完成 d.isEdit = false }, nodeEditFocus() { // 阻止点击节点的事件冒泡 } } } </script>设置权限permission.js
import router from './router' import store from './store' import NProgress from 'nprogress' // Progress 进度条 import 'nprogress/nprogress.css'// Progress 进度条样式 import { Message } from 'element-ui' import { getToken } from '@/utils/auth' // 验权 import { setTitle } from '@/utils/util' // 设置浏览器头部标题 // permission judge function function hasPermission(resources, permissionRoles) { if (!permissionRoles) return true return resources.some(resource => permissionRoles.indexOf(resource.code) >= 0) } const whiteList = ['/login'] // 不重定向白名单 router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { // 设置浏览器头部标题 const browserHeaderTitle = to.name store.commit('SET_BROWSERHEADERTITLE', { browserHeaderTitle: browserHeaderTitle }) /* has token*/ if (store.getters.isLock && to.path !== '/lock') { next({ path: '/lock' }) NProgress.done() } else if (to.path === '/login') { next({ path: '/' }) NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it } else { if (store.getters.resources.length === 0) { store.dispatch('GetInfo').then(res => { // 拉取用户信息 const resources = res.data.body // note: resources must be a array! such as: ['editor','develop'] store.dispatch('GenerateRoutes', { resources }).then(() => { // 根据resources权限生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }) }).catch((err) => { store.dispatch('FedLogOut').then(() => { Message.error(err || 'Verification failed, please login again') next({ path: '/' }) }) }) } else { next() // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ // if (hasPermission(store.getters.resources, to.meta.resources)) { // next()// // } else { // next({ path: '/401', replace: true, query: { noGoBack: true }}) // } } } } else { // 设置浏览器头部标题 const browserHeaderTitle = to.name store.commit('SET_BROWSERHEADERTITLE', { browserHeaderTitle: browserHeaderTitle }) if (whiteList.indexOf(to.path) !== -1) { next() } else { next('/login') NProgress.done() } } }) router.afterEach(() => { NProgress.done() // 结束Progress setTimeout(() => { const browserHeaderTitle = store.getters.browserHeaderTitle setTitle(browserHeaderTitle) }, 0) })随手一记，后续更改，项目前端github地址 http://58.22.61.222:27008/
