v3-lab-xcx/pages_safetyExamine/views/examineManage/examineAddContent.vue

<!-- 安全检查-发起巡查计划-选择内容 -->
<template>
	<view class="examine">
		<view class="lab_title">
			<view class="lab_title_r">
				<view class="lab_title_r_btn" @click="searchBtn">
					<img src="@/pages_safetyExamine/images/icon_aqjc_ss.png" />
				</view>
				<input type="text" v-model="getData.searchValue" placeholder="设备名称/型号" maxlength="50"
					placeholder-style="color: #CCCCCC;font-size:26rpx;">
				<!-- <img class="scanBtn"  @click="scanBtn" src="@/pages_safetyExamine/images/icon_aqjc_sm.png"/> -->
			</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>
		<div class="bottom">
			<view class="bottom_l" @click="clearForm">取消</view>
			<view class="bottom_r" @click="submitForm">确定</view>
		</div>
	</view>

</template>

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

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

		},
		mounted() {
			this.dataList = [];
			this.getList();
		},
		methods: {
			//滚动事件
			scrollGet() {
		
			},
			//点击选择实验室
			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.joinHazardId === this.dataList[index]
								.joinHazardId) == -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();
			},
			handleClick(doType) {
				let self = this;
				if (doType == 'subBtn') { //保存数据

				}
			},
			//扫码
			scanBtn() {
				uni.redirectTo({
					url: '/pages/saoCode/scan?form=' + encodeURIComponent(JSON.stringify(this.form))
				});
			},

			//取消
			clearForm() {
				uni.navigateTo({
					url: '/pages_safetyExamine/views/examineManage/examineAdd?form=' + encodeURIComponent(JSON
						.stringify(this.form))
				});
			},
			//设备-保存
			async submitForm() {
				let _this = this;
				let hazardIds = [];
				let joinHazardIds = [];
				//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.hazardId)
						joinHazardIds.push(item.joinHazardId)
					})
					this.$set(this.form, 'hazardIds', hazardIds.join(','))
					this.$set(this.form, 'joinHazardIds', joinHazardIds.join(','))
				} else {
					this.$set(this.form, 'hazardIds', '')
					this.$set(this.form, 'joinHazardIds', '')
					uni.showToast({
						title: '请选择检查内容!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}

				uni.redirectTo({
					url: '/pages_safetyExamine/examineManage/examineAddTow?form=' + encodeURIComponent(JSON
						.stringify(this.form)) + '&joinHazardIds=' + this.form.joinHazardIds
				});


			},
			async getList() {
				let _this = this;
				this.getData.subId = this.form.subIds;
				const {
					data
				} = await getHazardInfoBySubId(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.form.joinHazardIds) {
						let joinHazardIds = this.form.joinHazardIds.split(',')
						for (let i = 0; i < this.dataList.length; i++) {
							for (let b = 0; b < joinHazardIds.length; b++) {
								if (this.dataList[i].joinHazardId == joinHazardIds[b]) {
									this.seleteListDevice.push(this.dataList[i]);
									this.dataList[i].type = true;
								}
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.examine {
		height: 100%;
		display flex;

		.info-max-box {
			flex: 1;
			overflow: scroll;
			padding: 120rpx 0rpx 100rpx;
			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_r {
				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: 26rpx;
						height: 26rpx;
						position: absolute;
						top: 30rpx;
						left: 24rpx;
					}
				}

				>input {
					width: 274rpx;
					height: 80rpx;
					position: absolute;
					top: 0rpx;
					left: 60rpx;
				}

				.scanBtn {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: 26rpx;
					right: 26rpx;
				}
			}
		}

		.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 {
			width: 750rpx;
			height: 90rpx;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: flex-start;

			.bottom_l {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 90rpx;
				width: 50%;
				height: 90rpx;
				background: #fff;
				text-align: center;
			}

			.bottom_r {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 90rpx;
				width: 50%;
				height: 90rpx;
				background: #0183FA;
				text-align: center;
			}
		}
	}
</style>