pad-app/pages/quality/edit.vue

<template>
	<view class="edit">
		<head-view title="货物质损" url="/pages/quality/index"></head-view>
		<view class="container contentFixed">
			<uni-steps :options="stepList" :active="active" />
			<view class="ul">
				<template v-if="active == 0">
					<view class="li">
						<p class="liTitle"><text class="required">*</text>资损发生环节</p>
						<radio-group class="radioList" @change="radioChange">
							<template v-for="(item, index) in radioList">
								<label class="radioBox" :key="item.value"
									v-if="item.name != '其他' && item.name != '客户反馈'">
									<template>
										<view>
											<radio :value="item.value" :checked="index === current" />
										</view>
										<view>{{item.name}}</view>
									</template>
								</label>
								<label class="radioBox2" v-if="item.name == '其他' || item.name == '客户反馈'">
									<view class="radioBox2Box">
										<view>
											<radio :value="item.value" :checked="index === current" />
										</view>
										<view>{{item.name}}</view>
										<uni-easyinput type="textarea" autoHeight v-model="feed" placeholder="请输入"
											maxlength="200" v-if="item.name == '客户反馈'"></uni-easyinput>
										<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"
											maxlength="200" v-if="item.name == '其他'"></uni-easyinput>
									</view>
								</label>
							</template>
						</radio-group>
					</view>
					<view class="li">
						<p class="liTitle tpTitle">板车照片</p>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片" v-model="imageValue" @select="select"
								@delete="photoDelete"></uni-file-picker>
						</view>
					</view>
					<view class="li">
						<p class="liTitle tpTitle">板车车牌照</p>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片" v-model="imageValue2" @select="select2"
								@delete="photoDelete2"></uni-file-picker>
						</view>
					</view>
				</template>

				<template v-if="active == 3">
					<view class="li flexLi">
						<p class="liTitle"><text class="required">*</text>资损负责人:</p>
						<uni-easyinput class="inputBox" v-model="director" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="li flexLi">
						<p class="liTitle"><text class="required">*</text>签名:</p>
						<p class="sign" @click="sign" v-if="signUrl == ''">点击签名</p>
						<template v-else>
							<image :src="signUrl" mode="widthFix"></image>
							<!-- <p class="editSign" @click="sign">重新签名</p> -->
						</template>
					</view>
				</template>
			</view>
			<view class="ul zsInfo">
				<template v-if="active == 1">
					<view class="li">
						<p class="liTitle"><text class="required">*</text>车架号/条形码:</p>
						<uni-easyinput class="inputBox wInput" v-model="carValue" placeholder="请输入" @blur="carBlur"
							:disabled="vinDisabled"></uni-easyinput>
						<p class="initText" @click="getInfo">扫描</p>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>船名/航次:</p>
						<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="vvyShip"
							placeholder="请选择船名" v-model="vvyShip" @select="shipChange"></superwei-combox>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>车型:</p>
						<uni-data-select v-model="carId" :localdata="carList" @change="carChange"
							:disabled="carDisabled"></uni-data-select>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>品牌:</p>
						<uni-data-select v-model="brandId" :localdata="brandList" @change="brandChange"
							:disabled="brandDisabled"></uni-data-select>
					</view>
					<view class="li cwLi">
						<p class="liTitle"><text class="required">*</text>场位:</p>
						<uni-data-select v-model="yardId" :localdata="yardColumns" @change="yardChange"
							:disabled="yardDisabled" placeholder="堆场"></uni-data-select>
						<uni-data-select v-model="storeAreaId" :localdata="storeAreaColumns" @change="storeAreaChange"
							:disabled="storeAreaDisabled" placeholder="区域"></uni-data-select>
						<uni-data-select v-model="storeLineId" :localdata="storeLineColumns" @change="storeLineChange"
							:disabled="storeLineDisabled" placeholder="车道"></uni-data-select>
						<uni-data-select v-model="storeSeatId" :localdata="storeSeatColumns" @change="storeSeatChange"
							:disabled="storeSeatDisabled" placeholder="车位"></uni-data-select>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>质损时间:</p>
						<uni-datetime-picker type="datetime" v-model="zsDate" @change="dateChange" />
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>质损货物品类:</p>
						<radio-group @change="radioChange2" class="radioList2">
							<label class="radioBox" v-for="(item, index) in radioList2" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current2" />
								</view>
								<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other"
										placeholder="请输入" v-if="showInput2 && item.name == '其他'"></uni-easyinput></view>
							</label>
						</radio-group>
					</view>
					<view class="li imageLi">
						<image :src="zsImg" mode="widthFix" @click="togoCs"></image>
						<!-- <image :src="zsImg2" class="zshz"></image> -->
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>资损概况:</p>
						<checkbox-group class="radioList2" @change="checkboxChange">
							<label class="radioBox" v-for="item in checklist" :key="item.value">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view class="boxInfo">{{item.name}}</view>
							</label>
						</checkbox-group>
						<uni-easyinput class="inputBox" v-model="other1" placeholder="请输入"
							v-if="showInput3"></uni-easyinput>
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>损伤情况:</p>
						<checkbox-group class="radioList2" @change="checkboxChange2">
							<label class="radioBox" v-for="item in checklist2" :key="item.value">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view class="boxInfo">{{item.name}}</view>
							</label>
						</checkbox-group>
						<uni-easyinput class="inputBox" v-model="other2" placeholder="请输入"
							v-if="showInput4"></uni-easyinput>
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>处置情况:</p>
						<checkbox-group class="radioList2" @change="checkboxChange3">
							<label class="radioBox" v-for="item in checklist3" :key="item.value">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view class="boxInfo">{{item.name}}</view>
							</label>
						</checkbox-group>
						<uni-easyinput class="inputBox" v-model="other3" placeholder="请输入"
							v-if="showInput5"></uni-easyinput>
					</view>
				</template>

				<template v-if="active == 2">
					<view class="li tpLi">
						<p class="liTitle tpTitle">资损照片</p>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片" v-model="imageValue3" @select="select3"
								@delete="photoDelete3"></uni-file-picker>
						</view>
					</view>
					<view class="li tpLi">
						<p class="liTitle tpTitle">车架号图片</p>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片" v-model="imageValue4" @select="select4"
								@delete="photoDelete4"></uni-file-picker>
						</view>
					</view>
				</template>
			</view>

			<view class="btnList">
				<van-button type="default" @click="cancel">取消</van-button>
				<van-button type="default" @click="back" v-if="active > 0">上一步</van-button>
				<van-button type="default" @click="next" v-if="active < 3">下一步</van-button>
				<van-button type="info" @click="save" v-if="active == 3">提交</van-button>
			</view>
		</view>
		<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
	</view>
