LabCenter/pages/record/reserveDetail.vue

<template>
	<view class="reserve-detail-page">
		<view v-if="message.status == 7" class="look-huizhi" @click="preview(1)">
			回执
		</view>
		<view class="box u-skeleton">
			<u-skeleton :loading="loading" :animation="true"></u-skeleton>
			<view class="msg-top">
				<text style="font-size: 15px;font-weight: bold;color: #333333;">
					<text v-if="message.template == 1">正常上班时间</text>
					<text v-if="message.template == 2">非正常上班时间</text>
					<text v-if="message.template == 3">信息技术学院教师</text>
				</text>
				<text style="font-size: 12px;font-weight: 400;color: #FFAD33;" @click="lookOpenCheckStep">
					<text class="status-text" v-if="message.status == 7">{{message.status_text}}</text>
					<text class="status-text-loading"
						v-if="message.status == 1 ||message.status == 2 ||message.status == 5 ||message.status == 3">{{message.status_text}}</text>
					<text class="status-text-fail"
						v-if="message.status == 6 || message.status == 8 || message.status == 4">{{message.status_text}}</text>
					<text class="status-text-fail" v-if="message.status == 0">{{message.status_text}}</text>
				</text>
			</view>
			<view class="msg-center">
				<text>申请人：{{message.applicant_name}} {{message.applicant_mobile}}</text>
				<text>部门：{{message.branch? message.branch.name:'--'}}(科室：{{message.department}})</text>
				<text>使用人数：{{message.use_people_nums}}人</text>
				<text>开放实验室信息：</text>
				<table style="padding: 5px 0px;">
					<tr class="u-tr">
						<th class="u-th room_name">实验室</th>
						<th class="u-th">申请时间</th>
						<!-- <th class="u-th">周次</th> -->
						<!-- <th class="u-th">星期</th> -->
						<th class="u-th">节次</th>
					</tr>
					<tr class="u-tr" v-for="(item,index) in use_data" :key="index" width="100%">
						<td class="u-td room_name"><text>{{item.room_name}}</text></td>
						<td class="u-td">{{item.day}}</td>
						<!-- <td class="u-td">第{{item.week}}周</td> -->
						<!-- <td class="u-td">{{item.week_index}}</td> -->
						<td class="u-td">{{item.time_name}}</td>
					</tr>
				</table>
				<view style="display: flex;flex-wrap: wrap;align-items: center;">
					<text style="padding-top: 0;">申请原因：</text>
					<view class="miaoshu">
						<u-parse :html="message.use_reason"></u-parse>
					</view>
				</view>
				<text>使用需求：</text>
			</view>
			<view class="miaoshu">
				<u-parse :html="message.use_need!=null ? message.use_need : ''"></u-parse>
			</view>
			<view class="file" @click="preview(2)">
				<u-icon name="file-text-fill" size="30" color="#333333"></u-icon>附件：<text
					style="color: #3665FF;">{{message.status != 1 ? '申请文件' : '待上传'}}</text>

			</view>
			<view style="margin: 10px;width: 100%;">
				<u-button type="primary" size="mini" @click='downLoad'>
					<u-icon name="download"></u-icon>下载实验室开放预约申请表
				</u-button>
			</view>
			<block v-if="message.status == 2 || message.status == 3">
				<view v-if="$transformAuth('100101') || $transformAuth('100102')" class="btn-btm">
					<view class="left" @click="refuseShow = true"
						v-if="$transformAuth('100101') && $transformAuth('100102')">
						<text>审核失败</text>
					</view>
					<view class="left" @click="checkFalse(1,true)"
						v-if="$transformAuth('100101') && !$transformAuth('100102') && message.status==3">
						<text>审核失败</text>
					</view>
					<view class="left" @click="checkFalse(2,true)"
						v-if="$transformAuth('100102') && !$transformAuth('100101') && message.status==2">
						<text>审核失败</text>
					</view>
					<view class="right" @click="show = true"
						v-if="$transformAuth('100101') && $transformAuth('100102')">
						<text>审核通过</text>
					</view>
					<view class="right" @click="tongguo(1)"
						v-if="$transformAuth('100101') && !$transformAuth('100102')">
						<text>审核通过</text>
					</view>
					<view class="right" @click="tongguo(2)"
						v-if="$transformAuth('100102') && !$transformAuth('100101')">
						<text>审核通过</text>
					</view>
				</view>
			</block>
			<view class="btn-btm" v-if="message.status == 1">
				<view class="right" style="width: 327px;margin: 0 auto;" @click="upload">
					<text>上传实验室开放申请单</text>
				</view>
			</view>
			<view class="pop-bj" v-show="refuseShow"></view>
			<view class="pop" v-if="refuseShow">
				<image src="/static/image/record/laba.png" mode="" style="width: 91px;height: 68px;margin-top: -45px;">
				</image>
				<text class="txt2" style="width: 80%;"
					v-if="$transformAuth('100101') && $transformAuth('100102')">请选择审核类型</text>
				<view class="prop-text" style="width: 80%;" v-if="$transformAuth('100101') && $transformAuth('100102')">
					<u-radio-group v-model="type" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<textarea name="" id="" cols="30" rows="10" v-model="value" placeholder="请输入驳回原因" class="miaoshu"
					style="width: 87%;"></textarea>
				<view class="pop-btn">
					<view @click="refuseShow=false,value=''" style="background: #F5F5F5;color: #333333;"
						custom-style="style">
						<text>取消</text>
					</view>
					<view style="background: #3665FF;color: #fff;" @click="checkFalse(type)">
						<text>确定</text>
					</view>
				</view>
			</view>
			<view class="pop-bj" v-show="show"></view>
			<view class="pop" v-if="show">
				<image src="/static/image/record/laba.png" mode="" style="width: 91px;height: 68px;margin-top: -45px;">
				</image>
				<text class="txt2" style="width: 80%;">请选择审核类型</text>
				<view class="prop-text" style="width: 80%;">
					<u-radio-group v-model="type" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="upload-huizhi" v-if="type !== 2">
					<u-upload max-count="6" ref="uUpload" :action="action" :form-data='uploadData'
						@on-success="uploadSuccess" @on-remove="handleRemove" @on-error="uploadError"></u-upload>
				</view>
				<view class="pop-btn">
					<view @click="show=false" style="background: #F5F5F5;color: #333333;">
						<text>取消</text>
					</view>
					<view style="background: #3665FF;color: #fff;" @click="tongguo(type)">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				refuseShow: false,
				message: '',
				id: '',
				arr: [],
				pics: [],
				detailPics: [],
				use_data: '',
				type: 2, //停调课类型、1停课，2调课
				list: [{
					id: 2,
					name: '实验中心审核'
				}, {
					id: 1,
					name: '院系审核'
				}, {
					id: 3,
					name: '全部角色'
				}],
				value: '',
				loading: true,
				action: '',
				fileList: [],
				uploadData: {
					file_type: 'file',
					type: 'receipt'
				},
			}
		},
		methods: {
			//文件上传失败
			uploadError() {
				this.fileList = []
				this.$message.error('文件上传失败，请重新上传')
			},
			//文件上传成功
			uploadSuccess(response, file, lists) {
				// this.fileList.push(response.data)
				console.log(lists, '文件上传成功')
				this.fileList = lists
			},
			//移除已上传的文件
			handleRemove(file, lists) {
				console.log(lists, '文件上传成功')
				this.fileList = lists
			},

			//查看开放预约审核进度
			lookOpenCheckStep() {
				let item = this.message
				uni.navigateTo({
					url: '/pages/index/openCheckStep?id=' + item.id + '&time=' + item.created_at + '&enlength=' +
						item.enclosure.length + '&apply_name=' +
						(item.admin ? item.admin.name : '--')
				})
			},
			downLoad() {

				this.$u.get('/lab/open-appointment/down-print?id=' + this.message.id).then(res => {
					console.log(this.$u.http.config, '-----')
					uni.downloadFile({
						url: this.$u.http.config.downloadUrl + res.data.url,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载成功');
							}
							console.log(res.tempFilePath);
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success(e) {
									uni.openDocument({
										filePath: e.savedFilePath,
										showMenu: true, //showMenu是否显示右上角菜单

										fail: (e) => {
											uni.showToast({
												title: `打开失败` + e
											})
										}
									})

								},
								fail: (e) => {
									uni.showToast({
										title: '文件下载失败',
										icon: "none",
									})
								}

							});
						},
						fail: (e) => {
							uni.showToast({
								title: '文件下载失败',
								icon: "none",
							})
						}
					});
				})
			},
			uploadimg: function(data) {
				uni.showLoading({
					title: '上传图片中...',
					mask: true,
				})
				var that = this,
					i = data.i ? data.i : 0,
					success = data.success ? data.success : 0,
					fail = data.fail ? data.fail : 0;
				uni.uploadFile({
					url: data.url,
					filePath: data.path[i],
					name: 'file',
					formData: {
						file_type: 'img',
						type: 'enclosure'
					},
					success: (resp) => {
						uni.hideLoading();
						success++;
						var str = resp.data //返回的结果，可能不同项目结果不一样
						var pic = JSON.parse(str);
						var pic_name = pic.data.id;
						var detailPics = that.detailPics;
						detailPics.push(pic_name)
						that.detailPics = detailPics
					},
					fail: (res) => {
						fail++;
					},
					complete: () => {
						i++;
						if (i == data.path.length) { //当图片传完时，停止调用   
							console.log(that.detailPics)
							that.$u.post('/lab/open-appointment/upload-print', {
								id: that.message.id,
								enclosure: that.detailPics
							}).then(res => {
								console.log(res)
								that.detail()
							})
						} else { //若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							that.uploadimg(data); //递归，回调自己
						}
					}
				});
			},
			upload() {
				var that = this;
				wx.chooseImage({
					count: 2, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						var imgs = res.tempFilePaths;
						for (var i = 0; i < imgs.length; i++) {
							that.pics.push(imgs[i])
						}
						console.log(that.pics)
						that.uploadimg({
							url: that.$u.http.config.baseUrl + '/common/upload', //这里是你图片上传的接口
							path: that.pics, //这里是选取的图片的地址数组
						});
					},
				})
			},
			preview(type) {
				console.log('ppppp')
				var arr = [];
				if (type == 1) {
					//回执
					var path = this.message.receipt_resource;

					for (var i = 0; i < path.length; i++) {
						arr = arr.concat(path[i].url)
					}
				}
				if (type == 2) {
					var path = this.message.enclosure_resource;

					for (var i = 0; i < path.length; i++) {
						arr = arr.concat(path[i].url)
					}
				}

				uni.previewImage({
					current: arr[0], // 当前显示图片的http链接，将点击图片的索引数指定好
					urls: arr // 需要预览的图片http链接列表
				})
			},
			detail() {
				this.$u.get('/lab/open-appointment/info/' + this.id).then(res => {
					console.log(res)
					var data = res.data.use_data;
					for (var i = 0; i < data.length; i++) {
						if (data[i].week_index == 0) {
							data[i].week_index = '星期一'
						}
						if (data[i].week_index == 1) {
							data[i].week_index = '星期二'
						}
						if (data[i].week_index == 2) {
							data[i].week_index = '星期三'
						}
						if (data[i].week_index == 3) {
							data[i].week_index = '星期四'
						}
						if (data[i].week_index == 4) {
							data[i].week_index = '星期五'
						}
						if (data[i].week_index == 5) {
							data[i].week_index = '星期六'
						}
						if (data[i].week_index == 6) {
							data[i].week_index = '星期日'
						}
					}
					this.message = res.data;
					this.use_data = data;
					this.loading = false;
				})
			},
			radioGroupChange(e) {
				console.log(e)
			},
			radioChange(e) {
				//单选按钮事件

			},
			tongguo(type) {
				let arr = []
				this.fileList.map(item => {
					arr.push(item.response.data.id)
				})
			
				//确定审核
				if (type == '') {
					this.$u.toast('请选择审核类型')
				} else if (this.fileList.length == 0 && type !== 2) {
					this.$u.toast('请上传回执！')
				} else {
					var data = {
						id: this.message.id,
						check_status: 1,
						type: type,
						receipt: arr
					}
					this.$u.post('/lab/open-appointment/check', data).then(res => {
						console.log(res)
						this.$u.toast('审核成功');
						this.show = false;
						this.detail()
					})
				}
			},
			checkFalse(type, status) {
				this.type = type
				if (status) {
					this.refuseShow = true
					return
				}
				if (!this.type) {
					this.$u.toast('请选择审核类型')
				} else if (this.value == '') {
					this.$u.toast('请填写驳回原因')
				} else {
					var data = {
						id: this.message.id,
						check_status: 2,
						type: type,
						check_result: this.value
					}
					this.$u.post('/lab/open-appointment/check', data).then(res => {
						console.log(res)
						this.$u.toast('审核成功');
						this.refuseShow = false;
						this.detail()
					})
				}
			},
		},
		onLoad(options) {
			this.action = this.$u.http.config.baseUrl + '/common/upload'
			this.id = options.id
			this.detail()
		}
	}
