From 196d8cbb91d2eec81b19d2ef8dd6ce1c3851feb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Tue, 16 Jul 2024 18:34:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/system.js               |   6 +-
 src/components/scExport/index.vue     |   2 +-
 src/style/fix.scss                    |  21 ++
 src/style/user.scss                   |  80 ++++++
 src/utils/request.js                  |   7 +-
 src/utils/tool.js                     |  15 +
 src/views/login/index.vue             |   2 +-
 src/views/setting/company/index.vue   |  14 +-
 src/views/setting/company/save.vue    |   2 +-
 src/views/setting/role/dataTree.vue   |   2 +-
 src/views/setting/role/index.vue      | 381 ++++++++++++++++++++++----
 src/views/setting/role/members.vue    |  28 +-
 src/views/setting/role/permission.vue |  82 +-----
 src/views/setting/user/index.vue      |   4 +-
 14 files changed, 495 insertions(+), 151 deletions(-)

diff --git a/src/api/model/system.js b/src/api/model/system.js
index 7a57e44..20f512f 100644
--- a/src/api/model/system.js
+++ b/src/api/model/system.js
@@ -223,9 +223,9 @@ export default {
 		template:{
 			url: `${config.API_URL}/company.import.template`,
 			name: "公司资料导入模版",
-			responseType: 'arraybuffer',
-			get: async function (params) {
-				return await http.get(this.url,params);
+			// responseType: 'arraybuffer',
+			post: async function (params) {
+				return await http.get(this.url,params,{responseType: 'arraybuffer'});
 			}
 		},
 		import:{
diff --git a/src/components/scExport/index.vue b/src/components/scExport/index.vue
index e43dbeb..6c1a380 100644
--- a/src/components/scExport/index.vue
+++ b/src/components/scExport/index.vue
@@ -9,7 +9,7 @@
 		:visible="show"
 	>
 		<template #reference>
-			<el-button :size="size" icon="sc-icon-Download" @click="exportClick">下载 {{show}}</el-button>
+			<el-button :size="size" icon="sc-icon-Download" @click="exportClick">下载</el-button>
 		</template>
 		<template #default>
 			<div v-for="item in list" :key="item">
diff --git a/src/style/fix.scss b/src/style/fix.scss
index e07678b..7933fca 100644
--- a/src/style/fix.scss
+++ b/src/style/fix.scss
@@ -52,6 +52,26 @@
 	--el-pagination-button-width-small:28px;
 	--el-pagination-button-height-small:28px;
 }
+.el-tabs.role_tabs{
+	--el-tabs-header-height:60px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.el-tabs__header{
+		.el-tabs__nav{
+			padding: 0 20px;
+		}
+	}
+	.el-tabs__content{
+		flex: 1;
+		overflow: hidden;
+		padding-left: 10px;
+		padding-bottom: 10px;
+		.el-tab-pane{
+			height: 100%;
+		}
+	}
+}
 
 .el-menu {border: none!important;}
 .el-menu .el-menu-item.is-active{background: var(--el-menu-hover-bg-color);position: relative;}
@@ -70,6 +90,7 @@
 .el-header .right-panel > * + * {margin-left:10px;}
 .el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;}
 .el-main {padding:10px;width: 100%;height: 100%;box-sizing: border-box;background: var(--el-color-white);border-radius: 4px;}
+.el-main.treeMain{border-radius: 0;}
 .el-main.nopadding {padding:0;background: #fff;display: flex;flex-direction: column;}
 .el-main.nopadding .scTable{flex: 1;overflow: hidden;}
 
diff --git a/src/style/user.scss b/src/style/user.scss
index 2ab791d..7b5f328 100644
--- a/src/style/user.scss
+++ b/src/style/user.scss
@@ -107,3 +107,83 @@
 		}
 	}
 }
