FE-V2-XCX/pages_manage/workbench/problemRectification/rectifyInfo.vue

<!-- 整改信息 -->
<template>
	<view id="rectifyInfo">
		<view class="list-page-box" v-if="pageType == 1">
			<view class="for-max-box" v-for="(item,index) in newData.detailsList" :key="index">
				<view class="for-position-index">{{index+1}}</view>
				<view class="for-name-box">
					<view>{{item.jcxName}}</view>
					<view v-if="item.isZg==0||item.isZg==1">{{item.isZg == 0?'完成整改':(item.isZg == 1?'暂无法整改':'未确认')}}</view>
				</view>
				<view class="for-title-box" v-if="item.isLingshi == 1">临时检查项</view>
				<view class="for-title-box" v-if="item.isLingshi == 0">{{item.jcxSstkMs}}</view>
				<view class="for-button" @click="itemClick(item,index)">{{item.isZg == 0 || item.isZg == 1 ?'修改内容':'完成整改'}}</view>
			</view>
			<view class="list-button-box" @click="allUpDataClick">提交审核</view>
		</view>
		<view class="info-page-box" v-if="pageType == 2">
			<view class="info-data-box">
				<view class="info-name">{{form.jcxName}}</view>
				<view class="info-title" v-if="form.isLingshi == 1">临时检查项</view>
				<view class="info-title" v-if="form.isLingshi == 0">{{form.jcxSstkMs}}</view>
				<view class="info-text-box">
					<view>隐患描述：</view>
					<view>{{form.yhMs}}</view>
				</view>
				<view class="info-img-box" v-if="form.yhImg[0]">
					<view class="info-text">隐患图片：</view>
					<view class="img-max-box">
						<img  v-for="(url,index) in form.yhImg" :key="index" :src="url" @click="lockImg(url)"
						:class="form.yhImg.length == 1?'imgOne':(form.yhImg.length > 1 && form.yhImg.length < 5 ?'imgTwo':(form.yhImg.length > 4?'imgTree':''))">
					</view>
				</view>
			</view>
			<view class="text-input-max-box" v-if="formType == 0">
				<view class="input-box" v-if="newData.zgType == 0">
					<view class="text-p">整改描述</view>
					<view class="bj-p">*</view>
					<textarea class="textarea-p" maxlength="50" v-model="form.zgMs" placeholder="请输入整改描述"></textarea>
				</view>
				<view class="input-box" v-if="newData.zgType == 1">
					<view class="text-p">原因分析</view>
					<view class="bj-p">*</view>
					<textarea class="textarea-p" maxlength="50" v-model="form.zgYyfx" placeholder="请输入原因分析"></textarea>
				</view>
				<view class="input-box" v-if="newData.zgType == 1">
					<view class="text-p">整改措施</view>
					<view class="bj-p">*</view>
					<textarea class="textarea-p" maxlength="50" v-model="form.zgCs" placeholder="请输入整改措施"></textarea>
				</view>
				<view class="img-up-box">
					<view class="text-p">整改照片</view>
					<view class="bj-p"></view>
					<view class="img-box">
						<view class="min-for-img-box" v-for="(url,index) in form.yhZghImg" :key="index">
							<img class="min-for-img"  @click.stop="lockImg(url)"
							:src="url">
							<img class="del-img" @click.stop="delZgImg(index)" src="@/images/icon_jlfgz_gb.png">
						</view>
						<view class="up-img" @click="selectImage">
							<view>上传</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text-info-max-box" v-if="formType == 1">
				<view class="text-info-name">提交不能立整立改的隐患请在下方上传或填写整改计划及措施等相关材料。</view>
				<textarea class="text-info-textarea-p" maxlength="50" v-model="form.zmClMs" placeholder="请输入证明材料描述"></textarea>
				<view class="text-info-for-up-img-box" v-for="(url,index) in form.zmClImg" :key="index">
					<img class="text-info-for-up-img" @click.stop="lockImg(url)"
					:src="url">
					<img class="del-img" @click.stop="delZmImg(index)" src="@/images/icon_jlfgz_gb.png">
				</view>
				<view class="text-info-up-img-box" @click="proveImgUp">
					<view>+</view>
					<view>添加</view>
				</view>
			</view>
            <view class="check-button-box">
                <view @click="outItmeClick">取消</view>
                <view @click="itemOkClick">确认</view>
            </view>
		</view>
	</view>
