dd_pc/src/components/EmployeeSelector.vue

<template>
	<div>
		<div class="employee_selector_box">
			<el-row :gutter="10">
				<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">
					<div class="search-box">
						<div class="search flex-box" style="margin-bottom: 7px;"><el-input v-model="keyword" placeholder="请输入姓名" clearable></el-input></div>
						<div class="search flex-box" v-if="can_select_dept">
							<el-cascader
								v-model="dept_id"
								ref="dept"
								:options="dept_list"
								:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
								clearable
								filterable
								placeholder="全公司"
							></el-cascader>
						</div>
					</div>
					<div class="flex-box-end" style="padding: 10px;border-bottom: 1px solid #f1f1f1;height: 40px;box-sizing: border-box;">
						<el-checkbox v-if="isChecKedAll && multi" v-model="checked" @change="checkedChange" :indeterminate="indeterminate">全选</el-checkbox>
					</div>
					<el-scrollbar :style="{ height: can_select_dept ? '310px' : '350px' }" :native="false" v-loading="table_loading">
						<div class="choose_left">
							<div class="persons_box" v-if="list.length > 0">
								<div class="employee_cell_a"  v-for="(item, index) in list" :key="index">
									<div class="employee_cell flex-box flex-v-ce" v-show="can_select_employee" @click.prevent.stop="select_employee(item)">
										<div class="employee_checkbox"><el-checkbox v-model="item.checked"></el-checkbox></div>
										<img :src="item.img_url" width="30" height="30" class="imgUrl" v-if="item.img_url">
										<div class="imgUrl" v-else style="background: #238DFA;color: #fff;">
											{{item.name}}
										<!-- {{item.name.substring(item.name.length-2)}} -->
										</div>
										<div class="employee_name">{{ item.name }}</div>
									</div>
								</div>
							</div>
							<div v-else class="fontColorC" style="text-align: center;margin-top: 50px;">暂无可选人员</div>
						</div>
					</el-scrollbar>
				</el-col>
				<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="col-line"><span style="opacity: 0;">空</span></el-col>
				<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
					<div class="option-box flex-box flex-v-ce">
						<div class="fontColorC flex-1" v-show="multi">已选择{{ employee_selected_list.length }}个员工</div>
						<el-button type="type" @click="clear_data()">清空</el-button>
					</div>
					<el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 390px;">
						<div class="choose_right">
							<div class="employee_cell flex-box flex-v-ce" v-for="(item, index) in dept_selected_list" :key="index">
								<div class="employee_name">{{ item.dept_name }}</div>
								<div class="employee_delete"><el-button type="default" size="mini" @click="dept_cancel(item)" icon="el-icon-close" circle></el-button></div>
							</div>
							<div class="flex-box-ce employee_cell2" v-for="(item, index) in employee_selected_list" :key="index">
								<div class="flex-box-ce flex-1">
									<img :src="item.img_url" width="30" height="30" style="margin-right: 8px;" class="imgUrl" v-if="item.img_url">
									<div class="imgUrl" v-else style="background: #238DFA;color: #fff;margin-right: 8px;">
										<span v-if="item.name">{{item.name.substring(item.name.length-2)}}</span>
									</div>
									<div class="userName font-flex-word">{{ item.name }}</div>
								</div>
								<i class="el-icon-error deleteUser" v-if="!item.is_creator || !createDimness" @click="employee_cancel(item, true)"></i>
							</div>
						</div>
					</el-scrollbar>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