+
+
+/** 角色设置 */
+.bodyView{
+	display: flex;
+	font-size: 12px;
+	.viewLeft{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.treeUser{
+			padding: 10px 15px 10px 0;
+		}
+	}
+	.iconRight{
+		flex-basis: 30px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.icon{
+			width: 14px;
+		}
+	}
+	.viewRight{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.checkList{
+			display: flex;
+			justify-content: space-between;
+			margin:8px 15px 8px 15px;
+			.leftTitle{
+				flex: 1;
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+				color: var(--el-color-primary);
+				.avatar{
+					background: var(--el-color-primary);
+					color: var(--el-color-white);
+					border-radius: 50%;
+					display: inline-block;
+					height: 21px;
+					width: 21px;
+					text-align: center;
+					line-height: 21px;
+				}
+				.name{
+					margin-left: 10px;
+				}
+			}
+			.userBtn{
+				flex-basis: 12px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+			.userBtn:hover{
+				color: var(--el-color-primary);
+			}
+		}
+		.checkList:first-child{
+			margin-top: 10px;
+		}
+		.checkList:last-child{
+			margin-bottom: 10px;
+		}
+	}
+	.viewTitle{
+		flex-basis: 35px;
+	}
+	.viewCom{
+		flex: 1;
+		border: 1px solid var(--el-border-color-light);
+		min-height: 200px;
+		max-height: 400px;
+		border-radius: 8px;
+	}
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index b361d81..5cbf460 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -33,6 +33,8 @@ let MessageBox_401_show = false
 // HTTP response 拦截器
 axios.interceptors.response.use(
 	(response) => {
+		// const contentDisposition = response.headers['Content-Disposition'];
+		// console.log(response,677)
 		const token = response.headers.authorization;
 		if (token) {
 			let reToken = token.replace(/Bearer /g, "");
@@ -69,7 +71,10 @@ axios.interceptors.response.use(
 				message: response.data.msg || "Status:500，服务器发生错误！",
 			});
 		} else if (api_code === 0 || api_code !== 200) {
-			ElMessage.warning(response.data.message);
+			const contentType = response.headers.get('Content-Type');
+			if(contentType.includes('application/json')){
+				ElMessage.warning(response.data.message);
+			}
 		}
 
 		return response;
diff --git a/src/utils/tool.js b/src/utils/tool.js
index c71c425..c585fac 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -306,4 +306,19 @@ tool.getParameterByName = function(name, url) {
 	return decodedValue;
 }
 
+tool.isBinaryString = function (str){
+	return /[^\t\n\r\x20-\x7E]/.test(str);
+}
+
+tool.isBinaryFile = function (file) {
+	const reader = new FileReader();
+	return new Promise((resolve) => {
+		reader.onloadend = () => {
+			const binaryString = reader.result;
+			resolve(tool.isBinaryString(binaryString));
+		};
+		reader.readAsBinaryString(file.slice(0, 1024));
+	});
+}
+
 export default tool
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index fec75df..23e31e6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -156,7 +156,7 @@
 
 	.login_adv__mask {
 		background-size: cover;
-		background-position: 0;
+		background-position: 20%;
 		background-repeat: no-repeat;
 		background-image: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_back.png);
 		width: calc(100% - 460px);
diff --git a/src/views/setting/company/index.vue b/src/views/setting/company/index.vue
index 5a64353..587d31e 100644
--- a/src/views/setting/company/index.vue
+++ b/src/views/setting/company/index.vue
@@ -154,10 +154,16 @@ export default {
 			})
 		},
 		async importTemplate() {
-			const res = await this.$API.system.company.template.get();
-			if(res.code == 200){
-				console.log(res.data)
-			}
+			const res = await this.$API.system.company.template.post();
+			const blob = new Blob([res.data]);
+			const eLink = document.createElement('a');
+			eLink.download = "company_import_template_20240716093538_6695ce6a3ca1f.xlsx";
+			eLink.style.display = 'none';
+			eLink.href = URL.createObjectURL(blob);
+			document.body.appendChild(eLink);
+			eLink.click();
+			URL.revokeObjectURL(eLink.href); // 释放URL 对象
+			document.body.removeChild(eLink);
 		},
 
 		//编辑
diff --git a/src/views/setting/company/save.vue b/src/views/setting/company/save.vue
index 2ceb00f..9247fd2 100644
--- a/src/views/setting/company/save.vue
+++ b/src/views/setting/company/save.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1200" destroy-on-close draggable @closed="$emit('closed')">
-		<el-scrollbar height="480px" style="padding: 0 20px;">
+		<el-scrollbar height="500px" style="padding: 0 20px;">
 			<el-form :model="form" :rules="rules" ref="dialogForm" label-width="140px">
 				<el-row justify="space-between">
 					<el-col :span="11">
diff --git a/src/views/setting/role/dataTree.vue b/src/views/setting/role/dataTree.vue
index 07960d6..465cc8b 100644
--- a/src/views/setting/role/dataTree.vue
+++ b/src/views/setting/role/dataTree.vue
@@ -1,6 +1,6 @@
 <template>
 	<!-- 自定义表格 -->
-	<el-scrollbar max-height="400px">
+	<el-scrollbar height="100%">
 		<div class="customTable">
 			<div class="tableBody" v-if="list.length>0">
 				<template v-for="(item,inde) in list" :key="inde">
diff --git a/src/views/setting/role/index.vue b/src/views/setting/role/index.vue
index 3eea8b8..c79b160 100644
--- a/src/views/setting/role/index.vue
+++ b/src/views/setting/role/index.vue
@@ -1,60 +1,116 @@
 <template>
-	<el-container class="mainBox mainBoxHeaderNoBorder">
+	<el-container>
 		<el-header>
 			<div class="left-panel">
-				<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新建</el-button>
-				<el-button type="danger" :size="size" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
-				<el-button type="primary" :size="size" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
+				<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增角色</el-button>
+				<el-button type="danger" :size="size" plain icon="el-icon-delete" :disabled="roleCheckList.length==0" @click="batch_del"></el-button>
+<!--				<el-button type="primary" :size="size" plain :disabled="roleCheckList.length!=1" @click="permission">权限设置</el-button>-->
 			</div>
 			<div class="right-panel">
 
 			</div>
 		</el-header>
-		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" stripe :size="size">
-				<el-table-column type="selection" align="center" width="50"></el-table-column>
-				<sc-table-column label="序号" align="center" type="index"></sc-table-column>
-				<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
-				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
-				<el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
-				<el-table-column label="状态" prop="status" align="center" width="100">
-					<template #default="scope">
-						<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" fixed="right" align="center" width="170">
-					<template #default="scope">
-						<el-dropdown>
-							<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button>
-							<template #dropdown>
-								<el-dropdown-menu>
-									<el-dropdown-item @click="table_edit(scope.row, 'edit')" icon="sc-icon-Edit">修改</el-dropdown-item>
-									<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete" divided>删除</el-dropdown-item>
-								</el-dropdown-menu>
-							</template>
-						</el-dropdown>
-					</template>
-				</el-table-column>
+		<el-container class="mainBox" style="border-radius: 0;">
+			<el-aside width="200px" v-loading="showGroupLoading">
+				<el-container>
+					<el-header>
+						<el-input placeholder="输入关键字进行过滤" :size="size" v-model="groupFilterText" clearable></el-input>
+					</el-header>
+					<el-main class="treeMain nopadding">
+						<el-tree ref="group" class="menu" node-key="id" show-checkbox :data="group" :default-checked-keys="roleCheckList" :current-node-key="role_id" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @check-change="groupChange" @node-click="groupClick"></el-tree>
+					</el-main>
+				</el-container>
+			</el-aside>
+			<el-container>
+				<el-main class="nopadding">
+					<div class="btnPot" v-if="activeNum==0">
+						<el-button type="primary" plain :size="size" :loading="isSave" @click="submit">保存权限</el-button>
+					</div>
+					<div class="btnPot" v-if="activeNum==2">
+						<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 class="role_tabs" tab-position="top" @tab-change="activeClick">
+						<el-tab-pane label="功能权限">
+							<dataTree ref="dataTree" :data="menu.list"/>
+						</el-tab-pane>
+						<el-tab-pane label="数据权限">
 
-			</scTable>
-		</el-main>
+						</el-tab-pane>
+						<el-tab-pane label="角色成员">
+							<members ref="members" :data="roleUser.list" />
+						</el-tab-pane>
+					</el-tabs>
+				</el-main>
+			</el-container>
+		</el-container>
 	</el-container>
 
+	<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>
 	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
-
 	<permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>
-
 </template>
 
 <script>
-	import saveDialog from './save'
-	import permissionDialog from './permission'
+	import saveDialog from './save';
+	import permissionDialog from './permission';
+	import dataTree from "./dataTree";
+	import members from "./members";
+	import treeUser from "./tree"
 
 	export default {
 		name: 'role',
 		components: {
 			saveDialog,
-			permissionDialog
+			permissionDialog,
+			dataTree,
+			members,
+			treeUser
+		},
+		watch:{
+			groupFilterText(val) {
+				this.$refs.group.filter(val);
+			}
 		},
 		data() {
 			return {
@@ -64,14 +120,50 @@
 					save: false,
 					permission: false
 				},
+				showGroupLoading:false,
+				groupFilterText:"",
+				group:[],
+
 				list:{
 					apiObj: this.$API.system.role.list,
 					column:[]
 				},
-				selection: [],
+
+				isSave:false,
+				activeNum:0,
+				roleCheckList:[],
+				role_id:"",
+				menu: {
+					list: [],
+				},
+				roleUser:{
+					list:[]
+				},
+
+				memberShow:false,
+				deptTree:[],
+				isMember:false,
+				userCheckList:[],
+				userIds:[],
 			}
 		},
+		mounted() {
+			this.getGroup(true);
+		},
 		methods: {
+			async getGroup(flag = false){
+				this.showGroupLoading = true;
+				const res = await this.$API.system.role.list.get();
+				if(res.code == 200){
+					this.group = res.data.rows;
+					this.role_id = res.data.rows && res.data.rows.length>0?res.data.rows[0].id:"";
+					if(flag){
+						await this.getMenu();
+						await this.getRoleList();
+					}
+				}
+				this.showGroupLoading = false;
+			},
 			//添加
 			add(){
 				this.dialog.save = true
@@ -90,8 +182,7 @@
 			permission(){
 				this.dialog.permission = true;
 				this.$nextTick(() => {
-					const role_id = this.selection[0]["id"];
-					this.$refs.permissionDialog.open(role_id)
+					this.$refs.permissionDialog.open(this.role_id)
 				})
 			},
 			//删除
@@ -102,32 +193,28 @@
 					const params = {ids: [row.id]};
 					const res = await this.$API.system.role.delete.post(params);
 					if(res.code == 200){
-						this.$refs.table.refresh()
+						await this.getGroup(true);
 						this.$message.success("删除成功")
 					}
 				}).catch(()=>{})
 			},
 			//批量删除
 			async batch_del(){
-				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+				this.$confirm(`确定删除选中的 ${this.roleCheckList.length} 项吗？`, '提示', {
 					type: 'warning'
 				}).then(async () => {
 					const loading = this.$loading();
-					const params = {ids: this.selection.map(em=>em.id)};
+					const params = {ids: this.roleCheckList.map(em=>em)};
 					const res = await this.$API.system.role.delete.post(params);
 					if (res.code == 200) {
-						this.$refs.table.refresh()
-						this.$message.success("删除成功")
+						await this.getGroup(true);
+						this.$message.success("删除成功");
 					}
 					loading.close();
 				}).catch(() => {
 
 				})
 			},
