payy-app/views/danger/detail.vue

<template>
	<view class="danger-detail-warp">
		<view class="table-wrap">
			<view class="nav">
				<text>隐患等级：{{danger.dangerLevel|dangerLevelFilter}}</text>
				<button class="bt warn"  @click="handle" v-if="type==='review'">{{danger.taskInsTitle}}</button>
				<button class="bt primary" @click="handle" v-if="type==='accept'">{{danger.taskInsTitle}}</button>
				<button class="bt success" @click="handle" v-if="type==='recity'">{{danger.taskInsTitle}}</button>
			</view>
			<view class="table-contain">
				<view class="detail-item">
					<view class="head">
						<text>基本信息</text>
					</view>		
					<view class="table-cont" >
					<!-- 基本信息 -->
					　　<view class="baseInfo">
							<text>标题：{{danger.dangerTitle}}</text>
						</view>
					　　<view class="baseInfo">
							<text>隐患类别：{{danger.dangerCatTitle|isNull}}</text>
						</view>
					　　<view class="baseInfo">
							<text>隐患来源：{{danger.dangerSource|dangerSourceFilter}}</text>
						</view> 
					　　<view class="baseInfo">
							<text>整改期限：{{danger.dangerDeadLine}}</text>
						</view> 						
						<uni-collapse accordion>
							<uni-collapse-item title="查看更多">
							　　<view class="baseInfo">
									<text>类别：{{danger.dangerCatTitle|isNull}}</text>
								</view>
							　　<view class="baseInfo">
									<text>编码：{{danger.dangerCode|isNull}}</text>
								</view>								
							　　<view class="baseInfo">
									<text>所在部门：{{danger.groupName|isNull}}</text>
								</view>	
							　　<view class="baseInfo">
									<text>提交人：{{danger.submitAccountName}}</text>
								</view> 
							　　<view class="baseInfo">
									<text>提交时间：{{danger.submitTime}}</text>
								</view> 
							　　<view class="baseInfo">
									<text>评审人：{{danger.reviewAccountName}}</text>
								</view> 
							　　<view class="baseInfo">
									<text>评审时间：{{danger.reviewTime}}</text>
								</view>		
							　　<view class="baseInfo">
									<text>整改：{{danger.reviewAccountName}}</text>
								</view> 
							　　<view class="baseInfo">
									<text>整改时间：{{danger.reviewTime}}</text>
								</view> 　
							　　<view class="baseInfo">
									<text>原因分析：{{ danger.dangerReason }}</text>
								</view>
							　　<view class="baseInfo">
									<text>整改方式：{{ danger.rectifyCat | rectifyFilter }}</text>
								</view>		
							　　<view class="baseInfo">
									<text>整改措施：{{ danger.rectifyMeasure }} </text>
								</view>
							　　<view class="baseInfo">
									<text>整改说明：{{ danger.rectifyRemark }} </text>
								</view>	
							　  <view class="baseInfo desc">
									<text>描述：</text>
									<view class="desc-txt">{{danger.dangerDesc}}</view>
								</view>	
							</uni-collapse-item>
						</uni-collapse>																	　
					</view>								
				</view>	
				<view class="detail-item">
					<view class="head">
						<text>历史记录</text>
					</view>
					<view class="table-cont" >
						<view class="record-cont">
							<view class="timeline-item" v-for="(taskIns, index ) in flowData.taskInsRecordList" :key="index">
								<view class="time row">{{ taskIns.endTime }}</view>
								<view class="title row">{{ taskIns.taskInsTitle }}</view>
								<view class="desc row">{{ taskIns.accountName }} {{ taskIns.positionName }}-{{ taskIns.groupName }}</view>
								<view v-for="(attach, index2) in taskIns.attachList" :key="index2" class="block" @click="previewPic(attach.fileUrl)">
								  <image class="attachImg" :src="attach.fileUrl" mode="widthFix"></image>
								</view>
							</view>						
						</view>	
					</view>					
				</view>
			</view>		
		</view>
	</view>
