v3-lab-xcx/pages_student/accessApplication/chooseALaboratory.vue

<!-- 选择实验室 -->
<template>
	<view id="chooseALaboratory">
		<view class="picker-box">
			<picker @change="facultyChange" :value="facultyIndex" :range="faculty">
				<view class="picker-min-box">
					<view class="left-box">请选择院系：</view>
					<view>{{faculty[facultyIndex]}}</view>
					<img src="@/images/basicsModules/icon_04.png">
				</view>
			</picker>
		</view>
		<view class="picker-box">
			<picker @change="buildingChange" :value="buildingIndex" :range="building">
				<view class="picker-min-box">
					<view class="left-box">请选择实验楼：</view>
					<view>{{building[buildingIndex]}}</view>
					<img src="@/images/basicsModules/icon_04.png">
				</view>
			</picker>
		</view>
		<view class="for-max-box">
			<view class="for-box" v-for="(item,index) in dataList" :key="index" @click="goAccessApplication(item)">
				<view class="left-box">
					<view>{{item.name}}</view>
					<view>{{item.deptName}}{{item.buildName}}{{item.room}}</view>
				</view>
				<view class="right-p" :class="{'colorA':!item.isApply}">{{item.isApply?'已申请':'立即申请'}}</view>
				<img v-if="!item.isApply" src="@/images/basicsModules/icon_04.png">
			</view>
			<view class="bottom-null-view">暂无更多数据</view>
		</view>
	</view>
</template>

<script>
	import {
		departmentsList,
		buildingList,
		mySecuritySubjectList,
		subjectMaterialList
	} from '@/api/apiDemo/index.js'
	export default {
		data() {
			return {
				//空数据展示
				nullType: false,
				faculty: ['暂无院系数据'],
				facultyList: [],
				facultyIndex: 0,
				building: ['暂无实验楼数据'],
				buildingList: [],
				buildingIndex: 0,
				dataList: [],
			}
		},
		onLoad() {

		},
		onShow() {
			this.getDepartmentsList();
		},
		methods: {

			//查询院系
			async getDepartmentsList() {
				let self = this;
				const {
					data
				} = await departmentsList()
				if (data.code == 200) {
					if (data.data[0]) {
						let list = [];
						for (let i = 0; i < data.data.length; i++) {
							list.push(data.data[i].deptName);
						}
						this.faculty = list;
						this.facultyIndex = 0;
						this.facultyList = data.data;
						this.getDuildingList(this.facultyList[0].deptId)
					} else {
						this.faculty = ['暂无院系数据'];
						this.facultyIndex = 0;
						this.facultyList = [];
						this.building = ['暂无实验楼数据'];
						this.buildingIndex = 0;
						this.buildingList = [];
						this.dataList = [];
					}
				}
			},
			//查询楼栋
			async getDuildingList(deptId) {
				let self = this;
				let obj = {
					deptId: deptId
				}
				const {
					data
				} = await buildingList(obj);
				if (data.code == 200) {
					if (data.data[0]) {
						let list = [];
						for (let i = 0; i < data.data.length; i++) {
							list.push(data.data[i].deptName);
						}
						this.building = list;
						this.buildingIndex = 0;
						this.buildingList = data.data;
						this.mySecuritySubjectList(this.buildingList[0].deptId);
					} else {
						this.building = ['暂无实验楼数据'];
						this.buildingIndex = 0;
						this.buildingList = [];
						this.dataList = [];
					}
				}
			},
			//查询列表
			async mySecuritySubjectList(deptId) {
				let self = this;
				let obj = {
					deptId: deptId
				}
				const {
					data
				} = await mySecuritySubjectList(obj);
				if (data.code == 200) {
					if (data.data[0]) {
						this.dataList = data.data;
					} else {
						this.dataList = [];
					}
				}
			},
			facultyChange(e) {
				this.facultyIndex = e.target.value;
				this.getDuildingList(this.facultyList[this.facultyIndex].deptId)
			},
			buildingChange(e) {
				this.buildingIndex = e.target.value;
				this.mySecuritySubjectList(this.buildingList[this.buildingIndex].deptId)
			},
			goAccessApplication(item) {
				if (item.isApply) {
					//已申请
					return
					item.infoId = item.appId;
					uni.navigateTo({
						url: '/pages_student/accessApplication/applicationDetails?item=' + encodeURIComponent(JSON
							.stringify(item))
					})
				} else {
					//未申请
					this.subjectMaterialList(item);
				}
			},
			//查询实验室下的安全准入资格材料表
			async subjectMaterialList(item) {
				let obj = {
					subjectId: item.id
				}
				const {
					data
				} = await subjectMaterialList(obj)
				if (data.code == 200) {
					if (data.data[0]) {
						item.buildId = this.buildingList[this.buildingIndex].deptId;
						item.deptId = this.facultyList[this.facultyIndex].deptId;
						uni.navigateTo({
							url: '/pages_student/accessApplication/accessApplication?item=' +
								encodeURIComponent(JSON.stringify(item)) + '&list=' + encodeURIComponent(JSON
									.stringify(data.data))
						})
					} else {
						uni.showToast({
							title: '该实验室未配置准入资格,无法申请~',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				}
			},

		}
	}
</script>

<style lang="stylus" scoped>
	#chooseALaboratory {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;

		.picker-box:nth-child(1) {
			border-bottom: 1rpx solid #e0e0e0;
		}

		.picker-box:nth-child(2) {
			margin-bottom: 40rpx;
		}

		.picker-box {
			height: 80rpx;

			background: #fff;

			.picker-min-box {
				display flex;

				view:nth-child(1) {
					flex: 1;
					line-height 80rpx;
					color: #333;
					margin-left: 20rpx;
				}

				view:nth-child(2) {
					line-height 80rpx;
					color: #CCCCCC;
				}

				img {
					width: 12rpx;
					height: 24rpx;
					margin: 28rpx 20rpx 0 28rpx;
				}
			}
		}

		.for-max-box {
			flex: 1;

			overflow-y scroll;

			.bottom-null-view {
				font-size: 26rpx;
				color: #999;
				text-align: center;
				line-height: 80rpx;
			}

			.for-box {
				background #fff;
				display flex;
				border-bottom: 1rpx solid #e0e0e0;

				.left-box {
					flex: 1;
					margin-left: 20rpx;

					view:nth-child(1) {
						line-height: 28rpx;
						font-size: 28rpx;
						color: #333333;
						margin: 20rpx 0 0 0;
					}

					view:nth-child(2) {
						line-height: 24rpx;
						font-size: 24rpx;
						color: #999;
						margin: 25rpx 0 0 0;
					}
				}

				.right-p {
					line-height: 120rpx;
					font-size: 24;
					color: #999999;
					margin-right: 52rpx;
				}

				img {
					width: 12rpx;
					height: 24rpx;
					margin: 48rpx 20rpx 48rpx 20rpx;
				}

				.colorA {
					color: #0183FA;
					margin-right: 0;
				}
			}
		}
	}
</style>