xw_admin/src/views/setting/role/permission.vue

<template>
	<el-dialog
		title="权限设置"
		v-model="visible"
		:width="720"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<div class="dialogBody">
			<div class="btnPot" v-if="activeNum==1">
				<el-button type="danger" plain :size="size" @click="deleteMember">移除成员</el-button>
				<el-button type="primary" plain :size="size" @click="getDeptTree">添加成员</el-button>
			</div>
			<el-tabs tab-position="top" @tab-change="activeClick">
				<el-tab-pane label="角色权限">
					<dataTree ref="dataTree" :data="menu.list"/>
				</el-tab-pane>
				<el-tab-pane label="角色成员">
					<members ref="members" :data="roleUser.list" />
				</el-tab-pane>
			</el-tabs>
		</div>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" v-if="activeNum==0" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
	<el-dialog
		title="选择成员"
		v-model="memberShow"
		:width="720"
		destroy-on-close
		@closed="closedClose"
	>
		<div class="bodyView">
			<div class="viewLeft">
				<div class="viewTitle">部门</div>
				<div class="viewCom">
					<el-scrollbar>
						<treeUser class="treeUser" ref="treeList" :data="deptTree" :userIds="userIds" @roleChecked="roleChecked" />
					</el-scrollbar>
				</div>
			</div>
			<div class="iconRight">
				<div class="icon">
					<el-icon-ArrowRight></el-icon-ArrowRight>
				</div>
			</div>
			<div class="viewRight">
				<div class="viewTitle">已选成员 ({{userCheckList.length}})</div>
				<div class="viewCom">
					<el-scrollbar>
						<div class="checkList" v-for="(item,index) in userCheckList" :key="index" @click="deleteUser(item)">
							<div class="leftTitle">
								<div class="avatar">{{ userAvatar(item) }}</div>
								<div class="name">{{item.name}}</div>
							</div>
							<div class="userBtn"><el-icon-Close></el-icon-Close></div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</div>
		<template #footer>
			<el-button @click="memberShow = false">取 消</el-button>
			<el-button type="primary" :loading="isMember" @click="userSubmit">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
import dataTree from "./dataTree";
import members from "./members";
import treeUser from "./tree"
export default {
	components: {
		dataTree,
		members,
		treeUser
	},
	emits: ["success", "closed"],
	data() {
		return {
			size:'small',
			visible: false,
			isSaveing: false,
			activeNum:0,
			menu: {
				list: [],
			},
			roleUser:{
				list:[]
			},
			memberShow:false,
			deptTree:[],
			isMember:false,
			userCheckList:[],
			userIds:[],

			role_id: 0,
		};
	},
	mounted() {

	},
	methods: {
		userAvatar(row) {
			return row.name.substring(0, 1)
		},
		open(role_id) {
			this.visible = true;
			this.role_id = role_id;

			this.getMenu();
			this.getRoleList();
		},

		submit() {
			this.isSaveing = true;
			const params = this.setList(this.$refs.dataTree.list);
			setTimeout(async ()=>{
				const res = await this.$API.system.role.roleAuth.post(params);
				if(res.code === 200){
					this.isSaveing = false;
					this.visible = false;
					this.$message.success("授权成功");
					this.$emit("success");
				}
			})
		},
		setList(list){
			let obj = {
				role_id:this.role_id,
				menu_permission:[],
				data_permission:[]
			}
			list.forEach(item=>{
				if(item.checked || item.isCheck){
					obj.menu_permission.push(item.meta.code);
				}
				if(item.children){
					item.children.forEach(em=>{
						if(em.checked || em.isCheck){
							obj.menu_permission.push(em.meta.code);
						}
						if(em.meta.data_permission && em.meta.data_permission.length>0){
							let list = em.meta.data_permission.filter(e=>e.checked).map(u=>{
								let obj = {
									actions:u.actions,
									title:u.title
								}
								return obj
							});
							if(list.length>0){
								obj.data_permission.push({[em.meta.code]:list})
							}
						}
					})
				}
			})
			return obj
		},
		activeClick(e){
			this.activeNum = e;
		},
		async getMenu() {
			let params = {
				role_id: this.role_id,
			};
			const res = await this.$API.system.role.roleMenu.post(params);
			this.menu.list = res.data;
		},
		async getRoleList() {
			let params = {
				role_id: this.role_id,
			};
			const res = await this.$API.system.role.roleUser.post(params);
			this.roleUser.list = res.data;
			this.userCheckList = res.data;
			if(res.data && res.data.length>0){
				this.userIds = res.data.map(item=>item.id);
			}
		},
		async getDeptTree() {
			this.memberShow = true;
			const res = await this.$API.system.role.tree.post();
			this.deptTree = this.treeShow(res.data);
		},
		// 数据增加收起
		treeShow(list){
			list.forEach(item=>{
				item.isOpen = false;
				if(item.children){
					this.treeShow(item.children)
				}
			})
			return list
		},
		roleChecked(em){
			let arr = this.userIds;
			if(arr.indexOf(em.id) ==-1){
				this.userIds.push(em.id);
				this.userCheckList.push(em);
				return
			}
			this.userIds.forEach((item,index)=>{
				if(item == em.id){
					this.userIds.splice(index,1);
				}
			})
			this.userCheckList.forEach((item,index)=>{
				if(item.id == em.id){
					this.userCheckList.splice(index,1);
				}
			})
		},
		deleteUser(em){
			this.userIds.forEach((item,index)=>{
				if(item == em.id){
					this.userIds.splice(index,1);
				}
			})
			this.userCheckList.forEach((item,index)=>{
				if(item.id == em.id){
					this.userCheckList.splice(index,1);
				}
			})
		},
		// 移除角色成员
		deleteMember(){
			let ids = [];
			this.$refs.members.list.forEach(item=>{
				if(item.checked){
					ids.push(item.id);
				}
			})
			setTimeout(async()=>{
				let params = {
					user_ids:ids,
					role_id:this.role_id
				}
				const res = await this.$API.system.role.roleUserDel.post(params);
				if(res.code == 200){
					await this.getRoleList();
				}
			},100)
		},
		// 关闭添加成员
		closedClose(){
			this.memberShow = false;
		},
		// 保存成员
		async userSubmit() {
			let params = {
				role_ids: [this.role_id],
				user_ids: this.userCheckList.map(em=>em.id)
			};
			this.isMember = true;
			const res = await this.$API.system.role.roleUserAdd.post(params);
			if(res.code == 200){
				this.memberShow = false;
				this.$message.success('保存成功');
				this.isMember = false;

				await this.getRoleList();
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.dialogBody{
	position: relative;
	margin: -20px 0;
}
.btnPot{
	position: absolute;
	top: 6px;
	right: 0;
	z-index: 10;
}

</style>