封装Permission组件
<!-- -->
<template>
<span v-if="hasPermission" class="permission">
<slot />
</span>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Permission',
props: {
has: {
default: null,
type: String
}
},
data() {
return {
hasPermission: false
}
},
computed: {
...mapState({
asyncRouterMap: state => state.user.asyncRouterMap
})
},
watch: {
has: {
handler: function(val, oldVal) {
this.has = val
},
deep: true
}
},
mounted() {
this.hasPermissionFunc()
},
methods: {
hasPermissionFunc() {
const self = this
let flag = false
function traverse(arr) {
arr.map((item, index) => {
if (item.childNode) {
traverse(item.childNode)
} else {
if (item.url === self.has) {
flag = true
return
}
}
})
}
traverse(self.asyncRouterMap)
this.hasPermission = flag
}
}
}
</script>
<style lang="scss" scoped>
</style>
使用方法
<Permission :has="'info:approve'">
<el-popconfirm slot="reference" class="ml10" title="审核通过?" confirm-button-text="同意"
cancel-button-text="驳回" @onCancel="submitAudit(scope.$index, pageData.records,1)" @onConfirm="submitAudit(scope.$index, pageData.records,3)"
>
<el-button v-if="scope.row.state=='2'" slot="reference" class="textBtn" type="text" size="small">
审批
</el-button>
</el-popconfirm>
</Permission>