dgtis-uniapp/pages/popleSelect/choose.vue

<template>
	<view class="pur-list">
		<view class="pur-hadder">
			<uni-search-bar style="width: 100%;" placeholder="请输入姓名" @confirm="search" @clear="clear" @blur="blur"
				clearButton="auto" cancelButton="none" />
		</view>
		<view class="pur-body">
			<!-- 面包屑 -->
			<view class="bread" v-if='isShow'
				style='display: flex;align-items:center; margin-left: 5px;height: 100rpx;width: 750rpx;'>
				<view style='margin-right:5rpx;' @click='goBigBread()'>
					通讯录
				</view>
				<view v-for='(it, i) in breadList' @click='goBread(it, i)' :key='i'>
					<text style='margin-left: 5px;margin-right: 5px;'>></text>
					<text style='margin-left: 5px;margin-right: 5px;'>{{ it.name }}</text>
				</view>
			</view>
			<view v-if='isShow' class="" style='width: 750rpx;height: 15rpx;background-color:#f1f0f5;'>

			</view>
			<view class="" style='padding-bottom: 160rpx;width: 750rpx;' :style='{ marginTop: isShow ? "0px" : "80rpx" }'>
				<view class="list" v-if='deptIdTree.length'>
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 40rpx;margin-right: 40rpx;height: 110rpx;border-bottom: 1px solid #f0f0f0;"
						v-for="(it, i) in deptIdTree" :key='i' @click='godept(it)'>
						<view v-if='it.name' style='display: flex;height: 110rpx;flex-direction: row;'>
							<text style='font-size: 36rpx;line-height: 110rpx;'>{{ it.name }} </text>
							<!-- <text style='color:#ccc;line-height: 110rpx;'>({{it.children.length}})</text> -->
						</view>
						<view class="" v-if='it.children' style='padding-top: 40rpx;'>
							<text style='color: #ccc;'>></text>
						</view>

					</view>
				</view>
				<view v-if='userList.length'>
					<view class="" v-for='(it, i) in userList' :key='it.id'
						style='display: flex;flex-direction: row;height: 110rpx;margin-left: 5px;padding-top: 20px;padding-left: 10px;position: relative;border-bottom: 1px solid #f0f0f0;'>
						<label class="radio" v-if='selectType' @click="isChecked($event, i, it)">
							<radio :value='it.id.toString()' :checked="it.checked" />
						</label>
						<text class="avatar" style='position: absolute;top:12px;left:40px'
							:style='{ left: selectType ? "40px" : "10px" }'>{{ it.name.length > 2 ? it.name.substr(it.name.length - 2) : it.name }}</text>
						<view style='margin-left: 90rpx;'>
							<text style='font-size: 36rpx;'>{{ it.name }}</text>
						</view>
					</view>
				</view>
				<view v-if="!userList.length" style='width: 750rpx;text-align: center;padding-top: 100rpx;'>
					暂无数据
				</view>
			</view>
		</view>


		<view class="list-bottom">
			<view class="list-bottom-lianxi" @click='open'>
				<text>已选择</text>
				<text class="list-bottom-queding" v-if='checkList.length'>{{ checkList.length }}个</text>
				<text>联系人</text>
			</view>
			<view @click="determine" v-if='checkList.length'>
				<text class="list-bottom-queding">确定</text>
			</view>
			<view v-else>
				<text class="list-bottom-queding" style="color: #8F8F94;">确定</text>
			</view>
		</view>

		<!-- 底部弹框 -->
		<my-popup id="popup" ref="popup" type="bottom" :animation="false" @change="change">
			<view class="popup-content" :style='{ height: checkList.length > 3 ? "auto" : "500rpx" }'
				style='padding-bottom: 100rpx;'>
				<view class="" style='display: flex;flex-direction: row;justify-content: space-between;height: 100rpx;'>
					<view class="" style='display: flex;flex-direction: row;margin-top: 20rpx;margin-left: 40rpx;'>
						<text style='color: #333;'>已选择</text>
						<text style='color:#007AFF;font-size: 36rpx;'>{{ checkList.length }}</text>人
					</view>
					<view class="" style='margin-right: 20rpx;margin-top: 20rpx;' @click='submit'>
						<text style='margin-right:10px;color:#007AFF;font-size: 36rpx;line-height: 50rpx;'>关闭</text>
					</view>
				</view>
				<view class="" v-for='(it, i) in checkList' :key='i'
					style='display: flex;flex-direction: row;border-bottom: 1px solid #f0f0f0;width: 750rpx;justify-content: space-between;height: 100rpx;'>
					<view class="" style='position: relative;'>
						<text class="avatar" v-if='it.name'
							style='position: absolute;top:8px;left:20px'>{{ it.name.length > 2 ? it.name.substr(it.name.length - 2) : it.name }}</text>
						<view style='margin-left: 130rpx;margin-top: 15px;color: #333;font-size: 36rpx;'>{{ it.name }}
						</view>
					</view>
					<view class="" style='margin-right: 20px;padding-top: 35rpx;'>
						<text
							style='color:#C9C9C9;font-size: 30rpx;text-align: center;border-radius: 10rpx;width: 100rpx;height: 50rpx;line-height: 50rpx;border-width: 1px;border-color: #C9C9C9;'
							@click='deleteUser(it)'>删除</text>
					</view>
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
import {
	listSimpleDepts,
	listForSelectEmployee
} from "@/api/peopleSelect/index"
import myPopup from '../../components/my-popup/my-popup.vue';
export default {
	props: {
		type: {
			type: String,
			default: 'single' //single or multiple
		},
	},
	data() {
		return {
			// 查询参数
			queryParams: {
				name: undefined,
				deptId: undefined,
				auth: undefined
			},
			deptIdTree: [],
			userList: [],
			breadList: [],
			selectType: true,
			active: null,
			checkList: [],
			breadId: null,
			isShow: true, //是否显示面包屑
		}
	},
	components: {
		myPopup
	},
	onLoad() {
		this.getInfoData();
	},
	onShow() {
		this.getInfoData();
	},
	methods: {
		getInfoData() {
			if (this.type == 'multiple') {
				this.queryParams.auth = 0;
			} else {
				this.queryParams.auth = 1;
			}
			this.getDeptTree()
			this.getList()
		},
		/** 查询部门下拉树结构 */
		getDeptTree() {
			listSimpleDepts().then(response => {
				// 处理 deptIdTree 参数
				this.deptIdTree = [];
				this.deptIdTree.push(...this.handleTree(response.data, "id"));
				console.log(this.deptIdTree);
			});
		},
		/** 查询用户列表 */
		getList() {
			listForSelectEmployee(this.queryParams).then(response => {
				this.userList = response.data
				console.log(this.userList);
			})
		},
		search(res) {
			console.log('----search:', res)
			this.queryParams.name = res.value;
			this.getList();
		},
		clear(res) {
			console.log('----clear:', res)
			this.queryParams.name = '';
			this.getList();
		},
		blur(res) {
			console.log('----blur:', res)
			this.queryParams.name = res.value;
			this.getList();
		},

		// 弹窗确认
		submit() {
			this.$refs.popup.close()
		},
		deleteUser(it) {
			this.userList.forEach(its => {
				if (its.id == it.id) {
					its.checked = false
				}
			})
			this.checkList = this.checkList.filter(item => {
				let itId = it.id.toString();
				let itemId = item.id.toString();
				return !itId.includes(itemId);
			})
		},
		change() { },
		open() {
			let that = this;
			that.$refs.popup.open();
		},
		goBread(it, i) {
			if (it.it.children) {
				this.deptIdTree = it.it.children
			} else {
				this.deptIdTree = []
			}
			this.breadId = it
			this.breadList = this.breadList.slice(0, i + 1)
			this.queryParams.deptId = it.id;
			this.getList();
		},
		goBigBread() {
			this.queryParams.deptId = undefined;
			this.getDeptTree();
			this.getList();
			this.breadList = []
		},
		isChecked(e, i, it) {
			this.active = i;
			console.log("12")
			// #ifdef APP-NVUE
			console.log("123")
			e.stopPropagation()
			// #endif
			this.userList[i].checked = !this.userList[i].checked
			if (this.selectType) {
				if (this.userList[i].checked) {
					console.log('push进去', this.checkList)
					this.checkList.push(it)
				} else {
					this.checkList.splice(this.checkList.indexOf(it), 1);
				}
			} else {

			}
		},
		godept(it) {
			console.log('人员', it)
			if (it.name) {
				this.breadId = it.id
				this.breadList.push({
					name: it.name,
					id: it.id,
					it: it,
					color: '#0066CC'
				})
			}
			if (!it.children) {
				this.deptIdTree = []
			} else {
				this.deptIdTree = it.children
			}
			this.queryParams.deptId = it.id;
			this.getList();
		},
		//获取选中的人员昵称列表
		getNickNameList(uns) {
			let result = []

			uns.forEach(item => {
				result.push(item.name)
			})

			return result
		},
		//获取选中的人员ID列表
		getUserIdList(uns) {
			let result = []
			uns.forEach(item => {
				result.push(item.id)
			})

			return result
		},
		// 确认
		determine() {
			if (this.type == 'single') {
				if(this.checkList.length>1){
					uni.showModal({
					content: "请选择一个成员!",
					showCancel: false,
					confirmText: "确定",
				})
				}else{
					this.$emit('submit', this.checkList, this.getNickNameList(this.checkList), this.getUserIdList(this.checkList))
				}
			} else {
				this.$emit('submit', this.checkList, this.getNickNameList(this.checkList), this.getUserIdList(this.checkList))
			}
			
		},
	}
}
</script>
<style></style>
<style lang="scss">
.pur-list {
	background-color: #fff;
	height: 100%;
	overflow: hidden;

	.pur-hadder {
		background-color: #ffffff;
		height: 55px;
		font-size: 14px;
		display: flex;
		position: -webkit-sticky;
		position: sticky;
		box-sizing: border-box;
		min-width: 100%;
		overflow-x: auto;
	}

	.pur-body {
		height: calc(100% - 88upx);
		overflow: auto
	}
}

.avatar {
	width: 70rpx;
	height: 70rpx;
	background: #3489ff;
	text-align: center;
	line-height: 70rpx;
	border-radius: 15rpx;
	font-size: 26rpx;
	color: #fff;
}

.popup-content {
	width: 750rpx;
	height: 500rpx;
	z-index: 99999;
	background-color: #fff
}

.list-bottom {
	position: fixed;
	height: 150rpx;
	background-color: #FFFFFF;
	width: 760rpx;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font-size: 35rpx;
	justify-content: space-between;
	padding: 50rpx 30rpx;
}

.list-bottom-queding {
	color: #007AFF;

}

.list-bottom-lianxi {
	display: flex;
	flex-direction: row;
}

.search {
	position: relative;
	width: 700rpx;
	height: 80rpx;
	box-sizing: border-box;
	line-height: 80rpx;
	background: #f1f0f5;
	border-radius: 26rpx;
	margin-left: 15%;


}

.fdj {
	position: absolute;
	top: 35rpx;
	transform: translateY(-50%);
	right: 70rpx;
	color: #999;
	font-size: 40rpx;
}

.list {
	width: 750rpx;
}
</style>