FE-V2-XCX/pages/pages_safetyExamine/patrolPlan/patrolPlanAddMember.vue

<!-- 安全检查-发起巡查计划-巡查组 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view>
			<view class="lab_title">
				<view class="lab_title_n">
					<view class="lab_title_r_btn" @click="searchBtn">
						<img src="@/images/Version3.3.3/icon_aqjc_ss.png"/>
					</view>
					<input type="text" v-model="getData.name" placeholder="请输入巡查组名称" maxlength="50" placeholder-style="color: #CCCCCC;font-size:26rpx;">
				</view>
			</view>
			<view class="list">
				<view class="list_li" v-for="(item,index) in  dataList" :key="index" @click="labSelete(index)">
					<text :class="item.type?'color_B':'color_A'">{{item.name}}</text>
					<img v-if="item.type" src="@/images/Version3.3.3/icon_xzwt_xz.png">
				</view>
			</view>
		</view>
	</scroll-view>	
	<view class="bottom_btn" @click="handleClick('subBtn')">保存</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { } from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
	  pageType:0,
      //列表请求参数
      getData:{
        pageNum:1,
        pageSize:20,
		name:'',
      },
	  total:0,
	  dataList:[{name:'巡查组名称',type:false,id:1},{name:'巡查组名称',type:false,id:2},{name:'巡查组名称',type:false,id:3}],
	  
	  seleteListMember:[],//临时存储选中的 
	  form:{},
	}
  },
  onLoad(option) {
	  if(option.form){
		  this.form=JSON.parse(decodeURIComponent(option.form));
		  if(this.form.seleteListMember.length>0){
		  	 this.seleteListMember=this.form.seleteListMember;
		  }
	  }
  },
  onShow() {
      this.getList(); 
  },
  mounted(){
	  
  },
  methods: {
	  //滚动事件
	  scrollGet(){
		  let self=this;
	      if(self.total<=self.getData.pageNum){
	          console.log('没有更多数据!')
	      }else{
			  setTimeout(function(){
				  self.getData.pageNum += 1;
				  self.getList(); 
			  },1000)
			 
		  }
	  },
	  //点击选择实验室
	  labSelete(index){
		let _this = this;
	  	this.dataList[index].type = !this.dataList[index].type
		if (_this.dataList[index].type == true) {
			_this.dataList.forEach(function(item2) {
			  if (item2.id == _this.dataList[index].id) {
				item2.type = true
			  } else {
				item2.type = false
			  }
			})
		}
		if(this.dataList[index].type){//判断是选中还是取消
			this.seleteListMember.push(this.dataList[index])
		}else{
			this.seleteListMember=[];
		}
	  },
	  //实验室搜索
	  searchBtn(){
		  this.dataList=[];
		  this.getList();
	  },
	  handleClick(doType){
		  let self=this;
		  if( doType=='subBtn'){//保存数据
			  this.$set(this.form,'seleteListMember',this.seleteListMember)
			  uni.redirectTo({
			      url: '/pages/pages_safetyExamine/patrolPlan/patrolPlanAdd?form='+encodeURIComponent(JSON.stringify(this.form))
			  });
		  }
	  },
	  async getList(){
		  let list=[{name:'巡查组名称',type:false,id:4},{name:'巡查组名称',type:false,id:5}]
		  this.total=5;
		  this.dataList=[...this.dataList,...list]
		  //如果有选中的数据
		  if(this.seleteListMember.length>0){
			  for(let i=0;i<this.dataList.length;i++){
				  if(this.seleteListMember[0].id==this.dataList[i].id){
					  this.dataList[i].type=true;
				  }
			  }
		  }
		
		  
	   //    let self = this;
	   //    let obj = {
	   //        pageNum:this.getData.page,
	   //        pageSize:this.getData.pageSize,
	   //    };
	   //    const {data} = await groupList(obj);
	   //    if(data.code==200){
			 //  this.total=data.total;
			 //  this.dataList=[...this.dataList,...data.data]
		  // }
      }
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding: 120rpx 0rpx 30rpx;
		box-sizing: border-box;
	}
	.lab_title{
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		.lab_title_n{
			width: 690rpx;
			height: 80rpx;
			position:relative;
			border-radius: 10rpx;
			border: 1rpx solid #E0E0E0;
			.lab_title_r_btn{
				width: 60rpx;
				height: 80rpx
				position: absolute;
				top: 0rpx;
				left:0rpx;
				>img{
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					top: 30rpx;
					left: 24rpx;
				}
			}
			>input{
				width: 360rpx;
				height: 80rpx;
				position: absolute;
				top: 0rpx;
				left: 60rpx;
			}
		}
	}
	.list{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin: 0 30rpx;
		.list_li{
			display: flex;
			justify-content:space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 1rpx solid #E0E0E0;
			>text{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				line-height: 80rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			>img{
				width: 24rpx;
				height: 16rpx;
				margin-right: 14rpx;
			} 
		}
		.list_li:last-child{
			border: none;
		}
		.color_A{
			color: #333333;
		}
		.color_B{
			color: #0183FA;
		}
	}
	.bottom_btn{
		position: fixed;
		bottom: 26rpx;
		left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		width: 690rpx;
		height: 90rpx;
		background: #0183FA;
		border-radius: 20rpx;
		text-align: center;
		
	}
}
</style>