zhgdyunapp/pages/projectEnd/qualityManage/reply.vue

<template>
	<view>
		<view>
			<headers :showBack="true">
				<view class="headerName"></view>
				{{title}}回复
			</headers>
		</view>

		<view class="content">
			<form @submit="formSubmit">
				<view class="flex type">
					<view class="name"><text class="star">*</text>{{title}}时间：</view>
					<dateTimePiccker :placeholder="startTime" :start="startTime" fields="minute" disabled @change="bindPickerChange($event,'startTime')" class="dateTimePiccker">
					<view class="uni-input uni-select cl" v-if="rectifyTime===''">
						请选择 <image class="icon-right" src="/static/icon-right.png"></image>
					</view>
					<view class="uni-input uni-select" v-else>{{rectifyTime}}
						<image class="icon-right" src="/static/icon-right.png"></image>
					</view>
					</dateTimePiccker> 
					<!-- <u-picker mode="time" v-model="show" :params="params"></u-picker>
					<picker @change="bindPickerChange" mode="date" :value="rectifyTime" class="picker">
						<view class="uni-input uni-select cl" v-if="rectifyTime===''">
							请选择 <image class="icon-right" src="/static/icon-right.png"></image>
						</view>
						<view class="uni-input uni-select" v-else>{{rectifyTime}}
							<image class="icon-right" src="/static/icon-right.png"></image>
						</view>
					</picker> -->
				</view>
					
				<view class="type flex" v-if="title != '整改'">
					<view class=" name">{{title}}结果：</view>
				<view class="flex">
					<text :class="status==1?'status':''">{{type == 1 ? '未整改':'不合格'}}</text>
					<switch :checked="status==2" @change="switchChange"
						style="margin: 0 10px;transform: scale(0.74,0.7)" />
					<text :class="status==2?'status':''">{{type == 1 ? '已整改':'合格'}}</text>
				</view>
		</view>
		<view class="uni-form-item">
			<view class="uni-form-label">
				<text class="star">*</text>补充说明
			</view>
			<view class="uni-form-input">
				<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent"
					@input='changeTextarea' :value="content" placeholder="请输入"></textarea>
			</view>
		</view>
		<view class="uni-form-item">
			<view class="uni-form-label">
				<text class="star" v-if="type == 1">*</text>附件
			</view>
			<view class="uni-form-input imgBox_wrap">
				<view class="imgBox" v-show="fileList.length>0" v-for="(item,index) in fileList" :key="index">
					<image :src="url_config+'image/'+item.url" class="img"></image>
					<view @click="deleteImg(item)" class="deleteImg">×</view>
				</view>
				<view class="addImgBox" @click="selectImg" v-if="fileList.length<5">
					<image src="/static/icon-add.png" class="icon-add"></image>
				</view>
			</view>
		</view>
		<view class="flex btn_wrap">
			<button class="deleteBtn" @click="deleteFn">取消</button>
			<button form-type="submit" type="primary" class="submitBtn">提交</button>
		</view>
		<!-- <view v-if="type==2 || type==3"  class="flex btn_wrap">
					<button class="deleteBtn" @click="audit(3)">不通过</button>
					<button form-type="submit" type="primary" class="submitBtn">通过</button>
				</view> -->
		</form>

	</view>
	<canversCom v-if="openImg" @imgUrl="imgUrl" :imgList="imgList"></canversCom>

	</view>
</template>

<script>
	import canversCom from "@/pages/videoManage/component/canversCom.vue"
