realty/virgo.wzfrontend/workark/src/components/common/selectUser.vue

<template>
	<div class="hui-flex hui-dialog">
		<div class="hui-flex-box">
			<div class="change-user-box">
				<div class="change-part">
					<div class="part-breadcrumb">
						<div class="part-breadcrumb-item" v-for="(item,index) in breadcrumb" :key="index"
							@click="breadcrumbClick(item,index)">
							{{item.name}}
							<i class="iconfont huifont-xiala-right" v-if="index < breadcrumb.length-1"></i>
						</div>
					</div>
					<el-checkbox class="check-all" v-model="checkAll" @change="checkChange" v-if="!maxLen">
						全选
					</el-checkbox>
					<div class="part-user no-box" v-if="partList.length === 0 && userList.length === 0">
						<el-empty width="100"></el-empty>
					</div>
					<div class="part-user" v-else>
						<el-checkbox-group v-model="checkedBox" @change="testCheckedAll">
							<el-checkbox v-for="(item,index) in partList" :label="item.id" :key="-item.id" disabled>
								<div class="user-box">
									<div class="user-avatar">
										<i class="iconfont huifont-bumen"></i>
									</div>
									<div class="user-name">{{item.name}}</div>
									<div class="part-button" @click="openPart(item)">展开</div>
								</div>
							</el-checkbox>
							<el-checkbox v-for="(item,index) in userList" :label="item.id" :key="item.id"
								@change="selectUser" :disabled="returnDisabled(item)">
								<div class="user-box">
									<div class="user-avatar">
										<avatar :user="item" :size="12"></avatar>
									</div>
									<div class="user-name">{{item.name}}</div>
								</div>
							</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
				<div class="change-user">
					<div class="change-user-operation">
						<div class="change-user-count">
							已选择：{{checkedUserList.length}}名用户
						</div>
						<div class="change-user-clear" @click="clearAll">清空</div>
					</div>
					<div class="change-user-list no-box" v-if="checkedUserList.length === 0">
						<el-empty width="100"></el-empty>
					</div>
					<div class="change-user-list" v-else>
						<div class="change-user-item user-box" v-for="(item,index) in checkedUserList" :label="item.id"
							:key="item.id">
							<div class="user-avatar">
								<avatar :user="item" :size="12"></avatar>
							</div>
							<div class="user-name">
								<div>{{item.name}}</div>
								<p>{{item.partName}}</p>
							</div>
							<div class="user-delete" @click="deleteUser(item)">
								<i class="iconfont huifont-guanbi"></i>
							</div>
							<div class="user-line" v-if="index < checkedUserList.length-1"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="hui-dialog-submit">
			<el-button size="small" @click="$emit('callback')">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">保 存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getPartList
	} from '@/api/organization'
	export default {
		props: ['list', 'type', 'maxLen'],
		data() {
			return {
				checkAll: false,
				partList: [],
				allUserList: [],
				userList: [],
				checkedBox: [],
				breadcrumb: [{
					id: 0,
					name: '部门'
				}],
				checkedUserList: [],
				partId: ''
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				getPartList(this.$store.getters.organization.id, -1).then(res => {
					if (res.state) {
						this.returnChildren(res.data); //获取总员工数列表
						this.partList = res.data;
						this.breadcrumb[0]['node'] = this.partList;
						if (this.list && this.list.length > 0) {
							this.checkedBox = this.list.map(node => node.id);
							this.checkedUserList = this.list;
						}
					}
				})
			},
			returnChildren(data) {
				data.forEach(item => {
					if (item.children && item.users) {
						let obj = item.users.map(res => {
							return {
								id: res.id,
								name: res.name,
								partName: item.name,
								partId: item.id,
								portrait: res.portrait
							};
						})
						this.allUserList = this.allUserList.concat(obj);
					}
					if (item.children && item.children.length > 0) this.returnChildren(item.children);
				});
			},
			returnDisabled(item) {
				if (this.maxLen === this.checkedBox.length) {
					if (this.checkedBox.filter(node => node === item.id).length > 0) return false;
					return true;
				}
				return false;
			},
			checkChange(val) {
				if (this.userList.length === 0) return;
				if (val) {
					let data = this.checkedBox;
					this.checkedBox = Array.from(new Set(data.concat(this.userList.map(node => node.id))));
				} else {
					let ids = this.userList.map(node => node.id);
					for (var i = 0; i < ids.length; i++) {
						let boxIndex = this.checkedBox.findIndex(node => node === ids[i]);
						this.checkedBox.splice(boxIndex, 1);
					}
				}
				this.selectUser();
			},
			selectUser() {
				this.checkedUserList = this.checkedBox.map(node => {
					return this.allUserList.filter(user => user.id === node)[0];
				})
			},
			deleteUser(item) {
				let boxIndex = this.checkedBox.findIndex(node => node === item.id);
				this.checkedBox.splice(boxIndex, 1);
				this.selectUser();
				this.testCheckedAll();
			},
			clearAll() {
				this.checkedBox = [];
				this.selectUser();
				this.testCheckedAll();
			},
			openPart(data) {
				this.breadcrumb.push({
					id: data.id,
					name: data.name,
					node: data
				});
				this.filterList(data);
			},
			filterList(data) {
				this.partList = data.children;
				this.partId = data.id;
				this.userList = this.allUserList.filter(node => node.partId === data.id);
				this.testCheckedAll();
			},
			testCheckedAll() {
				if (this.userList.length === 0) return this.checkAll = false;
				let checkedCount = this.checkedBox.filter(node => this.userList.filter(res => res.id === node).length > 0)
					.length;
				this.checkAll = checkedCount === this.userList.length;
			},
			breadcrumbClick(item, index) {
				if (index === this.breadcrumb.length - 1) return;
				this.breadcrumb = this.breadcrumb.slice(0, index + 1);
				if (item.id === 0) {
					this.userList = [];
					return this.partList = item.node;
				}
				this.filterList(this.breadcrumb[this.breadcrumb.length - 1].node);
			},
			submit() {
				this.$emit('callback', this.checkedUserList);
			}
		}
	}