</script>

<style lang="scss" scoped>
	.look-huizhi {
		position: fixed;
		height: 50px;
		width: 50px;
		bottom: 70px;
		text-align: center;
		right: 15px;
		background-color: #3665FF;
		color: #fff;
		line-height: 50px;
		z-index: 9;
		border-radius: 50%;
	}

	.upload-huizhi {
		padding: 0 15px;
		margin-top: 15px;
		// margin-bottom: 5px;
		width: 100%;

	}

	.reserve-detail-page {
		padding-bottom: 80px;
	}

	.box {
		padding: 12px 16px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		position: relative;

		.msg-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 7px;
		}

		.msg-center {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 13px;
			color: #333;
			font-weight: 400;
			width: 100%;

			text {
				padding-top: 5px;
			}
		}

		.miaoshu {
			min-height: 100px;
			background: #F8F8F8;
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			padding: 12px;
			box-sizing: border-box;
			margin-top: 8px;
			font-size: 14px;
			font-weight: 400;
			color: #666;
			width: 100%;
		}

		.file {
			margin-top: 12px;
			display: flex;
			align-items: center;
			font-size: 14px;
			width: 100%;
		}

		.btn-btm {
			position: fixed;
			padding: 5px 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			background-color: #FFFFFF;

			view {
				width: 150px;
				height: 44px;
				border-radius: 22px 22px 22px 22px;
				opacity: 1;
				font-size: 16px;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.left {
				box-sizing: border-box;
				border: 1px solid #3665FF;
				color: #3665FF;
				margin-right: 15px;
				background: rgba(54, 101, 255, 0.15);
			}

			.right {
				color: #FFFFFF;
				background: #3665FF;
			}
		}

		.pop-bj {
			width: 100vw;
			height: 100vh;
			background: #000000;
			opacity: 0.6;
			z-index: 1;
			position: fixed;
			top: 0;
			left: 0;
		}

		.pop {
			width: 327px;
			background: #FFFFFF;
			padding: 10px 0px;
			border-radius: 12px 12px 12px 12px;
			opacity: 1;
			position: fixed;
			transform: translate(-50%, -50%);
			background: white;
			z-index: 2;
			top: 50%;
			left: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.txt1 {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				padding-top: 16px;
			}

			.txt2 {
				padding: 16px 0px;
				font-size: 16px;
				color: #333;
				font-weight: 400;
			}

			.pop-btn {
				margin-top: 24px;
				width: 84%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 130px;
					height: 44px;
					font-size: 16px;
					font-weight: bold;
					border-radius: 22px 22px 22px 22px;
					opacity: 1;
				}
			}
		}

		.prop-text {
			flex: 1;
		}
	}

	.status-text {
		font-size: 12px;
		font-weight: 400;
		color: #13ce66;
	}

	.status-text-loading {
		font-size: 12px;
		font-weight: 400;
		color: #ffba00;
	}

	.status-text-fail {
		font-size: 12px;
		font-weight: 400;
		color: #ff4d4f;
	}

	.u-tr {
		display: flex;
		align-items: center;
		width: 100%;
		border: 1px solid #ccc;
		border-bottom: none;
		border-right: none;

		.u-th {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ccc;
			height: 30px;
			background: #f6f6f6;
			overflow: hidden;
		}

		.u-td {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ccc;
			height: 30px;
			overflow: hidden;
		}

		.room_name {
			width: 50%;

			text {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}
		}
	}

	.u-tr:last-child {
		border-bottom: 1px solid #ccc;
	}
</style>