LabCenter/pages/laboratory/whRecord.vue

<template>
	<view class="box u-skeleton">
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
		<view v-if="list.length>0" style="display: flex;flex-direction: column;width: 100%;">
			<view class="list" @click="detail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="list-top">
					<text class="txt1">{{item.room.name}}</text>
					<image src="/static/image/record/right.png" mode="" style="width: 24px;height: 24px;"></image>
				</view>
				<view class="list-center">
					<image src="/static/image/record/user_jilu.png" mode="" style="width: 12px;height: 14px;"></image>
					<text>{{item.maintain_admin.name}}</text>
				</view>
				<view class="list-bottom">
					<image src="/static/image/record/time.png" mode="" style="width: 12px;height: 12px;"></image>
					<text>{{item.day}} · 第{{item.week}}周 · {{item.week_index}} · {{item.time.name}}</text>
				</view>
				<view class="btm_btn" v-if="item.status == 1 && item.complete_status == 0">
					<view @click.stop="complete(item,1)" style="margin-right: 10px;"><text>取消维护</text></view>
					<view @click.stop="complete(item,2)"><text>维护完成</text></view>
				</view>
			</view>
			<u-loadmore :status="statuss" :load-text="loadText" icon="true" />
		</view>
		<view class="empty" v-else style="padding-top: 110px;">
			<u-empty text="暂无维护记录~" mode="favor"></u-empty>
		</view>
		<u-popup v-model="show" mode="center" width="327px" height="370px" border-radius="24">
			<view class="pop">
				<text class="title">维护详情</text>
				<view class="msg" style="width: 100%;">
					<text class="txt1">实验室名称：<text class="txt2">{{message.room.name}}</text></text>
					<text class="txt1">维护人：<text class="txt2">{{message.maintain_admin.name}}</text></text>
					<text class="txt1">维护时间：<text
							class="txt2">{{message.day}}·第{{message.week}}周·{{message.week_index}}·{{message.time.name}}</text></text>
					<text class="txt1">维护内容：<text class="txt2">{{message.body}}</text></text>
				</view>
				<view @click="show=false" class="btn">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="completeShow" mode="center" width="327px" height="370px" border-radius="24">
			<view class="pop">
				<text class="title">维护完成</text>
				<view class="msg" style="width: 100%;">
					<view class="txt1"><text style="color: red;">*</text>可用座位数：<u-input v-model="value" type="number" border="true" placeholder="请输入可用座位数" />
					</view>
					<view class="textar">
						<text style="padding: 5px 0px;">备注</text>
						<textarea v-model="body" rows="2"></textarea>
						<!-- <u-input v-model="body" type="textarea" border height="150" auto-height /> -->
					</view>
				</view>
				<view @click="comTrue" class="btn">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="qxShow" content="你确定要取消当前实验室维护吗?" show-cancel-button="true" @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: '',
				message: '',
				loading: true,
				id: '',
				page: 1,
				statuss: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				meta: '',
				completeShow:false,
				value:'',
				body:'',
				details:'',
				qxShow:false
			}
		},
		methods: {
			detail(id) {
				this.$u.get('lab/maintain/info/' + id).then(res => {
					console.log(res)
					this.show = true;
					switch (res.data.week_index) {
						case 0:
							res.data.week_index = '星期一'
							break
						case 1:
							res.data.week_index = '星期二'
							break
						case 2:
							res.data.week_index = '星期三'
							break
						case 3:
							res.data.week_index = '星期四'
							break
						case 4:
							res.data.week_index = '星期五'
							break
						case 5:
							res.data.week_index = '星期六'
							break
						case 6:
							res.data.week_index = '星期日'
							break
					}
					this.message = res.data;
				}) 
			},
			complete(item,type){
				this.details = item;
				if(type==2){
					this.completeShow = true
				}
				if(type==1){
					this.qxShow = true
				}
			},
			confirm(){
					//取消维护确定事件
					this.$u.get('/lab/maintain/pause?id='+this.details.id).then(res=>{
						console.log(res)
						this.$u.toast('操作成功')
						this.qxShow = false;
						this.lists()
					})
			},
			cancel(){
					this.qxShow = false;
			},
			//点击维护完成
			comTrue(){
				var data = {
					complete_status:this.details.complete_status,
					id:this.details.id,
					remark:this.body,
					use_student_nums:this.value
				}
				if(this.value==''){
					this.$u.toast('请输入可用座位数')
					return;
				}
					this.$u.post('/lab/maintain/complete',data).then(res=>{
						console.log(res)
						this.$u.toast('操作成功')
						this.completeShow = false;
						this.lists()
					})
			},
			lists() {
				this.$u.get('lab/maintain?room_id=' + this.id).then(res => {
					console.log(res)
					var list = res.data.list;
					this.list = this.foreach(list);
					this.loading = false;
					this.meta = res.data.meta.pagination;
					if (res.data.list.length < 10) {
						this.statuss = 'nomore'
					}
				})
			},
			foreach(list) {
				list.map((item) => {
					switch (item.week_index) {
						case 0:
							item.week_index = '星期一'
							break
						case 1:
							item.week_index = '星期二'
							break
						case 2:
							item.week_index = '星期三'
							break
						case 3:
							item.week_index = '星期四'
							break
						case 4:
							item.week_index = '星期五'
							break
						case 5:
							item.week_index = '星期六'
							break
						case 6:
							item.week_index = '星期日'
							break
					}
					return item
				})
				return list
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.lists()
		},
		onPullDownRefresh() {
			this.lists()
			this.page = 1;
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.statuss = 'loading';
			var page = this.page;
			if (page >= this.meta.total_pages) {
				this.statuss = 'nomore';
			} else {
				this.$u.get('/lab/maintain?page=' + Number(page + 1) + '&room_id=' + this.id).then(res => {
					console.log(res)
					var list = res.data.list;
					this.list = this.list.concat(this.foreach(list));
					this.page = ++page;
				})
				this.statuss = 'loading';
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box {
		width: 100vw;
		min-height: 100vh;
		background: #F5F5F5;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30px;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			background: #FFFFFF;
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			display: flex;
			margin-top: 12px;
			padding: 15px 12px 8px 12px;
			box-sizing: border-box;

			.list-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
			}

			.list-center {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				padding-top: 8px;
				padding-bottom: 4px;
				width: 100%;

				text {
					padding-left: 10px;
				}
			}

			.list-bottom {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				width: 100%;
				padding-bottom: 5px;
				text {
					padding-left: 10px;
				}
			}
		}

		.pop {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 16px 20px 40px 20px;
			box-sizing: border-box;
			justify-content: space-between;
			height: 100%;
			align-items: center;

			.title {
				font-size: 18px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.msg {
				display: flex;
				flex-direction: column;

				.txt1 {
					font-size: 13px;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
				}

				.txt2 {
					font-size: 15px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #333333;
					padding-top: 5px;
				}
			}

			.btn {
				width: 280px;
				height: 44px;
				background: #3665FF;
				border-radius: 22px 22px 22px 22px;
				opacity: 1;
				font-size: 16px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.btm_btn{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			padding-top: 5px;
			font-size: 14px;
			font-weight: 400;
			color: white;
			view{
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				padding: 4px 6px;
			}
			view:nth-of-type(1){
				background: #ff6e27;
			}
			view:nth-of-type(2){
				background: #3665FF;
			}
		}
		textarea {
			border: solid 1px #dcdfe6;
			width: auto;
			border-radius: 8px;
			padding: 8px;
			height: 100px;
		}
		.textar{
			font-size: 13px;
			font-weight: 500;
			display: flex;
			flex-direction: column;
		}
		u-input{
			width: 70% !important;
		}
	}
</style>