</script>

<style lang="scss">
	.change-user-box {
		width: 100%;
		height: 100%;
		display: flex;

		.no-box {
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 1px solid $--border-color-light;
		}

		.change-part {
			flex: 1;
			border-right: 1px solid $--border-color-light;
			height: 100%;
			display: flex;
			flex-direction: column;

			.part-breadcrumb {
				display: flex;
				flex-wrap: wrap;
				padding: 20px;

				.part-breadcrumb-item {
					display: flex;
					align-items: center;
					opacity: 0.5;
					cursor: pointer;

					i {
						font-size: 14px;
						padding: 0 5px;
					}
				}

				.part-breadcrumb-item:last-child {
					opacity: 1;
				}
			}

			.check-all {
				padding: 0px 20px 10px 20px;
			}

			.part-user {
				flex: 1;
				overflow-y: auto;
				padding: 0 20px 10px 20px;

				.el-checkbox-group {
					.el-checkbox {
						display: flex;
						align-items: center;
						height: 48px;

					}

					.el-checkbox__input.is-disabled+span.el-checkbox__label {
						cursor: pointer;
					}

					.el-checkbox {
						margin-right: 0;
					}

					.el-checkbox__label {
						flex: 1;
					}
				}
			}
		}

		.user-box {
			display: flex;
			align-items: center;

			.user-avatar {
				width: 32px;
				height: 32px;
				background: $--color-primary;
				border-radius: 50%;
				margin-right: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;

				i {
					font-size: 20px;
					color: $--color-white;
				}
			}


			.user-name {
				flex: 1;
				width: 0;

				p {
					font-size: 12px;
					opacity: 0.6;
				}
			}

			.part-button {
				color: $--color-primary;
			}

			.user-delete {

				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				border-radius: 2px;

				i {
					margin-top: 2px;
					opacity: 0.5;
					font-size: 14px;
				}
			}

			.user-delete:hover {
				color: $--color-danger;
			}
		}

		.change-user {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;

			.change-user-operation {
				padding: 20px;
				display: flex;
				justify-content: space-between;

				.change-user-clear {
					color: $--color-danger;
					cursor: pointer;
				}
			}

			.change-user-list {
				flex: 1;
				height: 0;
				overflow-y: auto;
				padding: 0 20px 14px 20px;

				.change-user-item {
					height: 48px;
					position: relative;

					.user-line {
						width: 2px;
						background-color: rgba(255, 255, 255, 0.2);
						position: absolute;
						top: 40px;
						bottom: -8px;
						left: 15px;
					}
				}
			}
		}
	}
</style>