hbj_app/components/signPop/signPop.vue

<template>
	<view>
		<!-- 动火人弹出框 -->
		<u-popup :show="showPop" mode="right" customStyle="width: 100vw;height: 100vh;z-index:15;" class="popup">
			<!-- 自定义导航栏 -->
			<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="选择人员">
				<view slot="left"><!-- <p style="font-size: 18px;">取消</p> --></view>
				<view slot="right" @click="goToPage()"><p style="font-size: 18px;color: #3C9CFF;">确定</p></view>
			</u-navbar>

			<view>
				<!-- <u-row style="padding: 0 20rpx;margin-top: 25rpx;">
					<u-col :span="12" style="border: 1px solid #dedede;">
						<lin-select
							:list="productList2"
							loading-text="数据加载中"
							value-key="deptName"
							max-height="180"
							placeholder="根据人员单位或部门名称查询"
							@input="input2"
							v-model="mytext2"
						/>
					</u-col>
				</u-row> -->
				<u-row style="padding: 0 20rpx;margin-top: 10rpx;">
					<u-col :span="12" style="border: 1px solid #dedede;">
						<uni-easyinput focus v-model="nameSouSuo" placeholder="根据人员姓名查询" :clear="true"></uni-easyinput>
					</u-col>
				</u-row>
				<!-- 	<uni-section class="mb-10" :title="`已选择人员${numDou === 1 ? '(单选)' : '(可多选)'}`" type="line"></uni-section> -->
				<u-row style="padding: 20rpx  0rpx 0rpx 10rpx;margin-bottom: 10rpx;font-size: 16px;color: #3C9CFF;">已选择人员{{ numDou === 1 ? '(单选)' : '(可多选)' }}</u-row>

				<view style="padding: 10rpx 10rpx;display: flex; flex-wrap: wrap; justify-content: start;">
					<template v-for="(item, index) in firepersonCheckList">
						<u-tag :text="item.nickName" plain closable @close="closeName(item)"></u-tag>
						<!-- <u-col :span="3">{{ index + 1 }}.{{ item.nickName }}</u-col>
						<u-col :span="7">{{ item.deptName }}</u-col>
						<u-col :span="2"><u--text @click="closeName(item)" type="error" text="取消"></u--text></u-col> -->
					</template>
				</view>
				<u-gap height="0.5" bgColor="#d6d6d6"></u-gap>

				<view>
					<!-- 全部人员名单-->
					<!-- <uni-section class="mb-10" title="人员名单" type="line"></uni-section> -->
					<u-row style="padding: 20rpx  0rpx 0rpx 10rpx;font-size: 16px;color: #3C9CFF;">可选择人员名单</u-row>
					<!-- 全部人员 -->
					<!-- <u-row style="padding: 0rpx  0rpx 20rpx 10rpx;">
						<u-col :span="3">姓名</u-col>
						<u-col :span="7">部门名称</u-col>
						<u-col :span="2">操作</u-col>
					</u-row> -->
					<scroll-view scroll-y="true" style="height: 900rpx;">
						<template v-for="(item, index) in zyFzUserList">
							<u-row style="padding: 20rpx 10rpx;">
								<u-col :span="3">{{ index + 1 }}.{{ item.nickName }}</u-col>
								<u-col :span="7">{{ item.deptName }}</u-col>
								<u-col :span="2"><u--text @click="selectPerson(item)" type="primary" text="选择"></u--text></u-col>
							</u-row>
							<u-gap height="0.5" bgColor="#d6d6d6"></u-gap>
						</template>
						<view style="width: 100%;height: 180rpx;"></view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
//查询部门全部  //查询人员全部
import { selectUserListBaseInfo } from '@/api/system/user.js';

