FE-lab-xcx/pages_manage/views/accessControl/authorizationRecord.vue

<template>
	<view id="authorizationRecord">
		<view class="top-max-big-box">
			<view class="search-box">
				<img class="img-view" :src="imagesUrl('commonality/icon_aqjc_ss.png')">
				<input type="text" v-model="searchValue" placeholder="姓名/学工号" maxlength="20">
				<view class="button-view" @click="searchButton()">搜索</view>
			</view>
			<view class="check-button-max-box">
				<view class="check-button-box" style="width:260rpx;">
					<view class="picker-min-box" @click="checkSubButton()">
						<view class="picker-name">{{subId?subName:'实验室'}}</view>
						<img class="picker-img" :src="imagesUrl('commonality/icon_06.png')">
					</view>
				</view>
				<view class="check-button-box" style="width:200rpx;">
					<picker @change="buttonChange" :range-key="'typeName'" :value="typeId" :range="typeList">
						<view class="picker-min-box">
							<view class="picker-name">{{typeListIndex?typeList[typeListIndex].typeName:'开门状态'}}</view>
							<img class="picker-img" :src="imagesUrl('commonality/icon_06.png')">
						</view>
					</picker>
				</view>
				<view class="check-button-box" style="width:230rpx;">
					<picker mode="date" v-model="validBeginTime" :start="currentDate" fields="day" @change="beginDateChange">
						<view class="picker-min-box">
							<view class="picker-name">{{validBeginTime?validBeginTime:'开始时间'}}</view>
							<img class="picker-img" :src="imagesUrl('commonality/icon_06.png')">
						</view>
					</picker>
				</view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="list">
			<view class="for-max-big-box" v-for="(item,index) in dataList" :key="index">
				<view class="for-top-box">
					<view class="for-title-box">
						<view class="for-title">{{item.subjectName}}</view>
						<view class="for-button-box">
							<view class="for-button-null-p"></view>
							<view class="for-button-p" v-if="item.openStatus == 0" @click="delButton(item,index)">删除</view>
							<view class="for-button-null-p"></view>
						</view>
					</view>
					<view class="for-border-box"></view>
					<view class="position-left"></view>
					<view class="position-right"></view>
					<img v-if="item.openStatus == 1" class="position-top-right" :src="imagesUrl('commonality/img_sqjl_yk@1x.png')">
					<img v-if="item.openStatus == 0" class="position-top-right" :src="imagesUrl('commonality/img_sqjl_wk@1x.png')">
				</view>
				<view class="for-bottom-box">
					<view class="for-user-box">
						<view class="for-user-left-box">
							<img :src="imagesUrl('commonality/icon_sqjl_bsqr@1x.png')">
							<view>被授权人：</view>
							<view>{{item.userName}}</view>
						</view>
						<view class="for-user-right-box">
							<img :src="imagesUrl('commonality/icon_sqjl_sqr@1x.png')">
							<view>授权人：</view>
							<view>{{item.createByName}}</view>
						</view>
					</view>
					<view class="for-time-box">
						<img :src="imagesUrl('commonality/icon_aqbj_sj.png')">
						<view>开门时间：</view>
						<view></view>
					</view>
					<view class="for-time-box" style="margin-top:20rpx;">
						<img>
						<view></view>
						<view><span style="margin-right:30rpx;">{{item.validBeginTime}}</span>至 <span style="margin-left:30rpx;">{{item.validEndTime}}</span></view>
					</view>
				</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
			<view class="get-data-null-p" v-else="getDataType">- 滑动加载更多 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		laboratoryAppletLabLockApplyList,
		laboratoryAppletLabLockApplyDelete
	} from '@/pages_manage/api/index.js'
	import {
		parseTime
	} from '@/component/public.js'
	export default {
		data() {
			return {
				searchValue: '',
				subId: '',
				subName: '',
				typeList: [{
						typeId: '1',
						typeName: '已开'
					},
					{
						typeId: '0',
						typeName: '未开'
					},
				],
				typeListIndex: "",
				typeId: '',
				validBeginTime: '', //申请期限开始
				currentDate: '', //当前日期
				getDataType: false,
				getData: {
					page: 1,
					pageSize: 10,
				},
				dataList: [],
				total: 0,
			}
		},
		onShow() {
			if (uni.getStorageSync('searchSubData')) {
				let subData = JSON.parse(uni.getStorageSync('searchSubData'));
				uni.removeStorageSync('searchSubData');
				this.$set(this, 'subId', subData.subId);
				this.$set(this, 'subName', subData.subName);
			}else{
				this.searchButton();
			}
		},
		methods: {
			//删除按钮
			delButton(item,index){
				let self = this;
				uni.showModal({
					content: '是否确认删除?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.laboratoryAppletLabLockApplyDelete(item.id,index);
						} else if (res.cancel) {}
					}
				});
			}, 
			//删除 授权记录
			async laboratoryAppletLabLockApplyDelete(id,index) {
				let self = this;
				const {
					data
				} = await laboratoryAppletLabLockApplyDelete({id:id});
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					this.dataList.splice(index,1);
				}
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.getData.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//授权记录列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.getData))
				obj.searchValue = this.searchValue;
				obj.subjectId = this.subId;
				obj.openStatus = this.typeId;
				obj.validBeginTime = this.validBeginTime?this.validBeginTime+'T00:00:00':'';
				const {
					data
				} = await laboratoryAppletLabLockApplyList(obj);
				if (data.code == 200) {
					for(let i=0;i<data.data.records.length;i++){
						data.data.records[i].validBeginTime = parseTime(data.data.records[i].validBeginTime, "{y}-{m}-{d} {h}:{i}")
						data.data.records[i].validEndTime = parseTime(data.data.records[i].validEndTime, "{y}-{m}-{d} {h}:{i}")
					}
					if (self.getData.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.getData.pageSize <= self.getData.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.getData.pageSize <= self.getData.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
			// 打开实验室查询
			checkSubButton() {
				uni.navigateTo({
					url: '/pages_manage/views/accessControl/searchSub'
				});
			},
			// 搜索按钮
			searchButton() {
				this.$set(this.getData,'page',1);
				this.getList();
			},
			//状态选择
			buttonChange(e) {
				this.typeListIndex = e.mp.detail.value;
				this.typeId = this.typeList[this.typeListIndex].typeId;
			},
			//时间选择触发-开始
			beginDateChange(data) {
				this.validBeginTime = data.detail.value;
			},
		}
	}
