BRS2.0/pages/detail/index.vue

<template>
	<view class="app-content">
		<view class="header">
			<view class="log" @tap="fall"></view>
		</view>
		<!--    <view class="nav">
      <view :class="action === index ? 'nav_lists': 'nav_list'" v-for="(item, index) in list" :key="index" @tap="lop(index)">{{item.name}}</view>
    </view> -->
		<uni-swiper-dot :info="imgList" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" style="height:11rem">
				<swiper-item v-for="(item ,index) in imgList" :key="index" @tap="openImg(index)">
					<view class="swiper-item">
						<image style="width:100%" :src="item" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="content" :style="{top:dataheight}">
			<uni-section title="行李详情" type="line"></uni-section>
			<view class="choice" @touchmove="movetran" v-if="luggageData">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="list">
						<view class="lable">航班号</view>
						<span>{{luggageData.carrierFlights}}</span>
						<button class="nodeList" @tap="toNode()">路径详情</button>
					</view>
					<view class="list">
						<view class="lable">航班日期</view>
						<span>{{luggageData.carrierFlightsDate}}</span>
					</view>
					<view class="list">
						<view class="lable">行李牌号</view>
						<span>{{luggageData.luggageNum}}</span>
					</view>
					<view class="list">
						<view class="lable">操作时间</view>
						<span>{{luggageData.processing_time}}</span>
					</view>
					<view class="list">
						<view class="lable">操作人</view>
						<span>{{luggageData.agentNumber}}</span>
					</view>
					<view class="list">
						<view class="lable">操作节点</view>
						<picker @change="bindPickerChange" style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :value="index" :range-key="'nodeName'"
							:range="nodeList">
							<view class="uni-input">{{nodeNameList[index]}}</view>
						</picker>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">操作位置</view>
						<uni-easyinput :inputBorder="false"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :clearable="false" :styles="style" :disabled="false"
							v-model="luggageData.location_describe" type="text" placeholder="操作位置" />
						</uni-forms>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>

					<view class="list">
						<view class="lable">发往节点</view>
						<picker @change="bindPickerChange2"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :value="index2" :range-key="'nodeName'"
							:range="nodeList">
							<view class="uni-input">{{nodeNameList[index2]}}</view>
						</picker>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">发往位置</view>
						<uni-easyinput :inputBorder="false"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :clearable="false" :styles="style" :disabled="false"
							v-model="luggageData.to_location_describe" type="text" placeholder="发往位置" />
						</uni-forms>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">特殊行李类型</view>
						<picker @change="bindPickerChange3"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :value="index3" :range-key="'specialTypeName'"
							:range="specialTypeList">
							<view class="uni-input">
								{{specialTypeList[index3].specialType?specialTypeList[index3].specialTypeName:"无"}}
							</view>
						</picker>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>

					<view class="list">
						<view class="lable">异常类型</view>
						<picker @change="bindPickerChange4"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :value="index4" :range-key="'name'"
							:range="exceptionList">
							<view class="uni-input">{{exceptionList[index4].type?exceptionList[index4].name:"无"}}</view>
						</picker>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">非正常状态码</view>
						<picker @change="bindPickerChange5"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :value="index5" :range-key="'name'"
							:range="abnormalList">
							<view class="uni-input">{{abnormalList[index5].type?abnormalList[index5].name:"无"}}</view>
						</picker>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">装载序号</view>
						<uni-easyinput :inputBorder="false"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :clearable="false" :styles="style" :disabled="false"
							v-model="luggageData.loadNumber" type="text" placeholder="装载序号" />
						</uni-forms>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">容器编号</view>
						<uni-easyinput :inputBorder="false"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :clearable="false" :styles="style" :disabled="false"
							v-model="luggageData.container_ID" type="text" placeholder="容器编号" />
						</uni-forms>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<view class="list">
						<view class="lable">备注</view>
						<uni-easyinput :inputBorder="false"
							style="line-height: 2.375rem;background-color: antiquewhite;"
							:placeholderStyle="placeholderStyle" :clearable="false" :styles="style" :disabled="false"
							v-model="luggageData.luggage_describe" type="text" placeholder="备注" />
						</uni-forms>
						<!-- <view class="listup"><uni-icons type="gear" size="25"></uni-icons></view> -->
					</view>
					<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" />
				</scroll-view>
			</view>

		</view>
		<button type="primary" class="send" size="small" v-if="luggageData" @tap="sendData()">提交</button>
		<luanqing-date-picker ref="datePickerObj" :isSimple="mode === 'simple'" :isMultiple="mode === 'multiple'"
			@finishSelectDate="finishSelectDate" :defaultCheckedList="['2023-03-28','2023-09-25']">
		</luanqing-date-picker>
		<uv-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm='confirm'
			@close='show = false'></uv-datetime-picker>
	</view>
