sfms3.0-uniapp/pages/inspect/coms/inspectEdit.vue

<template>
	<view class="">
		<uni-popup ref="editPopup" class="nopadpop camera_pop" :maskClick="false">
			<view class="uni-list popuni_list camera_list">
				<view class="list_cell uni-flex uni-row space-between">
					<view class="title">箱码</view>
					<text class="info">{{dataContent.packingNumber}}</text>
				</view>
				<view class="list_cell uni-flex uni-row space-between">
					<view class="title">收货数量</view>
					<view class="uni-flex uni-row u-col-center">
						<text class="info">{{dataContent.qty}}</text>
						<uom :uom="dataContent.uom"></uom>
					</view>
				</view>

				<view class="list_cell uni-flex uni-row space-between">
					<view class="title">不合格数量</view>
					<view class="uni-flex uni-row u-col-center" style="">
						<input class="qty_inspect_input" v-model="dataContent.failedQty" :focus="true" type="number" />
						<uom :uom="dataContent.uom"></uom>
					</view>

				</view>
				<view class="list_cell uni-flex uni-row space-between">
					<view class="title">报废数量</view>
					<view class="uni-flex uni-row u-col-center" style="">
						<input class="qty_inspect_input" v-model="dataContent.crackQty" :focus="true" type="number" />
						<uom :uom="dataContent.uom"></uom>
					</view>

				</view>

				<view class="list_cell uni-flex uni-row space-between">
					<view class="title">不合格原因</view>
					<view class="info" style="padding: 0;">
						<uni-data-picker :class="disabled===true?'disabled':''" :border="false" placeholder="请选择原因"
							popup-title="不合格原因" :localdata="failedReasonArray" v-model="dataContent.failedReason">
						</uni-data-picker>
					</view>
				</view>

				<view class="list_cell quality_cell">
					<view class="title">检验结果</view>
					<view class="check_textarea">
						<textarea placeholder="请输入内容" :inputBorder="true" v-model="dataContent.inspectResult"
							:disabled="disabled" maxlength="100">
						</textarea>
					</view>
				</view>

				<uploadCamera ref="uploadImage" style="margin: 10rpx;" :disabled="disabled" @delete="deleteImg"
					@select="select"></uploadCamera>
			</view>
			<view class="pop_btn uni-flex uni-row space-between" v-if="!disabled">
				<button class="cancel" @click="back">返回</button>
				<button class="save" @click="save">保存</button>
			</view>
		</uni-popup>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getInspectFailedReasonList,
	} from '@/common/directory.js';
	import {
		uploadFile,
		getFileList,
		deleteFileById
	} from '@/api/request2.js';

	import comMessage from '@/mycomponents/common/comMessage.vue'
	import uploadCamera from '@/pages/inspect/coms/uploadCamera.vue'
	import uom from '@/mycomponents/qty/uom.vue'
	export default {
		components: {
			uploadCamera,
			comMessage,
			uom
		},
		name: 'receipt_check',
		data() {
			return {
				id: '',
				failedReasonIndex: 0,
				failedReasonArray: [],
				dataContent: {},
				failedReasonArray: [],
				picInfoList: []
			}
		},
		props: {
			// dataContent: {
			// 	type: Object,
			// 	value: null
			// },

			disabled: {
				type: Boolean,
				value: true
			},
		},

		methods: {
			openEditPopup(item) {
				this.failedReasonArray = getInspectFailedReasonList();
				//拷贝数据到页面显示，防止修改数据原数据修改
				this.dataContent = Object.assign({}, item)
				this.getFileList();
				this.$refs['editPopup'].open("bottom");


			},
			getFileList() {
				getFileList("jobInspectDetail", this.dataContent.id).then(res => {
					if(res.data){
						var imageFiles = [];
						 res.data.forEach(item=>{
							 var image = this.createImage(item.id, item.url, item.path, item.size)
							 imageFiles.push(image)
						 })
					}

					if (imageFiles.length > 0) {
						this.$nextTick(function() {
							this.$refs.uploadImage.setFiles(imageFiles);
							this.setPhotosInfo();
						})

					}
				})
			},
			
			setPhotosInfo(){
				var list = this.$refs.uploadImage.getFiles()
				var photoItem = "";
				for (var i = 0; i < list.length; i++) {
					if (list.length - 1 == i) {
						photoItem = photoItem + list[i].url
					} else {
						photoItem = photoItem + list[i].url + ","
					}
				}
				this.dataContent.photos = photoItem;
			},


			createImage(id, url, fileName, size) {

				let image = {
					id: id,
					name: fileName,
					extname: "png",
					fileType: "image",
					url: url,
					size: size,
					image: {
						width: 175,
						height: 175,
						location: url,
					},
					path: url,
					progress: 100,
					status: "ready"
				}

				return image;
			},

			deleteImg(content) {
				var id = content.id
				if (id != undefined) {
					deleteFileById(id).then(res => {
						if (res.data) {
							uni.showToast({
								title: "删除成功"
							})
						}
					}).catch(error => {
						console.log(error)
					})
				} else {
					this.getFileList();
				}

			},
			select(content) {
				this.uploadFile(content);
			},

			back() {
				this.afterSave()
			},
			maskClick() {

			},

			afterSave() {
				this.$emit('getInspectResult', this.dataContent)
				this.$refs['editPopup'].close();
			},
			showMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {
						// this.afterCloseMessage()
					}
				});
			},


			save() {
				var failedQty = Number(this.dataContent.failedQty);
				var crackQty = Number(this.dataContent.crackQty);
				var qty = Number(this.dataContent.qty);
				if (crackQty + failedQty > qty) {
					var total = crackQty + failedQty;
					this.showMessage("不合格数[" + failedQty + "]+报废数量[" + crackQty + "]等于[" + total + "]大于收货数量[" +
						qty + "]")
					return
				}
				if (failedQty > 0 || crackQty > 0) {
					if (this.dataContent.failedReason == null) {
						this.showMessage("请选择不合格原因")
						return
					}
				}
				this.dataContent.failedQty = failedQty;
				this.dataContent.crackQty = crackQty
				this.dataContent.goodQty = this.dataContent.handleQty - failedQty - crackQty
				this.afterSave()


			},
			uploadFile(content) {
				uploadFile("jobInspectDetail", this.dataContent.id, content.path, res => {
					if (res != undefined) {
						uni.showToast({
							title: "上传成功"
						})
					} else {
						uni.showToast({
							title: "上传失败"
						})
					}
					this.getFileList();
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.disabled {
		pointer-events: none;
	}
</style>