</script>

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

		.top-max-big-box {
			width: 750rpx;
			height: 180rpx;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.search-box {
				width: 690rpx;
				height: 78rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 50rpx;
				display: flex;

				.img-view {
					display: inline-block;
					margin: 27rpx 17rpx 0 37rpx;
					width: 26rpx;
					height: 26rpx;
				}

				input {
					height: 78rpx;
					line-height: 78rpx;
					flex: 1;
					font-size: 24rpx;
				}

				.button-view {
					width: 100rpx;
					line-height: 78rpx;
					text-align: center;
					font-size: 24rpx;
					color: #0183FA;
				}
			}
		}

		.check-button-max-box {
			display: flex;

			.check-button-box {
				.picker-min-box {
					display: flex;

					.picker-name {
						line-height: 80rpx;
						flex: 1;
						text-align: right;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size:28rpx;
					}

					.picker-img {
						margin: 34rpx 0 0 20rpx;
						width: 24rpx;
						height: 12rpx;
					}
				}
			}
		}

		.list {
			flex: 1;
			overflow-y scroll;
			padding: 0 30rpx;
			box-sizing: border-box;

			.for-max-big-box {
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				margin-top: 20rpx;

				.for-top-box {
					position: relative;

					.for-title-box {
						display: flex;

						.for-title {
							flex: 1;
							line-height: 42rpx;
							padding: 20rpx 37rpx;
							font-size: 30rpx;
						}

						.for-button-box {
							width: 100rpx;
							display: flex;
							flex-direction: column;
							margin-right: 75rpx;

							.for-button-null-p {
								flex: 1;
							}

							.for-button-p {
								width: 100rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								font-size: 28rpx;
								color: #fff;
								background-color: #0183FA;
								border-radius: 10rpx;
							}
						}
					}

					.for-border-box {
						height: 37rpx;
						margin: 0 40rpx;
						border-top: 1rpx dashed #E0E0E0;
					}

					.position-left {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #E0E0E0;
						position: absolute;
						left: -25rpx;
						bottom: 13rpx;
					}

					.position-right {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #E0E0E0;
						position: absolute;
						right: -25rpx;
						bottom: 13rpx;
					}

					.position-top-right {
						position: absolute;
						top: 0;
						right: 0;
						width: 64rpx;
						height: 57rpx;
					}
				}

				.for-bottom-box {
					font-size: 28rpx;
					padding: 0 0 22rpx 40rpx;

					.for-user-box {
						display: flex;
						margin-bottom: 35rpx;

						.for-user-left-box {
							display: flex;
							flex: 1;

							img {
								width: 30rpx;
								height: 30rpx;
								margin-right:18rpx;
							}

							view {
								height: 30rpx;
								line-height: 30rpx;
								font-size: 28rpx;
							}
						}

						.for-user-right-box {
							display: flex;
							width:320rpx;
							img {
								width: 30rpx;
								height: 30rpx;
								margin-right:18rpx;
							}

							view {
								height: 30rpx;
								line-height: 30rpx;
								font-size: 28rpx;
							}
						}
					}

					.for-time-box {
						display: flex;

						img {
							width: 30rpx;
							height: 30rpx;
							margin-right:18rpx;
						}

						view {
							height: 30rpx;
							line-height: 30rpx;
							font-size: 28rpx;
						}
					}
				}
			}

			.get-data-null-p {
				text-align: center;
				line-height: 100rpx;
				padding-bottom: 80px;
				color: #999;
			}
		}
	}
</style>