v3-lab-xcx/pages_safetyExamine/views/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">
						<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 class="lab_title_r_btn" v-if="getData.searchValue>0" @click="clearBtn">
							<img src="@/pages_safetyExamine/images/clear.png" />
						</view>
					</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.groupName}}</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 {
		checkGroupList,
		checkGroupDetail
	} from '@/pages_safetyExamine/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					checkLevel: '0',
					searchValue: '',
					checkLevel: '',
				},
				total: 0,
				dataList: [],
				seleteListMember: [], //临时存储选中巡查组
				checkMemberDtoList: [], //临时存储选中的
				form: {},
			}
		},
		onLoad(option) {
			if (option.form) {
				this.form = JSON.parse(decodeURIComponent(option.form));
				if (this.form.seleteListMember.length > 0) {
					this.seleteListMember = this.form.seleteListMember;
				}
				this.getData.checkLevel = this.form.groupDataType
			}
			if (option.pageType) { //pageType=1添加页面进入2编辑页面进入
				this.pageType = option.pageType
			}
		},
		onShow() {
			this.dataList = [];
			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.seleteListMember = [];
				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
						}
					})
				}
				this.seleteListMember.push(this.dataList[index])
			},
			//实验室搜索
			searchBtn() {
				this.dataList = [];
				this.getList();
			},
			//清除按钮
			clearBtn() {
				this.getData.pageNum = 1;
				this.getData.searchValue = '';
				this.dataList = [];
				this.getList();
			},
			handleClick(doType) {
				let self = this;
				if (doType == 'subBtn') { //保存数据

				}
			},
			//巡查组-保存
			async submitForm() {
				let _this = this;
				console.log(this.seleteListMember)
				let id = this.seleteListMember[0].id
				this.form.checkMemberDtoList = [];

				this.$set(this.form, 'checkGroupId', this.seleteListMember[0].id)
				this.$set(this.form, 'checkGroupName', this.seleteListMember[0].groupName)
				const {
					data
				} = await checkGroupDetail({
					id: id,
					selectEnable: '1'
				});
				if (data.code == 200) {
					let obj = {};
					for (let i = 0; i < data.data.checkGroupMemberList.length; i++) {
						obj = {
							"deptId": data.data.checkGroupMemberList[i].deptId,
							"deptName": data.data.checkGroupMemberList[i].deptName,
							"enable": data.data.checkGroupMemberList[i].enable,
							"jobNum": data.data.checkGroupMemberList[i].jobNum,
							"name": data.data.checkGroupMemberList[i].name,
							"userId": data.data.checkGroupMemberList[i].userId,
							"userType": data.data.checkGroupMemberList[i].userType
						}
						this.form.checkMemberDtoList.push(obj)
					}
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.onShow(encodeURIComponent(JSON.stringify(this.form)))
					uni.navigateBack()

				}

			},

			async getList() {

				let _this = this;
				const {
					data
				} = await checkGroupList(_this.getData);
				if (data.code == 200) {

					if (data.data) {
						data.data.forEach(function(item) {
							item.type = false
						})
					}
					this.dataList = [...this.dataList, ...data.data]
					//如果有选中的数据
					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;
							}
						}
					}
					this.total = data.data.total;
				}
			}
		}
	}
</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;
					right: 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>