-			//表格选择后回调事件
-			selectionChange(selection){
-				this.selection = selection;
-			},
 			//表格内开关
 			changeSwitch(val, row){
 				row.$switch_status = true;
@@ -161,16 +248,200 @@
 				return target
 			},
 			//本地更新数据
-			handleSaveSuccess(data, mode){
-				if(mode=='add'){
-					this.$refs.table.refresh()
-				}else if(mode=='edit'){
-					this.$refs.table.refresh()
+			handleSaveSuccess(){
+				this.getGroup(true);
+			},
+
+			//树过滤
+			groupFilterNode(value, data){
+				if (!value) return true;
+				return data.label.indexOf(value) !== -1;
+			},
+			//树选中事件
+			groupChange(data,isCheck){
+				let list = JSON.parse(JSON.stringify(this.roleCheckList));
+				if(isCheck){
+					this.roleCheckList.push(data.id);
+				}else{
+					this.roleCheckList = list.filter(em=>em != data.id);
 				}
-			}
+			},
+			//树点击事件
+			groupClick(data){
+				this.role_id = data.id;
+				this.getMenu();
+				this.getRoleList();
+			},
+
+			// 保存权限
+			submit() {
+				this.isSave = 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.$message.success("授权成功");
+						await this.getMenu();
+					}
+					this.isSave = false;
+				})
+			},
+			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){
+								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
+			},
+
+			// 权限和角色成员
+			userAvatar(row) {
+				return row.name.substring(0, 1)
+			},
+			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;
+				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(){
+				this.$confirm(`确定删除选中成员吗？`, '提示', {
+					type: 'warning'
+				}).then(async () => {
+					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)
+				}).catch(()=>{})
+			},
+			// 关闭添加成员
+			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>
+<style lang="scss" scoped>
+	.nopadding{
+		position: relative;
+	}
+	.btnPot{
+		position: absolute;
+		top: 16px;
+		right: 0;
+		z-index: 10;
+	}
 </style>
