<template>
? <div class="table-wrapper">
? ? <div class="action-bar">
? ? ?? ?//v-hasProm ?指令是說 如果指令中value 包含在 data.promission 數組中， 就把這個按鈕顯示出來?
? ? ? <el-button v-has-prom="'admin.goods.edit'" type="success" icon="el-icon-plus" @click.native = "$router.push('/makeform/create')">新建</el-button>
? </div>
</template>

<script>
export default {
? name: "FromList",
? //這里添加了一個局部指令 （只作用于本面頁）
? directives:{
? ? hasProm:{
? ? ? inserted(el,binding,vnode){
? ? ? ? console.log(el,binding,vnode);
? ? ? ? //這里要說一下 這三個參數
? ? ? ? // el就是 指令所在的 元素（element） ? 我們可以使用 ?el.style.dispaly='none' 來對el 的css進行設置
? ? ? ? //binding 是指的binding 的信息， 其中可以得到我們 v-hasProm = value 中的 ?value值
? ? ? ? //vnode 就是指的虛擬節(jié)點， 我們可以通過它， 得到當前頁面中的 ?component.data 中的數據 也就是promission 數組長 ?頁面的 this 在指令中是得不到了， 我們能過 ?vnode.context得到的就是 this
?? ??? ?//看一下代碼
?? ??? ?let bindvalue = binding.value; ? ?//bindvalue 的值是'admin.goods.edit'
?? ??? ?let promissionArr = vnode.context.promission;
?? ??? ?let p = promissionArr.find((item)=>{
?? ??? ??? ?return item == bindvalue;
?? ??? ?})
?? ??? ?if(p == undefined){
?? ??? ??? ?//說明在數組中沒有這個權限， 把這個元素給隱藏
?? ??? ??? ?el.style.display="none"
?? ??? ?}
?? ??? ?
? ? ? }
? ? }
? },
? data(){
? ? return {
? ? ?? ?promission:["admin.goods.add","admin.goods.edit","admin.goods.delete"]
? ? ?? ?//上面的權限更表 以字符串開式， 這個其實可以從后端獲取得到， 然后放在store中， 全局可使用， 這里就寫在data中算了
? ? }
? },
? created() {
? },
? methods:{
? }
}
</script>
<style scoped>
</style>

//用來獲取權限數據
import store from '@/store'
?
export default {
?
? inserted(el, binding, vnode) {
? ? //獲取綁定值
? ? const { value } = binding
? ? // TODO 匹配規(guī)則，在頁面寫的要對應這個匹配規(guī)則
? ? const all_permission = "*:*:*";
? ? //獲取用戶權限數據
? ? const permissions = store.getters && store.getters.permissions?
if (value && value instanceof Array && value.length > 0) {?
? ? ? //權限標志
? ? ? const permissionFlag = value
? ? ? //判斷用戶是否有此權限
? ? ? const hasPermissions = permissions.some(permission => {
? ? ? ? console.log('permission', permission);
? return all_permission === permission || permissionFlag.includes(permission)
? ? ? })
? ? ??
? ? ? //沒有權限-移除頁面上的控件
? ? ? if (!hasPermissions) {{
? ? ? ? console.log('沒有權限-移除');
? ? ? ? el.parentNode && el.parentNode.removeChild(el)
? ? ? }
? ? } else {?
? ? ? el.parentNode && el.parentNode.removeChild(el)
? ? ? throw new Error(`請設置數組操作權限`)
? ? }
? }
}

import hasPermi from './hasPermi'
import Vue from "vue"
?
?
const install = function (Vue) {
? Vue.directive('hasPermi', hasPermi)
}
?
?
if (window.Vue) {
? window['hasPermi'] = hasPermi
? Vue.use(install);
}
?
export default install

import permission from './directive/permission'
?
?
Vue.use(permission)

? ? ? <button
? ? ? ? ? ?v-has-permi="['btn:pre:del']"
? ? ? ? ? ?style="margin-top: 4px"/>
?
?
? ?<button
? ? ? ? ? ?v-has-permi="['btn:pre:export']"
? ? ? ? ? ?style="margin-top: 4px"/>