uniappshell/pages/index/handle/task/hazardRecord/hazardRecord.vue

<template>
	<view class="page">
		<view class="wrap">
			<template v-if="itemList.length>0">
				<view class="checklist" v-for="(hazardlist,idx) in itemList" :key="idx">
					<view class="title more">{{hazardlist.hazardTitle}}</view>
					<view class="item-cont" v-if="hazardlist.riskList&&hazardlist.riskList.length>0">
						<view class="checklistItem" v-for="(riskItem,itemIdx) in hazardlist.riskList" :key="itemIdx">
							<view class="itemTitle more"> {{riskItem.riskTitle}}</view>
							<view  class="point-cont" v-if="riskItem.recordList&&riskItem.recordList.length>0">
								<view class="point" v-for="(measure,measureIdx) in riskItem.recordList" :key="measureIdx" @click="check(measure)">
									<view class="pointContent">
											<text style="padding-right: 5px;">{{measureIdx+1}})</text>
											<text>{{measure.measureContent}}</text>
									</view>
									<view class="status">【<span class="text">{{measure.checkResult|checkResultFilter}}</span>】</view>
								</view>
							</view>
						</view>				
					</view>				
				</view>
				<view class="handle-container">	
					<view class="handle" @click="handleSubmit(1)">全部通过</view>
					<view class="handle" @click="handleSubmit(2)">全不通过</view>
					<view class="handle submit" @click="handleSubmit(3)" v-if="submit_bt_state">提交</view>
<!-- 					<view class="handle danger" @click="handleSubmit('danger')" v-if="danger_bt_state">登记隐患</view> -->
					<view class="more" @mouseenter="hover(1)" @mouseleave="hover">
						<text class="text">更多</text>
						<view class="list" v-if="showMore">
							<view class="hand-item-box">
								<view class="handle-item" @click="handleSubmit(4)">撤销</view>
								<view class="handle-item" @click="handleSubmit(5)">转交</view>																	
							</view>						
						</view>						
					</view>
				</view>
			</template>
			<template v-else>没有可处理的清单^-_-^</template>
		</view>		
	</view>