diff --git a/src/views/setting/role/members.vue b/src/views/setting/role/members.vue
index 16981e7..6f0de75 100644
--- a/src/views/setting/role/members.vue
+++ b/src/views/setting/role/members.vue
@@ -1,13 +1,14 @@
 <template>
-	<el-scrollbar max-height="400px">
+	<el-scrollbar class="scrollbar" height="100%">
 		<div class="customTable">
 			<div :class="list.length===0?'thenTitle thenTitleBottom':'thenTitle'">
 				<div class="tr">
 					<div class="th btnCheckout"><el-checkbox @change="allCheckChange" :indeterminate="isCheckFun" v-model="checkedFun" :size="size"></el-checkbox></div>
 					<div class="th seq">序号</div>
 					<div class="th name">姓名</div>
-					<div class="th department">部门</div>
 					<div class="th mobile">手机号</div>
+					<div class="th email">邮箱</div>
+					<div class="th department">部门</div>
 				</div>
 			</div>
 			<div :class="list.length==0?'tableBody tableBodyNull':'tableBody'">
@@ -16,8 +17,9 @@
 						<div class="td btnCheckout"><el-checkbox v-model="item.checked" :size="size"></el-checkbox></div>
 						<div class="td seq">{{index+1}}</div>
 						<div class="td name">{{item.name}}</div>