</template>
<script>
	import {
		getDangerDetailsById
	} from '@/api/danger';
	import {
		dangerLevel, dangerSource, dangerStatus, rectifyCat
	} from '@/libs/enum';	
	
	export default {
		filters: {
			dangerSourceFilter(ival) {
			  return dangerSource(ival)
			},
			dangerLevelFilter(ival) {
			  return dangerLevel(ival)
			},
			dangerStatusFilter(ival) {
			  return dangerStatus(ival)
			},
			rectifyFilter(ival) {
			  return rectifyCat(ival)
			},
			isNull(value){
				if(value!=='undefined'&&value!==undefined&&value!==null&&value!==""&&value!==" "){
					return value;
				}else{
					return '--';
				}
			}
		},		
		data() {
			return {
				dangerId:undefined,
				type:undefined,
				riskPointId:undefined,
				danger:{
					groupId: undefined,
					groupName: '',
					dangerId: undefined,
					dangerSource: undefined,
					dangerCode: '',
					dangerTitle: '',
					dangerDesc: '',
					dangerLevel: "",
					dangerCatId: undefined,
					dangerCatTitle: '',
					riskPointId: undefined,
					riskPointTitle: '',
			
					submitGroupId: undefined,
					submitGroupName: '',
					submitPositionId: undefined,
					submitPositionName: '',
					submitAccountId: undefined,
					submitAccountName: '',
					submitTime: '',
					dangerDeadLine: '',
			
					reviewGroupId: undefined,
					reviewGroupName: '',
					reviewPositionId: undefined,
					reviewPositionName: '',
					reviewAccountId: undefined,
					reviewAccountName: '',
					reviewTime: '',
			
					rectifyGroupId: undefined,
					rectifyGroupName: '',
					rectifyPositionId: undefined,
					rectifyPositionName: '',
					rectifyAccountId: undefined,
					rectifyAccountName: '',
			
					dangerReason: '',
					rectifyCat: 1,
					rectifyMeasure: '',
					rectifyRemark: '',
					rectifyTime: '',
			
					acceptGroupId: undefined,
					acceptGroupName: '',
					acceptPositionId: undefined,
					acceptPositionName: '',
					acceptAccountId: undefined,
					acceptAccountName: '',
					acceptTime: '',
			
					wfDefId: 1,
					wfInsId: undefined,
					wfInsTitle: '',
					wfInsStatus: undefined,
			
					taskDefId: undefined,
					taskInsId: undefined,
					taskInsTitle: '',
			
					taskInsGroupId: undefined,
					taskInsGroupName: '',
					taskInsPositionId: undefined,
					taskInsPositionName: '',
					taskInsAccountId: undefined,
					taskInsAccountName: '',
					taskInsStatus: undefined,
			
					attachList: [],
					taskCode: '',
					formCode: '',
					fileUrl: ''				
				},
				flowData: {
					wfDefId: 1,
					wfInsId: undefined,
					wfInsTitle: '',
					status: undefined,
					taskIns: undefined,
					taskInsRecordList: []
				}				
			}
		},
		//监听上个页面传回来参数
		onLoad(options) {
			//调用页面请求数据接口
			if(!options)return;
			this.dangerId=options.id;
			this.type=options.type;
			this.getDetail(options.id);
			this.riskPointId = options.id
		},
		methods: {
			getDetail(id){	
				getDangerDetailsById(id).then((res) => {
					this.danger=res.data.danger;
					this.flowData = res.data.flow
				})						
			},
			handle(){
				let type=this.type;
				let dangerId=this.dangerId;
				if (type == "review") {
					//评审
					console.log("评审", {dangerId,type})
					uni.navigateTo({
						url: '/views/danger/review?dangerId=' + dangerId,
					});
				} else if (type == "recity") {
					//整改
					console.log("整改",{dangerId,type})
					uni.navigateTo({
						url: '/views/danger/recity?dangerId=' + dangerId,
					});
				} else if (type == "accept") {
					//验收
					console.log("验收",{dangerId,type})
					uni.navigateTo({
						url: '/views/danger/accept?dangerId=' + dangerId,
					});
				}				
			},
			previewPic(targetSrc) {
				uni.previewImage({
					urls:[targetSrc]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.danger-detail-warp{
		padding-bottom:100upx;
		background-color: #fff;
		min-height:100vh;
		.nav{
			padding: 14upx;
			text-align: right;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.bt{
				width: 200upx;
				line-height: 2;
				margin: 0;
				&.warn{
					color: #fff;
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				&.primary {
					background-color:#00A0FF ;
					border-color: #00A0FF;
					color: #fff;
				}
				&.success{
					color: #fff;
					background-color: #67c23a;
					border-color: #67c23a;
				}	
				&.danger{
					color: #fff;
					background-color: #f56c6c;
					border-color: #f56c6c;
				}
			}
		}
		.table-wrap{
			.table-contain{
				.detail-item{
					.head{
						width: 300upx;
						height: 58upx;
						line-height: 58upx;	
						color: #FFFFFF;
						background: #00A0FF;
						border-radius:0 16upx 16upx 0;
						padding: 0 20upx;										
					}
					.table-cont {
						padding: 0 26upx;
						.baseInfo {
							height: 78upx;
							line-height: 78upx;
							border-bottom: 2upx solid #EDE1D9;
							&.desc{
								height: auto;
								line-height: 1.5;
								min-height: 78upx;
								border-bottom: none;
								padding-top: 16upx;
								display: flex;
								justify-content: flex-start;
								.desc-txt{
									width: 600upx;
									word-break: break-word;
								}
							}
						}				
					}
					.record-cont{
						padding: 20upx;
						.timeline-item{
							width: 50%;
							position: relative;
							padding-right: 10upx;
							box-sizing: border-box;
							.attachImg{
								display: block;
								width: 300upx;
								background-color: #ccc;
							}
							&::after{
								width: 16upx;
								height: 16upx;
								border-radius: 50%;
								display: block;
								content: "";
								background-color:#c0c4cc;
								position: absolute;
								top: 0;
								right:0;
								transform: translateX(50%);
							}
							&::before{
								width: 1px;
								height: 100%;
								display: block;
								content: "";								
								background-color: #c0c4cc;
								position: absolute;
								top: 0;
								right:0;
								transform: translateX(50%);								
							}
							.row{
								padding: 12upx 0;
							}
							&:nth-child(2n){
								margin-left: 50%;
								padding-left: 10upx;
								.attachImg{
									width: 350upx;
								}
								&::after{
									right: unset;
									left: 0;
									transform: translateX(-50%);
								}
								&::before{
									right: unset;
									left: 0;
									transform: translateX(-50%);							
								}							
							}
						}
					}
				}				
			}
		}		
	}
</style>