crm14.1 自定义指令

src/main.js

@@ -10,6 +10,7 @@ import routes from "./routes/routes";
 import "font-awesome/css/font-awesome.min.css";
 import "@/utils/dialog.js";
 import "@/utils/option-scroll.js";
+import "@/utils/buttonPermission.js";
 import { mixins } from "@/mixins";
 Vue.mixin(mixins);
 
@@ -125,7 +126,7 @@ export const store = new Vuex.Store({
 });
 
 import { getUserUuid } from "./api/api";
-router.beforeEach((to, from, next) => {
+router.beforeEach(async(to, from, next) => {
   // 判断本地是否有uuid
   const uuid = localStorage.getItem("uuid");
   if (!uuid) {
@@ -161,6 +162,8 @@ router.beforeEach((to, from, next) => {
     if (window._hmt) {
       window._hmt.push(["_trackPageview", "/#" + to.fullPath]);
     }
+    //获取权限按钮
+    await store.dispatch('getPermissionButtons')
     next();
   } else {
     next({ path: "/404" });

src/utils/buttonPermission.js

@@ -0,0 +1,45 @@
+//按钮权限判断指令
+import Vue from 'vue';
+import {store} from "../main";
+Vue.directive('permission',{
+    inserted(el,binding){
+        const buttonCodes = store.state.permissionButton.permissionButtons.map(item=>item.button_code)
+        const {value} = binding
+        if(value && typeof(value)=='string'){
+            // 字符类型
+            if(!buttonCodes.includes(value)){
+              // 没有权限，删除dom
+              el.parentNode && el.parentNode.removeChild(el)
+            }
+          }else if(Array.isArray(value)){
+            // 数组类型
+            /**
+             * 权限类型 type
+             * or-只要一个满足 and-全部都满足
+             */
+            let type;
+            let hasType=['or','and'].includes(value[value.length-1].toLocaleLowerCase())
+            if(hasType){
+              //参数中有标明type
+              type=value[value.length-1].toLocaleLowerCase()
+              // 去掉最后一个权限类型参数
+              value.pop()
+              // console.log(value,true);
+              let operation = type=='or'?'some':'every'
+              if(!value[operation](item => buttonCodes.includes(item))){
+                // 没有权限，删除dom
+                el.parentNode && el.parentNode.removeChild(el)
+              }
+            }else{
+              type='or'
+              // console.log(value,false);
+              if(!value.some(item => buttonCodes.includes(item))){
+                // 没有权限，删除dom
+                el.parentNode && el.parentNode.removeChild(el)
+              }
+            }
+          }else{
+            throw new Error('permission指令参数类型错误')
+          }
+    }
+})

src/views/system_manage/departManage.vue

@@ -42,7 +42,7 @@
 					</span>
 				</span>
 			</el-tree>
-			<div class="noDepart" @click="addDepart">
+			<div class="noDepart" @click="addDepart" v-permission="'system:menu:edit'">
 				<img src="~@/assets/img/set_m/add_ico.png" alt="" style="width:16px;height:16px;marginRight:10px;">
 				<span>新建部门</span>
 			</div>

src/vuex/index.js

@@ -4,6 +4,7 @@ import * as getters from "./getters";
 import sand from "./modules/sand";
 import ppt from "./modules/ppt";
 import edb from "./modules/edb";
+import permissionButton from "./modules/permissionButton";
 
 // 应用初始状态
 const state = {
@@ -30,5 +31,6 @@ export default {
     sand,
     ppt,
     edb,
+    permissionButton,
   },
 };

src/vuex/modules/permissionButton.js

@@ -0,0 +1,30 @@
+// 权限配置按钮
+const permissionButtons = {
+    state:()=>({
+        permissionButtons:[]
+    }),
+    mutations:{
+     SET_PERMISSION_BUTTONS:(state,buttons)=>{
+        state.permissionButtons = buttons
+     }
+    },
+    actions:{
+        getPermissionButtons({commit}){
+            return new Promise((resolve,reject)=>{
+                /* getPermissionButtons().then(res=>{
+                  commit('GET_PERMISSION_BUTTONS',res.data.list || [])
+                  // console.log(res);
+                  resolve('获取权限按钮成功')
+                }) */
+                const buttons = [
+                    {button_code: "system:menu:add"},
+                    {button_code: "system:user:add"}
+                ]
+                commit('SET_PERMISSION_BUTTONS',buttons)
+                resolve('获取权限按钮成功')
+            })
+        }
+    },
+    getters:{}
+  }
+  export default permissionButtons;