</template>
<script>
	import mkUpload from "@/components/mk-upload/mk-upload.vue"
	import {
		translateapp
	} from "@/utils/compress.js"
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				imgList: [],
				ImgObjList: [],
				placeholderStyle: "color:000",
				style: {
					disableColor: "#fff",
					color: "#000"
				},
				dataheight: '10.75rem',
				datatime: '2023-06-02',
				datacontime: '',
				luggageData: null,
				luggageDataOld: null,
				current: 0,
				mode: 'round',
				show: false,
				value1: Number(new Date()),
				formatter: 'yy',
				index: 0,
				index2: 0,
				index3: 0,
				index4: 0,
				index5: 0,
				nodeList: [],
				nodeNameList: [],
				nextNode: null,
				luggageNum: null,
				specialTypeList: [],
				specialTypeNameList: [],
				exceptionList: [{
						"type": null,
						"name": "非异常行李"
					},
					{
						"type": "DPR",
						"name": "破损"
					},
					{
						"type": "AHL",
						"name": "少收"
					},
					{
						"type": "OHD",
						"name": "多收"
					}
				],
				exceptionNameList: ["非异常行李", "破损", "少收", "多收"],
				abnormalList: [{
						"type": null,
						"name": "无"
					},
					{
						"type": "NAL",
						"name": "未授权装载"
					},
					{
						"type": "OFF",
						"name": "已卸载"
					},
					{
						"type": "PFF",
						"name": "预卸载"
					},
					{
						"type": "UNS",
						"name": "未找到"
					},
					{
						"type": "OND",
						"name": "在场未装载，未授权"
					},
					{
						"type": "ONA",
						"name": "在场未装载，已授权"
					}
				],
				abnormalNameList: ["无", "未被授权的装载", "已卸载", "未找到", "在场未装载，未被授权", "在场未装载，已授权"],
				isShow: true,
				sourceData: null
			}
		},
		created(option) {},
		onLoad(option) {
			this.luggageNum = option.luggageNum
			this.getNode()
			this.getSpecialTypeList()
			this.getDetial(this.luggageNum)
		},
		onUnload() {
			uni.$off("scancodemsg");
		},
		onShow() {
			uni.$on("scancodemsg", (data) => {
				if (data.msg.trim().length > 9) {
					this.luggageNum = data.msg.trim()
					this.getDetial(this.luggageNum)
				}
				if (data.msg.trim().length < 9) {
					this.luggageData.container_ID = data.msg.trim()
				}
			});
		},
		onHide() {
			uni.$off("scancodemsg");
		},
		components: {
			mkUpload
		},
		methods: {
			async getNode() {
				let data = {
					"serviceId": 3003,
					"dataContent": {},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						this.nodeList = res.returnData;
						this.nodeList.map(item => {
							this.nodeNameList.push(item.nodeName)
						})
					}
				})
			},
			async getSpecialTypeList() {
				let data = {
					"serviceId": 16,
					"dataContent": {},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						this.specialTypeList = res.returnData;
						this.specialTypeList.unshift({
							"specialType": null,
							"specialTypeName": "非特殊行李",
						})
						this.specialTypeList.map(item => {
							this.specialTypeNameList.push(item.specialTypeName)
						})
					}
				})
			},
			async getDetial(num) {
				let data = {
					"serviceId": 3002,
					"page": 1,
					"pageSize": 1,
					"dataContent": {
						"luggageNum": num, //行李号
					},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					this.luggageData = null
					if (res.code == "0" && res.returnData.length > 0) {
						this.luggageData = res.returnData[0]
						this.getImgList()
						this.luggageDataOld = JSON.parse(JSON.stringify(res.returnData[0]))
						this.nodeList.map((item, index) => {
							if (res.returnData[0].nodeCode == item.nodeCode) {
								this.index = index
								this.index2 = index + 1
								if(!this.luggageData.location_describe){
									this.luggageData.location_describe = item.nodeDescribe
								}
							}
						})
						this.specialTypeList.map((item, index) => {
							if (res.returnData[0].specialType == item.specialType) {
								this.index3 = index
							}
						})
						this.exceptionList.map((item, index) => {
							if (res.returnData[0].exception_type == item.type) {
								this.index4 = index
							}
						})
						this.abnormalList.map((item, index) => {
							if (res.returnData[0].abnormalState == item.type) {
								this.index5 = index
							}
						})
					} else {
						this.$scanAudio.src = "../../static/hqxl.mp3"
						this.$scanAudio.play()
						this.imgList = []
						uni.showToast({
							icon: 'none',
							title: "未查询到该行李信息",
							duration: 5000
						});
						this.fall()
					}
				})
			},
			async sendData() {
				this.luggageData.sourceAirport = this.$storage.get('airportName');
				this.luggageData.ID = null;
				this.luggageData.dataType = "BPM";
				this.luggageData.agentNumber = this.$storage.getJson("users").user_name;
				this.luggageData.device_ID = uni.getDeviceInfo().deviceId;
				let data = {
					"serviceId": 3005,
					"dataContent": [
						this.luggageData
					],
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						uni.showToast({
							icon: 'none',
							title: "操作成功",
							duration: 5000
						});
					} else {
						this.$scanAudio.src = "../../static/czsb.mp3"
						this.$scanAudio.play()
						uni.showToast({
							icon: 'none',
							title: "操作失败",
							duration: 5000
						});
					}
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				this.luggageData.nodeCode = this.nodeList[this.index].nodeCode;
				this.luggageData.location_describe = this.nodeList[this.index].nodeDescribe;
				this.index2 = this.index + 1
				this.luggageData.to_location_describe = this.nodeList[this.index2].nodeDescribe;
			},
			bindPickerChange2(e) {
				this.index2 = e.detail.value
				this.luggageData.to_location_describe = this.nodeList[this.index2].nodeDescribe;
			},
			bindPickerChange3(e) {
				this.index3 = e.detail.value
				this.luggageData.specialType = this.specialTypeList[this.index3].specialType;
			},
			bindPickerChange4(e) {
				this.index4 = e.detail.value
				this.luggageData.exception_type = this.exceptionList[this.index4].type;
			},
			bindPickerChange5(e) {
				this.index5 = e.detail.value
				this.luggageData.abnormalState = this.abnormalList[this.index5].type;
			},
			confirm(e) {
				this.show = false
				console.log(e.value)
				let timestamp = e.value
				// 此处时间戳以毫秒为单位
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				let GMT = Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute
				this.datacontime = GMT
			},

			async sendImg(upImgList) {
				let data = {
					"serviceId": 30051,
					"dataContent": upImgList,
					"event": "1"
				}
				await this.$http.httpPost('/openApi/newdata', data).then(res => {
					if (res.code == "0") {
						uni.hideLoading();
						this.getImgList()
						uni.showToast({
							icon: 'none',
							title: "上传成功",
							duration: 5000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: "上传失败",
							duration: 5000
						});
					}
				})
			},
			async getImgList() {
				let data = {
					"serviceId": 30051,
					"page": 1,
					"pageSize": 999,
					"dataContent": {
						"carrflights": this.luggageData.carrierFlights,
						"carrierFlightsDate": this.luggageData.carrierFlightsDate,
						"luggageNum": this.luggageData.luggageNum
					},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						this.imgList = [];
						this.ImgObjList = res.returnData;
						res.returnData.map(item => {
							if (item.luggagePic) {
								this.imgList.push(item.luggagePic);
							}
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: "获取图片失败",
							duration: 5000
						});
					}
				})
			},
			async deleteImg(index) {
				let data = {
					"serviceId": 30051,
					"dataContent": [{
						"filter": [{
							"left": "(",
							"column": "id",
							"comparator": "=",
							"value": this.ImgObjList[index].id,
							"right": ")",
							"connector": "and"
						}]
					}],
					"event": "3"
				}
				await this.$http.httpPost('/openApi/movedata', data).then(res => {
					if (res.code == "0") {
						this.getImgList()
						wx.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 3000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: "删除图片失败",
							duration: 5000
						});
					}
				})
			},
			onDelete(index) {
				console.log(index)
				//删除成功回调后执行 只做演示
				uni.showLoading({
					title: '删除中'
				});
				this.deleteImg(index)
			},
			onChoose(e) {
				console.log(e)
				uni.showLoading({
					title: '上传中'
				});
				// let upImgList = []
				// this.newImgList = []
				e.tempFilePaths.map(item => {
					translateapp(item, 70, imgUrl => {
						pathToBase64(imgUrl).then(path => {
							let upImgList = []
							let newData = {
								"carrflights": this.luggageData.carrierFlights,
								"carrierFlightsDate": this.luggageData.carrierFlightsDate,
								"luggageNum": this.luggageData.luggageNum,
								"luggagePic": path,
								"piclocation":this.luggageData.location_describe
							}
							upImgList.push(newData)
							this.sendImg(upImgList)
						}).catch(error => {
							uni.hideLoading();
						})
					})
				})
			},
			onPreviewTake(index) {
				console.log(index)
				wx.showActionSheet({
					itemList: ['预览图片', '删除图片'],
					success(res) {
						console.log(res.tapIndex)
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			},
			openImg(index) {
				const imgList = this.imgList;
				const isReverse = false;
				const currentIndex = isReverse ? (imgList.length - index) - 1 : index
				const imgLists = isReverse ? imgList.reverse() : imgList;
				uni.previewImage({
					current: currentIndex,
					urls: imgLists
				});
			},


			finishSelectDate(e) {
				this.datatime = e[0]
				console.error("选择了日期：", e);
			},
			movetran(e) {
				let arr = uni.getSystemInfoSync().windowHeight;
				this.dataheight = (e.changedTouches[0].clientY / 16) + 'rem'
				if (e.changedTouches[0].clientY / 16 > 10.75) {
					this.dataheight = 10.75 + 'rem'
				} else if (e.changedTouches[0].clientY / 16 < 3.75) {
					this.dataheight = 3.75 + 'rem'
				}
			},
			toNode() {
				uni.navigateTo({
					url: "/pages/detailNode/index?luggageNum=" + this.luggageData.luggageNum + "&carrierFlights=" +
						this.luggageData.carrierFlights + "&carrierFlightsDate=" + this.luggageData
						.carrierFlightsDate
				})
			},
			uplist() {
				uni.redirectTo({
					url: "/pages/loadingdetails/index"
				})
			},
			lop(index) {
				this.action = index
			},
			seach() {
				uni.redirectTo({
					url: "/pages/search/index"
				})
			},
			fall() {
				uni.navigateBack({
					delta: 1
				})
			},
			change(e) {
				this.current = e.detail.current;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app-content {
		>.send {
			position: fixed;
			bottom: 10px;
			left: calc((100% - 20.5625rem) / 2);
			width: 20.5625rem;
			height: 3rem;
			background: linear-gradient(179.10deg, rgba(51, 161, 165, 1.00) 11.326%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%);
			border-radius: .25rem;
			color: rgb(255, 255, 255);
			font-family: Noto Sans SC;
			font-size: 1rem;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		>.header {
			width: 100%;
			height: 4.375rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// background: rgba(49,85,99,1);
			color: rgb(16, 17, 22);
			font-family: Noto Sans SC;
			font-size: 1rem;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;

			>.log {
				width: .375rem;
				height: .75rem;
				font-size: .75rem;
				position: absolute;
				left: 1.5rem;
				background: url('../../static/ico@1x.png') no-repeat;
				background-size: 100% 100%;
			}

			>.up {
				width: .8456rem;
				height: .8456rem;
				position: absolute;
				right: 1.5rem;
				background: url('../../static/search.png') no-repeat;
				background-size: 100% 100%;
				// color: rgb(37, 121, 160);
				// font-family: Noto Sans SC;
				// font-size: .875rem;
				// font-weight: 500;
			}
		}

		>.content {
			width: 100%;
			// height: calc(100vh - 20.9375rem - 4.375rem);
			padding-bottom: 0;
			position: absolute;
			bottom: 0;
			top: 10.75rem;
			border-radius: 6px 6px 0px 0px;
			overflow: hidden;
			background: rgb(255, 255, 255);

			>.choice {
				width: 100%;
				// height: 3.75rem;
				display: flex;
				align-items: center;
				padding: 0 0 0 0.8rem;
				box-sizing: border-box;

				>.scroll-Y {
					// height: calc(100% - 2.5rem - 2.75rem - 2.25rem - 2.25rem);
					width: 100%;
					height: 27.75rem;

					.list {
						height: 3.375rem;
						display: flex;
						align-items: center;
						border-bottom: 1px solid rgb(238, 238, 238);
						position: relative;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 13px;
						font-weight: 400;

						.uni-input {
							width: 240px;
							padding-left: 10px;
						}

						>.lable {
							color: rgb(0, 0, 0);
							font-family: Noto Sans SC;
							font-size: 13px;
							font-weight: 500;
							line-height: 19px;
							letter-spacing: 0px;
							text-align: left;
							width: 6rem;
						}

						>.listup {
							// width: .25rem;
							// height: .5rem;
							// background: url('../../static/icos.png') no-repeat;
							// background-size: 100% 100%;
							position: absolute;
							right: 5px;
						}

						>.nodeList {
							background: linear-gradient(179.10deg, rgba(51, 161, 165, 1.00) 11.326%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%);
							border-radius: .25rem;
							color: rgb(255, 255, 255);
							font-family: Noto Sans SC;
							font-size: 1rem;
							float: right;
							margin-right: 10px;
						}
					}
				}
			}



			.but {
				width: 20.5625rem;
				height: 2.5rem;
				background: linear-gradient(179.10deg, rgba(51, 161, 165, 1.00) 11.326%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%);
				border-radius: .25rem;
				color: rgb(255, 255, 255);
				font-family: Noto Sans SC;
				font-size: 1rem;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 0.25rem;
				margin-bottom: 2.25rem;
			}
		}
	}
</style>