-						<div class="td department">{{item.department}}</div>
 						<div class="td mobile">{{item.mobile}}</div>
+						<div class="td email">{{item.email}}</div>
+						<div class="td department">{{item.department}}</div>
 					</div>
 				</template>
 				<el-empty v-else :description="emptyText" :image-size="100"></el-empty>
@@ -83,6 +85,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.scrollbar{
+	:deep(.el-scrollbar__view){
+		height: 100%;
+	}
+}
 .btnCheckout{
 	flex-basis: 60px;
 	display: flex;
@@ -108,7 +115,13 @@ export default {
 	justify-content: center;
 }
 .mobile{
-	flex-basis: 150px;
+	flex:1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.email{
+	flex:1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -116,6 +129,8 @@ export default {
 .customTable{
 	border: 1px solid var(--el-border-color-light);
 	font-size: 12px;
+	display: flex;
+	flex-direction: column;
 }
 .thenTitle .tr {
 	display: flex;
@@ -129,6 +144,7 @@ export default {
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		overflow: hidden;
 	}
 	.th:first-child{
 		border-left: 0;
@@ -140,6 +156,9 @@ export default {
 .tableBodyNull{
 	border-top:1px solid var(--el-border-color-light);
 }
+.tableBody{
+	flex: 1;
+}
 .tableBody .tr{
 	display: flex;
 	align-items: stretch;
@@ -148,6 +167,7 @@ export default {
 	.td{
 		padding: 0 10px;
 		border-left: 1px solid var(--el-border-color-light);
+		overflow: hidden;
 		.nextTd{
 			display: flex;
 			align-items: center;
diff --git a/src/views/setting/role/permission.vue b/src/views/setting/role/permission.vue
index 7d9974d..014f095 100644
--- a/src/views/setting/role/permission.vue
+++ b/src/views/setting/role/permission.vue
@@ -9,7 +9,7 @@
 		<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="memberShow=true && this.getDeptTree()">添加成员</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="角色权限">
@@ -180,6 +180,7 @@ export default {
 			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);
 		},
@@ -258,6 +259,7 @@ export default {
 				this.memberShow = false;
 				this.$message.success('保存成功');
 				this.isMember = false;
+
 				await this.getRoleList();
 			}
 		},
@@ -276,81 +278,5 @@ export default {
 	right: 0;
 	z-index: 10;
 }
-.bodyView{
-	display: flex;
-	font-size: 12px;
-	.viewLeft{
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		.treeUser{
-			padding: 10px 15px 10px 0;
-		}
-	}
-	.iconRight{
-		flex-basis: 30px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		.icon{
-			width: 14px;
-		}
-	}
-	.viewRight{
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		.checkList{
-			display: flex;
-			justify-content: space-between;
-			margin:8px 15px 8px 15px;
-			.leftTitle{
-				flex: 1;
-				display: flex;
-				align-items: center;
-				cursor: pointer;
-				color: var(--el-color-primary);
-				.avatar{
-					background: var(--el-color-primary);
-					color: var(--el-color-white);
-					border-radius: 50%;
-					display: inline-block;
-					height: 21px;
-					width: 21px;
-					text-align: center;
-					line-height: 21px;
-				}
-				.name{
-					margin-left: 10px;
-				}
-			}
-			.userBtn{
-				flex-basis: 12px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				cursor: pointer;
-			}
-			.userBtn:hover{
-				color: var(--el-color-primary);
-			}
-		}
-		.checkList:first-child{
-			margin-top: 10px;
-		}
-		.checkList:last-child{
-			margin-bottom: 10px;
-		}
-	}
-	.viewTitle{
-		flex-basis: 35px;
-	}
-	.viewCom{
-		flex: 1;
-		border: 1px solid var(--el-border-color-light);
-		min-height: 200px;
-		max-height: 400px;
-		border-radius: 8px;
-	}
-}
+
 </style>
diff --git a/src/views/setting/user/index.vue b/src/views/setting/user/index.vue
index f3ec7d6..38542ed 100644
--- a/src/views/setting/user/index.vue
+++ b/src/views/setting/user/index.vue
@@ -1,11 +1,11 @@
 <template>
-	<el-container class="mainBox ">
+	<el-container class="mainBox">
 		<el-aside width="200px" v-loading="showGroupLoading">
 			<el-container>
 				<el-header>
 					<el-input placeholder="输入关键字进行过滤" :size="size" v-model="groupFilterText" clearable></el-input>
 				</el-header>
-				<el-main class="nopadding">
+				<el-main class="treeMain nopadding">
 					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
 				</el-main>
 			</el-container>