// import Item  from './Item'
// import VirtualList from 'vue-virtual-scroll-list'
export default {
	props: {
		can_select_dept: {
			//指定是否能选择部门
			type: Boolean,
			default: true
		},
		can_select_employee: {
			//指定是否能选择员工
			type: Boolean,
			default: true
		},
		selected: {
			//已经选择的员工和部门
			type: Object,
			default: () => {
				return {
					employee: [],
					dept: []
				};
			}
		},
		multi: {
			//指定员工是否能多选
			type: Boolean,
			default: true
		},
		dept_multi: {
			//指定部门是否能多选
			type: Boolean,
			default: true
		},
		employee_list: {
			//指定显示的员工列表，注意：传值后组件的员工数据将不是统一向服务器获取的，而是指定的员工列表，格式是：[{id: 1, name: “张三”, img_url: “”}]
			type: Array,
			default: () => {
				return [];
			}
		},
		close_clear_data: {
			//关闭时是否清空选择的数据
			type: Boolean,
			default: true
		},
		max: {
			//当multi为true时，用来限制选择人数，0不生效
			type: Number,
			default: 0
		},
		user_no_select: {
			//是否能选择系统管理员
			type: Boolean,
			default: true
		},
		isChecKedAll: {
			//是否能全人员
			type: Boolean,
			default: true
		},
		my_no_select: {
			//当前设置人的id,过滤某位人员，一般为自己
			type: Number,
			default: 0
		},
		isCreatorSelect: {
			//当employee_list为空时，依然显示空值而不是显示人员列表
			type: Boolean,
			default: false
		},
		use_Administrator_list: {
			//未指定员工并请求人员接口时，保留管理员，过滤员工
			type: Boolean,
			default: false
		},
		createDimness: {
			//组织架构设置上级专用-不清除系统管理员
			type: Boolean,
			default: false
		}
	},
	name: 'EmployeeSelector',
	data() {
		let selected = JSON.parse(JSON.stringify(this.selected));
		let user_no_select = JSON.parse(JSON.stringify(this.user_no_select));
		return {
			table_loading: false,
			employee_selected_list: selected.employee,
			dept_selected_list: selected.dept,
			employee_selected: [],
			dept_selected: [],
			com_height: '100%',
			list: [], //人员列表
			dept_name: '', //部门名称
			dept_id: 0, //部门ID
			pid: 0, //部门ID实传
			dept_list: [], //部门列表
			dept_list_arr: [], //收集的部门
			keyword: '', //搜索值
			checked: false, //是否全选
			indeterminate: false,
			not_user: user_no_select,
			all_list: [],
			searchBox: [], //用于搜索的全部人员
		};
	},
	watch: {
		dept_id(val) {
			if (val.length > 1) {
				this.pid = val[val.length - 1];
			} else {
				this.pid = val[0];
			}
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.get_user_list();
				this.checked = false;
			});
		},
		selected(val) {
			let selected = JSON.parse(JSON.stringify(val));
			console.log(selected)
			this.employee_selected = [];
			this.dept_selected = [];
			this.employee_selected_list = selected.employee;
			this.dept_selected_list = selected.dept;
			for (let i in selected.employee) {
				this.employee_selected.push(selected.employee[i].id);
			}
			for (let i in selected.dept) {
				this.dept_selected.push(selected.dept[i].dept_id);
			}
		},
		//搜索
		keyword(val) {
			this.list = this.searchBox.filter(item => item.name.includes(this.keyword));
			if (!val) {
			  this.checked = false;
			}
		}
	},
	methods: {
		//全选择
		checkedChange(val) {
			if (val) {
				this.$nextTick(() => {
				  let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list)); //获取选择的人员
				  
				  let employeeSelectedIds = [],total = 0;
				  employeeSelectedList.forEach(element => {
				    employeeSelectedIds.push(element.id);
				  });
				  for (let i in this.list) {
				    this.$set(this.list[i], 'checked', true);
				    if (!employeeSelectedIds.includes(this.list[i].id)) {
				      //去除已经选择的人员
				      this.employee_selected_list.push(this.list[i]);
				    }
				  }
				});
				// for (let i in this.list) {
				// 	this.$set(this.list[i], 'checked', true);
				// }
				// this.$nextTick(() => {
				// 	let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list));
				// 	let employeeSelectedIds = [],total = 0;
				// 	employeeSelectedList.forEach(element => {
				// 		employeeSelectedIds.push(element.id);
				// 	});
				// 	for (const i in this.list) {
				// 		if (employeeSelectedIds.includes(this.list[i].id)) {
				// 			total += 1;
				// 		} else {
				// 			this.employee_selected_list.push(this.list[i]);
				// 		}
				// 	}
				// 	this.list.length == total ? (this.indeterminate = true) : (this.indeterminate = false);
				// });
			} else {
				this.clear_data();
			}
		},
		//添加或移除已添加的员工
		employee_cancel(item) {
			this.employee_selected_list.map((arr, index) => {
				if (arr.id == item.id) {
					this.employee_selected_list.splice(index, 1);
				}
			});
			this.list.map((arr, index) => {
				if (arr.id == item.id) {
					this.$set(arr, 'checked', false);
				}
			});
		},
		//获取部门
		get_dept_list() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_list = this.getTreeData(res.data.data.list);
			});
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		},
		//选择部门
		dept_cancel(item) {
			this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1);
			let delete_index = -1;
			for (let i in this.dept_selected_list) {
				if (this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0) {
					delete_index = i;
				}
			}
			if (delete_index >= 0) {
				this.dept_selected_list.splice(delete_index, 1);
				for (let i in this.dept_list) {
					if (this.dept_list[i].dept_id == item.id) {
						this.$set(this.dept_list[i], 'checked', false);
					}
				}
			}
		},
		//选择员工
		select_employee(item) {
			if (item.checked) {
				item.checked = false;
				this.employee_cancel(item);
			} else {
				if (!this.multi) {
					this.employee_selected = [];
					this.employee_selected_list = [];
					for (let i in this.list) {
						this.$set(this.list[i], 'checked', false);
					}
				}
				if (this.max > 0 && this.employee_selected_list.length == this.max && this.multi) {
					this.$message.error('最多只能选择' + this.max + '人');
					return false;
				}
				this.employee_selected.push(item.id);
				this.employee_selected_list.push({
					id: item.id,
					name: item.name,
					img_url: item.img_url
				});
				item.checked = true;
			}
		},

		clear_data() {
			this.employee_selected = [];
			if(this.createDimness){
				this.employee_selected_list = this.employee_selected_list.filter(x => x.is_creator);
			}else{
				this.employee_selected_list = [];
			}
			this.dept_selected = [];
			this.dept_selected_list = [];
			this.checked = false;
			for (let i in this.list) {
				this.$set(this.list[i], 'checked', false);
			}
			for (let i in this.dept_list) {
				this.$set(this.dept_list[i], 'checked', false);
			}
		},

		close() {
			if (this.close_clear_data) {
				this.employee_selected = [];
				this.employee_selected_list = [];
				this.dept_selected = [];
				this.dept_selected_list = [];
				for (let i in this.list) {
					this.$set(this.list[i], 'checked', false);
				}
				for (let i in this.dept_list) {
					this.$set(this.dept_list[i], 'checked', false);
				}
			}
		},
		confirm() {
			this.$emit('confirm', {
				employee: this.employee_selected_list,
				dept: this.dept_selected_list
			});
			this.close();
		},
		filtration() {
			//获取员工列表,限制已禁用的员工
			this.$axios('get', '/api/employee/index', { dept_id: this.pid, page: 0, page_size: 3000,is_official:1 })
				.then(res => {
					if (res.data.code == 1) {
						let list = res.data.data.list;
						let data = [];
						// list.forEach((item, index) => {
						// 	if (item.is_official == 1) {
						// 		data.push(item);
						// 	}
						// });
						this.userdatars(list);
					} else {
						this.userdatars();
					}
				})
				.catch(() => {
					this.userdatars();
				});
		},
		userdatars(userlist) {
			var employee_selected_list = this.employee_selected_list;
			let list = this.employee_list;
			if (userlist) {
				list = [...userlist].filter(x => [...list].some(y => y.id === x.id));
				//过滤已离职人员
				// employee_selected_list=[...userlist].filter(x => [...employee_selected_list].some(y => y.id === x.id));
			}
			// console.log(userlist,list)
			list.map(item => {
				item['checked'] = false;
				for (var i in employee_selected_list) {
					//判断传进来的员工是否是员工集合里的，是就设为已点击状态
					if (employee_selected_list[i].id == item.id) {
						item['checked'] = true;
					}
				}
			});
			this.employee_selected_list = employee_selected_list;
			this.list = list;
			this.searchBox=list;
			this.table_loading = false;
		},
		//获取员工详情
		get_user_list() {
			this.table_loading = true;
			var that = this;
			var employee_selected_list = this.employee_selected_list;
			if (this.employee_list.length > 0 || this.isCreatorSelect) {
				this.filtration();
				return false;
			}
			this.list = [];
			this.$axios('get', '/api/employee/index', { dept_id: this.pid, keywords: this.keyword, page: 0, page_size: 3000,is_official:1 }).then(res => {
					var employee = res.data.data.list || [];
					if (this.use_Administrator_list) {
						//使用管理员列表
						employee = this.useAdministratorList(employee);
					}
					var userAll = [];
					employee.forEach((item, i) => {
						if (!this.not_user && item.is_creator == 1) {
							//过滤系统管理员
							return null;
						} else if (this.my_no_select == item.id) {
							//过滤掉当前设置人
							return null;
						} else if (item.id) {
							userAll.push(item);
						}
						// 前端先隐藏过滤未开启的人员的功能
						// } else if (item.is_official == 1) {
						// 	userAll.push(item);
						// }
					});
					userAll.map(item => {
						item['checked'] = false;
						for (var i in employee_selected_list) {
							//判断传进来的员工是否是员工集合里的，是就设为已点击状态
							if (employee_selected_list[i].id == item.id) {
								item['checked'] = true;
							}
						}
					});
					that.list = userAll;
					this.searchBox=userAll;
				})
				.finally(() => {
					that.table_loading = false;
			});
		},
		useAdministratorList(list) {
			//过滤掉普通员工，返回管理员
			let arr = [];
			list.forEach((item, i) => {
				if (
					item.employee_detail.role_list.findIndex(
						value => value.name == 'dept_manager' || value.name == 'creator' || value.name == 'point_manager' || value.name == 'admin'
					) >= 0
				) {
					arr.push(item);
				}
			});
			return arr;
		}
	},
	created() {
		this.checked = false;
		setTimeout(() => {
			this.get_user_list();
			if (this.can_select_dept) {
				this.get_dept_list();
			}
		}, 200);
	}
};
</script>

