150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<template>
|
|
<el-drawer
|
|
:visible.sync="visibleProxy"
|
|
:title="$t(title)"
|
|
:size="width"
|
|
:close-on-click-modal="false"
|
|
direction="rtl"
|
|
@close="onClose"
|
|
>
|
|
<div class="perm-drawer__body" v-loading="treeLoading">
|
|
<el-tree
|
|
v-if="treeReady"
|
|
ref="permTree"
|
|
node-key="menu_id"
|
|
:data="treeData"
|
|
:props="{ label: 'name', children: 'children' }"
|
|
:default-expand-all="true"
|
|
:expand-on-click-node="true"
|
|
:default-checked-keys="checkedMenuIds"
|
|
show-checkbox
|
|
:draggable="true"
|
|
@check="onTreeCheck"
|
|
>
|
|
<span slot-scope="{ node, data }" class="perm-drawer__tree-node">
|
|
<span :class="{ 'perm-drawer__tree-node--disabled': !data.status }">
|
|
<i v-if="data.icon" :class="`fa fa-${data.icon}`" />
|
|
<i v-else-if="data.children" :class="`el-icon-${node.expanded ? 'folder-opened' : 'folder'}`" />
|
|
<i v-else class="el-icon-document" />
|
|
{{ $t(data.name) }}
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
|
|
<div class="perm-drawer__footer">
|
|
<el-button size="mini" @click="onCancel">
|
|
{{ $t(cancelText) }}
|
|
</el-button>
|
|
<el-button type="primary" size="mini" :loading="submitting" @click="onSubmit">
|
|
{{ $t(confirmText) }}
|
|
</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { i18nMixin } from '@/composables/useI18n'
|
|
import util from '@/libs/util'
|
|
import { getMenuAll } from '@/api/menu'
|
|
import { giveRoleMenu } from '@/api/system-administration/role'
|
|
|
|
export default {
|
|
name: 'RolePermDrawer',
|
|
mixins: [i18nMixin('page.system_administration.user_management.role')],
|
|
props: {
|
|
visible: { type: Boolean, default: false },
|
|
role: { type: Object, default: () => ({}) },
|
|
title: { type: String, default: '' },
|
|
confirmText: { type: String, default: '' },
|
|
cancelText: { type: String, default: '' },
|
|
width: { type: String, default: '360px' }
|
|
},
|
|
data () {
|
|
return {
|
|
treeLoading: false,
|
|
submitting: false,
|
|
treeReady: false,
|
|
treeData: [],
|
|
checkedMenuIds: []
|
|
}
|
|
},
|
|
computed: {
|
|
visibleProxy: {
|
|
get () { return this.visible },
|
|
set (val) { this.$emit('update:visible', val) }
|
|
}
|
|
},
|
|
watch: {
|
|
visible (val) {
|
|
if (val) { this.loadData() }
|
|
}
|
|
},
|
|
methods: {
|
|
async loadData () {
|
|
this.treeReady = false
|
|
this.treeLoading = true
|
|
try {
|
|
const menuRes = await getMenuAll()
|
|
const menuData = Array.isArray(menuRes) ? menuRes : (menuRes.data || [])
|
|
this.checkedMenuIds = JSON.parse(this.role.menu_admin || '[]')
|
|
this.treeData = util.formatDataToTree(menuData)
|
|
this.treeReady = true
|
|
setTimeout(() => {
|
|
this.treeLoading = false
|
|
}, 1000)
|
|
} catch {
|
|
this.treeLoading = false
|
|
}
|
|
},
|
|
onTreeCheck () {},
|
|
onClose () {
|
|
this.treeReady = false
|
|
this.treeData = []
|
|
this.checkedMenuIds = []
|
|
},
|
|
onCancel () {
|
|
this.visibleProxy = false
|
|
},
|
|
async onSubmit () {
|
|
this.submitting = true
|
|
try {
|
|
const menuIds = this.$refs.permTree.getCheckedKeys()
|
|
await giveRoleMenu({ role_id: this.role.id, role_menu: menuIds })
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.visibleProxy = false
|
|
this.$emit('saved')
|
|
} finally {
|
|
this.submitting = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.perm-drawer__body {
|
|
height: calc(100vh - 140px);
|
|
overflow-y: auto;
|
|
padding: 10px 20px;
|
|
}
|
|
.perm-drawer__footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
padding: 10px 20px;
|
|
border-top: 1px solid #e8e8e8;
|
|
background: #fff;
|
|
text-align: right;
|
|
}
|
|
.perm-drawer__tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.perm-drawer__tree-node--disabled {
|
|
color: #c0c4cc;
|
|
}
|
|
</style>
|