RT_SY/src/pages/symanger/resultInfo/cqReports.vue

<template>
	<div class="cqReportsPage">
		<div class="check-btns">
			<el-button type="primary" size="mini" @click="addReport">新增12</el-button>
		</div>
		<el-row :gutter="30" id="viewerDom" v-viewer>
			<el-col
				:xs="12"
				:sm="8"
				:md="6"
				:lg="4"
				:xl="4"
				v-for="item in reportList"
				:key="item.id"
			>
				<div class="photoItem">
					<div class="photoInfo">
						<i @click="delectImg(item.id)" class="iconfont icon-shanchu"></i>
					</div>
					<div class="photoImg">
						<img :src="$host+item.qualityphoto" />
					</div>
					<div class="photoMsg">{{ item.qualitydesc }}</div>
				</div>
			</el-col>
		</el-row>
		<!-- 新增食品许可证发证检验 -->
		<el-dialog
			title="新增"
			:visible.sync="addPrportVisible"
			@close="AddDialogClosed"
			width="33%"
		>
			<div>
				<el-form
					ref="addUserFormRef"
					:model="addSyForm"
					label-width="100px"
					:rules="addUserFormRules"
				>
					<el-form-item label="检验标题 : " prop="reportTitle">
						<el-input v-model="addSyForm.reportTitle"></el-input>
					</el-form-item>
					<el-form-item label="上传图片 : " prop="img" ref="uploadimg">
						<el-upload
							class="avatar-uploader"
							action
							:auto-upload="false"
							:show-file-list="false"
							:on-change="changeUpload"
						>
							<img
								v-if="addSyForm.img"
								:src="$host + addSyForm.img"
								class="avatar"
							/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item>
						<el-button @click="cancel">取 消</el-button>
						<el-button type="primary" @click="addUserSubm">确认</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<!-- vueCropper 剪裁图片实现-->
		<el-dialog title="图片剪裁" :visible.sync="cropperVisible" append-to-body>
			<div class="cropper-content">
				<div style="width: 100%; height: 500px">
					<vueCropper
						ref="cropper"
						:img="option.img"
						autoCrop
						centerBox
						fixed
						:fixedNumber="option.fixedNumber"
						:outputSize="option.size"
						:outputType="option.outputType"
					></vueCropper>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cropperVisible = false">取 消</el-button>
				<el-button type="primary" @click="finish">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	props: {
		backcode: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			addPrportVisible: false,
			cropperVisible: false,
			totalNum: 0,
			reportList: [],
			// 裁剪组件的基础配置option
			option: {
				img: '', // 裁剪图片的地址
				info: true, // 裁剪框的大小信息
				outputSize: 0.8, // 裁剪生成图片的质量
				outputType: 'jpeg', // 裁剪生成图片的格式
				// canScale: false, // 图片是否允许滚轮缩放
				// autoCrop: true, // 是否默认生成截图框
				// autoCropWidth: 300, // 默认生成截图框宽度
				// autoCropHeight: 200, // 默认生成截图框高度
				// fixedBox: true, // 固定截图框大小 不允许改变
				fixed: true, // 是否开启截图框宽高固定比例
				fixedNumber: [70, 99], // 截图框的宽高比例
				full: true, // 是否输出原图比例的截图
				canMoveBox: false, // 截图框能否拖动
				original: false, // 上传图片按照原始比例渲染
				centerBox: false, // 截图框是否被限制在图片里面
				infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
			},
			addSyForm: {
				img: '',
				reportTitle: ''
			},
			addUserFormRules: {
				img: [{ required: true, message: '请上传产品图片', trigger: 'change' }],
				reportTitle: [
					{ required: true, message: '请输入产地', trigger: 'blur' }
				]
			}
		}
	},
	mounted() {
		this.getInfo()
	},
	methods: {
		getInfo() {
			this.$axios({
				method: 'POST',
				url: '/api/quality_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.status == 200) {
					this.reportList = res.data._list
				}
			})
		},
		delectImg(id) {
			this.$confirm('确认删除么?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/del_quality',
						data: this.qs.stringify({
							id
						})
					}).then((res) => {
						if (res.data == 1) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getInfo()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		// 点击裁剪，这一步是可以拿到处理后的地址
		finish() {
			// 获取截图的base64 数据
			this.$refs.cropper.getCropBlob((data) => {
				var form = new FormData()
				let file = this.blobToFile(data, 'filename.jpg')
				form.append('img_file', file)
				this.cropperVisible = false
				this.$axios({
					method: 'POST',
					url: '/api/base_photo',
					data: form
				}).then((res) => {
					this.addSyForm.img = res.data.src
				})
			})
		},
		//bloc格式
		blobToFile(Blob, fileName) {
			Blob.lastModifiedDate = new Date()
			Blob.name = fileName
			return Blob
		},
		changeUpload(file, fileList) {
			const isLt5M = file.size / 1024 / 1024 < 5
			if (!isLt5M) {
				this.$message.error('上传文件大小不能超过 5MB!')
				return false
			}
			// 上传成功后将图片地址赋值给裁剪框显示图片
			this.$nextTick(() => {
				console.log(file);
				this.option.img = URL.createObjectURL(file.raw)
				this.flag = 1
				this.cropperVisible = true
			})
		},
		//在线状态选择
		addReport() {
			this.addPrportVisible = true
		},
		//改变page
		changePage(val) {
			this.page = val
		},
		cancel() {
			this.$router.go(-1)
		},
		addUserSubm() {
			this.$refs.addUserFormRef.validate((valid) => {
				if (valid) {
					this.$axios({
						method: 'POST',
						url: '/api/quality_info',
						data: this.qs.stringify({
							backcode: this.backcode,
							qualitydesc: this.addSyForm.reportTitle,
							qualityphoto: this.addSyForm.img
						})
					}).then((res) => {
						if (res.status == 200) {
							this.addPrportVisible = false
							this.$message.success('提交成功!')
							this.getInfo()
						}
					})
				}
			})
		},
		AddDialogClosed(){
this.addSyForm={}
		}
	}
}
</script>
<style lang="less" scoped>
.cqReportsPage {
	position: relative;
	.check-btns {
		position: absolute;
		right: 10px;
		top: -40px;
	}
}

.photoItem {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	.photoInfo {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		display: flex;
		justify-content: space-between;
		span {
			color: #fff;
		}
		i {
			cursor: pointer;
			color: red;
		}
	}
	.photoImg {
		height: 250px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.photoMsg {
		background-color: #fff;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		text-align: center;
	}
}
.dialogImagePreview {
	/deep/.el-dialog__header {
		background: #fff;
		border-bottom: none;
	}
}
.handAddBtn {
	position: absolute;
	right: 6%;
	top: 21%;
	i {
		font-size: 28px;
		cursor: pointer;
	}
}
.handAddForm {
	.el-form {
		width: 83%;
	}
	.el-select {
		width: 100%;
	}
	.handAddFormBtn {
		text-align: right;
	}
}
.discernResult {
	display: flex;
	justify-content: space-between;
	line-height: 30px;
	padding: 3px 37px;
	.name {
		font-size: 14px;
		i {
			font-size: 20px;
			font-weight: bold;
		}
		i,
		span {
			color: #14a478;
		}
	}
	.number {
		span {
			color: #14a478;
		}
	}
}
</style>