v3-lab-xcx/pages_safetyExamine/views/patrolPlan/patrolPlanAddContent.vue

<!-- 安全检查-发起巡查计划-选择内容 -->
<template>
  <view class="examine">
	  <view class="lab_title">
		<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="lab_title_l">
			<view class="lab_title_l_n">
				<view>{{getData.hazardTypeModeName?getData.hazardTypeModeName:'选择类型'}}</view>
				<img src="@/pages_safetyExamine/images/icon_06.png">
			</view>
		</picker>
		<view class="lab_title_r">
			<input type="text" v-model="getData.searchValue" placeholder="请输入检查内容" name="search" @confirm='searchBtn'  confirm-type='search' maxlength="50" placeholder-style="color: #CCCCCC;font-size:26rpx;">
			<view v-if="getData.searchValue>0" class="lab_title_r_btn" @click="clearBtn">
				<img src="@/pages_safetyExamine/images/clear.png"/>
			</view>
		</view>
	  </view>
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<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.chName}}</text>
					<img v-if="item.type" src="@/pages_safetyExamine/images/icon_xzwt_xz.png">
				</view>
			</view>
		</view>
	</scroll-view>
	<view class="bottom_btn" @click="submitForm">确定</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {conditionCollegeInfo,conditionSubjectInfo,dangerList,findDeviceList,haveHazardInSub} from '@/api/apiDemo/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
	  pageType:0,
      //列表请求参数
      getData:{
        pageNum:1,
        pageSize:20,
		hazardTypeMode:'',//类型id
		hazardTypeModeName:'',
		searchValue:'',
		filtType:'',
		hazardIds:[],
		selectedHazardIds:[],
      },
	  total:0,
	  collegeIndex :0,
	  collegeArray:[],
	  collegeList:[],
	  dataList:[],
	  seleteListDevice:[],//临时存储选中的
	  form:{},
	}
  },
  onLoad(option) {
      this.form=JSON.parse(decodeURIComponent(option.form));
	  if(this.form.seleteListDevice.length>0){
		  this.seleteListDevice=this.form.seleteListDevice;
	  }
	  if(option.pageType){//pageType=1添加页面进入2编辑页面进入
	  	 this.pageType=option.pageType
	  }
  },
  onShow() {

  },
  mounted(){
	  this.dataList=[];
	  this.dangerList();
	  this.getList();
  },
  methods: {
	  //滚动事件
	  scrollGet(){
		  let self=this;
	      if(self.total/self.getData.pageSize<=self.getData.pageNum){
	          console.log('没有更多数据!')
	      }else{
			  setTimeout(function(){
				  self.getData.pageNum += 1;
				  self.getList();
			  },1000)

		  }
	  },
	  //选择学院
	  collegeChange(e){
		  this.collegeIndex = e.target.value;
		  this.getData.hazardTypeMode=this.collegeList[e.target.value].dictValue
		  this.getData.hazardTypeModeName=this.collegeList[e.target.value].dictLabel
		  this.getData.pageNum=1;
		  this.dataList=[];
		  this.getList();
	  },
	  //点击选择实验室
	  labSelete(index){
	  	this.dataList[index].type = !this.dataList[index].type

		if(this.dataList[index].type){//判断是选中还是取消
			if(this.seleteListDevice.length>0){
				if(this.seleteListDevice.findIndex((item)=>item.id===this.dataList[index].id) ==-1){//等于-1说明数组里没有当前选中元素,可以添加
					this.seleteListDevice.push(this.dataList[index])
				}
			}else{
				this.seleteListDevice.push(this.dataList[index])
			}
		}else{
			this.seleteListDevice.splice(this.seleteListDevice.indexOf(this.dataList[index]),1);
		}
	  },
	  //实验室搜索
	  searchBtn(){
		  this.dataList=[];
		  this.getList();
	  },
	  //清除
	  clearBtn(){
		  this.getData.pageNum=1;
		  this.collegeIndex=0;
		  this.getData.deptId='';
		  this.getData.deptName='';
		  this.getData.searchValue='';
		  this.dataList=[];
		  this.getList();
	  },
	  handleClick(doType){
		  let self=this;
		  if( doType=='subBtn'){//保存数据

		  }
	  },
	  //设备-保存
	  async submitForm(){
	  	let _this = this;
		let hazardIds=[];
		this.$set(this.form,'hazardNum', this.seleteListDevice.length)
		this.$set(this.form,'seleteListDevice', this.seleteListDevice)
		if(this.seleteListDevice.length>0){
			this.seleteListDevice.forEach(function(item){
				hazardIds.push(item.id)
			})
			this.$set(this.form,'hazardIds', hazardIds.join(','))
		}else{
			uni.showToast({
			    title: '请选择检查内容!',
			    icon:"none",
			    mask:true,
			    duration: 2000
			});
			return;
		}

		//实验室是否有当前设备
		let obj={
		  "checkRange":this.form.checkRange,
		  "collegeIds":this.form.checkRange==2?this.form.collegeIds+'':'',//学院ID转换字符串
		  "subIds":this.form.checkRange == 3?this.form.subIds+'':'',//实验室ID
		  "hazardIds":this.form.hazardIds,
		}
		const {data} = await haveHazardInSub(obj);
		if(data.code == 200){
			let pages=getCurrentPages();
			let prevPage=pages[pages.length-2];//上一个页面
			prevPage.onShow(encodeURIComponent(JSON.stringify(this.form)))
			uni.navigateBack()
			// if(this.pageType==1){
			// 	uni.redirectTo({
			// 		url: '/pages_safetyExamine/patrolPlan/patrolPlanAdd?form='+encodeURIComponent(JSON.stringify(this.form))
			// 	});
			// }else if(this.pageType==2){
			// 	uni.redirectTo({
			// 		url: '/pages_safetyExamine/patrolPlan/patrolPlanEdit?form='+encodeURIComponent(JSON.stringify(this.form))
			// 	});
			// }
		}


	  },

	  //查询学院列表
	  async dangerList(){
	  	let _this = this;
	  	const {data} = await dangerList();
	  	if(data.code == 200){
			for(let i=0;i<data.rows.length;i++){
				_this.collegeArray.push(data.rows[i].dictLabel)
			}
			_this.collegeList=data.rows;
	  	}
	  },
	  async getList(){
	      let _this = this;
	      const {data} = await findDeviceList(_this.getData);
	      if(data.code==200){
			  data.rows.forEach(function(item){
				  item.type=false;
			  })
			  this.dataList=[...this.dataList,...data.rows]
			  _this.total=data.total;
			  if(this.seleteListDevice.length>0){//如果有选中的数据
			  		for(let i=0;i<this.dataList.length;i++){
			  			if(this.seleteListDevice.findIndex((item)=>item.id===this.dataList[i].id) !=-1){//不等于-1说明数组里有当前元素,可以改为选中
			  				this.dataList[i].type=true;
			  			}else{

			  			}
			  		}
			  }
		  }
      }
  }
}
</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;
		display: flex;
		justify-content: flex-start;

		.lab_title_l{
			width: 250rpx;
			height: 80rpx;
			margin-right: 20rpx;
			.lab_title_l_n{
				width: 250rpx;
				height: 80rpx;
				border-radius: 10rpx;
				border: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view{
					flex:1;
					line-height:80rpx;
					margin-left:20rpx;
					color: #999999;
					font-size:28rpx;
			        white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				>img{
					width: 14rpx;
					height: 8rpx;
					margin-right: 30rpx;
				}
			}
		}
		.lab_title_r{
			width: 420rpx;
			height: 80rpx;
			position:relative;
			border-radius: 10rpx;
			border: 1rpx solid #E0E0E0;
			.lab_title_r_btn{
				width: 60rpx;
				height: 80rpx
				position: absolute;
				top: 0rpx;
				right:0rpx;
				>img{
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					top: 30rpx;
					left: 24rpx;
				}
			}
			>input{
				width: 274rpx;
				height: 80rpx;
				position: absolute;
				top: 0rpx;
				left: 60rpx;
			}
			.clear{
				width: 60rpx;
				height: 80rpx
				position: absolute;
				top: 0rpx;
				right:20rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 80rpx;
			}
		}
	}
	.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>