FE-V2-XCX/pages_manage/workbench/securityCheck/recordDetails.vue

<!-- 安全检查详情 -->
<template>
    <view id="recordDetails">
		<view class="info-max-page" v-if="pageType == 1">
			<view class="position-button" v-if="buttonArrayType != 4">
				<picker @change="buttonChange" :value="buttonIndex" :range="buttonArray">查看报告</picker>
			</view>
			<view class="top-info-box">
				<view class="top-min-info-box">
					<view>整改类型：</view>
					<view>{{newData.zgType == 0?'一般整改':'重大整改'}}</view>
				</view>
				<view class="top-min-info-box">
					<view>实验室名称：</view>
					<view>{{newData.laboratoryName}}</view>
				</view>
				<view class="top-min-info-box">
					<view>房间号：</view>
					<view>{{newData.fjNumber}}</view>
				</view>
				<view class="top-min-info-box">
					<view>所属实验楼：</view>
					<view>{{newData.buildingName}}</view>
				</view>
				<view class="top-min-info-box">
					<view>实验室负责人：</view>
					<view>{{newData.fzrName}}</view>
				</view>
				<view class="top-min-info-box">
					<view>联系方式：</view>
					<view>{{newData.fzrLxfs}}</view>
				</view>
				<view class="top-min-info-box">
					<view>检查单位：</view>
					<view>{{newData.jcDwName}}</view>
				</view>
				<view class="top-min-info-box">
					<view>检查时间：</view>
					<view>{{newData.createTime}}</view>
				</view>
				<view class="top-min-info-box">
					<view>整改截止时间： </view>
					<view>{{newData.zgjzTime}}</view>
				</view>
				<view class="top-info-button" @click="infoClickButton">
					<view>{{showType?"收起详情":"查看详情"}}</view>
					<img v-if="showType" src="@/images/Version2.2/icon_aqjc_sq.png">
					<img v-if="!showType" src="@/images/Version2.2/icon_aqjc_sq_two.png">
				</view>
			</view>
			<view class="bottom-info-box" v-show="showType">
				<view class="bottom-info-title-box" v-if="newData.zgStatus==0">
					<img src="@/images/Version2.2/icon_aqjc_czwt.png">
					<view>存在隐患</view>
				</view>
				<view class="bottom-info-title-box" v-if="newData.zgStatus != 0">
					<img src="@/images/Version2.2/icon_aqjc_zgxx.png">
					<view>整改信息</view>
				</view>
				<view class="rectified-max-box">
					<view class="rectified-for-box" v-if="item.isZg != 1" v-for="(item,index) in newData.detailsList" :key="index">
						<view class="rectified-for-position-index">{{index+1}}</view>
						<img v-if="newData.zgStatus == 4" class="rectified-for-position-img" src="@/images/Version2.2/icon_bg_ywc.png">
						<view class="rectified-for-title">{{item.jcxName}}</view>
						<view class="rectified-for-name" v-if="item.isLingshi == 1">临时检查项</view>
						<view class="rectified-for-name" v-if="item.isLingshi == 0">{{item.jcxSstkMs}}</view>
						<view class="rectified-for-text-max-box">
							<view class="rectified-for-text-box">
								<view>隐患描述：</view>
								<view>{{item.yhMs}}</view>
							</view>
							<view class="rectified-for-text-box" v-if="item.isZg == 0 && newData.zgType == 0">
								<view>整改描述：</view>
								<view>{{item.zgMs}}</view>
							</view>
						</view>
						<view class="rectified-for-img-max-box">
							<view class="rectify_front">
								<view class="rectify_front_t">整改前照片:</view>
								<view class="rectify_front_b" @click="lockImg(item.yhImg)">
									<img :src="itemUrl" v-for="(itemUrl,indexTwo) in item.yhImg" :key="indexTwo">
								</view>
							</view>
							<view v-for="(item2,index2) in item.detailslogList" :key="index2" style="border-bottom: 1px dotted #E0E0E0;">
								<view class="top-info-box rectify_info">
									<view class="top-min-info-box">
										<view>整改时间：</view>
										<view>{{item2.createTime}}</view>
									</view>
									<view class="top-min-info-box">
										<view>整改人：</view>
										<view>{{item2.zgUserName}}</view>
									</view>
									<view class="top-min-info-box">
										<view>整改描述：</view>
										<view style="text-align:left;">{{item2.zgMs}}</view>
									</view>
								</view>
								<view class="rectify_later">  
									<view class="rectify_later_t">整改后照片:</view>
									<view class="rectify_later_b" @click="lockImg(item2.yhZghImg)">
										<img :src="item3" v-for="(item3,index3) in item2.yhZghImg" :key="index3">
									</view>
								</view>
								<view class="top-info-box rectify_info" v-if='item2.spTime'>
									<view class="top-min-info-box">
										<view>复核时间：</view>
										<view v-if="item2.spTime">{{item2.spTime}}</view>
									</view>
									<view class="top-min-info-box">
										<view>复核人：</view>
										<view v-if="item2.spUserName">{{item2.spUserName}}</view>
									</view>
									<view class="top-min-info-box">
										<view>复核描述：</view>
										<view style="text-align:left;" v-if="item2.spSm">{{item2.spSm}}</view>
									</view>
								</view>
							</view>
							
							
						</view>
					</view>
				</view>
				<view class="bottom-info-title-box" v-if="newData.zgStatus==3">
					<img src="@/images/Version2.2/icon_aqjc_zgxx.png">
					<view>未整改信息</view>
				</view>
				<view class="rectified-max-box">
					<view class="rectified-for-box" v-if="item.isZg == 1" v-for="(item,index) in newData.detailsList" :key="index">
						<view class="rectified-for-position-index">{{index+1}}</view>
						<view class="rectified-for-title">{{item.jcxName}}</view>
						<view class="rectified-for-name" v-if="item.isLingshi == 1">临时检查项</view>
						<view class="rectified-for-name" v-if="item.isLingshi == 0">{{item.jcxSstkMs}}</view>
						<view class="rectified-for-text-max-box">
							<view class="rectified-for-text-box">
								<view>隐患描述：</view>
								<view>{{item.yhMs}}</view>
							</view>
						</view>
						<view class="rectified-for-img-max-box">
							<view class="rectified-for-img-box" @click="lockImg(item.yhImg)">
								<img :src="itemUrl" v-for="(itemUrl,indexTwo) in item.yhImg" :key="indexTwo">
								<view class="rectified-for-img-min-text" style="color:#999;" v-if="!item.yhImg[0]">未上传隐患照片</view>
								<view class="rectified-for-img-min-text" v-if="item.yhImg[0]">{{newData.zgStatus==0?'隐患照片':'整改前照片'}} >></view>
							</view>
							<view class="rectified-for-img-box" @click="lockImg(item.zmClImg)" v-if="item.zmClImg">
								<img :src="itemUrl" v-for="(itemUrl,indexTwo) in item.zmClImg" :key="indexTwo">
								<view class="rectified-for-img-min-text">证明材料 >></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="input-max-box" v-if="pageType == 2">
			<view class="input-box">
				<textarea maxlength="100" v-model="text" placeholder="请输入驳回原因"></textarea>
			</view>
			<view class="input-button-box">
				<view class="out-button" @click="pageClick(1)">返回</view>
				<view class="input-button" @click="upDataClick(2)">提交</view>
			</view>
		</view>
		<view class="input-max-box" v-if="pageType == 3">
			<view class="input-box">
				<textarea maxlength="100" v-model="text" placeholder="请输入整改结果"></textarea>
			</view>
			<view class="input-button-box">
				<view class="out-button" @click="pageClick(1)">返回</view>
				<view class="input-button" @click="upDataClick(3)">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/api/request/config.js'
    import { recordDettailsList, checkRecordUpdate ,checkSign,queryDeptSignByUserId} from '@/api/index.js'
	export default {
		name: "recordDetails",
		data() {
			return {
				baseUrl:config.base_url,
				id:"",
				text:"",
				//选项
				buttonIndex:0,
				buttonArray:[],
				buttonArrayType:"",
				//页面状态
				pageType:1,
				//详情开关
				showType:false,
				//数据
				newData:{},
			}
		},
        onLoad(option) {
			this.id = option.id;
			this.getInfo();
        },
        onShow() {

        },
        methods: {
			pageClick(type){
				if(this.pageType != type){
					this.pageType = type;
				}
			},
			upDataClick(type){
				let self = this;
				if(!this.text){
					uni.showToast({
						title: this.pageType==2?'请输入驳回原因':(this.pageType == 3?'请输入整改结果':''),
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(type == 2){
					let obj = {
						id:this.id,
						createUserId:this.newData.createUserId,
						fbYy:this.text,
						zgStatus:2,
					};
					uni.showModal({
						content: '确认要驳回吗?',
						cancelColor:"#999",
						confirmColor:"#0183FA",
						success: function (res) {
							if (res.confirm) {
								self.checkRecordUpdate(obj);
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else if(type == 3){
					let obj = {
						id:this.id,
						createUserId:this.newData.createUserId,
						zgJg:this.text,
						zgStatus:4,
					}
					uni.showModal({
						content: '确认要审核通过吗?',
						cancelColor:"#999",
						confirmColor:"#0183FA",
						success: function (res) {
							if (res.confirm) {
								self.checkRecordUpdate(obj);
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			async checkRecordUpdate(obj){
				const {data} = await checkRecordUpdate(obj);
				if(data.code == 200){
					uni.showToast({
						title: '操作成功',
						icon:"none",
						mask:true,
						duration: 2000
					});
					setTimeout(function(){
						uni.navigateBack();
					},2000);
				}
			},
			async getInfo(){
				let obj = {
					id:this.id
				};
			    const {data} = await recordDettailsList(obj);
				if(data.code == 200){
				  let obj = JSON.parse(JSON.stringify(data.data));
				  for(let i=0;i<obj.yhlist.length;i++){
					let text = "";
					if(obj.yhlist[i].level1){
					  text = text + obj.yhlist[i].level1;
					}
					if(obj.yhlist[i].level2){
					  text = text + '/'+ obj.yhlist[i].level2;
					}
					if(obj.yhlist[i].level3){
					  text = text + '/'+ obj.yhlist[i].level3;
					}
					if(obj.yhlist[i].level4){
					  text = text + '/'+ obj.yhlist[i].level4;
					}
					obj.yhlist[i].level = text;
					if(obj.yhlist[i].yhImg){
					  if(obj.yhlist[i].yhImg[i]){
					  	let yhImgList=obj.yhlist[i].yhImg.split(",");
					  	for(let m=0;m<yhImgList.length;m++){
							yhImgList[m]=config.base_url+yhImgList[m];
						}
						obj.yhlist[i].yhImg = yhImgList;
					  }
					}
					if(obj.yhlist[i].zmClImg){
					  if(obj.yhlist[i].zmClImg[i]){
					  	let yhlImgList=obj.yhlist[i].zmClImg.split(",");
					  	for(let k=0;k<yhlImgList.length;k++){
							yhlImgList[k]=config.base_url+yhlImgList[k];
						}
						obj.yhlist[i].zmClImg = yhlImgList;
					  }
					}
					/* 整改后照片 */
					/* if(obj.yhlist[i].yhZghImg){
					  if(obj.yhlist[i].yhZghImg[i]){
					    let zghImgList=obj.yhlist[i].yhZghImg.split(",");
					    for(let j=0;j<zghImgList.length;j++){
							zghImgList[j]=config.base_url+zghImgList[j];
						}
						obj.yhlist[i].yhZghImg = zghImgList;
					  }
					} */
					if(obj.yhlist[i].detailslogList){
						if(obj.yhlist[i].detailslogList.length>0){
							obj.yhlist[i].detailslogList.forEach(function(item){
								
								let list=[];
								let urlList=[];
								list=item.yhZghImg.split(',')
								list.forEach(function(item2){
									urlList.push(config.base_url+item2)
								})
								item.yhZghImg=urlList
							})
						}
					}
					
					
					
				  }
				  let newOjb = obj.record;
				  newOjb.detailsList = obj.yhlist;
				  //判断悬浮按钮
				  if(newOjb.zgType == 0){
					  this.$set(this,'buttonArray',[])
					  this.buttonArrayType = 4;
				  }else if(newOjb.zgType == 1 && (newOjb.zgStatus == 1 || newOjb.zgStatus == 3 || newOjb.zgStatus == 4)){
					  this.$set(this,'buttonArray',["整改通知书","整改报告"])
					  this.buttonArrayType = 1;
				  }else if(newOjb.zgType == 1 && (newOjb.zgStatus != 1 || newOjb.zgStatus != 3 || newOjb.zgStatus != 4)){
					  this.$set(this,'buttonArray',["整改通知书"])
					  this.buttonArrayType = 2;
				  }
				  this.$set(this,'newData',newOjb);
				}
			},
		
			
			//查看报告按钮
			async buttonChange(e){
				let namestatus;
				let sealstatus;
				//判断有没有电子签名
				const {data} = await checkSign();
				if(data.code==200){
					namestatus=data.data
					if(data.data==false){//true有电子签名false没有电子签名
						
						uni.showModal({
						  title: '',
						  cancelColor:'#999999',
						  confirmColor:'#FF6E6E',
						  cancelText: "取消", // 取消按钮的文字  
						  confirmText: "去上传", // 确认按钮文字  
						  content: '您未上传电子签名，无法生成整改通知书/整改报告!',
						  success (res) {
							if (res.confirm) {
							  console.log('用户点击确定')
							  uni.navigateTo({
								  url: '/pages_manage/workbench/signature/signature'
							  });
							
							} else if (res.cancel) {
							  console.log('用户点击取消')
							  
							}
						  }
						})
					}else{
						
					}
				}
				//如果有电子签名判断有没有电子签章
				if(namestatus){
					const {data} = await queryDeptSignByUserId();
					if(data.code==200){
						console.log(data.data.data.isUpload)
						sealstatus=data.data.data.isUpload
						if(data.data.data.isUpload==false){
							uni.showToast({
								title: '学院未上传电子签章，无法生成整改通知书/整改报告',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					};
				}
				//如果有电子签名和电气签章开始下载
				if(namestatus==true && sealstatus==true){
					if(this.buttonArrayType == 1){
						if(e.target.value == 0){
							this.genNotice();
						}else if(e.target.value == 1){
							this.genReport();
						}
					}else if(this.buttonArrayType == 2){
						this.genNotice();
					}
				}
				
			},
			genNotice(){
				uni.showLoading({
					title: '下载中'
				});
				wx.downloadFile({
					url: config.base_url+'/laboratory/checkOption/genNotice/' + this.newData.id,
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: function (res) {
						const fileManager = wx.getFileSystemManager()
						const filePath = wx.env.USER_DATA_PATH + '/整改通知书.docx'
						fileManager.saveFile({
							tempFilePath: res.tempFilePath,
							filePath,
							success: () => {
								uni.hideLoading();
								wx.openDocument({
								filePath: filePath,
								showMenu: true,
								fileType: 'docx'
								})
							},
							fail: function (res){
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon:"none",
									mask:true,
									duration: 2000
								});
							}
						})
					},
					fail: function (res){
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
				})
			},
			genReport(){
				uni.showLoading({
					title: '下载中'
				});
				wx.downloadFile({
					url: config.base_url+'/laboratory/checkOption/genReport/' + this.newData.id,
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: function (res) {
						const fileManager = wx.getFileSystemManager()
						const filePath = wx.env.USER_DATA_PATH + '/整改报告.docx'
						fileManager.saveFile({
							tempFilePath: res.tempFilePath,
							filePath,
							success: () => {
								uni.hideLoading();
								wx.openDocument({
									filePath: filePath,
									showMenu: true,
									fileType: 'docx'
								})
							},
							fail: function (res){
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon:"none",
									mask:true,
									duration: 2000
								});
							}
						})
					},
					fail: function (res){
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
				})
			},
			//详情开关
			infoClickButton(type){
				this.showType = !this.showType;
			},
			//查看图片
			lockImg(list){
				if(!list[0]){
					return
				}
				/* let urlList=[];
				list.forEach(function(item){
					urlList.push(config.base_url+item)
				}) */
				wx.previewImage({
					urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#recordDetails{
		height: 100%;
		width: 100%;
		display flex
		.info-max-page{
			flex:1;
			.position-button{
				position fixed
				right:0;
				top:214rpx;
				width:160rpx;
				height:60rpx;
				background #0183FA
				color:#fff;
				text-align center
				line-height:60rpx;
				font-size:26rpx;
				z-index:10;
				border-radius:50rpx 0 0 50rpx;
			}
			.top-info-box{
				background #fff
				margin:20rpx;
				padding:20rpx 20rpx 0;
				border-radius:20rpx;
				.top-min-info-box{
					line-height:66rpx;
					display:flex;
					font-size:28rpx;
					view:nth-child(1){
						width:220rpx;
						color:#999;
					}
					view:nth-child(2){
						flex:1;
						text-align:right;
					}
				}
				.top-info-button{
					border-top:1rpx solid #dedede;
					display:flex;
					line-height:98rpx;
					margin-top:20rpx;
					view{
						font-size:28rpx;
						margin-left:258rpx;
						color:#0183FA;
					}
					img{
						width:24rpx;
						height:12rpx;
						margin:45rpx 0 0 15rpx;
					}
				}
			
			}
			.bottom-info-box{
				.bottom-info-title-box{
					display flex;
					height:80rpx;
					margin:20rpx;
					img{
						width:32rpx;
						height:32rpx;
						margin:24rpx 15rpx 0 0;
					}
					view{
						line-height:80rpx;
						color:#333;
						font-size:30rpx;
					}
				}
				.bottom-info-text-box{
					display flex
					margin:20rpx;
					padding:36rpx 35rpx 36rpx 28rpx;
					background #fff
					border-radius:20rpx;
					view{
						font-size:28rpx;
					}
					view:nth-child(1){
						color:#999;
						width:140rpx;
					}
					view:nth-child(2){
						color:#666;
						flex:1;
						text-align left
					}
				}
				.rectified-max-box{
					.rectified-for-box{
						background #fff
						margin:20rpx;
						border-radius:20rpx;
						position relative
						overflow hidden
						.rectified-for-position-index{
							position absolute
							left:0;
							top:0;
							background #B4DBFF;
							color:#0183FA;
							width:50rpx;
							height:50rpx;
							text-align center;
							line-height:50rpx;
							font-size:34rpx;
						}
						.rectified-for-position-img{
							position absolute
							right:43rpx;
							top:105rpx;
							width:250rpx;
							height:220rpx;
						}
						.rectified-for-title{
							line-height:30rpx;
							font-size:30rpx;
							color:#333;
							margin:78rpx 30rpx 36rpx;
						}
						.rectified-for-name{
							margin:0 30rpx;
							line-height:40rpx;
							font-size:28rpx;
							padding-bottom:39rpx;
							color:#666;
							border-bottom:1rpx solid #E0E0E0;
						}
						.rectified-for-text-max-box{
							margin:38rpx 30rpx 0;
							.rectified-for-text-box{
								display flex
								margin-bottom :20rpx;
								view{
									font-size:28rpx;
								}
								view:nth-child(1){
									width:140rpx;
									color:#999;
									line-height 40rpx
								}
								view:nth-child(2){
									flex:1;
									color:#666;
									line-height 40rpx
								}
							}
						}
						.rectified-for-img-max-box{
							margin:35rpx 26rpx 40rpx;
							.rectified-for-img-box{
								margin-bottom :20rpx;
								display flex
								background #f0f0f0
								border-radius:10rpx;
								padding:10rpx 35rpx 10rpx 23rpx;
								img{
									width:80rpx;
									height:80rpx;
									margin-right:10rpx;
								}
								.rectified-for-img-min-text{
									flex:1;
									//text-align right;
									line-height:80rpx;
									color:#0183FA;
									font-size:28rpx;
								}
							}
							/* 整改前照片 */
							.rectify_front{
								.rectify_front_t{
									width:150rpx;
									color:#999;
									line-height 40rpx
									font-size :28rpx;
									margin-bottom :24rpx;
								}
								.rectify_front_b{
									display :flex;
									justify-content :flex-start;
									flex-wrap: wrap;
									align-items :center;
									border-bottom: 1px solid #E0E0E0;
									>img{
										width: 200rpx;
										height: 200rpx;
										margin-right :14rpx;
										margin-bottom 40rpx;
										border-radius :10rpx;
									}
								}
							}
							.rectify_info{
								margin: 0;
								padding: 0;
								margin-top 40rpx;
								margin-bottom :10rpx;
							}
							/* 整改后照片 */
							.rectify_later{
								.rectify_later_t{
									width:150rpx;
									color:#999;
									line-height 40rpx
									font-size :28rpx;
									margin-bottom :24rpx;
								}
								.rectify_later_b{
									display :flex;
									justify-content :flex-start;
									flex-wrap: wrap;
									align-items :center;
									>img{
										width: 200rpx;
										height: 200rpx;
										margin-right :14rpx;
										margin-bottom 40rpx;
										border-radius :10rpx;
									}
								}
							}
													
						}
					}
				}
			}
			.info-bottom-button-box{
				display flex
				width:650rpx;
				height:100rpx;
				margin:50rpx auto;
				view{
					text-align center
					line-height:100rpx;
					font-size:30rpx;
					color:#fff;
				}
				view:nth-child(1){
					width: 325rpx;
					height: 100rpx;
					background: linear-gradient(-45deg, #FA9901, #F28E26);
					border-radius: 50rpx 0 0 50rpx;
				}
				view:nth-child(2){
					width: 325rpx;
					height: 100rpx;
					background: linear-gradient(-35deg, #309CFF, #0183FA);
					border-radius: 0 50rpx 50rpx 0;
				}
			}
		}
		.input-max-box{
			flex:1;
			.input-box{
				margin:20rpx;
				background #fff
				border-radius:20rpx;
				display flex
				overflow hidden
				textarea{
					width:610rpx;
					height:212rpx;
					margin:36rpx auto 47rpx;
					font-size:28rpx;
					padding:33rpx 24rpx;
					border-radius:10rpx;
					border: 2rpx solid #E0E0E0;
				}
			}
			.input-button-box{
				display flex
				width:700rpx;
				margin:50rpx auto;
				.out-button{
					flex:1;
					text-align center
					line-height:100rpx;
					font-size:28rpx;
					color:#fff;
					background #999;
					border-radius: 50rpx 0 0 50rpx;
				}
				.input-button{
					flex:1;
					text-align center
					line-height:100rpx;
					font-size:28rpx;
					color:#fff;
					background #0183FA;
					border-radius: 0 50rpx 50rpx 0;
				}
			}
		}
	}
</style>