export default {
	name: 'signPop',
	props: {
		nameSee: { type: Array, default: [] },
		//显示隐藏
		showPop: { type: Boolean, default: false },
		signName: {
			type: String,
			default: '请传入签字人'
		},
		numDou: {
			type: [Number, String],
			default: 1
		}
	},
	data() {
		return {
			// mytext2: '', //作业单位
			deptID: '', //作业单位id
			nameSouSuo: '',
			productList2: [], //作业单位返回表单
			zyFzUserList: [],
			firepersonCheckList: this.nameSee //人员选择信息
		};
	},
	mounted() {
		this.zyFzUserList = [];
		this.productList2 = [];
		this.firepersonCheckList = this.nameSee;
		// this.mytext2 = '';
		this.deptID = '';
		this.nameSouSuo = '';
	},

	watch: {
		showPop(newdata, olddata) {
			console.log(this.nameSee);
			console.log(newdata);
			this.zyFzUserList = [];
			this.productList2 = [];
			this.firepersonCheckList = this.nameSee;
			// this.mytext2 = '';
			this.deptID = '';
			this.nameSouSuo = '';
		},
		// //监听作业单位值变化，取作业单位id
		// mytext2(newdata, olddata) {
		// 	if (this.showPop) {
		// 		if (this.mytext2.length < 2) {
		// 			// console.log(this.mytext2.length);
		// 			this.deptID = '';
		// 		}

		// 		if (this.productList2.length !== 0) {
		// 			this.productList2.map(item => {
		// 				if (item.deptName === newdata) {
		// 					this.deptID = item.deptId;
		// 					// console.log('mytexye');
		// 					this.getUserDataList(item.deptId, this.nameSouSuo);
		// 				}
		// 			});
		// 		}
		// 	}
		// },
		//监听作业单位值变化，取作业单位id
		nameSouSuo(newdata, olddata) {
			if (this.showPop) {
				//部门id为空
				if (this.deptID.length === 0) {
					//名字为空
					if (newdata.length === 0) {
						return;
					} else {
						console.log('部门为空，名字有');
						this.getUserDataList(this.deptID, newdata);
					}
				} else {
					//部门id不为空 名字为空
					if (newdata.length === 0) {
						console.log('部门id不为空 名字为空');
						this.getUserDataList(this.deptID);
					} else {
						//部门id不为空 名字不为空
						console.log('部门id不为空 名字不为空');
						this.getUserDataList(this.deptID, newdata);
					}
				}
			}
		}
	},
	methods: {
		//取消
		goToPage1() {
			//参数1：选择的人名信息，参数2：签字人
			this.$emit('dataName', 'no', this.signName);
			//传值完成，重置传值姓名数组
			this.firepersonCheckList = [];
		},
		//确定
		goToPage() {
			//参数1：选择的人名信息，参数2：签字人
			this.$emit('dataName', this.firepersonCheckList, this.signName);
			//传值完成，重置传值姓名数组
			this.firepersonCheckList = [];
		},
		// 点击选择名字
		selectPerson(item) {
			//单选
			if (this.numDou === 1) {
				//防止选择重复
				if (this.firepersonCheckList.indexOf(item) === -1) {
					if (this.firepersonCheckList.length < 1) {
						this.firepersonCheckList.push(item);
					} else {
						this.firepersonCheckList.splice(0, 1, item);
					}
				}
			} else {
				//防止选择重复
				if (this.firepersonCheckList.indexOf(item) === -1) {
					this.firepersonCheckList.push(item);
				}
			}
		},
		// 删除名字
		closeName(id) {
			// console.log(this.firepersonCheckList.indexOf(id));
			this.firepersonCheckList.splice(this.firepersonCheckList.indexOf(id), 1);
		},
		// //作业单位搜索框
		// input2(val) {
		// 	//不等于空才执行
		// 	if (val != '') {
		// 		//防抖节流
		// 		listDept({
		// 			deptName: val
		// 		}).then(res => {
		// 			this.productList2 = [];
		// 			res.data.map(item => {
		// 				this.productList2.push({ deptId: item.deptId, deptName: item.deptName });
		// 			});
		// 		});
		// 	}
		// },
		getUserDataList(id, name) {
			selectUserListBaseInfo({
				deptId: id,
				nickName: name
			}).then(res => {
				this.zyFzUserList = [];
				res.data.map(item => {
					this.zyFzUserList.push({ userId: item.userId, nickName: item.nickName, deptName: item.deptName });
				});
			});
		}
	}
};
</script>

<style lang="scss"></style>