zhgdyunapp_vue3/pages/projectEnd/selectPerson/selectPerson2.vue

<template>
	<!-- 安全教育培训加入人员 -->
	<view class="fullHeight bgWhite">
		<headers :showBack="true">
			<view class="headerName">
				选择人员
			</view>
		</headers>
		<view class="searchBox">
			<input type="text" v-model="workerName" confirm-type="search" class="input" placeholder="按工人姓名查找" @confirm="personList=[];loadData()" />
		</view>
		<scroll-view scroll-y="true" class="pageContent">
			<view class="personContent">
				<view class="personItem" v-for="item in personList" :key="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>
					<text v-if="item.status" class="statusBtn">已加入</text>
					<text v-else class="addBtn" @click="addPersonFn(item)">加入</text>
				</view>
				<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>
</template>

<script>
	import headers from "../../../components/headers/headers.vue"
	export default {
		components:{headers},
		data() {
			return {
				personList:[],
				selectArr:[],
				projectDetail:{},
				workerName:'',
				pageTitle:'',
				selectPerson:[]
			};
		},
		mounted(){
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			if(uni.getStorageSync('person')){
				this.selectPerson = JSON.parse(uni.getStorageSync('person'))
			}
			this.loadData()
		},
		methods:{
			addPersonFn(item){
				
				this.selectPerson.push({workerId:item.id,sex: item.sex,teamName: item.teamName,workerName: item.workerName,fieldAcquisitionUrl: item.fieldAcquisitionUrl})
				console.log('addPersonFn',this.selectPerson)
				this.showStatus()
				uni.setStorageSync('person',JSON.stringify(this.selectPerson))
			},
			showStatus(){
				var  Things=this.selectPerson
				for (var i = 0; i < Things.length; i++) {
					for (var j = 0; j < this.personList.length; j++) {
						if(this.personList[j].id==Things[i].workerId){
							var json = this.personList[j]
							json.status = 1
							this.$set(this.personList,j,json)
						}
					}
				}
			},
			loadData(){
				var that = this
				this.sendRequest({
					url: "xmgl/workerInfo/selectWorkerInfoList",
					// url: "xmgl/workerInfo/getLaborManagementInfoList",
					data: {projectSn: this.projectDetail.projectSn,workerName:this.workerName},
					method: "POST",
					success(res){
						that.personList = res.result.records
						that.showStatus()
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContent{
		height: calc(100% - 125px);
	}
	.personContent{
		padding: 30rpx;
	}
.personItem{
	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;
	}
	
}
.submitBtn{
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		width: calc(100% - 60rpx);
	}
.profile_photo{
	width: 100rpx;
	height: 120rpx;
	margin-right: 20rpx;
}
.addBtn{
	font-size: 28rpx;
	border-radius: 4px;
	border: 1px solid $uni-color-primary;
	color: $uni-color-primary;
	padding: 1px 6px;
	position: absolute;
	top: calc(50% - 24rpx);
	right: 30rpx;
}
.statusBtn{
	font-size: 28rpx;
	color: $uni-color-success;
	padding: 1px 6px;
	position: absolute;
	top: calc(50% - 24rpx);
	right: 30rpx;
}
.searchBox{
	// background-color: #2b8df3;
	// padding: 0 30rpx 10rpx;
	// position: fixed;
	// left: 0;
	// width: calc(100% - 60rpx);
	// top: 0;
	margin: 20rpx 30rpx;
	.input{
		border-radius: 36rpx;
		height: 70rpx;
		text-align: center;
		background-color: #f7f7f7;
	}
}
</style>