</template>

<script>
	import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
	export default {
		name: "monEdit",
		data() {
			return {
				loginObj: {},
				active: 0,
				stepList: [{
						title: '基本信息'
					},
					{
						title: '质损信息'
					},
					{
						title: '质损图片'
					},
					{
						title: '签字'
					}
				],
				ygqId: "",
				type: "",

				// 港区信息
				portObj: {},

				// 基本信息
				radioList: [],
				current: "", // 资损发生环节
				feed: "", // 客户反馈
				remark: "", // 其他

				// 质损信息
				carValue: "", // 车架号
				godId: "", // 货物id
				// 船名
				shipId: "", // 船ID
				shipName: "", // 船名
				vvyShip: "",
				shipList: [],
				// 航次
				vvyId: "",
				vvyList: [],
				// 车型
				carId: "", // 车型ID
				carModel: "", // 车型
				carList: [],
				// 品牌
				brandId: "", // 品牌ID
				brandValue: "", // 品牌
				brandList: [],
				// 堆场
				yardId: "",
				yardName: "",
				yardColumns: [],
				// 场位(区域)
				storeAreaId: "",
				storeArea: "",
				storeAreaColumns: [],
				// 场位(车道)
				storeLineId: "",
				storeLine: "",
				storeLineId: "",
				storeLineColumns: [],
				// 场位(车位)
				storeSeatId: "",
				storeSeat: "",
				storeSeatColumns: [],
				zsDate: "", // 质损时间

				zsImg: "", // 质损图片
				scZsImg: "", // 上传质损图
				zsImg2: "", // 绘制图

				// 是否禁用
				vinDisabled: false, // 车架号输入禁用
				shipDisabled: false, // 船名航次下拉禁用
				carDisabled: false, // 车型下拉禁用
				brandDisabled: false, // 品牌下拉禁用
				yardDisabled: false, // 堆场下拉禁用
				storeAreaDisabled: false, // 区域下拉禁用
				storeLineDisabled: false, // 车道下拉禁用
				storeSeatDisabled: false, // 车位下拉禁用

				// 质损货物品类
				radioList2: [],
				radioData2: "",
				showInput2: false,
				current2: "",
				other: "", // 质损货物品类其他

				// 资损概况
				checkValue: [], // 资损概况多选框选中
				checklist: [], // 资损概况多选框
				checkData: [],
				showInput3: false,
				other1: "", // 资损概况其他
				// 损伤情况
				checkValue2: [], // 损伤情况多选框选中
				checklist2: [],
				checkData2: [],
				showInput4: false,
				other2: "", // 损伤情况其他
				// 处置状况
				checkValue3: [], // 处置状况多选框选中 
				checklist3: [], // 处置情况多选框
				checkData3: [],
				showInput5: false,
				other3: "", // 处置情况其他

				// 板车照片
				imageValue: [],
				// 上传板车照片
				bcPhoto: [],
				// 板车照片列表
				bcPhoto2: [],

				// 板车车牌照
				imageValue2: [],
				// 上传车牌照片
				bcLicense: [],
				// 板车车牌列表
				bcLicense2: [],

				// 资损照片
				imageValue3: [],
				//  上传资损照片照片
				zsPhoto: [],
				// 板车资损列表
				zsPhoto2: [],

				// 车架号图片
				imageValue4: [],
				// 上传车架号图片
				carPhoto: [],
				// 车架号图片列表
				carPhoto2: [],

				// 资损负责人
				director: "",

				// 签名图片地址
				signObj: {},
				signUrl: "",

				lotusLoadingData: {
					isShow: false //设置显示加载中组件true显示false隐藏
				}
			}
		},
		components: {
			LotusLoading
		},
		onShow() {
			this.signObj = uni.getStorageSync('signObj')
			if (this.signObj != "") {
				this.initImg(this.signObj.signImg, '5')
			}
		},
		onLoad(options) {
			if ('params' in options) {
				// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
				this.ygqId = JSON.parse(decodeURIComponent(options.params)).ygqId
				this.type = JSON.parse(decodeURIComponent(options.params)).type
			}
			this.loginObj = uni.getStorageSync('loginObj')
			this.portObj = uni.getStorageSync('portObj')
			this.getCar()
			this.getBrand()
			this.getShip()
			this.yardData()
			this.getImg()
			this.getRadio()
			this.getRadio2()
			this.getCheck()
			this.getCheck2()
			this.getCheck3()
			let that = this
			if (this.type == 'edit') {
				this.getRowInfo()
			}
			let zsImg = uni.getStorageSync("zsImg")
			if (zsImg != null && zsImg != "" && zsImg != undefined) {
				this.zsImg2 = uni.getStorageSync("zsImg")
				console.log(this.zsImg2)
			}
		},
		methods: {
			// 编辑状态内容
			getRowInfo() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/getDetail?ygqId=${this.ygqId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.infoData = res.data.data
							// 获取板车照片
							this.bcPhoto = this.infoData.boardCarPhotos
							this.infoData.boardCarPhotos.forEach(v => {
								this.initImg(v.filePath, "1")
							})
							// 获取板车车牌照
							this.bcLicense = this.infoData.boardCarLicensePlates
							this.infoData.boardCarLicensePlates.forEach(v => {
								this.initImg(v.filePath, "2")
							})
							// 获取质损照片
							this.zsPhoto = this.infoData.qualityDamagePhotos
							this.infoData.qualityDamagePhotos.forEach(v => {
								this.initImg(v.filePath, "3")
							})
							// 获取车架号图片
							this.carPhoto = this.infoData.carFrameNumberPhotos
							this.infoData.carFrameNumberPhotos.forEach(v => {
								this.initImg(v.filePath, "4")
							})
							if (this.infoData.signUrl != null) {
								this.initImg(this.infoData.signUrl, "5")
							}
							this.current = Number(this.infoData.qdLink) // 资损发生环节
							this.feed = this.infoData.linkFeedback // 客户反馈
							this.remark = this.infoData.linkOther // 其他
							this.carValue = this.infoData.vinCode // 车架号
							this.godId = this.infoData.godId // 货物id
							this.shipId = this.infoData.spmId // 船名id
							this.vvyId = this.infoData.vvyId // 航次id
							this.vvyShip = this.infoData.spmIdAndVvyId // 船名航次
							this.zsDate = this.infoData.qualityDamageTime // 质损时间
							this.carId = this.infoData.goodsType // 车型
							this.brandId = this.infoData.brdId // 品牌id
							this.yardId = this.infoData.yardId // 堆场id
							this.yardName = this.infoData.yardName // 堆场
							this.storeAreaData(this.yardId) // 获取区域
							this.storeAreaId = this.infoData.yarId // 区域id
							this.storeArea = this.infoData.storeArea // 区域
							this.storeLineData(this.storeAreaId) // 获取车道
							this.storeLineId = this.infoData.yalId // 车道id
							this.storeLine = this.infoData.storeLine // 车道
							this.storeSeatData(this.storeLineId) // 获取车位
							this.storeSeatId = this.infoData.yacId // 车位id
							this.storeSeat = this.infoData.storeSeat // 车位
							this.current2 = Number(this.infoData.qdGodsCategory) // 质损货物品类
							if (this.current2 == 3) {
								this.showInput2 = true
							}
							this.other = this.infoData.qdGcOther // 质损货物品类其他
							this.checkData = this.infoData.qualityDamageSituation.split(",") // 资损概况
							this.checklist.forEach(v => {
								this.checkData.forEach(v2 => {
									if (v.value == v2) {
										this.$set(v, 'checked', true)
									}
									if (v2 == '3') {
										this.showInput3 = true
									}
								})
							})
							this.other1 = this.infoData.qdsOther // 资损概况其他
							this.checkData2 = this.infoData.damageSituation.split(",") // 损伤情况
							this.checklist2.forEach(v => {
								this.checkData2.forEach(v2 => {
									if (v.value == v2) {
										this.$set(v, 'checked', true)
									}
									if (v2 == '4') {
										this.showInput4 = true
									}
								})
							})
							this.other2 = this.infoData.dsOther // 损伤情况其他
							this.checkData3 = this.infoData.disposalSituation.split(",") // 处置情况
							this.checklist3.forEach(v => {
								this.checkData3.forEach(v2 => {
									if (v.value == v2) {
										this.$set(v, 'checked', true)
									}
									if (v2 == '4') {
										this.showInput5 = true
									}
								})
							})
							this.other3 = this.infoData.dpsOther // 处置情况其他
							this.director = this.infoData.qdLiablePerson // 资损负责人
							this.ygqId = this.infoData.ygqId // 质量id
							this.vinDisabled = true // 车架号输入禁用
						}
					}
				})
			},
			// type 1 板车照片 2板车车牌照 3质损照片 4车架号图片 5签名 6参考图
			initImg(fileName, type) {
				uni.request({
					url: `${this.$local}/api/file/url/?fileName=${fileName}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							if (type == 1) {
								this.imageValue.push({
									url: res.data
								})
							} else if (type == 2) {
								this.imageValue2.push({
									url: res.data
								})
							} else if (type == 3) {
								this.imageValue3.push({
									url: res.data
								})
							} else if (type == 4) {
								this.imageValue4.push({
									url: res.data
								})
							} else if (type == 5) {
								this.signUrl = res.data
							} else if (type == 6) {
								this.zsImg = res.data
							}
						}
					}
				})
			},
			// 资损发生环节选项
			radioChange(evt) {
				let currentIndex = 0
				for (let i = 0; i < this.radioList.length; i++) {
					if (this.radioList[i].value === evt.detail.value) {
						currentIndex = i;
					}
				}
				this.current = this.radioList[currentIndex].value
				if (this.current !== '客户反馈') {
					this.feed = ""
				}
				if (this.current !== "其他") {
					this.remark = ""
				}
			},
			// 质损货物品类
			radioChange2(evt) {
				this.radioData2 = evt.detail.value
				let currentIndex = 0
				for (let i = 0; i < this.radioList2.length; i++) {
					if (this.radioList2[i].value === evt.detail.value) {
						currentIndex = i;
					}
				}
				this.current2 = this.radioList2[currentIndex].value
				if (this.current2 == '3') {
					this.showInput2 = true
				} else {
					this.showInput2 = false
					this.other = ''
				}
			},
			// 资损概况
			checkboxChange(e) {
				this.checkData = e.detail.value
				if (e.detail.value == 3) {
					this.showInput3 = true
				} else {
					this.showInput3 = false
				}
				var items = this.checklist
				var values = e.detail.value
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				this.checkValue.forEach(v => {
					if (v == '其他') {
						this.showInput3 = true
					} else {
						this.showInput3 = false
					}
				})
				if (!this.showInput3) {
					this.other1 = ''
				}
			},
			// 损伤情况
			checkboxChange2(e) {
				this.checkData2 = e.detail.value
				if (e.detail.value == 4) {
					this.showInput4 = true
				} else {
					this.showInput4 = false
				}
				var items = this.checklist2,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist2.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue2 = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				this.checkValue2.forEach(v => {
					if (v == '其他') {
						this.showInput4 = true
					} else {
						this.showInput4 = false
					}
				})
				if (!this.showInput4) {
					this.other2 = ''
				}
			},
			// 处置情况
			checkboxChange3(e) {
				this.checkData3 = e.detail.value
				if (e.detail.value == 4) {
					this.showInput5 = true
				} else {
					this.showInput5 = false
				}
				var items = this.checklist3,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist3.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue3 = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				this.checkValue3.forEach(v => {
					if (v == '其他') {
						this.showInput5 = true
					} else {
						this.showInput5 = false
					}
				})
				if (!this.showInput5) {
					this.other3 = ''
				}
			},
			// 修改残损
			togoCs() {
				uni.navigateTo({
					url: '/pages/quality/zsEdit'
				})
			},
			// 点击签名
			sign() {
				uni.navigateTo({
					url: '/pages/quality/sign'
				})
			},
			// 车架号输入失焦
			carBlur(e) {
				this.carValue = e.detail.value
				this.getYyInfo()
			},
			// 获取车辆信息
			getInfo() {
				this.getYyInfo()
			},
			// 获取预约信息接口
			getYyInfo() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/scan/${this.carValue}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200 && res.data.data != null) {
							this.godId = res.data.data.godId
							// 船名
							if (res.data.data.spmId != "") {
								this.shipId = res.data.data.spmId
								this.vvyId = res.data.data.vvyId
								this.shipList.forEach(v => {
									if (v.spmId == this.shipId) {
										this.vvyShip = `${v.vslCnname}/${v.vvyName}`
									}
								})
								// this.shipDisabled = true
							}
							// 车型
							if (res.data.data.goodsType != "") {
								this.carId = res.data.data.goodsType
								// this.carDisabled = true
							} else {
								this.carDisabled = false
							}
							// 品牌
							if (res.data.data.brdId != "") {
								this.brandId = res.data.data.brdId
								// this.brandDisabled = true
							}
							// 堆场
							if (res.data.data.yardId != "") {
								this.storeAreaData(res.data.data.yardId)
								this.yardId = res.data.data.yardId
								this.yardName = res.data.data.yardName
								// this.yardDisabled = true
							}
							// 区域
							if (res.data.data.yarId != "") {
								this.storeLineData(res.data.data.yarId)
								this.storeAreaId = res.data.data.yarId
								this.storeArea = res.data.data.storeArea
								// this.storeAreaDisabled = true
							}
							// 车道
							if (res.data.data.yalId != "") {
								this.storeSeatData(res.data.data.yalId)
								this.storeLineId = res.data.data.yalId
								this.storeLine = res.data.data.storeLine
								// this.storeLineDisabled = true
							}
							// 车位
							if (res.data.data.yacId != "") {
								this.storeSeatId = res.data.data.yacId
								this.storeSeat = res.data.data.storeSeat
								// this.storeSeatDisabled = true
							}
						} else {
							uni.showToast({
								icon: 'error',
								title: `没有该车辆信息`
							});
						}
					}
				})
			},
			// 获取船名
			getShip() {
				let ieType = ""
				let key = ""
				let pamId = this.portObj.portId
				let spmId = ""
				let tradeType = ""
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${tradeType}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.shipList = res.data.data
							this.shipList.forEach(v => {
								let vvyShip = `${v.vslCnname}/${v.vvyName}`
								this.$set(v, "vvyShip", vvyShip)
							})
						}
					}
				})
			},
			// 船名/航次
			shipChange(e) {
				this.shipId = e.spmId
				this.shipName = e.vslCnname
				this.vvyId = e.vvyId
				this.vvyShip = e.vvyShip
			},
			// 获取车型数据
			getCar() {
				uni.request({
					url: `${this.$local}/api/miniapp/getVehicleModel`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							res.data.data.forEach(v => {
								this.carList.push({
									value: v.id,
									text: v.name
								})
							})
						}
					}
				})
			},
			// 车型
			carChange(e) {
				this.carId = e
				this.carList.forEach(v => {
					if (e == v.value) {
						this.carModel = v.text
					}
				})
			},
			// 获取品牌
			getBrand() {
				uni.request({
					url: `${this.$local}/api/miniapp/queryBrand`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							res.data.data.forEach(v => {
								this.brandList.push({
									value: v.brdId,
									text: v.brdName
								})
							})
						}
					}
				})
			},
			// 品牌
			brandChange(e) {
				this.brandId = e
				this.brandList.forEach(v => {
					if (e == v.value) {
						this.brandValue = v.text
					}
				})
			},
			// 获取堆场数据
			yardData() {
				uni.request({
					url: this.$local + '/api/yard/sel/query/yard?pamId=' + this.portObj.portId,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							res.data.data.forEach(v => {
								this.yardColumns.push({
									value: v.pymId,
									text: v.pymName
								})
							})
						}
					}
				})
			},
			// 获取区域数据
			storeAreaData(id) {
				this.storeAreaColumns = []
				uni.request({
					url: this.$local + '/api/yard/sel/queryArea?pymId=' + id,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						res.data.data.forEach(v => {
							this.storeAreaColumns.push({
								value: v.pyaId,
								text: v.pyaAreaCode
							})
						})
					}
				})
			},
			// 获取车道数据
			storeLineData(id) {
				this.storeLineColumns = []
				uni.request({
					url: this.$local + '/api/yard/sel/queryLanesByPyaId?pyaId=' + id,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						res.data.data.forEach(v => {
							this.storeLineColumns.push({
								value: v.yalId,
								text: v.yalNo
							})
						})
					}
				})
			},
			// 获取车位数据
			storeSeatData(id) {
				this.storeSeatColumns = []
				uni.request({
					url: this.$local + '/api/yard/sel/queryParkingSpacesByYalId?yalId=' + id,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						res.data.data.forEach(v => {
							this.storeSeatColumns.push({
								value: v.yacId,
								text: v.yacNo
							})
						})
					}
				})
			},
			// 堆场
			yardChange(e) {
				this.yardId = e
				this.yardColumns.forEach(v => {
					if (e == v.value) {
						this.yardName = v.text
					}
				})
				this.storeArea = ""
				this.storeLine = ""
				this.storeSeat = ""
				this.storeAreaData(this.yardId)
			},
			// 场位(区域)
			storeAreaChange(e) {
				this.storeAreaId = e
				this.storeAreaColumns.forEach(v => {
					if (e == v.value) {
						this.storeArea = v.text
					}
				})
				this.storeLine = ""
				this.storeSeat = ""
				this.storeLineData(this.storeAreaId)
			},
			// 场位(车道)
			storeLineChange(e) {
				this.storeLineId = e
				this.storeLineColumns.forEach(v => {
					if (e == v.value) {
						this.storeLine = v.text
					}
				})
				this.storeSeatData(this.storeLineId)
			},
			// 场位(车位)
			storeSeatChange(e) {
				this.storeSeatId = e
				this.storeSeatColumns.forEach(v => {
					if (e == v.value) {
						this.storeSeat = v.text
					}
				})
			},
			// 质损日期
			dateChange(e) {
				this.zsDate = e
			},
			/// 获取质损图
			getImg() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/REFERENCE_DIAGRAM',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.scZsImg = res.data.data[0].ptrDesc
							this.initImg(res.data.data[0].ptrDesc, '6')
						}
					}
				})
			},
			// 获取枚举(质损发生环节)
			getRadio() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/QUALITY_DAMAGE_LINK',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.radioList.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(货物品类)
			getRadio2() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/QUALITY_DAMAGED_GOODS_CATEGORY',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.radioList2.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(质损概况)
			getCheck() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/OVERVIEW_QUALITY_DAMAGE',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.checklist.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(损伤情况)
			getCheck2() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/DAMAGE_CONDITION',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.checklist2.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(处置情况)
			getCheck3() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/DISPOSAL_SITUATION',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.checklist3.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 上传板车照片
			select(e) {
				this.lotusLoadingData.isShow = true
				uni.uploadFile({
					url: `${this.$local}/api/file/upload`, //上传图片api
					header: {
						// "Content-Type": "multipart/form-data",
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						this.lotusLoadingData.isShow = false
						this.bcPhoto2.push(e.tempFiles[0])
						let data = JSON.parse(res.data).data
						this.bcPhoto.push(data)
					},
				})
			},
			// 上传板车照片移除
			photoDelete(e) {
				let delIndex = 0
				this.bcPhoto2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.bcPhoto.splice(delIndex, 1)
				this.bcPhoto2.splice(delIndex, 1)
			},
			// 上传板车车牌照
			select2(e) {
				this.lotusLoadingData.isShow = true
				uni.uploadFile({
					url: `${this.$local}/api/file/upload`, //上传图片api
					header: {
						// "Content-Type": "multipart/form-data",
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						this.lotusLoadingData.isShow = false
						this.bcLicense2.push(e.tempFiles[0])
						let data = JSON.parse(res.data).data
						this.bcLicense.push(data)
					},
				})
			},
			// 上传板车车牌照移除
			photoDelete2(e) {
				let delIndex = 0
				this.bcLicense2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.bcLicense.splice(delIndex, 1)
				this.bcLicense2.splice(delIndex, 1)
			},
			// 上传资损照片
			select3(e) {
				this.lotusLoadingData.isShow = true
				uni.uploadFile({
					url: `${this.$local}/api/file/upload`, //上传图片api
					header: {
						// "Content-Type": "multipart/form-data",
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						this.lotusLoadingData.isShow = false
						this.zsPhoto2.push(e.tempFiles[0])
						let data = JSON.parse(res.data).data
						this.zsPhoto.push(data)
					},
				})
			},
			// 上传资损照片移除
			photoDelete3(e) {
				let delIndex = 0
				this.zsPhoto2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.zsPhoto.splice(delIndex, 1)
				this.zsPhoto2.splice(delIndex, 1)
			},
			// 上传车架号图片
			select4(e) {
				this.lotusLoadingData.isShow = true
				uni.uploadFile({
					url: `${this.$local}/api/file/upload`, //上传图片api
					header: {
						// "Content-Type": "multipart/form-data",
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						this.lotusLoadingData.isShow = false
						this.carPhoto2.push(e.tempFiles[0])
						let data = JSON.parse(res.data).data
						this.carPhoto.push(data)
					},
				})
			},
			// 上传车架号图片移除
			photoDelete4(e) {
				let delIndex = 0
				this.carPhoto2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.carPhoto.splice(delIndex, 1)
				this.carPhoto2.splice(delIndex, 1)
			},
			// 上一步
			back() {
				this.active--
			},
			// 下一步
			next() {
				this.active++
			},
			// 取消
			cancel() {
				uni.navigateTo({
					url: '/pages/quality/index'
				})
			},
			// 提交
			save() {
				let editReqDTO = {
					"boardCarLicensePlates": this.bcLicense, // 板车车牌照
					"boardCarPhotos": this.bcPhoto, // 板车照片
					"brdId": this.brandId, // 品牌id
					"carFrameNumberPhotos": this.carPhoto, // 车架号图片
					"dasList": this.checkData2, // 损伤情况
					"dsOther": this.other2, // 损伤情况其他备注
					"dispList": this.checkData3, // 处置情况
					"dpsOther": this.other3, // 处置情况其他备注
					"editComplete": "1", // pad提交传 1 编辑完毕 扫描提交的数据不全不给后台展示
					"godId": this.godId, // 货物id
					"goodsType": this.carId, // 车型id
					"linkFeedback": this.feed, // 客户反馈
					"linkOther": this.remark, // 环节其他
					"qdLink": this.current, // 质损发生环节
					"qdGcOther": this.other, // 质损货物品类其他
					"qdGodsCategory": this.current2, // 质损货物品类
					"qdLiablePerson": this.director, // 质损责任人
					"qdsList": this.checkData, // 质损情况多选
					"qdsOther": this.other1, // 质损情况（概况）其他备注
					"qualityDamagePhotos": this.zsPhoto, // 质损照片
					"qualityDamageTime": this.zsDate, // 质损时间
					"refImageUrl": this.scZsImg, // 质损参考图地址
					"removableFlag": "1", // 	可删除标识 pad提交传 1
					"signUrl": this.signObj.signImg, // 签名地址
					"spmId": this.shipId, // 船舶id
					"storeArea": this.storeArea, // 区域
					"storeLine": this.storeLine, // 车道
					"storeSeat": this.storeSeat, // 车位
					"vvyId": this.vvyId, // 航次id
					"yacId": this.storeSeatId, // 车位id
					"yalId": this.storeLineId, // 车道id
					"yarId": this.storeAreaId, // 区域id
					"yardId": this.yardId, // 堆场id
					"yardName": this.yardName, // 堆场
					"ygqId": this.ygqId, // 质量id
					"vinCode": this.carValue, // 车架号
				}
				uni.request({
					url: `${this.$local}/api/goodsQuality/edit`,
					data: editReqDTO,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'PUT', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							uni.setStorageSync('signImg', "")
							uni.navigateTo({
								url: '/pages/quality/index'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: `${res.data.error_description}`
							});
						}
					}
				})
			},
		}
	}
</script>


<style lang="less" scoped>
	.edit {
		.container {
			padding: 20px 30px;

			/deep/.uni-steps {
				height: 80px;
				justify-content: center;
			}

			/deep/.uni-steps__row-title {
				font-size: 20px;
			}

			/deep/.uni-icons {
				font-size: 20px !important;
			}

			/deep/.uni-steps__row-container {
				margin-top: 14px;
			}

			input::placeholder {
				color: #6a6a6a !important;
			}

			.ul {
				margin-top: 10px;

				.li {
					margin-bottom: 20px;

					.liTitle {
						font-size: 16px;

						.required {
							color: red;
							margin-right: 5px;
						}
					}

					.tpTitle {
						font-size: 18px !important;
						font-weight: bold;
					}

					.radioList {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20px;

						.radioBox {
							display: flex;
							width: 14%;
							margin-top: 10px;
						}


						.radioBox2 {
							margin-top: 10px;

							.radioBox2Box {
								display: flex;
							}


							/deep/.is-input-border {
								width: 300px;
							}

							/deep/.uni-easyinput {
								margin: 0 10px;
							}
						}
					}
				}

				.picture {
					/deep/.file-picker__box {
						width: 120px !important;
						height: 120px !important;
						padding-top: 0;
					}
				}

				.inputBox {
					/deep/.is-input-border {
						width: 270px;
						margin-left: 5px;
					}
				}

				.wInput {
					/deep/.is-input-border {
						width: 98%;
						margin-left: 5px;
					}
				}

				.sign {
					color: #2979ff;
					line-height: 40px;
					margin-left: 20px;
					font-size: 16px;
				}

				.editSign {
					color: red;
				}

			}

			.flexLi {
				display: flex;

				p {
					line-height: 36px;
					margin-right: 5px;
				}

				uni-image {
					width: 320px;
					height: 240px;
				}
			}

			.zsInfo {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.li {
					width: 48%;
					display: flex;

					.liTitle {
						text-align: right;
						min-width: 120px;
						font-size: 16px;
						line-height: 34px;
					}

					/deep/.uni-data-select {
						background-color: #fff;
						height: 35px;
						width: 100%;
					}

					/deep/.superwei-combox {
						background-color: #fff;
						height: 35px;
						width: 100%;
					}

				}



				.initText {
					height: 35px;
					line-height: 35px;
					text-align: center;
					min-width: 60px;
					color: #fff;
					background-color: #2979ff;
					margin-left: 5px;
					border-radius: 8px;
				}

				.zsLi {
					width: 100%;
					line-height: 36px;

					.liTitle {
						width: 120px;
					}

					.radioList2 {
						display: flex;
					}

					.radioBox {
						display: flex;
						margin-left: 10px;

						.boxInfo {
							display: flex;

							/deep/.is-input-border {
								width: 240px;
							}

							/deep/.uni-easyinput {
								margin-left: 10px;
							}
						}
					}

				}

				.tpLi {
					width: 100%;
					display: block;

					.liTitle {
						text-align: left;
					}
				}

				.imageLi {
					width: 100%;
					height: 440px;
					position: relative;

					.zshz {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
					}
				}

				.cwLi {
					width: 100%;

					/deep/.uni-data-select {
						margin-right: 10px;
					}

					/deep/.uni-data-select:last-child {
						margin-right: 0;
					}


					/deep/.uni-stat__select {
						margin-right: 10px;
					}

					/deep/.uni-stat__select:last-child {
						margin-right: 0;
					}
				}
			}

			.btnList {
				display: flex;
				justify-content: center;

				/deep/ .van-button {
					margin: 30px 20px;
					width: 120px;
					height: 50px;
				}
			}
		}
	}
</style>