pull

src/api/role.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+export function getRoutes() {
+  return request({
+    url: '/routes',
+    method: 'get'
+  })
+}
+
+export function getRoles() {
+  return request({
+    url: '/roles',
+    method: 'get'
+  })
+}
+
+export function deleteRole(id) {
+  return request({
+    url: `/roles/${id}`,
+    method: 'delete'
+  })
+}
+
+export function addRole(data) {
+  return request({
+    url: '/roles',
+    method: 'post',
+    data
+  })
+}
+
+export function updateRole(key, data) {
+  return request({
+    url: `/roles/${key}`,
+    method: 'put',
+    data
+  })
+}

src/components/HeaderSearch/index.vue

@@ -33,19 +33,19 @@ export default {
     }
   },
   computed: {
-    routers() {
-      return this.$store.getters.permission_routers
+    routes() {
+      return this.$store.getters.permission_routes
     },
     lang() {
       return this.$store.getters.language
     }
   },
   watch: {
     lang() {
-      this.searchPool = this.generateRouters(this.routers)
+      this.searchPool = this.generateRoutes(this.routes)
     },
-    routers() {
-      this.searchPool = this.generateRouters(this.routers)
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes)
     },
     searchPool(list) {
       this.initFuse(list)
@@ -59,7 +59,7 @@ export default {
     }
   },
   mounted() {
-    this.searchPool = this.generateRouters(this.routers)
+    this.searchPool = this.generateRoutes(this.routes)
   },
   methods: {
     click() {
@@ -100,10 +100,10 @@ export default {
     },
     // Filter out the routes that can be displayed in the sidebar
     // And generate the internationalized title
-    generateRouters(routers, basePath = '/', prefixTitle = []) {
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
       let res = []
 
-      for (const router of routers) {
+      for (const router of routes) {
         // skip hidden router
         if (router.hidden) { continue }
 
@@ -125,11 +125,11 @@ export default {
           }
         }
 
-        // recursive child routers
+        // recursive child routes
         if (router.children) {
-          const tempRouters = this.generateRouters(router.children, data.path, data.title)
-          if (tempRouters.length >= 1) {
-            res = [...res, ...tempRouters]
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes]
           }
         }
       }

src/components/TreeTable/index.vue

@@ -146,6 +146,19 @@ export default {
           this.selcetRecursion(child, select, children)
         })
       }
+    },
+    updateTreeNode(item) {
+      return new Promise(resolve => {
+        const { _id, _parent } = item
+        const index = _id.split('-').slice(-1)[0] // get last index
+        if (_parent) {
+          _parent.children.splice(index, 1, item)
+          resolve(this.data)
+        } else {
+          this.data.splice(index, 1, item)
+          resolve(this.data)
+        }
+      })
     }
   }
 }

src/directive/el-table/adaptive.js

@@ -0,0 +1,42 @@
+
+import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
+
+/**
+ * How to use
+ * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
+ * el-table height is must be set
+ *  bottomOffset: 30(default)   // The height of the table from the bottom of the page.
+ */
+
+const doResize = (el, binding, vnode) => {
+  const { componentInstance: $table } = vnode
+
+  const { value } = binding
+
+  if (!$table.height) {
+    throw new Error(`el-$table must set the height. Such as height='100px'`)
+  }
+  const bottomOffset = (value && value.bottomOffset) || 30
+
+  if (!$table) return
+
+  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
+  $table.layout.setHeight(height)
+  $table.doLayout()
+}
+
+export default {
+  bind(el, binding, vnode) {
+    el.resizeListener = () => {
+      doResize(el, binding, vnode)
+    }
+
+    addResizeListener(el, el.resizeListener)
+  },
+  inserted(el, binding, vnode) {
+    doResize(el, binding, vnode)
+  },
+  unbind(el) {
+    removeResizeListener(el, el.resizeListener)
+  }
+}

src/directive/el-table/index.js

@@ -0,0 +1,14 @@
+
+import adaptive from './adaptive'
+
+const install = function(Vue) {
+  Vue.directive('el-height-adaptive-table', adaptive)
+}
+
+if (window.Vue) {
+  window['el-height-adaptive-table'] = adaptive
+  Vue.use(install); // eslint-disable-line
+}
+
+adaptive.install = install
+export default adaptive

src/directive/waves/waves.js

@@ -1,42 +1,73 @@
 import './waves.css'
 
