gongdan/pages/taskDetail/taskDetail.vue

<template>
	<view class="taskList">
		<!-- -->
		<u-navbar
			title="操作详情"
			:autoBack="true"
			:safeAreaInsetTop="false"
		>
			<view class="u-nav-slot" slot="right" @click="show = true">
				...
			</view>
		</u-navbar>
		<u-popup :show="show" mode="center" class="specialPop" @close="close">
			<view>
				<u-button type="primary" size="small" text="切换账号" @click="changeUser"></u-button>
			</view>
		</u-popup>
		<view style="margin-top:44px;">
			<view style="padding:0 24upx;">
				<u-cell-group>
					<u-cell size="large" center title="炉号" :value="info.heat_num" :titleStyle="{color:'#0076F6'}"></u-cell>
					<u-cell size="large" title="不良品选项" center @click="sheetShow = true"> 
						<view slot="value" style="flex:1;position: relative; " class="u-slot-value">
							{{contentInfo.rejects}}
							<u-icon name="arrow-down" :class="!contentInfo.rejects?'isEmpty':'notEmpty'" 
							color="#333333" size="21"></u-icon>
						</view>
					</u-cell>
					<u-cell size="large" title="不良品数量" :value="contentInfo.rejects_num.toString()" center></u-cell>
					<u-cell size="large" :key="index" v-for="(item,index) in contentInfo.content" :titleStyle="{color:'#E03023'}"  :title="item.key" center :value="item.value"></u-cell>

					<u-cell size="large" title="待质检数量" :value="contentInfo.member_num.toString()" center></u-cell>
					<u-cell size="large" title="合格数量" center :value="contentInfo.qualified_num.toString()"></u-cell>
					<u-cell size="large" title="不合格数量" center :value="contentInfo.no_qualified_num.toString()"></u-cell>
					<u-cell size="large" title="状态" center :value="contentInfo.statusName"></u-cell>
					<u-cell size="large" title="用时" center :value="contentInfo.use_time"></u-cell>
					<u-cell size="large" title="重要提示" :titleStyle="{color:'#E03023'}" center :value="contentInfo.needing_remake"></u-cell>
					<u-cell size="large" title="附件" center>
						<view slot="value" class="u-slot-value fujian" @click="downLoad(contentInfo.file)" style="display: flex;align-items: center;">
							<image src="../../static/img.png" v-if="contentInfo.file_suffix=='png'" mode=""></image>
							<image src="../../static/pdf.png" v-if="contentInfo.file_suffix=='pdf'" mode=""></image>
							<text style="overflow: hidden;width:400upx;text-overflow: ellipsis;">{{contentInfo.file}}</text>
						</view>
					</u-cell>
					<u-cell size="large" title="拍照" center class="img" :border="false">
						<view slot="value" class="u-slot-value">
							<u-upload
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								name="5"
								:previewFullImage="true"
								multiple
								:maxCount="3"
							></u-upload>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
			<view class="submitContent">
				<u--input
				    placeholder="请输入完成数量"
				    border="surround"
				    v-model="num"
					class="input"
					shape="circle"
				></u--input>
				<u-button 
				:disabled="num?false:true"
				@click="submitHandle">确定完成（已用时{{submitTimesNum}}秒）</u-button>
			</view>
		</view>
		<u-popup :show="sheetShow" mode="bottom" class="rejectDialog"  @close="rejectHandle">
			<view>
				 <u-checkbox-group
					v-model="checkboxValue1"
					placement="row"
					@change="checkboxChange"
					class="checkboxflex"
				>
					<u-checkbox
						:customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in checkboxList1"
						:key="index"
						:label="item.name"
						:name="item.id"
					>
					</u-checkbox>
				</u-checkbox-group>
				<u-button type="primary" text="确定" @click.native.stop="besure" style="margin-top: 50upx;"></u-button>
			</view>
		</u-popup>
		<u-popup :show="startVisible" mode="center" class="specialPop" :closeOnClickOverlay="false">
			<view>
				<view style="font-size: 32upx;color:#E03023;text-align: center;">
					重要提示
				</view>
				<view style="font-size: 28upx;color:#333333;margin-top: 30upx;">
					{{contentInfo.needing_remake}}
				</view>
				<u-button type="primary" size="small" 
				@click="closeHandle"
				:text="countDownTime <= 0?'关闭':countDownTime+'s后关闭'" 
				:disabled="countDownTime <= 0?false:true"
				style="margin-top: 50upx;"></u-button>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {getDeails,logout,submitHandle} from "@/api/user.js"
	export default {
		data() {
			return {
				info:{},
				show:false,
				contentInfo:{
					rejects:null,
					rejects_num:0,
					statusName:null,
					member_num:0,
					qualified_num:0,
					no_qualified_num:0,
					use_time:null,
					content:[],
					needing_remake:"",
					file_suffix:'',
					file:''
				},
				sheetShow:false,
				checkboxValue1:[],
				checkboxList1: [],
				fileList:[],
				num:null,
				startVisible:false,
				timer:null,
				countDownTime:10,
				submitTimer:null,
				submitTimesNum:0
			};
		},
		methods:{
			submitHandle(){
				console.log(this.fileList)
				let imgs = this.fileList.map(item=>{
					return item.path
				})
				console.log(imgs)
				let params={
					id:this.info.id,
					num:this.num,
					rejects:this.checkboxValue1.join(','),
					rejects_num:this.checkboxValue1.length,
					imgs:imgs.join(',')
				}
				console.log(params)
				submitHandle(params).then(res=>{
					
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '操作成功'
						})
						uni.redirectTo({
							url:'/pages/processList/processList?id='+this.info.taskId
						})
					}
				})
			},
			closeHandle(){
				this.startVisible=false;
				this.submitTimer = setInterval(() => {
					this.submitTimesNum ++;
				},1000)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://aps-api.njrzwl.cn/app/uploadFile',
						filePath: url,
						name: 'file',
						success: res => {
							// 这里res是普通对象，但是res.data为JSON字符串，需要转一下
							const result = JSON.parse(res.data);
							resolve(result);
						}
					});
				});
			},
			downLoad(item) {
				
				if (this.contentInfo.file_suffix == 'png') {
					uni.previewImage({
						urls: [item]
					})
				} else {
					uni.downloadFile({
						url: item,
						success: (data) => {
							if (data.statusCode === 200) {
								uni.saveFile({
									tempFilePath: data.tempFilePath,
									success: function(res) {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '文件已保存' + res.savedFilePath,
											duration: 3000
										});
										setTimeout(() => {
											uni.openDocument({
												filePath: res.savedFilePath,
												success: function(res) {
													console.log('文档打开成功')
												}
											})
										}, 3000)
									}
								})
							}
						},
						fail: () => {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载'
							})
						}
					});
				}	
			},
		    async afterRead(event) {
				const item = event.file[0];
				const url = item.url;
				let result = await this.uploadFilePromise(url);
				
				this.fileList.push({url:result.data.imgUrl,path:result.data.path})
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1);
			},
			checkboxChange(n) {
				this.checkboxValue1 = n
				console.log('change', this.checkboxValue1);
				
			},
			besure(){
				let text="";
				this.checkboxValue1.forEach(item=>{
					let obj = this.checkboxList1.filter(i=>{
						return i.id==item
					})
					text+=obj[0].name+','
				})
				console.log(text)
				this.contentInfo.rejects = text
				this.contentInfo.rejects_num = this.checkboxValue1.length;
				this.sheetShow = false
			},
			rejectHandle(){
				this.sheetShow = false
				
			},
			close() {
			  this.show = false
			},
			getData(){
				getTaskList().then(res=>{
					console.log(res)
					this.taskList = res.data
				})
			},
			changeUser(){
				logout().then(res=>{
					console.log(res)
					uni.redirectTo({
						url: '/pages/login/login'
					})
					uni.removeStorage({
					    key: 'userToken'
					})
					this.$store.commit('logout')
				})
			},
			getDeails(id){
				getDeails({id:id}).then(res=>{
					console.log(res.data,"ppppp")
					this.contentInfo.rejects_num = res.data.rejects_num;
					this.contentInfo.content = res.data.content
					this.contentInfo.member_num = res.data.procedure_member.member_num
					this.contentInfo.qualified_num = res.data.procedure_member.qualified_num
					this.contentInfo.no_qualified_num = res.data.procedure_member.no_qualified_num
					this.contentInfo.file_suffix = res.data.file_suffix
					this.contentInfo.file = res.data.file
					let status = res.data.procedure_member.status;
					
					switch (status) {
						case 0: 
						this.contentInfo.statusName = '未开始';
						break;
						case 1:
						this.contentInfo.statusName = '待质检';
						break;
						case 2:
						this.contentInfo.statusName = '质检不通过';
						break;
						case 3:
						this.contentInfo.statusName = '已完成';
						break;
					}
					this.contentInfo.use_time = res.data.procedure_member.use_time
					this.contentInfo.needing_remake = res.data.needing_remake
					this.checkboxList1 = res.data.rejects_list;
					
					let text="";
					res.data.rejects.split(",").forEach(item=>{
						this.checkboxValue1.push(Number(item))
						let obj = this.checkboxList1.filter(i=>{
							return i.id==item
						})
						text+=obj[0].name+','
					})
					console.log(text)
					this.contentInfo.rejects = text
					res.data.procedure_member.imgs.forEach(i=>{
						this.fileList.push({url:i,path:i.substr(25)})
					})
					
					if(this.contentInfo.needing_remake){
						this.startVisible = true;
						this.timer = setInterval(() => {
							this.countDownTime --;
							if (this.countDownTime <= 0) {
								clearInterval(this.timer);
							}
						},1000)
					}else{
						this.submitTimer = setInterval(() => {
							this.submitTimesNum ++;
						},1000)
					}
					console.log(this.contentInfo)
				})
			}
		},
		
		onLoad(option) {
			
			if(uni.getStorageSync('userToken')){
				console.log(option,"0000")
				this.info = option
				this.getDeails(option.id)
			}else{
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
			
		},
		destroyed() {
			clearInterval(this.submitTimer)
		}
	}
