132 lines
3.3 KiB
Vue
132 lines
3.3 KiB
Vue
<template>
|
|
<div class="authorize-role">
|
|
|
|
<el-drawer
|
|
:title="$t('pages.sysRoleManager.drawer.authorize')"
|
|
:visible="true"
|
|
:before-close="handleClose"
|
|
:close-on-press-escape="false"
|
|
:wrapper-closable="false"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
custom-class="drawer-auto-layout"
|
|
>
|
|
<div class="drawer-form">
|
|
<div class="auto-tree">
|
|
<el-tree
|
|
ref="tree"
|
|
v-loading="treeLoading"
|
|
:element-loading-text="$t('pages.sysRoleManager.loading')"
|
|
:data="menus"
|
|
:expand-on-click-node="false"
|
|
node-key="id"
|
|
show-checkbox
|
|
:props="treeProps"
|
|
/>
|
|
</div>
|
|
|
|
<div class="drawer-footer">
|
|
<el-button @click="handleClose">{{ $t('pages.sysRoleManager.action.cancel') }}</el-button>
|
|
<el-button type="primary" :loading="submitLoading" :disabled="submitLoading" @click="handleSubmit">{{ $t('pages.sysRoleManager.action.submit') }}</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { allMenus } from '@/api/ops-system'
|
|
import { delArrays } from '@/utils'
|
|
export default {
|
|
name: 'AuthorizeRole',
|
|
props: {
|
|
menuIds: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
submitLoading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
treeLoading: false,
|
|
menusList: [],
|
|
menus: [],
|
|
treeProps: {
|
|
label: 'menuName'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.renderTreeData()
|
|
},
|
|
methods: {
|
|
renderTreeData() {
|
|
const that = this
|
|
that.treeLoading = true
|
|
allMenus().then(res => {
|
|
that.treeLoading = false
|
|
that.menusList = res.body || []
|
|
that.menus = that.menuToTree(res.body)
|
|
if (that.menuIds && that.menuIds.length > 0) {
|
|
const excludeMenuIds = []
|
|
that.menusList.forEach(item => {
|
|
if (that.menuIds.some(id => item.id === id)) {
|
|
excludeMenuIds.push(item.parentId)
|
|
}
|
|
})
|
|
that.$refs.tree.setCheckedKeys(delArrays(that.menuIds, excludeMenuIds), true)
|
|
}
|
|
}).catch(er => {
|
|
that.treeLoading = false
|
|
})
|
|
},
|
|
menuToTree(list) {
|
|
if (!list || list.length === 0) {
|
|
return
|
|
}
|
|
|
|
const resultMenus = []
|
|
const childrenMenus = []
|
|
list.forEach(item => {
|
|
if (!item.parentId) {
|
|
resultMenus.push(item)
|
|
} else {
|
|
childrenMenus.push(item)
|
|
}
|
|
})
|
|
|
|
resultMenus.forEach(item => {
|
|
findChildren(item)
|
|
})
|
|
|
|
function findChildren(item) {
|
|
childrenMenus.forEach(childrenItem => {
|
|
if (item.id === childrenItem.parentId) {
|
|
if (item.children) {
|
|
item.children.push(childrenItem)
|
|
} else {
|
|
item.children = [childrenItem]
|
|
}
|
|
findChildren(childrenItem)
|
|
}
|
|
})
|
|
}
|
|
return resultMenus
|
|
},
|
|
handleClose() {
|
|
if (this.submitLoading === true) {
|
|
this.$opsMessage.warn('Processing submission!')
|
|
return
|
|
}
|
|
this.$emit('close')
|
|
},
|
|
handleSubmit() {
|
|
const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
|
|
this.$emit('submit', halfCheckedKeys.concat(this.$refs.tree.getCheckedKeys()))
|
|
}
|
|
}
|
|
}
|
|
</script>
|