<style scoped>
.deleteUser{
	font-size: 16px;
	padding: 8px;
	color: #777777;
	cursor: pointer;
}
.deleteUser:hover{
	color: #F56C6C;
}
.userName{
	width: 170px;
}	
.employee_selector_box {
	width: 600px;
	padding: 20px;
	box-sizing: border-box;
	margin: 0 auto;
}

/* 搜索框 */
.employee_selector_box .search {
	margin: 0 auto;
	width: 80%;
}

/* 左边框 */
.employee_selector_box .choose_left {
	padding: 8px 10px;
}

.employee_selector_box .choose_left .employee_cell {
	border-bottom: 1px #f1f1f1 solid;
}


.employee_selector_box .choose_left .employee_checkbox {
	padding-left: 8px;
}

.employee_selector_box .choose_left .employee_img_url {
	padding-left: 8px;
}

.employee_selector_box .choose_left .employee_name {
	padding-left: 8px;
}

/* .employee_selector_box ::v-deep .el-scrollbar__thumb {
	width: 2px;
	margin: 15px 0 0 6px;
	background: #409eff;
} */

/* 右边距 */
.employee_selector_box .option-box {
	padding: 14px;
}

.employee_selector_box .choose_right {
	padding: 8px 10px;
}

.employee_selector_box .choose_right .employee_delete .el-button {
	transform: scale(0.5);
	background: #c0c4cc;
}