</script>

<style lang="scss">
	.specialPop{
		/deep/.u-popup__content{
			border-radius:20upx;
			padding:50upx 70upx;
			max-width: 60%;
			min-width: 30%;
		}
	}
	
	.rejectDialog{
		/deep/.u-popup__content{
			border-radius:20upx;
			padding:50upx 70upx;
			// width: 100%;
		}
	}
	
.taskList{
	min-height: calc(100vh);
	background-color: #ffffff;
	
	/deep/.u-cell__body__content{
		flex:none !important;
	}
	/deep/.u-cell__body{
		padding: 24upx 0px;
	}
	/deep/.u-cell__title{
		width:239upx;
	}
	/deep/.u-cell__title-text{
		color:#666666
	}
}
.checkboxflex{
	display: flex;
	justify-content: space-between;
}
.img{
	/deep/.u-cell--center{
		align-items: flex-start;
	}
}
.fujian{
	image{
		width:50upx;
		height: 50upx;
	}
}
.submitContent{
	padding:20upx 24upx;
	background: #FFFFFF;
	border: 1px solid #EAEAEA;
	box-shadow: 0px -4px 18px 0px rgba(17,21,38,0.06);
	.input{
		color: #999999;
		font-size: 30upx;
		/deep/.uni-input-wrapper{
			text-align: center;
		}
	}
	button{
		height: 80upx;
		line-height: 80upx;
		background: #0076F6;
		border-radius: 45upx;
		font-size: 30upx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		margin-top:20upx;
	}
}
.isEmpty{
	position:absolute;
	top:-11px;
	right:0;
}
.notEmpty{
	position:absolute;
	top:0px;
	right:0;
}
</style>