SmartStorage/pages/preCrashExamDetail/preCrashExamDetail.vue

<template>
	<view>
		<view 
			class="single-pre"
			v-for="(list, index) in preDetailList"
			:key="list.id"
		>
			<view>
				<h4>设备类型</h4>
				<h5>{{ list.machineTypeName }}</h5>
			</view>
			<view>
				<h4>规格型号</h4>
				<h5>{{ list.specificationType }}</h5>
			</view>
			<view>
				<h4>设备编码</h4>
				<h5>{{ list.maCode == null ? '-' : list.maCode }}</h5>
			</view>
			<view>
				<h4>报废数量</h4>
				<h5>{{ list.scrapNum }}</h5>
			</view>
			<view>
				<h4>损坏原因</h4>
				<h5>{{ list.scrapType == '0' ? '自然' : '人为' }}</h5>
			</view>
			<view>
				<h4>报废图片</h4>
				<h5>
					<image 
						v-for="(img, index) in list.fileUrl"
						:key="index"
						:src="imgPrefix + img[index]" 
						mode=""
					></image>
				</h5>
			</view>
			<h3 v-show="list.status == '0' && showBtn == '0'">
				<text
					@click="togglePass(list)"
				>
					通过
				</text>
				<text
					style="background-color: #fff; color: #000; border: 1px solid #EBEBEB;"
					@click="toggleRefuse(list)"
				>
					驳回
				</text>
			</h3>
			<h6 class="sticky-area">
				<h4
					v-show="list.status == '0'"
					style="background-color: #FFF6E7; color: #FCAA23;"
				>
					待审核
				</h4>
				<h4
					v-show="list.status == '1'"
					style="background-color: #E9FBE7; color: #3CD92E;"
				>
					已通过
				</h4>
				<h4
					v-show="list.status == '2'"
					style="background-color: #FFECEC; color: #FF4C4C;"
				>
					驳回
				</h4>
			</h6>
		</view>
		<uni-popup
			ref="popup1" 
			type="center"
			:mask-click="false"
		>
			<view class="popup1">
				<view class="pop-top">
					<h4>驳回原因</h4>
					<uni-icons 
						style="color: #AAAAAA; font-weight: bold;" 
						type="closeempty" 
						@click="closePopup1"
					>
					</uni-icons>
				</view>
				<view class="select-area">
					<uni-easyinput v-model="rejectReason" placeholder="请填写驳回原因"></uni-easyinput>
					<view class="btn" @click="confirmReject">驳回</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskId: '',
				preDetailList: [],
				imgPrefix: '',
				rejectReason: '',
				refuseList: '',
				showBtn: ''
			}
		},
		methods: {
			fetchPreDetail (taskId) {
				let that = this
				that.$api.preCrashExam.fetchPreCrashDetail({
					taskId
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							if (item.fileUrl != null) {
								item.fileUrl = item.fileUrl.split(',')
							}
						})
						that.preDetailList = res.data.data
						console.log(that.preDetailList);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			submitExam (obj) {
				let that = this
				// 提交审核/驳回
				that.$api.preCrashExam.submitPreExam(obj).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							success: () => {
								uni.redirectTo({
									url: '/pages/preCrashExamDetail/preCrashExamDetail'
								})
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			togglePass (list) {
				let that = this
				let arr = []
				arr.push({
					auditBy: uni.getStorageSync('userInfo').userid,
					id: list.id,
					status: '1'
				})
				let subObj = {
					scrapDetailList: arr,
					taskId: list.taskId
				}
				uni.showModal({
					title: '通过审核',
					content: '是否通过审核？',
					confirmText: '通过',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log(subObj);
							that.submitExam(subObj)
						}
					}
				})
			},
			toggleRefuse (list) {
				this.refuseList = list
				this.$refs.popup1.open()
			},
			closePopup1 () {
				this.$refs.popup1.close()
			},
			confirmReject () {
				let that = this
				let arr = []
				arr.push({
					auditBy: uni.getStorageSync('userInfo').userid,
					id: this.refuseList.id,
					auditRemark: this.rejectReason,
					status: '2'
				})
				let subObj = {
					scrapDetailList: arr,
					taskId: this.refuseList.taskId
				}
				console.log(subObj);
				that.submitExam(subObj)
				that.closePopup1()
			}
		},
		onLoad(params) {
			this.showBtn = params.showBtn
		},
		onShow() {
			this.imgPrefix = this.$api.url
			this.fetchPreDetail(uni.getStorageSync('preTaskId'))
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #FAFDFF;
	}
	.single-pre{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		view{
			width: 100%;
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			h4{
				font-weight: normal;
				font-size: 30rpx;
				color: #ADADAD;
				padding-right: 20rpx;
			}
			h5{
				font-weight: normal;
				font-size: 30rpx;
				image{
					width: 20%;
					height: 100rpx;
				}
			}
		}
		view:last-child{
			margin-bottom: 0;
		}
		h3{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 50rpx;
			font-size: 14px;
			font-weight: normal;
			display: flex;
			align-items: center;
			justify-content: right;
			text{
				width: 20%;
				box-sizing: border-box;
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				background-color: #3888FF;
				font-weight: normal;
				margin-right: 30rpx;
				color: #fff;
			}
			text:last-child{
				margin-right: 0;
			}
		}
		.sticky-area{
			font-size: 16px;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			h4{
				box-sizing: border-box;
				padding: 10rpx 25rpx;
			}
		}
	}
	.popup1{
		width: 80vw;
		height: 20vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
		.pop-top{
			width: 100%;
			height: 5vh;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.select-area{
			width: 85%;
			margin: 40rpx auto;
			.btn{
				width: 30%;
				box-sizing: border-box;
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #3788FF;
				color: #fff;
				font-size: 14px;
				border-radius: 15rpx;
				margin: 20rpx auto;
			}
		}
	}
</style>