v3-lab-xcx/pages_safetyExamine/views/patrolPlan/patrolPlanAddLab.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.deptName?getData.deptName:'选择学院'}}</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.subName}}-{{item.roomNum}}</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 {
		systemDeptDropList,
		laboratorySubRelInfoGetRelList
	} from '@/pages_safetyExamine/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					page: 1,
					pageSize: 20,
					deptId: '', //学院id
					deptName: '',
					searchValue: '',
					selectedSubIds: [],
					subIds: [],
				},
				total: 0,
				collegeIndex: 0,
				collegeArray: [],
				collegeList: [],
				dataList: [],
				seleteListLab: [], //临时存储选中的
				form: {},
			}
		},
		onLoad(option) {
			this.form = JSON.parse(decodeURIComponent(option.form));
			if (this.form.seleteListLab.length > 0) {
				this.seleteListLab = this.form.seleteListLab;
			}
			if (option.pageType) { //pageType=1添加页面进入2编辑页面进入
				this.pageType = option.pageType
			}
		},
		onShow() {

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

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

				if (this.dataList[index].type) { //判断是选中还是取消
					if (this.seleteListLab.length > 0) {
						if (this.seleteListLab.findIndex((item) => item.subId === this.dataList[index].subId) == -
							1) { //等于-1说明数组里没有当前选中元素,可以添加
							this.seleteListLab.push(this.dataList[index])
						}
					} else {
						this.seleteListLab.push(this.dataList[index])
					}
				} else {
					this.seleteListLab.splice(this.seleteListLab.indexOf(this.dataList[index]), 1);
				}
			},
			//实验室搜索
			searchBtn() {
				this.dataList = [];
				this.getList();
			},
			//清除
			clearBtn() {
				this.getData.page = 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 subIds = [];
				this.$set(this.form, 'subjectNum', this.seleteListLab.length)
				this.$set(this.form, 'seleteListLab', this.seleteListLab)
				if (this.seleteListLab.length > 0) {
					this.seleteListLab.forEach(function(item) {
						subIds.push(item.subId)
					})
					this.$set(this.form, 'subIds', subIds.join(','))
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.onShow(encodeURIComponent(JSON.stringify(this.form)))
				uni.navigateBack()


			},

			//查询学院列表
			async conditionCollegeInfo() {
				let self = this;
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					for (let i = 0; i < data.data.length; i++) {
						self.collegeArray.push(data.data[i].deptName)
					}
					self.collegeList = data.data;
				}
			},
			async getList() {
				let _this = this;
				const {
					data
				} = await laboratorySubRelInfoGetRelList(_this.getData);
				if (data.code == 200) {
					data.data.forEach(function(item) {
						item.type = false;
					})
					this.dataList = [...this.dataList, ...data.data]
					_this.total = data.total;
					if (this.seleteListLab.length > 0) { //如果有选中的数据
						for (let i = 0; i < this.dataList.length; i++) {
							if (this.seleteListLab.findIndex((item) => item.subId === this.dataList[i].subId) != -
								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>