</template>
<script>	
import { getChecklistHazardRecordView } from '@/api/aqpt/checklistRecordHazardApi'
import { batchUpdateChecklistHazardRecordDoing } from '@/api/aqpt/checklistHazardRecordApi'
import {cancelCheckTask,completeCheckTask} from '@/api/aqpt/task.js'	
	export default {
		data() {
			return {
				defaultProps: {
					id: 'itemId', 
					children: 'children',
					label: 'itemTitle'
				},
				accountInfo:{},
				divider: false,
				edit: true,
				danger_bt_state:false,
				submit_bt_state:false,
				itemList:[],
				recordId:undefined,
				checklistId:undefined,
				handleVisiable:false,
				type:undefined,
				status:undefined,
				taskTitle:"",
				showMore:false
			}
		},
		  filters: {
		    checkResultFilter(i) {
			  if (i >= 0) {
			    const strs = [
			      '未检查',
			      '通过'
			    ]
			    return strs[i]
			  } else {
			    if (i === -1) {
			      return '未通过'
			    } else if (i === -2) {
			      return '发现隐患'
			    }
			  }
		    }
		  },
		onLoad({rid,cid,title}) {
			this.checklistId=cid	
			this.recordId=rid	
			let accountInfo=uni.getStorageSync('accountInfo')
			this.accountInfo=accountInfo
			this.taskTitle=title
			this.getchecklistRecord(rid)
		},
		methods: {
			getchecklistRecord(recordId){
				getChecklistHazardRecordView(recordId).then((res)=>{
					if(!res.data.hazardList)return					
					this.itemList=res.data.hazardList
					this.status=res.data.status		
					let items=[]						
					for(let i=0;i<this.itemList.length;i++){
						if(this.itemList[i].riskList){
							this.itemList[i].riskList.map(child=>{
								child.recordList.map(measure=>{
									items.push(measure)
								})
							})
						}						
					}
					let index=items.findIndex(item=>item.checkResult===-1)
					let _index=items.findIndex(item=>item.checkResult===0)	
					this.submit_bt_state=_index<0								
					this.danger_bt_state=index>-1?true:false
				})
			},
			check(measure){		
				uni.setStorageSync("measure",measure)
				uni.redirectTo({
					url:"/pages/index/handle/task/hazardRecord/form"
				})								
			},
			handleSubmit(type){
				let recordId=this.recordId;
				let checklistId=this.checklistId;
				const self=this;				
				if(type===1){
					batchUpdateChecklistHazardRecordDoing(recordId,1).then(()=>{
						this.getchecklistRecord(recordId)
					})
				}
				if(type===2){
					batchUpdateChecklistHazardRecordDoing(recordId,-1).then(()=>{
						this.getchecklistRecord(recordId)
					})
				}				
				if(type===3){//完成
					if(this.danger_bt_state){
						uni.showModal({
							title: '提示',
							content: '本次检查有未通过项，是否需要登记隐患？',
							success: function (res) {
								if (res.confirm) {
									self.submitDanger(recordId)
								} else if (res.cancel) {
									self.completeTask(recordId)
								}
							}
						});
					}else{
						this.completeTask(recordId)
					}
				}
				if(type===4){//放弃
					cancelCheckTask(recordId).then(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					}).catch(()=>{
						uni.showToast({
							icon:"none",
							title:"操作失败"
						})
					})
				}	
				if(type===5){//转交
					let taskTitle=this.taskTitle;
					uni.redirectTo({
						url:`/pages/index/handle/task/checkList/form/transferCheckTask?tid=${recordId}&title=${taskTitle}`
					})
				}
				if(type==="danger"){
					let href=`${this.$h5}/danger/views/create.html`;
					let name= '登记隐患'
					completeCheckTask(recordId).then(()=>{
						uni.redirectTo({
							url:`/pages/webview/webview?href=${href}&name=${name}`
						})
					}).catch(()=>{
						uni.showToast({
							icon:"none",
							title:"操作失败"
						})
					})
				}
			},
			completeTask(recordId){
				completeCheckTask(recordId).then(()=>{				
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}).catch(()=>{
					uni.showToast({
						icon:"none",
						title:"操作失败"
					})
				})					
			},
			submitDanger(recordId){
				let href=`${this.$h5}/danger/views/create.html`;
				let name= '登记隐患'	
				completeCheckTask(recordId)								
				uni.redirectTo({
					url:`/pages/webview/webview?href=${href}&name=${name}`
				})
			},
			hover(state){
				this.showMore=state===1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F5F6F8;
		padding: 20rpx;
		min-height: 100vh;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		.page-head{
			text-align: right;
			padding-bottom: 10rpx;
			.handle{
				display: inline-block;
				background-color: #3384FF;
				color: #fff;
				padding: 10rpx 15rpx;
				box-sizing: border-box;
				border-right: 1rpx solid #eaeaea;
				font-size: 30rpx;
				text-align: center;
				&:nth-child(4){
					border: 0;
				}
			}
		}
	}	
	.wrap{
		padding: 20rpx;
		background-color: #fff;
		.checklist{
			.title{
				color: #222222;
				font-size: 32rpx;
				height: 98rpx;
				line-height: 98rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				border-bottom: 1px dashed #E8E8E8;				
			}
			.more{
				background-image: url('/static/tree_more.png');
				background-size: 30rpx 30rpx;
				padding-left: 40rpx;
				background-position: center left;
				background-repeat: no-repeat;
			}
			.item-cont{
				padding-left: 20rpx;
				border-bottom: 1px dashed #E8E8E8;	
				.checklistItem{
					.itemTitle{
						color: #222222;
						font-size: 32rpx;	
						height: 98rpx;
						line-height: 98rpx;
					}
				}
				.point-cont{
					padding-left: 30rpx;
					.point{
						display: flex;						
						color: #666;
						font-size: 28rpx;	
						// height: 98rpx;
						// line-height: 98rpx;
						.pointContent{
							flex: 1;
						}
						.status{
							.text{
								color: #3384FF;
								font-weight: 800;
							}
						}
					}
				}
			}
		}
			
		.handle-container{
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #eaeaea;
			padding: 15rpx 0;
			.handle{
				display:inline-block;
				color: #222;
				padding: 15rpx 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #eaeaea;
				font-size: 26rpx;
				text-align: center;
				border-radius: 50rpx;
				margin: 0 10rpx;
				&.danger{
					background-color: #FA5B41;	
					color: #fff;						
				}
				&.submit{
					background-color: #3384FF;	
					color: #fff;
				   padding: 18rpx 38rpx;
				}
			}
			.more{
				position: relative;
				padding: 15rpx 20rpx;
				.text:hover{
					&+.list>.hand-item-box{
						display: block;
					}
				}
				.list{
					position: absolute;
					bottom: 100rpx;
					right: 0;
					box-shadow: 0px 2px 12px 0px #0000001F;
					padding:0 20rpx;
					background-color: #fff;
					.hand-item-box{
						position: relative;
						display: none;
						&.show{
							display: block;
						}
						&::after{
							width: 0;
							height: 0;
							content: "";
							display: block;
							border-width: 26rpx 26rpx 0 0;
							border-color: #fff transparent;
							border-style: solid;
							position: absolute;
							bottom: -20rpx;
							right: -20rpx;
						}
						.handle-item{
							width: 180rpx;
							height: 50rpx;
							font-size: 26rpx;
							line-height: 50rpx;
							background-color: #fff;
							text-align: center;
							border-bottom: 1px solid #ccc;
							padding:10rpx 0;
							&:last-child{
								border: 0;
							}
						}						
					}

				}
			}
		}
	}
</style>