授权组件
<template>
<div>
<a-drawer
:title="`${title}:已关联菜单`"
placement="right"
:closable="false"
@close="() => {$emit('close')}"
:visible="visible"
:width="550"
>
<!--<a-alert message=" 请先选择应用才能关联菜单" banner />-->
<a-row type="flex" justify="start">
<a-col :span="24" style=" border: solid 1px #e8e8e8;">
<a-spin tip="加载中..." :spinning="treeLoading" size="large">
<a-tree
checkable
v-if="!treeLoading"
@expand="onExpand"
:expandedKeys="expandedKeys"
:autoExpandParent="autoExpandParent"
v-model="checkedKeysResult"
@select="onSelect"
@check="onCheck"
:replaceFields="{children: 'centerList', title: 'centerName', key: 'centerId'}"
:selectedKeys="selectedKeys"
:treeData="treeData"
/>
</a-spin>
</a-col>
</a-row>
<div class="drawer-bootom-button">
<a-dropdown style="float: left;" :trigger="['click']" placement="topCenter">
<a-menu slot="overlay">
<a-menu-item key="3" @click="SelectAll">全部勾选</a-menu-item>
<a-menu-item key="4" @click="SelectReset">取消全选</a-menu-item>
<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
<a-menu-item key="6" @click="closesAll">收起所有</a-menu-item>
</a-menu>
<a-button>
菜单树操作
<a-icon type="up"/>
</a-button>
</a-dropdown>
<a-popconfirm title="确定放弃编辑？" @confirm="treeClose" okText="确定" cancelText="取消">
<a-button style="margin-right: .8rem">取消</a-button>
</a-popconfirm>
<a-button style="margin-right: .8rem" @click="treeHandleOk('仅保存')" type="primary" :loading="loading">仅保存
</a-button>
<a-button @click="treeHandleOk('保存并关闭')" type="primary" :loading="loading">保存并关闭</a-button>
</div>
</a-drawer>
</div>
</template>
<script>
import pick from 'lodash.pick'
import {rolePageList,roleSave,roleUpdate,roleDelete,roleCopy,appsAuth,selectByPartnersIdAndRoleId,roleroleList} from '@/api/PrivilegeManagementAPI/RolePrivilege'
import {
userPageList,userSave,userUpdate,userDelete,
userCopy,userResetPwd,userRelate, userlock,
userUnlock,selectAreaCenterByPartnersId, selectByUserId
} from '@/api/PrivilegeManagementAPI/UserPrivilege'
import moment from 'moment'
import { NodesTrueFalse, getNodesCheckAll ,getNodesCheck ,TreeRelate ,getValue} from '@/utils/RecursionApi'
// 表单字段
const fields = ['description', 'id']
export default {
name: 'Authorization',
props: {
visible: {
type: Boolean,
required: true
},
loading: {
type: Boolean,
default: () => false
},
model: {
type: Object,
default: () => null
},
roleid: {
type: Object,
default: () => null
},
title: {
type: String,
default: () => ''
},
disabled: {
type: Boolean,
default: () => false
}
},
data() {
this.formLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 }
}
}
return {
treeData: [],//1
expandedKeys: [],//1
autoExpandParent: true,//1
checkedKeys: [],//1
selectedKeys: [],//1
checkedKeysResult: [],//1
checkedKeysRelate: [],//1
treeLoading: false,//1
user: JSON.parse(sessionStorage.getItem('user')),
form: this.$form.createForm(this),
baseUrl:null,
}
},
watch:{
visible(v){
if (process.env.NODE_ENV === 'development') {
this.baseUrl = process.env.VUE_APP_API_BASE_URL
} else if (process.env.NODE_ENV === 'production') {
this.baseUrl = process.env.VUE_APP_API_BASE_URL
} else {
this.baseUrl = '/api'
}
if (v) {
console.log('custom modal created', this.model.id)
// 防止表单未注册
fields.forEach(v => this.form.getFieldDecorator(v))
this.model && this.form.setFieldsValue(pick(this.model, fields))
this.showTree()
}
}
},
created() {
// 当 model 发生改变时，为表单设置值
this.$watch('model', () => {
})
},
methods: {
moment,
// 收起所有菜单
closesAll() {
this.expandedKeys = []
},
// 展开所有菜单
expandAll() {
this.treeData.map(val => {
this.expandedKeys.push(val.appsId)
})
},
// 重置菜单方法
SelectReset() {
this.checkedKeysResult = []
this.checkedKeysRelate = []
},
// 全选菜单方法
SelectAll() {
this.checkedKeysResult = []
this.expandedKeys = getNodesCheckAll(this.treeData,'centerId','centerList').node
this.checkedKeysResult = getNodesCheckAll(this.treeData,'centerId','centerList').node
this.checkedKeysRelate=getNodesCheckAll(this.treeData,'centerId','centerList').node
console.log(this.checkedKeysResult, 'this.checkedKeysthis.checkedKeys',getNodesCheckAll(this.treeData,'centerId','centerList'))
},
// 确认抽屉方法
treeHandleOk(type) {
console.log(this.checkedKeysRelate,'aaaaaa', this.model)
var parameter = {
userId: this.model.id ,
partnersId: this.model.partnersId ,
centerList: this.checkedKeysRelate
}
userRelate(parameter).then(res => {
// this.selectTree()
if (res.code == 0) {
this.$message.success('保存成功')
this.showTree()
if (type === '仅保存') {
} else if (type === '保存并关闭') {
this.treeClose()
}
} else {
this.$message.error(`保存失败`)
}
}).catch(err => {
this.$message.error(`${err.response.data.msg}`)
})
},
// 选取权限方法
onCheck(checkedKeys, e) {
this.checkedKeysRelate = []
this.checkedKeysResult = checkedKeys
this.checkedKeys = checkedKeys
checkedKeys.map(val => {
// this.TreeArronCheck(this.treeData,val)
var ids = getNodesCheck(this.treeData, val,'centerId','centerList',).node
// this.TreeArronCheck(this.treeData, val)
if (ids !== null) {
this.checkedKeysRelate.push(ids)
}
console.log( getNodesCheck(this.treeData, val,'centerId','centerList',), 'this.TreeArronCheckaaaaaaaaa')
})
console.log('selectedKeys', this.checkedKeysResult, e, this.checkedKeysRelate, checkedKeys)
},
// 多选方法
onSelect(selectedKeys, info) {
this.selectedKeys = selectedKeys
},
onExpand(expandedKeys) {
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
treeClose() {
this.$emit('close')
},
showTree(record) {
this.treeLoading = true
var data = {
userId: this.model.id ,
partnersId: this.model.partnersId ,
}
selectAreaCenterByPartnersId(data).then(res => {
if (res.code === 0) {
this.treeLoading = false
// this.treeData = res.data.areaList
this.treeData = []
// this.treeData=res.data
res.data.areaList.map(val => {
this.treeData.push({
centerId: val.areaId,
centerName: val.areaName,
relate: 3,
centerList: val.centerList
})
})
}
// arr,resultKey,childrenKey,selectedKey,TrueFalse
console.log()
this.checkedKeysResult =NodesTrueFalse(this.treeData, 'centerId', 'centerList','relate',1).node
console.log(this.treeData, 'aaaaaaa', this.checkedKeysResult, NodesTrueFalse(this.treeData, 'id', 'childFunctions','selected','true'))
})
}
}
}
</script>
<style scoped lang="less">
.drawer-bootom-button {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
</style>
<template>
<div>
<a-drawer
