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 resource from '../../js/data.js';
	import myPopup from '../../components/my-popup/my-popup.vue';
	export default {
		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.getDeptTree()
			this.getList()
		},
		onShow() {
			this.getDeptTree()
			this.getList()
		},
		methods: {
			/** 查询部门下拉树结构 */
			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() {
				console.log(this.checkList)
				this.$emit('submit', this.checkList,this.getNickNameList(this.checkList), this.getUserIdList(this.checkList))
				
				// uni.navigateTo({
				// 	url: '/pages/oa/universal/index?list=' + JSON.stringify(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: 20rpx;
		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>