-export default{
-  bind(el, binding) {
-    el.addEventListener('click', e => {
-      const customOpts = Object.assign({}, binding.value)
-      const opts = Object.assign({
+const context = '@@wavesContext'
+
+function handleClick(el, binding) {
+  function handle(e) {
+    const customOpts = Object.assign({}, binding.value)
+    const opts = Object.assign(
+      {
         ele: el, // 波纹作用元素
         type: 'hit', // hit 点击位置扩散 center中心点扩展
         color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-      }, customOpts)
-      const target = opts.ele
-      if (target) {
-        target.style.position = 'relative'
-        target.style.overflow = 'hidden'
-        const rect = target.getBoundingClientRect()
-        let ripple = target.querySelector('.waves-ripple')
-        if (!ripple) {
-          ripple = document.createElement('span')
-          ripple.className = 'waves-ripple'
-          ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
-          target.appendChild(ripple)
-        } else {
-          ripple.className = 'waves-ripple'
-        }
-        switch (opts.type) {
-          case 'center':
-            ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
-            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
-            break
-          default:
-            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop || document.body.scrollTop) + 'px'
-            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft || document.body.scrollLeft) + 'px'
-        }
-        ripple.style.backgroundColor = opts.color
-        ripple.className = 'waves-ripple z-active'
-        return false
+      },
+      customOpts
+    )
+    const target = opts.ele
+    if (target) {
+      target.style.position = 'relative'
+      target.style.overflow = 'hidden'
+      const rect = target.getBoundingClientRect()
+      let ripple = target.querySelector('.waves-ripple')
+      if (!ripple) {
+        ripple = document.createElement('span')
+        ripple.className = 'waves-ripple'
+        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+        target.appendChild(ripple)
+      } else {
+        ripple.className = 'waves-ripple'
+      }
+      switch (opts.type) {
+        case 'center':
+          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
+          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
+          break
+        default:
+          ripple.style.top =
+            (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
+              document.body.scrollTop) + 'px'
+          ripple.style.left =
+            (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
+              document.body.scrollLeft) + 'px'
       }
-    }, false)
+      ripple.style.backgroundColor = opts.color
+      ripple.className = 'waves-ripple z-active'
+      return false
+    }
+  }
+
+  if (!el[context]) {
+    el[context] = {
+      removeHandle: handle
+    }
+  } else {
+    el[context].removeHandle = handle
   }
+
+  return handle
 }
 
+export default {
+  bind(el, binding) {
+    el.addEventListener('click', handleClick(el, binding), false)
+  },
+  update(el, binding) {
+    el.removeEventListener('click', el[context].removeHandle, false)
+    el.addEventListener('click', handleClick(el, binding), false)
+  },
+  unbind(el) {
+    el.removeEventListener('click', el[context].removeHandle, false)
+    el[context] = null
+    delete el[context]
+  }
+}

src/lang/en.js

@@ -6,6 +6,7 @@ export default {
     guide: 'Guide',
     permission: 'Permission',
     pagePermission: 'Page Permission',
+    rolePermission: 'Role Permission',
     directivePermission: 'Directive Permission',
     icons: 'Icons',
     components: 'Components',
@@ -86,9 +87,14 @@ export default {
     github: 'Github Repository'
   },
   permission: {
+    addRole: 'New Role',
+    editPermission: 'Edit Permission',
     roles: 'Your roles',
     switchRoles: 'Switch roles',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
   },
   guide: {
     description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',

src/lang/es.js

@@ -5,6 +5,7 @@ export default {
     documentation: 'Documentación',
     guide: 'Guía',
     permission: 'Permisos',
+    rolePermission: 'Permisos de rol',
     pagePermission: 'Permisos de la página',
     directivePermission: 'Permisos de la directiva',
     icons: 'Iconos',
@@ -86,9 +87,14 @@ export default {
     github: 'Repositorio Github'
   },
   permission: {
+    addRole: 'Nuevo rol',
+    editPermission: 'Permiso de edición',
     roles: 'Tus permisos',
     switchRoles: 'Cambiar permisos',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Borrar',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar'
   },
   guide: {
     description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',

src/lang/zh.js

@@ -5,6 +5,7 @@ export default {
     documentation: '文档',
     guide: '引导页',
     permission: '权限测试页',
+    rolePermission: '角色权限',
     pagePermission: '页面权限',
     directivePermission: '指令权限',
     icons: '图标',
@@ -86,9 +87,14 @@ export default {
     github: 'Github 地址'
   },
   permission: {
+    addRole: '新增角色',
+    editPermission: '编辑权限',
     roles: '你的权限',
     switchRoles: '切换权限',
-    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    delete: '删除',
+    confirm: '确定',
+    cancel: '取消'
   },
   guide: {
     description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',

src/mock/index.js

@@ -3,6 +3,7 @@ import loginAPI from './login'
 import articleAPI from './article'
 import remoteSearchAPI from './remoteSearch'
 import transactionAPI from './transaction'
+import roleAPI from './role'
 
 // 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
 // https://github.com/nuysoft/Mock/issues/300
@@ -23,6 +24,13 @@ Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
 Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
 Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
 
+// 角色相关
+Mock.mock(/\/routes/, 'get', roleAPI.getRoutes)
+Mock.mock(/\/roles/, 'get', roleAPI.getRoles)
+Mock.mock(/\/roles$/, 'post', roleAPI.addRole)
+Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'put', roleAPI.updateRole)
+Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'delete', roleAPI.deleteRole)
+
 // 文章相关
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
 Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)