zhgdyunapp_vue3/pages/projectEnd/trainPlan/searchTeam/personList.vue

<template>
	<view class="fullHeight bgWhite">
		<headers :showBack="true">
			<view class="headerName">
				人员列表
			</view>
			<template #right>
				<checkbox-group @change="selectAll">
					<label>
						<checkbox value="1" :checked="isChecked" :disabled="isDisable" />全选
					</label>
				</checkbox-group>
			</template>
		</headers>
		<!-- <scroll-view scroll-y="true" class="pageContent"> -->
		<view class="personContent">
			<checkbox-group @change="checkboxChange">
				<view class="personItem" v-for="(item,index) in personList" :key="index" @click="searchPerson(item.id)">
					<image v-if="item.fieldAcquisitionUrl" :src="url_config+'image/'+item.fieldAcquisitionUrl"
						class="profile_photo"></image>
					<image v-else src="/static/profile_photo.png" class="profile_photo"></image>
					<view class="personInfo">
						<view class="name">
							{{item.workerName}}
						</view>
						<view class="teamName">
							{{item.teamName}}
						</view>
						<view class="small">
							{{item.sex==2?'女':'男'}} {{item.age}}
						</view>
					</view>
					<checkbox :value="item.checkVal" :disabled="item.isDisable" :checked="item.isChecked" />
				</view>
			</checkbox-group>
			<view class="placeholderBox" v-show="personList.length==0">
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
		<view class="addSaveBtn" @click="addSaveBtn">新增保存</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue"
	export default {
		components: {
			headers
		},
		data() {
			return {
				personList: [],
				projectDetail: {},
				workerName: '',
				teamId: 0,
				pageNo: 1,
				pageSize: 100,
				objData: "",
				selectCheckVal: [],
				isChecked: false,
				isDisable: false,
			};
		},
		onLoad(options) {
			// this.teamId = options.id
			this.objData = JSON.parse(options.obj)
			console.log(this.objData, 777888)
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.loadData()
		},
		onReachBottom() {
			console.log("============================")
			this.pageNo++;
			uni.showLoading({
				title: '加载中'
			})
			this.loadData()
		},
		methods: {
			// 全选
			selectAll(e) {
				this.isChecked = e.detail.value.length > 0 ? true : false;
				this.personList = this.personList.map(item => {
					return {
						...item,
						isChecked: !item.isDisable ? this.isChecked : item.isChecked,
					};
				});
				this.selectCheckVal = this.personList.filter(item => item.isChecked).map(item => item.checkVal);
			},
			addSaveBtn() {
				let dealData = [];
				this.personList.map(item => {
					if (this.selectCheckVal.includes(item.checkVal)) {
						dealData.push({
							workerCard: item.idCard,
							workerId: item.id,
							workerName: item.workerName,
							workerTeam: item.teamName,
							workerType: item.typeName,
							sex: item.sex,
							age: item.age,
							fieldAcquisitionUrl: item.fieldAcquisitionUrl,
							enterpriseId: item.enterpriseId
						})
					}
				})
				if (uni.getStorageSync("personInfo")) {
					let alreadyStoreData = JSON.parse(uni.getStorageSync("personInfo"))
					dealData = dealData.concat(alreadyStoreData)
				}
				uni.setStorageSync("personInfo", JSON.stringify(dealData))
				uni.navigateBack({
					delta: 2
				})
			},
			checkboxChange(e) {
				console.log(e, "11111")
				this.selectCheckVal = e.detail.value;
				this.personList = this.personList.map(item => {
					return {
						...item,
						isChecked: !this.selectCheckVal.includes(item.checkVal) ? false : true,
					};
				});
				this.isChecked = e.detail.value.length == this.personList.length ? true : false;
			},
			loadData() {
				var that = this
				let requestData = {
					projectSn: this.projectDetail.projectSn,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					inserviceType: 1
				}
				if (this.objData.type == 1) {
					requestData.teamId = this.objData.id
				}
				if (this.objData.type == 2) {
					requestData.departmentId = this.objData.id
				}
				this.sendRequest({
					url: 'xmgl/workerInfo/selectWorkerInfoList',
					data: requestData,
					method: "POST",
					success(res) {
						if (that.pageNo == 1) {
							that.personList = []
						}
						// console.log('--------')
						// this.personList = res.result.records
						that.personList = [...that.personList, ...res.result.records]
						uni.hideLoading() //关闭加载中
						that.personList.map((item, index) => {
							item.checkVal = index + "";
							item.isDisable = false;
							item.isChecked = false;
						})
						that.isChecked = false;
						if (uni.getStorageSync("personInfo")) {
							let storeArr = JSON.parse(uni.getStorageSync("personInfo"))
							that.personList.map((item, index) => {
								let findIndex = storeArr.findIndex(item2 => item2.workerId == item
									.id)
								if (findIndex != -1) {
									item.isDisable = true;
									item.isChecked = true;
								}
							})
							that.isDisable = that.personList.filter(item => item.isChecked == true).length == that
								.personList.length ? true : false;
							that.isChecked = that.personList.filter(item => item.isChecked == true).length == that
								.personList.length ? true : false;
						}
					}
				})
			},
			searchPerson(id) {
				uni.navigateTo({
					url: './personDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep( .rightIcon ){
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 9;
	}

	.personContent {
		padding: 30rpx;
		padding-bottom: 80rpx;
	}

	.personItem {
		width: 100%;
		display: flex;
		align-items: center;
		box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
		position: relative;
		margin-bottom: 10rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		// padding: 0 30rpx;
		font-size: 30rpx;

		.teamName {
			font-size: 26rpx;
		}

		.small {
			font-size: 24rpx;
			opacity: 0.8;
		}

		.personInfo {
			margin-right: auto;
		}

	}

	.profile_photo {
		width: 100rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.addSaveBtn {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		background-color: #4181FE;
		color: #fff;
		font-size: 34rpx;
		letter-spacing: 4rpx;
		position: fixed;
		bottom: 0%;
		left: 0%;
		z-index: 10
	}
</style>