</template>

<script>
	import { checkRecordUpdate } from '@/api/index.js'
	import { config } from '@/api/request/config.js'
	export default {
		name: "rectifyInfo",
		data() {
			return {
				pageType:1,
				newData:[],
				form:{},
				formType:"",
				formIndex:"",
			}
		},
		onLoad(option) {
			let obj = JSON.parse(decodeURIComponent(option.newData));
		    this.newData = JSON.parse(JSON.stringify(obj));
		},
		onShow() {
		
		},
		methods: {
			//提交数据
			async allUpDataClick(){
				let self = this;
				for(let i=0;i<self.newData.detailsList.length;i++){
					if(self.newData.detailsList[i].isZg != 0 && self.newData.detailsList[i].isZg != 1){
						uni.showToast({
							title: '请完成所有整改后再提交',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
				}
				let obj = {
					id: self.newData.id,
					fzrId:this.newData.fzrId,
					detailsList: [],
				}
				let age = 0;
				for(let i=0;i<self.newData.detailsList.length;i++){
					let minObk = {}
					if(self.newData.detailsList[i].isZg == 0){
						if(self.newData.zgType == 0){
							minObk.zgMs = self.newData.detailsList[i].zgMs;
						}else if(self.newData.zgType == 1){
							minObk.zgYyfx = self.newData.detailsList[i].zgYyfx;
							minObk.zgCs = self.newData.detailsList[i].zgCs;
						}
						minObk.yhZghImg = self.newData.detailsList[i].yhZghImg + '';
					}else if(self.newData.detailsList[i].isZg == 1){
						age++;
						minObk.zmClMs = self.newData.detailsList[i].zmClMs;
						minObk.zmClImg = self.newData.detailsList[i].zmClImg + '';
					}
					minObk.isZg = self.newData.detailsList[i].isZg
					minObk.id = self.newData.detailsList[i].id;
					obj.detailsList.push(minObk);
				}
				if(age == 0){
					obj.zgStatus = 1;
				}else{
					obj.zgStatus = 3;
				}
			    const {data} = await checkRecordUpdate(obj);
				if(data.code == 200){
					uni.showToast({
						title: '提交成功',
						icon:"none",
						mask:true,
						duration: 2000
					});
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
				}
			},
			//确定整改数据
			itemOkClick(){
				if(this.formType == 0){
					//整改
					if(this.newData.zgType == 0){
						// 一般整改
						if(!this.form.zgMs){
							uni.showToast({
								title: '请输入整改描述',
								icon:"none",
								mask:true,
								duration: 2000
							});
							return
						}
					}else if(this.newData.zgType == 1){
						// 重大整改
						if(!this.form.zgYyfx){
							uni.showToast({
								title: '请输入原因分析',
								icon:"none",
								mask:true,
								duration: 2000
							});
							return
						}
						if(!this.form.zgCs){
							uni.showToast({
								title: '请输入整改措施',
								icon:"none",
								mask:true,
								duration: 2000
							});
							return
						}
					}
					if(!this.form.yhZghImg[0]){
						uni.showToast({
							title: '请上传整改照片',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					this.form.isZg = 0;
				}else if(this.formType == 1){
					//暂无法整改
					if(!this.form.zmClMs){
						uni.showToast({
							title: '请输入证明材料描述',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					if(!this.form.zmClImg[0]){
						uni.showToast({
							title: '请上传证明材料',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					this.form.isZg = 1;
				}
				this.newData.detailsList[this.formIndex] = JSON.parse(JSON.stringify(this.form));
				this.pageType = 1;
				this.$forceUpdate();
			},
			//取消当前整改操作
			outItmeClick(){
				this.pageType = 1;
			},
			//选择整改隐患与类型
			itemClick(item,index){
				let self = this;
				uni.showActionSheet({
				    itemList: ['完成整改', '暂时无法整改'],
				    success: function (res) {
						self.form = JSON.parse(JSON.stringify(item));
						if(!self.form.yhImg || self.form.yhImg == 'undefined' || self.form.yhImg == null || self.form.yhImg == 'null'){
							self.form.yhImg = [];
						}
						if(!self.form.yhZghImg || self.form.yhZghImg == 'undefined' || self.form.yhZghImg == null || self.form.yhZghImg == 'null'){
							self.form.yhZghImg = [];
						}
						if(!self.form.zmClImg || self.form.zmClImg == 'undefined' || self.form.zmClImg == null || self.form.zmClImg == 'null'){
							self.form.zmClImg = [];
						}
						self.formIndex = index;
						if(res.tapIndex == 0){
							// 完成整改
							self.formType = 0;
						}else if(res.tapIndex == 1){
							// 暂时无法整改
							self.formType = 1;
						}
						self.pageType=2;
						self.$forceUpdate();
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			//删除证明图片
			delZmImg(index){
				console.log("index",index)
				this.form.zmClImg.splice(index,1);
			},
			//证明上传
			proveImgUp(){
				let self = this;
				if(this.form.zmClImg.length>8){
					uni.showToast({
						title: '最多上传9张图片',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths[0];
						self.zmUploadImg(tempFilePaths);
					}
				});
			},
			async zmUploadImg(tempFilePaths){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							self.form.zmClImg.push(res.data.url);
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//删除整改图片
			delZgImg(index){
				console.log("index",index)
				this.form.yhZghImg.splice(index,1);
			},
			// 整改上传
			selectImage() {
			    let self = this;
			    if(this.form.yhZghImg.length>8){
			        uni.showToast({
			            title: '最多上传9张图片',
			            icon:"none",
			            mask:true,
			            duration: 2000
			        });
			        return
			    }
			    wx.chooseImage({
			        count: 1,
			        sizeType: ["original", "compressed"],
			        sourceType: ["album", "camera"],
			        success: function(res) {
			            let tempFilePaths = res.tempFilePaths[0];
			            self.zgUploadImg(tempFilePaths);
			        }
			    });
			},
			async zgUploadImg(tempFilePaths){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							self.form.yhZghImg.push(res.data.url);
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//查看图片
			lockImg(url){
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		}
	}
</script>

<style lang="stylus" scoped>
    #rectifyInfo{
		height: 100%;
		width: 100%;
		display flex
		.list-page-box{
			flex:1;
			.for-max-box{
				background #fff
				margin:20rpx;
				border-radius:20rpx;
				position relative
				overflow hidden
				.for-position-index{
					position absolute
					top:0;
					left:0;
					background #B4DBFF;
					width:50rpx;
					height:50rpx;
					text-align center;
					line-height:50rpx;
					color:#0183FA;
					font-size:34rpx;
				}
				.for-name-box{
					display flex;
					margin:75rpx 26rpx 0;
					view:nth-child(1){
						font-size:30rpx;
						line-height:30rpx;
						flex:1;
					}
					view:nth-child(2){
						font-size:28rpx;
						color:#999;
						line-height:30rpx;
					}
				}
				.for-title-box{
					margin:40rpx 26rpx 0;
					font-size:28rpx;
					color:#666;
					line-height:40rpx;
					padding-bottom:40rpx;
					border-bottom:1rpx solid #e0e0e0;
				}
				.for-button{
					width:180rpx;
					height:60rpx;
					line-height:60rpx;
					color:#fff;
					margin:30rpx 30rpx 30rpx 500rpx;
					background:#0183FA ;
					border-radius:50rpx;
					text-align:center;
					font-size:28rpx;
				}
			}
			.list-button-box{
				width: 700rpx;
				height: 100rpx;
				color:#fff;
				background: #0183FA;
				border-radius: 20rpx;
				text-align center
				line-height:100rpx;
				margin:30rpx auto;
			}
		}
		.info-page-box{
			flex:1;
			.info-data-box{
				background #fff
				border-radius:20rpx;
				margin:20rpx;
				overflow hidden
				.info-name{
					color:#333;
					margin:36rpx 28rpx;
				}
				.info-title{
					margin:0 28rpx;
					color:#666;
					line-height:40rpx;
					font-size:28rpx;
					padding-bottom:40rpx;
					border-bottom:1rpx solid #e0e0e0;
				}
				.info-text-box{
					display:flex;
					margin:37rpx 28rpx;
					view:nth-child(1){
						width:140rpx;
						font-size:28rpx;
						color:#999;
					}
					view:nth-child(2){
						flex:1;
						font-size:28rpx;
						color:#666;
					}
				}
				.info-img-box{
					.info-text{
						font-size:28rpx;
						color:#999;
						margin:40rpx 28rpx 35rpx;
					}
					.img-max-box{
						margin-left:27rpx;
						img{
							display:inline-block;
							margin-bottom:20rpx;
						}
						.imgOne{
							width:400rpx;
							height:400rpx;
						}
						.imgTwo{
							width:320rpx;
							height:320rpx;
							margin:0 20rpx 16rpx 0;
						}
						.imgTree{
							width:210rpx;
							height:210rpx;
							margin:0 18rpx 12rpx 0;
						}
					}
				}
			}
			.text-input-max-box{
				background #fff
				border-radius:20rpx;
				margin:20rpx;
				overflow hidden
				padding-bottom:32rpx;
				.input-box{
					display flex
					margin:32rpx 25rpx 0;
					.text-p{
						font-size:30rpx;
						line-height:74rpx;
					}
					.bj-p{
						font-size:30rpx;
						line-height:74rpx;
						color:#FF0000;
						width:30rpx;
					}
					.textarea-p{
						width:470rpx;
						height:212rpx;
						padding:20rpx;
						font-size:28rpx;
						border:1rpx solid #dedede;
						border-radius:20rpx;
					}
				}
				.img-up-box{
					display flex
					margin:32rpx 25rpx 0;
					.text-p{
						font-size:30rpx;
						line-height:74rpx;
					}
					.bj-p{
						font-size:30rpx;
						line-height:74rpx;
						color:#FF0000;
						width:30rpx;
					}
					.img-box{
						flex:1;
						.up-img{
							display: inline-block;
							background url(@/images/icon_07.png) no-repeat
							background-size 100%
							width:160rpx;
							height:160rpx;
							overflow: hidden;
							margin:0 10rpx 10rpx 0;
							view{
								font-size:28rpx;
								text-align center;
								color:#999;
								line-height:30rpx;
								margin-top:100rpx;
							}
						}
						.min-for-img-box{
							position relative
							display: inline-block;
							width:160rpx;
							height:160rpx;
							margin:0 10rpx 10rpx 0;
							overflow hidden;
							.min-for-img{
								width:160rpx;
								height:160rpx;
							}
							.del-img{
								position absolute;
								top:10rpx;
								right:10rpx;
								width:40rpx;
								height:40rpx;
							}
						}
					}
				}
			}
			.text-info-max-box{
				background #fff
				border-radius:20rpx;
				margin:20rpx;
				overflow hidden
				padding:36rpx 40rpx;
				.text-info-name{
					font-size:30rpx;
					color:#333;
				}
				.text-info-textarea-p{
					width:602rpx;
					height:187rpx;
					border:1rpx solid #E0E0E0;
					padding:20rpx;
					margin:30rpx auto;
					border-radius:20rpx;
					font-size:28rpx;
				}
				.text-info-for-up-img-box{
					position relative
					width:640rpx;
					height:250rpx;
					margin:0 auto 30rpx;
					border-radius:20rpx;
					overflow:hidden;
					.text-info-for-up-img{
						width:640rpx;
						height:250rpx;
					}
					.del-img{
						width:40rpx;
						height:40rpx;
						position absolute
						top:20rpx;
						right:20rpx;
					}
				}
				.text-info-up-img-box{
					width:640rpx;
					height:250rpx;
					margin:0 auto 30rpx;
					border:4rpx dashed #E0E0E0;
					background #F8F8F8
					border-radius:20rpx;
					view{
						text-align center
					}
					view:nth-child(1){
						margin-top:90rpx;
						color: #E0E0E0;
						font-size:70rpx;
						line-height: 30rpx;
					}
					view:nth-child(2){
						margin-top:27rpx;
						font-size:28rpx;
						color:#999;
						line-height: 30rpx;
					}
				}
			}
			.check-button-box{
			    display flex
			    width:650rpx;
			    margin:40rpx auto 40rpx;
			    view{
			        text-align center
			        line-height:100rpx;
			        font-size:30rpx;
			        color:#fff;
			    }
			    view:nth-child(1){
			        width:325rpx;
			        line-height:100rpx;
			        background: linear-gradient(-45deg, #999, #999);
			        border-bottom-left-radius 50rpx
			        border-top-left-radius 50rpx
			    }
			    view:nth-child(2){
			        width:325rpx;
			        line-height:100rpx;
			        background: linear-gradient(-35deg, #309CFF, #0183FA);
			        border-bottom-right-radius 50rpx
			        border-top-right-radius 50rpx
			    }
			}
		}
	}
</style>