import dateTimePiccker from '@/components/dateTimePicker/index.vue'
	export default {
		components: {
			canversCom,
			dateTimePiccker
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				show: false,
				imgList: {},
				openImg: false,
				base64Image: '',
				title: '',
				type: 1, // 1 整改回复  2 审核
				stateId: '', //获取到整改单最后一个整改内容id
				id: '',
				content: '', //回复内容 
				fileList: [],
				rectifyTime: '',
				status: 2,
				createId: '',
				createUser: '',
				qualityId: '',
				userInfo:'',
				startTime: ""
			}
		},
		onLoad(option) {
			this.userInfo= JSON.parse(uni.getStorageSync('userInfo'))
			this.startTime = this.$formatDates(new Date().getTime(), 'yyyy-MM-dd HH:mm:ss');
			this.rectifyTime = this.$formatDates(new Date().getTime(), 'yyyy-MM-dd HH:mm:ss');
			this.id = option.id;
			this.type = Number(option.type);
			this.stateId = Number(option.stateId);
			this.createId = option.createId
			if (option.type == 1) {
				this.title = '整改'
			} else if (option.type == 2) {
				this.title = '复查'
			} else if (option.type == 3) {
				this.title = '核验'
			}
		},

		methods: {
			imgUrl(val) {
				this.openImg = false
				this.imgUpload(val)
				this.openImg = true
			},
			//图片上传请求的接口
			imgUpload(baseImg) {
				let that = this
				let arr = []
				that.base64Image = baseImg
				let parmars = {
					base64Image: that.base64Image
				}

				this.sendRequest({
					url: 'xmgl/upload/uploadBase64',
					method: 'post',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					data: parmars,
					success: (res) => {
						that.fileList[that.fileList.length - 1].url = res.data.imageUrl
					}
				})
			},
			//回复内容
			changeTextarea(e) {
				this.content = e.detail.value;
			},
			bindPickerChange(e,t) {
				console.log('时间选择e',e);
				console.log('时间选择t',t);
				if(t=='startTime'){
					this.rectifyTime = e.f3;
				}
			},
			switchChange(e) {
				console.log(e.detail.value)
				if (e.detail.value) {
					this.status = 2;
				} else {
					this.status = 1;
				}
			},
			// 获取当前时间
			getNewDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var Hours = date.getHours();
				var Minutes = date.getMinutes();
				var Seconds = date.getSeconds();

				if (Hours >= 0 && Hours <= 9) {
					Hours = "0" + Hours;
				}
				if (Minutes >= 0 && Minutes <= 9) {
					Minutes = "0" + Minutes;
				}
				if (Seconds >= 0 && Seconds <= 9) {
					Seconds = "0" + Seconds;
				}
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
					" " + Hours + seperator2 + Minutes +
					seperator2 + Seconds;
				return currentdate;
			},

			//上传附件
			selectImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.fileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.fileList.push(data)
								uni.getImageInfo({
									src: tempFilePaths[0],
									success: (resInfo) => {
										console.log('传过去啦 resInfo', resInfo)
										that.imgList = {
											imgUrl: tempFilePaths[0],
											imgWidth: resInfo.width,
											imgHeight: resInfo.height,
											// team:'班组人员',
											// name: '张三'
										}
										that.openImg = true
									}
								})
								that.openImg = false
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							let fileArr = JSON.parse(JSON.stringify(that.fileList));
							fileArr.forEach((item, index) => {
								if (item.url == val.url) {
									fileArr.splice(index, 1)
								}
							})
							that.fileList = fileArr;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//提交表单
			formSubmit(e) {
				if (this.content == '') {
					uni.showToast({
						title: "请输入回复内容",
						icon: "none"
					})
					return
				}
				if (this.fileList.length == 0 && this.type == 1) {
					uni.showToast({
						title: "请上传附件",
						icon: "none"
					})
					return
				}

				if (this.rectifyTime == '') {
					uni.showToast({
						title: "请选择时间",
						icon: "none"
					})
					return
				}

				let time = this.getNewDate()

				let data = {
					additionalRemarks: this.content,
					createTime: time,
					status: this.status,
					qualityId: this.id,
					rectifyTime: this.rectifyTime,
					type: this.type,
					fileUrl: JSON.stringify(this.fileList),
					createUser: this.userInfo.userId
				}
				// if (this.stateId){
				// 	data.id = this.stateId
				// }
				console.log('data传的参数', data)
				this.sendRequest({
					url: 'xmgl/qualityRectifyRecord/add',
					method: 'post',
					data: data,
					success: res => {
						console.log('上传成功res---', res)
						let dynamicTitle = `新增${this.title}回复成功`;
						if (res.code == 200) {
							let dynamicTitleWithActualValue = dynamicTitle.replace('{this.title}', this.title);
							uni.showToast({
								title: dynamicTitleWithActualValue,
								duration: 2000,
								icon: 'none',
								mask: true,
							})
							setTimeout(() => {
								
								uni.navigateBack({
									url: './list'
								})
							}, 1200)

						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}

					}
				})
			},

			// //审核
			// audit(status){
			// 	if(this.content==''){
			// 		uni.showToast({
			// 			title:"请输入回复内容",
			// 			icon:"none"
			// 		})
			// 		return
			// 	}
			// 	if(this.fileList.length==0){
			// 		uni.showToast({
			// 			title:"请上传附件",
			// 			icon:"none"
			// 		})
			// 		return
			// 	}
			// 	let data = {
			// 		auditReplyContent: this.content,
			// 		auditReplyImg:JSON.stringify(this.fileList),
			// 		status:status,
			// 		id:this.stateId,
			// 		inspectId:this.id,
			// 	};

			// 	this.sendRequest({
			// 		url:'xmgl/inspectionRectifyRecord/auditInspectionRectifyRecord',
			// 		data:data,
			// 		method:'post',
			// 		success:res=>{
			// 			if(res.code==200){
			// 				uni.showToast({
			// 					title:"审核成功"
			// 				})
			// 				uni.navigateBack()
			// 			}
			// 		}
			// 	})

			// },





			//取消
			deleteFn() {
				uni.showModal({
					title: '提示',
					content: '确定取消编辑整改回复吗？',
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack({})
						} else if (res.cancel) {}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.headerBox {
		text-align: center;
		line-height: 40px;
	}

	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 60px;
		height: 60px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;

		.icon-add {
			width: 18px;
			height: 18px;
		}
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.type {
		font-size: 32rpx;
		line-height: 40px;
		margin-bottom: 8px;
		justify-content: space-between;
		white-space: nowrap;
		/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
	}

	.cl {
		font-size: 30rpx;
	}

	.picker {
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.icon-right {
		margin-left: 16rpx;
		width: 16rpx;
		height: 32rpx;
	}

	.type .name {
		margin-right: 6px;
		width: 176rpx;
		text-align: right;
	}

	.content {
		padding: 10px 30rpx 0;
		box-sizing: border-box;

	}

	.uni-form-label {
		margin: 10px 0;
	}

	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.imgBox {
		width: 60px;
		height: 60px;
		display: inline-flex;
		position: relative;
		margin-right: 15px;
		margin-bottom: 8px;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}

		.deleteImg {
			position: absolute;
			right: 3px;
			top: -5px;
			color: #fff;
		}
	}

	.textarea {
		width: 100%;
		border-radius: 10px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box !important;
		height: 90px;
	}

	.submitBtn {
		font-size: 32rpx;
		width: 33%;
		line-height: 40px;
		height: 42px;
		margin: 0;
	}

	.deleteBtn {
		font-size: 32rpx;
		width: 33%;
		line-height: 36px;
		height: 38px;
		margin: 0;
	}

	.btn_wrap {
		margin-top: 100px;
	}
</style>