.employee_selector_box .choose_right .employee_delete .el-button ::v-deep .el-icon-close {
	color: #fff;
}

.employee_selector_box .choose_right .employee_delete .el-button:active {
	background: #409eff;
}

.employee_selector_box .choose_right .employee_delete .el-button:active ::v-deep .el-icon-close {
	color: #fff;
}

.employee_selector_box .choose_right .employee_cell .employee_name {
	padding-left: 8px;
}

.employee_selector_box .choose_right .employee_cell .employee_img_url {
	padding-left: 8px;
}

/* 右边距 */
.employee_cell2{
	padding: 8px 0;
	height: 50px;
	box-sizing: border-box;
	border-bottom: 1px #f1f1f1 solid;
}
.employee_selector_box ::v-deep .employee_cell {
	padding: 8px 0;
	height: 50px;
	box-sizing: border-box;
}

.employee_selector_box ::v-deep .employee_cell:hover {
	background: #ecf5ff;
}

.employee_cell {
	display: -webkit-inline-box;
	cursor: pointer;
	width: 100%;
	color: #606266;
	padding: 8px 0;
	background-color: transparent;
	border-bottom: 1px #f1f1f1 solid;
}


.employee_cell .employee_img_url {
	display: table-cell;
	vertical-align: middle;
	width: 30px;
	padding-left: 0px;
}

.employee_cell .employee_img_url img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.employee_cell .employee_checkbox {
	display: table-cell;
	vertical-align: middle;
	width: 30px;
	text-align: center;
}

.employee_cell .employee_name {
	display: table-cell;
	vertical-align: middle;
	color: #606266;
}

.employee_delete {
	display: table-cell;
	text-align: right;
	padding-right: 0px;
}

.employee_cell_a {
	display: block;
}

.employee_cell_a:hover {
	background-color: #ecf5ff;
	border-radius: 4px;
}

.dept_child_cell {
	display: table-cell;
	vertical-align: middle;
}

.dept_child_cell span {
	float: right;
	padding-right: 8px;
}

.dept_child_cell span:hover {
	color: #1c1c1c;
}

.dept_child_cell span:active {
	color: #1c1c1c;
}

.scroller-box {
	height: 440px;
	padding: 0px !important;
	background-color: #fdfdfd;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
}
/* .scroller-box.one{
    height: 440px;
  } */

.col-line {
	position: relative;
	height: 400px;
}

.col-line:before {
	content: ' ';
	width: 1px;
	height: 400px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	background-color: #eee;
}

.search-box {
	background-color: #fff;
	padding: 10px 5px;
	border-bottom: 1px solid #eee;
}

.option-box {
	padding: 5px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	margin: 0 -5px;
}

.child_btn {
	color: #409eff;
}
.dept_path {
	margin: 10px 0;
	display: block;
	white-space: nowrap;
	overflow: auto;
}

/*滚动条的宽度*/

.dept_path::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.dept_path::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

/*滚动条的设置*/

.dept_path::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条移上去的背景*/

.dept_path:hover::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, 0.3);
}
.imgUrl{
	border-radius: 50%;
	height: 30px;
	width: 30px;
	box-sizing: border-box;
	text-align: center;
	line-height: 30px;
	font-size: 0.6rem;
}
</style>