wurenji-xcx/components/selectPeople/selectPeople.vue

<template>
	<u-popup :show="show" @close="show=false" :closeable='true'>
		<view class="popup">
			<view class="header">
				请选择
			</view>
			<view class="search">
				<u-search placeholder="名称" v-model="keyword" @search='onClickButton' @custom='onClickButton'></u-search>
			</view>
			<view class="breadcrumb">
				<span class="breadcrumb_c" v-for="(item, index) in breadcrumbList" :key="item.id"
					@click="todept(item, index)">
					{{ item.name }}
					<span v-if="index !== breadcrumbList.length - 1">/</span>
				</span>
			</view>
			<view class="main">
				<view class="tree" v-if="treeList.length>0">
					<view class="boxs" v-for="item in treeList" :key="item.id">
						<checkbox style="width: 50rpx;" @click="change(item)" :checked="item.checked"
							:disabled="item.disabled" />
						<view style="display: flex">
							<view @click="change(item)">
								<span>
									{{ item.name }}&nbsp;&nbsp; ({{ item.children.length }})
								</span>
								<span v-if="pLabel">- {{ item.parentName }}</span>
							</view>
							<span @click="details(item)" v-if="item.children.length > 0"
								style="font-size: 28rpx; color: #2561ef">下级</span>
						</view>
					</view>
				</view>
				<u-empty mode="data" v-else icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
			<div class="bottom">
				<div class="checkAll">
					<div style="color: #2561ef">
						已选择{{ suredata.length }}项
					</div>
				</div>
				<div class="sure" @click="sure">确认</div>
			</div>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "selectPeople",
		props: {
			value: {
				type: String,
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			checkof: {
				type: Boolean,
				default: false
			},
			src: {
				type: String,
				default: '/sys/dept/sysUserTreeInfo'
			}
		},
		data() {
			return {
				show: false,
				pLabel: false,
				keyword: "",
				suredata: [],
				breadcrumbList: [],
				treeList: [],
				deptList: []
			};
		},

		methods: {
			sure() {
				let departmentId = [];
				let departmentName = [];
				this.suredata.forEach((x) => {
					departmentId.push(x.id);
					departmentName.push(x.name);
				});
				this.$emit("update:value", departmentId.toString());
				this.$emit("update:label", departmentName.toString());
				this.$emit("selectPeople", this.suredata);
				this.show = false
			},
			onClickButton() {
				this.check(this.keyword);
				if (this.keyword) {
					this.pLabel = true;
				} else {
					this.pLabel = false;
				}
				this.treeList = this.check(this.keyword);
			},
			check(name, nodes = this.deptList, arr = []) {
				for (let item of nodes) {
					if (item.name.indexOf(name) > -1) {
						arr.push(item);
					}
					if (item.children && item.children.length)
						this.check(name, item.children, arr);
				}
				return name ? arr : this.deptList[0].children;
			},
			init() {
				this.breadcrumbList = []
				this.getDept()
			},
			async getDept() {
				this.suredata = []
				this.deptList = []
				this.$api.to_http(this.src, "get").then(async (res) => {
					if (res.data.code != 0) {
						uni.$u.toast(res.data.msg)
						return
					}
					this.deptList = res.data.data
					await this.showData(this.deptList);
					this.$nextTick(() => {
						this.treeList = this.deptList[0].children;
						this.breadcrumbList.push(this.deptList[0]);
						this.show = true
					})
				})
			},
			details(e, i) {
				this.breadcrumbList.push(e);
				this.treeList = e.children;
				this.readNodes(this.deptList);
			},
			async showData(nodes = [], arr = []) {
				for (let item of nodes) {
					if (this.value) {
						this.value.split(',').forEach((x) => {
							if (x == item.id) {
								item.checked = true
								this.suredata.push(item)
							}
						})
					}
					if (!this.checkof && item.type == 'dept') {
						item.disabled = true
					}
					arr.push(item);
					if (item.children && item.children.length)
						this.showData(item.children, arr);
				}
				return arr;
			},
			readNodes(nodes = [], arr = []) {
				for (let item of nodes) {
					if (item.children) {
						item.children.forEach((items) => {
							items.pLabel = item.name;
						});
					}
					if (!this.checkof && item.type == 'dept') {
						item.disabled = true
					}
					arr.push(item);
					if (item.children && item.children.length)
						this.readNodes(item.children, arr);
				}
				return arr;
			},
			todept(e, i) {
				this.breadcrumbList.splice(i + 1);
				this.treeList = e.children;
			},

			change(e) {
				if (e.type == 'user') {
					e.checked = !e.checked;
					// 单选
					if (!this.checkof) {
						// 是否有数据
						if (this.suredata[0]) {
							this.suredata[0].checked = false;
							this.suredata = [];
							if (e.checked) {
								this.suredata.push(e);
							} else {
								if (!this.suredata.some((item) => e.id == item.id)) {}
							}
						} else {
							this.suredata.push(e);
						}
					} else {
						//多选
						if (e.checked) {
							this.suredata.push(e);
						} else {
							this.suredata.forEach((item, index) => {
								if (item.id == e.id) {
									this.suredata.splice(index, 1);
								}
							});
						}
					}
				} else {
					e.checked = false
					e.children.forEach((x) => {
						if (x.type == 'user') {
							x.checked = true
							this.suredata.push(x);
						}
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.popup {
		background-color: #F5F5F5;
		font-size: 30rpx
	}

	.header {
		padding: 20rpx;
		text-align: center;
		background-color: #fff;
		border-bottom: 1px solid #F5F5F5;
	}

	.search {
		background-color: #fff;
		padding: 20rpx;
	}

	.breadcrumb {
		background-color: #fff;
		padding: 0 10rpx 10rpx 10rpx;
		font-size: 26rpx
	}

	.main {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.tree {
			height: 600rpx;
			overflow: auto;

			.boxs {
				display: flex;

				>view {
					flex: 1
				}
			}
		}
	}

	.bottom {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 10rpx;
		align-items: center;

		.sure {
			background: #3796F2;
			color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
		}
	}

	.breadcrumb_c {
		color: #2561ef;
	}

	.breadcrumb_c:last-child {
		color: #000;
	}
</style>