v3-lab-xcx/pages/views/teacherPage/laboratoryList.vue

<!-- 实验室列表 -->
<template>
	<view id="laboratoryList">
		<view class='top-search-value-max-box'>
			<view class='top-search-value-box'>
				<img src="@/pages/images/newImage/icon_sys_ss@1x.png">
				<input class="input-box" v-model="queryParams.searchValue" 
							 maxlength="10" placeholder="搜索实验室/房间号"
							 type="text" @confirm="searchValueClick()">
				<view v-if="queryParams.searchValue" class="button-box" @click="delSearchValue">清除</view>
			</view>
		</view>
		<view class="top-picker-max-box">
			<view class="top-picker-box">
				<picker @change="facultyChange" :value="facultyIndex" :range="facultyArray">
					<view class="picker-view">
						<view>{{!facultyIndex?'二级单位':facultyArray[facultyIndex]}}</view>
						<img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
			</view>
			<view class="top-picker-box">
				<picker @change="subjectChange" :value="subjectIndex" :range="subjectArray">
					<view class="picker-view">
						<view>{{!subjectIndex?'分类':subjectArray[subjectIndex]}}</view>
						<img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
			</view>
			<view class="top-picker-box">
				<picker @change="levelChange" :value="levelIndex" :range="levelArray">
					<view class="picker-view">
						<view>{{!levelIndex?'分级':levelArray[levelIndex]}}</view>
						<img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<img class="null-img" v-if="!dataList[0]" src="@/pages_manage/images/null-data-1.png">
			<view class="for-box" v-for="(item,index) in dataList" :key="index" @click="tableButton('subDetail',item)">
				<view class="top-title-box">
					<view>
						{{item.subName}} {{item.roomName?'('+item.roomName+')':''}}
					</view>
				</view>
				<view class="bottom-text-max-box">
					<view class="bottom-text-box">
						<view v-if="item.levelName" class="lv-p" :style="'border:1rpx solid '+item.levelColor+';background:#fff;color:'+item.levelColor+';'">{{item.levelName}}</view>
						<view v-if="item.typeName" class="type-p">{{item.typeName}}</view>
						<view v-if="item.moldName" class="class-p">{{item.moldName}}</view>
						<view v-if="item.subArea" class="num-p">{{item.subArea}}m²</view>
					</view>
					<view class="bottom-address-box">
						<img src="@/pages/images/newImage/icon_sys_dz@1x.png">
						<view>{{item.deptName}}丨{{item.buildName}}-{{item.floorName}}</view>
					</view>
				</view>
				
				
				
				
				
				
				<!-- <view class="title-box">
					<view :style="'border:1rpx solid '+item.levelColor+';background:#fff;color:'+item.levelColor+';'">
						{{ item.levelName }}
					</view>
					<view>{{ item.subName}}</view>
					<img src="@/pages_manage/images/icon_04.png">
				</view>
				<view class="address-box"><span>{{ item.typeName?item.typeName:'' }}</span>{{ item.deptName?item.deptName:'' }}</view>
				<view class="address-box-two">
					<img src="@/pages_manage/images/icon_14.png">
					<view>{{ item.buildName}} {{ item.floorName}} {{ item.subName}} {{ item.roomName?item.roomName:''}}</view>
				</view> -->
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
		</scroll-view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		tabBar
	} from '@/pages/component/tabBar.vue'
	import $mqtt from '@/utils/mqtt.min.js';
	import {
		config
	} from '@/api/request/config.js'
	import {
		laboratoryList,
		subject_class,
		listDepartments,
		mangerControl,
		laboratoryInfo
	} from '@/api/apiDemo/index.js'
	import {
		systemDeptDropList,
		laboratoryClassTypeGetList,
		laboratoryClassLevelGetList,
		laboratoryAppletSubList,
		laboratoryAppletGetSubDetailInfo
	} from '@/pages/api/index.js'
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				total: 0,
				dataList: [],
				getDataType: false,
				//院系选择器数据
				facultyList: [],
				facultyArray: [],
				facultyIndex: "",
				//分类选择器数据
				subjectList: [],
				subjectArray: [],
				subjectIndex: "",
				//级别选择器数据
				levelList: [],
				levelArray: [],
				levelIndex: "",
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
					searchValue:"",
				},
			}
		},
		onLoad() {
			this.systemDeptDropList();
			this.laboratoryClassTypeGetList();
			this.laboratoryClassLevelGetList();
			this.getList()
		},
		onShow() {
		},
		methods: {
			//选择学院
			facultyChange: function(e) {
				if (this.facultyArray[0]) {
					this.facultyIndex = parseInt(e.target.value);
					this.$set(this.queryParams,'page',1);
					this.getList();
				}
			},
			//选择类型
			subjectChange: function(e) {
				if (this.subjectArray[0]) {
					this.subjectIndex = parseInt(e.target.value);
					this.$set(this.queryParams,'page',1);
					this.getList();
				}
			},
			//选择级别
			levelChange: function(e) {
				if (this.levelArray[0]) {
					this.levelIndex = parseInt(e.target.value);
					this.$set(this.queryParams,'page',1);
					this.getList();
				}
			},
			//获取院系
			async systemDeptDropList() {
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].deptName)
					}
					this.facultyArray = list;
					list.unshift('全部');
					this.facultyList = data.data;
					this.facultyList.unshift({
						deptName: "全部",
						deptId: ""
					})
				}
			},
			//分类下拉列表
			async laboratoryClassTypeGetList() {
				const {
					data
				} = await laboratoryClassTypeGetList();
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].typeName)
					}
					this.subjectArray = list;
					list.unshift('全部分类');
					this.subjectList = data.data;
					this.subjectList.unshift({
						typeName: "全部分类",
						typeId: ""
					})
				}
			},
			//分级下拉列表
			async laboratoryClassLevelGetList() {
				const {
					data
				} = await laboratoryClassLevelGetList();
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].levelName)
					}
					this.levelArray = list;
					list.unshift('全部分类');
					this.levelList = data.data;
					this.levelList.unshift({
						levelName: "全部分类",
						levelId: ""
					})
				}
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			delSearchValue(){
				this.$set(this.queryParams,'searchValue','')
				this.$set(this.queryParams,'page',1);
				this.$nextTick(() => {
					this.getList();
				})
			},
			searchValueClick(){
				this.$set(this.queryParams,'page',1);
				this.$nextTick(() => {
					this.getList();
				})
			},
			//获取实验室列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.deptId = this.facultyIndex ? this.facultyList[this.facultyIndex].deptId : '';
				obj.typeId = this.subjectIndex ? this.subjectList[this.subjectIndex].typeId : '';
				obj.levelId = this.levelIndex ? this.levelList[this.levelIndex].levelId : '';
				const {
					data
				} = await laboratoryAppletSubList(obj);
				if (data.code == 200) {
					if(self.queryParams.page == 1){
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
			tableButton(type, row) {
				let self = this;
				if (type == 'subDetail') {
					//实验室详情
					this.laboratoryAppletGetSubDetailInfo(row.infoId)
				}
			},
			//获取实验室详情
			async laboratoryAppletGetSubDetailInfo(infoId) {
				const {
					data
				} = await laboratoryAppletGetSubDetailInfo({
					infoId: infoId
				});
				if (data.code == 200) {
					uni.navigateTo({
						url: '/pages_manage/views/laboratory/infoPage?infoData=' + encodeURIComponent(JSON.stringify(data.data))
					});
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#laboratoryList {
		height: 100%;
		display flex;
		flex-direction column;
		.top-search-value-max-box{
			background-color: #fff;
			.top-search-value-box{
				display: flex;
				border:50rpx;
				height:80rpx;
				border:1px solid #E0E0E0;
				border-radius:40rpx;
				margin: 20rpx 30rpx 10rpx;
				img{
					width:26rpx;
					height:26rpx;
					margin:27rpx 30rpx;
				}
				.input-box{
					height:78rpx;
					line-height:78rpx;
					flex:1;
				}
				.button-box{
					width:120rpx;
					line-height:78rpx;
					height:78rpx;
					margin-right:10rpx;
					text-align: center;
					color:#0183FA;
					font-size:24rpx;
				}
			}
		}
		.top-picker-max-box {
			display: flex;
			padding: 0 20rpx;
			background #fff;
			border-bottom: 1rpx solid #E0E0E0;

			.top-picker-box {
				line-height: 80rpx;
				height: 80rpx;

				.picker-view {
					display flex;

					view {
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
					}

					.picker-img {
						width: 24rpx;
						height: 13rpx;
						margin-top: 36rpx;
						margin-left: 13rpx;
					}
				}
			}

			.top-picker-box:nth-child(1) {
				text-align left;
				width: 320rpx;

				.picker-view {
					view {
						max-width: 260rpx;
					}
				}
			}

			.top-picker-box:nth-child(2) {
				text-align left;
				width: 215rpx;

				.picker-view {
					view {
						max-width: 156rpx;
					}
				}
			}

			.top-picker-box:nth-child(3) {
				text-align right;
				width: 195rpx;

				.picker-view {
					view {
						flex: 1;

					}
				}
			}
		}

		.for-max-box {
			flex: 1;

			overflow-y scroll;

			.null-img {
				display block;
				width: 276rpx;
				height: 321rpx;
				position absolute;
				top: 200rpx;
				left: 274rpx;
			}

			.for-box:nth-child(1) {
				border-top: none;
			}

			.for-box {
				width:690rpx;
				margin:20rpx 30rpx 0;
				.top-title-box{
					height:126rpx;
					width:690rpx;
					background: url("@/pages/images/newImage/img_sys_bg@1x.png");
					background-size 100%;
					background-repeat: no-repeat;
					view{
						height:42rpx;
						line-height:42rpx;
						font-size:30rpx;
						color:#333333;
						padding:20rpx 37rpx;
						display:block;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
				}
				.bottom-text-max-box{
					overflow: hidden;
					border-radius:0 0 20rpx 20rpx;
					padding-bottom:26rpx;
					width:690rpx;
					background #ffffff;
					.bottom-text-box{
						padding:0 30rpx;
						view{
							margin-left:10rpx;
							margin-bottom:5rpx;
							display:inline-block;
							overflow: hidden;
							padding:0 20rpx;
							text-align: center;
							border-radius:10rpx;
						}
						.lv-p{
							height:38rpx;
							line-height:36rpx;
							font-size:28rpx;
							color: #FF0000;
						}
						.type-p,.class-p,.num-p{
							height:40rpx;
							line-height:38rpx;
							font-size:24rpx;
							color:#0183FA;
							background: rgba(1,131,250,0.2);
						}
					}
					.bottom-address-box{
						display: flex;
						padding:21rpx 30rpx 0;
						img{
							display: block;
							width:30rpx;
							height:30rpx;
							margin:0 15rpx 0 12rpx;
						}
						view{
							height:30rpx;
							line-height:30rpx;
							font-size:28rpx;
							display:block;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
					}
				}
			}
			.get-data-null-p {
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				color: #999;
				padding-bottom:200rpx;
			}
		}
	}
</style>