FE-lab-xcx/pages_hazardousWasteRecycling/views/permissionApply/addPage.vue

<!-- 权限申请新增 -->
<template>
	<view class="permissionApplyAddPage">
		<view class="check-big-box">
			<view class="check-text-p">*</view>
			<view class="check-title-p">所需权限</view>
			<view class="check-box" @click="checkButton(1)">
				<img v-if="!newData.checkType1" class="left-box" :src="imagesUrl('commonality/icon_12.png')">
				<img v-if="newData.checkType1" class="left-box" :src="imagesUrl('commonality/icon_13.png')">
				<view>回收报备</view>
			</view>
			<view class="check-box" @click="checkButton(2)">
				<img v-if="!newData.checkType2" class="left-box" :src="imagesUrl('commonality/icon_12.png')">
				<img v-if="newData.checkType2" class="left-box" :src="imagesUrl('commonality/icon_13.png')">
				<view>称重登记</view>
			</view>
		</view>
		<view class="check-big-box">
			<view class="check-text-p">*</view>
			<view class="check-title-p">申请实验室</view>
			<input @click="inputClick(2)" v-model="subject.subName" class="picker-input-box" disabled type="text"
				placeholder="请选择实验室">
		</view>
		<view style="margin-top:60rpx;height:160rpx;">
			<view class="text-color-p" v-if="subject.subName">基础信息：{{subject.deptName}}{{subject.buidName}}{{subject.forllName}}</view>
			<view class="text-color-p" v-if="subject.subName">实验室负责人：{{subject.adminName}}</view>
		</view>
		<view class="submit-button-p" @click="submitButton()">立 即 申 请</view>
		<!-- 实验室选择页面 -->
		<view class="pageTwo" v-if="pageType == 2">
			<view class="pageTwo-input-box">
				<input type="text" placeholder="请输入实验室名称/房间号" v-model="subjectName">
				<view @click="subjectList">查找</view>
			</view>
			<view class="for-max-box">
				<view class="for-null-text" v-if="!searchList[0]">{{nullText}}</view>
				<view class="for-box" v-for="(item,index) in searchList" :key="index">
					<view class="button-text-view">{{item.subName}}{{item.roomNum?'('+item.roomNum+')':''}}</view>
					<view class="button-big-view">
						<view class="button-null-view"></view>
						<view class="button-view" @click="checkClick(item)">选择</view>
						<view class="button-null-view"></view>
					</view>
				</view>
			</view>
			<view class="out-button" @click="inputClick(1)">返回</view>
		</view>
	</view>
</template>

<script>
	import {
		systemMineGetListByPower,
	} from '@/pages_student/api/index.js'
	import {
		demo1,
		demo2
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				pageType:1,
				//搜索回的实验室列表
				searchList: [],
				subject:{},
				//实验室名称
				subjectName: "",
				//暂无数据提示
				nullText: "请输入实验室名称进行搜索",
				newData:{
					checkType1:true,
					checkType2:true
				},
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			checkButton(type){
				if(type == 1){
					this.$set(this.newData,'checkType1',!this.newData.checkType1)
				}else if(type == 2){
					this.$set(this.newData,'checkType2',!this.newData.checkType2)
				}
			},
			submitButton(){
				console.log('this,',this.newData)
			},
			//选择搜索页面
			inputClick(type) {
				if (this.pageType != type) {
					this.pageType = type;
					this.$set(this, "subjectName", '');
					this.$set(this, "searchList", []);
				}
			},
			//查询实验室
			async subjectList() {
				if(!this.subjectName){
					uni.showToast({
						title: '请输入实验室名称/房间号',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				const {
					data
				} = await systemMineGetListByPower({
					searchValue: this.subjectName
				})
				if (data.code == 200) {
					this.searchList = data.data;
					if (!data.data[0]) {
						this.nullText = "暂无数据"
					}
				}
			},
			//实验室选择
			checkClick(item) {
				this.$set(this, "subject", item);
				this.inputClick(1);
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.permissionApplyAddPage{
		height: 100%;
		display flex;
		flex-direction column;
		background-color: #fff;
		.check-big-box{
			display: flex;
			padding:0 40rpx;
			margin-top:30rpx;
			.check-text-p{
				color:#FF6A6A;
				height:80rpx;
				line-height:80rpx;
			}
			.check-title-p{
				font-size:32rpx;
				height:80rpx;
				line-height:80rpx;
			}
			.check-box{
				display: flex;
				font-size:32rpx;
				margin-left:40rpx;
				img{
					width:40rpx;
					height:40rpx;
					margin-top:21rpx;
				}
				view{
					margin-left:20rpx;
					height:80rpx;
					line-height:80rpx;
				}
			}
			.picker-input-box{
				padding: 0 20rpx;
				display flex;
				height: 80rpx;
				width: 400rpx;
				border: 1rpx solid #a2a2a2;
				border-radius: 10rpx;
				margin: 0 20rpx;
			}
		}
		.text-color-p{
			color:#666;
			margin:0 50rpx;
			line-height:80rpx;
		}
		.submit-button-p{
			background-color:#0183FA;
			color:#fff;
			width:400rpx;
			height:80rpx;
			line-height:80rpx;
			text-align: center;
			font-size:30rpx;
			margin:20rpx 175rpx;
			border-radius:10rpx;
		}
		
		.pageTwo {
			flex: 1;
			display flex;
			flex-direction column;
			overflow-y hidden;
			position: absolute;
			height: 100%;
			z-index: 100;
			background-color: #fff;
		
			.pageTwo-input-box {
				display flex;
				padding: 20rpx 25rpx;
				background #fff;
				margin-bottom: 20rpx;
		
				input {
					padding: 0 20rpx;
					width: 460rpx;
					line-height: 80rpx;
					height: 80rpx;
					border-top: 1rpx solid #a2a2a2;
					border-left: 1rpx solid #a2a2a2;
					border-bottom: 1rpx solid #a2a2a2;
					border-bottom-left-radius: 10rpx;
					border-top-left-radius: 10rpx;
				}
		
				view {
					width: 200rpx;
					line-height: 80rpx;
					height: 80rpx;
					border: 1rpx solid #007AFF;
					color: #fff;
					background #007AFF;
					text-align center;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}
		
			.for-max-box {
				background #fff;
				flex: 1;
				overflow-y scroll;
		
				.for-box:nth-child(1) {
					border: none;
				}
		
				.for-null-text {
					text-align center;
					line-height: 100rpx;
					color: #999;
		
				}
		
				.for-box {
					border-top: 1rpx solid #dedede;
					display: flex;
		
					.button-text-view {
						padding: 35rpx 35rpx 35rpx 20rpx;
						width:560rpx;
					}
		
					.button-big-view {
						padding: 20rpx 0 20rpx 0 ;
						width: 100rpx;
						display: flex;
						flex-direction: column;
						.button-null-view{
							flex:1;
						}
						.button-view{
							line-height:60rpx;
							width: 100rpx;
							text-align center;
							border-radius: 10rpx;
							background #007AFF;
							color: #fff;
						}
					}
				}
			}
		
			.out-button {
				width: 650rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin: 20rpx 50rpx;
				text-align center;
				font-size: 32rpx;
				color: #fff;
				background #999;
				border-radius: 20rpx;
			}
		}
	}
</style>