yiliangyiyun-app/pages/erp/deliveryfeedback/details.vue

<template>
	<view class="wrap">
		<view class="content">
			<view class="row">
				<view class="left">任务编号</view>
				<view>{{detailData.processNo}}</view>
			</view>
			<view class="row">
				<view class="left">货名</view>
				<view>{{detailData.goodsName}}</view>
			</view>
			<view class="row">
				<view class="left">重量</view>
				<view>{{detailData.weight}}</view>
			</view>
			<view class="row">
				<view class="left">发货地址</view>
				<view>{{detailData.sendPrivate}}{{detailData.sendCity}}{{detailData.sendArea}}</view>
			</view>
			<view class="row">
				<view class="left">发货人</view>
				<view>{{detailData.sender}}</view>
			</view>
			<view class="row">
				<view class="left">发货人电话</view>
				<view>{{detailData.senderPhone}}</view>
			</view>
			<view class="row">
				<view class="left">收货地址</view>
				<view>{{detailData.receivePrivate}}{{detailData.receiveCity}}{{detailData.receiveArea}}</view>
			</view>
			<view class="row">
				<view class="left">收货人</view>
				<view>{{detailData.receiver}}</view>
			</view>
			<view class="row">
				<view class="left">收货人电话</view>
				<view>{{detailData.receiverPhone}}</view>
			</view>
			<view class="row">
				<view class="left">发货日期</view>
				<view>{{detailData.deliveryDateStart}}</view>
			</view>
			<view class="row">
				<view class="left">最晚到货日期</view>
				<view>{{detailData.deliveryDateEnd}}</view>
			</view>
			<view class="row">
				<view class="left">合同编号</view>
				<view>{{detailData.contractNo}}</view>
			</view>
			<view class="row">
				<view class="left">运输方式</view>
				<view>{{detailData.tranType}}</view>
			</view>
		</view>
		<view v-if='detailData.tranType=="火运"' class="content">
			<view class="row">
				<view class="left">姓名</view>
				<view>{{detailData.driver}}</view>
			</view>
			<view class="row">
				<view class="left">电话</view>
				<view>{{detailData.driverPhone}}</view>
			</view>
			<view class="row">
				<view class="left">发车日期</view>
				<view>
					<view @click='show1=true'>{{detailData.sendDateStart}}</view>
					<u-picker v-model="show1" mode="time" @confirm='dateChange($event)' :params="params">
					</u-picker>
				</view>
			</view>
			<view class="row">
				<view class="left">预计到站日期</view>
				<view> 
					<view>{{detailData.receiveDateEnd}}</view>
				</view>
			</view>
			<view class="row">
				<view class="left">车型</view>
				<view> 
					<view>{{detailData.carModel}}</view>
				</view>
			</view>
		</view>
		<view v-if='detailData.tranType=="船运"' class="content">
			<view class="row">
				<view class="left">姓名</view>
				<view>{{detailData.driver}}</view>
			</view>
			<view class="row">
				<view class="left">电话</view>
				<view>{{detailData.driverPhone}}</view>
			</view>
			<view class="row">
				<view class="left">发船日期</view>
				<view>
					<view @click='show1=true'>{{detailData.sendDateStart}}</view>
					<u-picker v-model="show1" mode="time" @confirm='dateChange($event)' :params="params">
					</u-picker>
				</view>
			</view>
			<view class="row">
				<view class="left">预计到港日期</view>
				<view> 
					<view>{{detailData.receiveDateEnd}}</view>
				</view>
			</view>
			<view class="row">
				<view class="left">船名</view>
				<view> 
					<view>{{detailData.shipName}}</view>
				</view>
			</view>
			<view class="row">
				<view class="left">航次</view>
				<view> 
					<view>{{detailData.shipNo}}</view>
				</view>
			</view>
			<view class="row">
				<view class="left">类型</view>
				<view> 
					<view>{{detailData.shipType}}</view>
				</view>
			</view>
			<view v-if="detailData.shipType == '集装箱'" class="row">
				<view class="left">数量</view>
				<view> 
					<view>{{detailData.boxNumber}}</view>
				</view>
			</view>
		</view>
		<view v-if='detailData.tranType=="火运"'>
			<view style='margin-left:10px;'>装车详情</view>
			<view v-for='(item,index) in freightspace' class="content">
				<view class="row">
					<view class="left">车厢号-{{index+1}}</view>
					<view>{{item.boxNo}}</view>
				</view>
				<view class="row">
					<view class="left">装车净重</view>
					<view v-if="item.status == '已装车' || item.status == '已送达'">{{item.loadNetWeight}}</view>
					<view style='text-align:right;' v-else>
						<input  v-model='item.loadNetWeight' class="right-bottom"
					placeholder="输入毛重"></input>
					</view>
				</view>
				<view class="row">
					<view class="left">磅单</view>
					<view v-if="item.loadPoundImg">
						<image style='width:100px;height:100px;' :src="item.loadPoundImg" mode=""></image>
					</view>
					<view v-else>
						<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1" :file-list="imgUrl"
							:size-type="['compressed']" :imgIndex='index' @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
							@on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload>
					</view>
				</view>
				<view class="row">
					<view class="left">装车日期</view>
					<view>
						<view v-if="item.status == '已装车' || item.status == '已送达'">{{item.loadingDate}}</view>
						<view v-else @click='show2=true'>{{item.loadingDate?item.loadingDate:'请选择日期'}}</view>
						<u-picker v-model="show2" mode="time" @confirm='dateChange1($event,index)' :params="params">
						</u-picker>
					</view>
				</view>
				<view style='text-align:right;' v-if="item.status == '已装车' || item.status == '已送达'">{{item.status}}</view>
				<u-button v-else @click='submit(index)' type="success">提交</u-button>
			</view>
		</view>
		<view v-if='detailData.tranType=="汽运"'>
			<view style='margin-left:10px;'>装车详情</view>
			<view v-for='(item,index) in freightspace' class="content">
				<view class="row">
					<view class="left">司机-{{index+1}}</view>
					<view>{{item.status}}</view>
				</view>
				<view class="row">
					<view class="left">姓名</view>
					<view>{{item.driver}}</view>
				</view>
				<view class="row">
					<view class="left">司机电话</view>
					<view>{{item.driverPhone}}</view>
				</view>
				<view class="row">
					<view class="left">车牌号</view>
					<view>{{item.carNo}}</view>
				</view>
				<view class="row">
					<view class="left">装车净重</view>
					<view v-if="item.status == '已装车' || item.status == '已送达'">{{item.loadNetWeight}}</view>
					<view style='text-align:right;' v-else>
						<input  v-model='item.loadNetWeight' class="right-bottom"
					placeholder="输入毛重"></input>
					</view>
				</view>
				<view class="row">
					<view class="left">装车日期</view>
					<view>
						<view v-if="item.status == '已装车' || item.status == '已送达'">{{item.loadingDate}}</view>
						<view v-else @click='show2=true'>{{item.loadingDate?item.loadingDate:'请选择日期'}}</view>
						<u-picker v-model="show2" mode="time" @confirm='dateChange1($event,index)' :params="params">
						</u-picker>
					</view>
				</view>
				<view class="row">
					<view class="left">磅单</view>
					<view v-if="item.loadPoundImg">
						<image style='width:100px;height:100px;' :src="item.loadPoundImg" mode=""></image>
					</view>
					<view v-else>
						<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1" :file-list="imgUrl"
							:size-type="['compressed']" :imgIndex='index' @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
							@on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload>
					</view>
				</view>
				<view class="row">
					<view class="left">箱号</view>
					<view>{{item.caseNo}}</view>
				</view>
				<view class="row">
					<view class="left">封号</view>
					<view>{{item.titleNo}}</view>
				</view>
				<view v-if="item.signStatus == '未签合同'">未签合同</view>
				<view v-if="item.signStatus == '已签合同'">已签合同</view>
				<u-button v-if="item.status != '已装车' && item.status != '已送达'" @click='submit(index)' type="success">保存</u-button>
			</view>
		</view>
		<view v-if='detailData.tranType=="船运"'>
			<view style='margin-left:10px;'>装车详情</view>
			<view v-for='(item,index) in freightspace' class="content">
				<view class="row">
					<view class="left">司机-{{index+1}}</view>
					<view>{{item.status}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import helper from '@/common/helper.js';
	export default {
		components: {
			upload
		},
		data() {
			return {
				id:'',
				show1: false,
				show2: false,
				currentPage: 1,
				pageSize: 10,
				show1:false,
				positionId: "",
				binNumber: "",
				maxSize: 50 * 1024 * 1024,
				status: '执行中',
				positionName: '',
				statusList: [
					{name:'执行中',value:1},
					{name:'已完货',value:2},
					{name:'全部任务',value:3},
				],
				params: {
					year: true,
					month: true,
					day: true,
				},
				imgUrl:[],
				action: this.$uploadUrl,
				freightspace:[],
				feedbackFlag:1,
				detailData:{},
				allWarehouse: [],
				showTime: ''
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getList()
		},
		
		methods: {
			submit(index){
				var that = this
				if(this.detailData.tranType=='火运'){
					if (!this.freightspace[index].loadNetWeight) {
						this.$api.msg('装车净重不能为空！')
						return
					}
					if (
						this.freightspace[index].loadNetWeight < 0 ||
						this.freightspace[index].loadNetWeight > 10000
					) {
						this.$api.msg('装车净重输入错误！')
						return
					}
					if (!this.freightspace[index].loadingDate) {
						this.$api.msg('装车日期不能为空！')
						return
					}
					uni.showModal({
						content: "提交成功后提醒司机及时签订运输合同，确定提交装车信息？",
						success(res) {
							if (res.confirm) { 
								that.tranCarInfoList = that.freightspace
								that.tranCarInfoList.driver = that.detailData.driver
								that.tranCarInfoList.driverPhone = that.detailData.driverPhone
								that.tranCarInfoList.tranCarNo = that.detailData.tranCarNo
								that.tranCarInfoList.carNo = that.detailData.carNo
								that.tranCarInfoList[0].sendDateStart = that.detailData.sendDateStart
								that.tranCarInfoList.loadNetWeight = that.detailData.loadNetWeight
								that.tranCarInfoList.tranType = that.tranType
								that.tranCarInfoList.loadPoundImg = that.detailData.loadPoundImg
								  // this.tranCarInfoList.boxNo = this.arr.toString()
								for (var i = 0; i < that.tranCarInfoList.length; i++) {
									that.tranCarInfoList[i].id = that.freightspace[i].id
									if (that.tranCarInfoList[i].temporaryDriverFlag != 0) {
										that.tranCarInfoList[i].temporaryDriverFlag = 1
										that.tranCarInfoList[i].tranType = that.tranType
									}
								}
								var tranProcessInfo = {}
								tranProcessInfo.id = that.detailData.id
								tranProcessInfo.infoId = that.detailData.infoId
								tranProcessInfo.processNo = that.detailData.processNo
								tranProcessInfo.tranPrice = that.detailData.tranPrice
								tranProcessInfo.tranCarInfoList = that.tranCarInfoList
								that.$api.doRequest('post', '/tranProcessInfo/api/insertTranCar', {
									id:this.id
								}).then(res => {
									if (res.data.code == 200) {
										that.$api.msg('提交成功')
										that.detailData = {}
										that.freightspace = {}
										uni.navigateBack({
											
										})
									}
								})
							}
						}
					})
				}
			},
			getList() {
				this.$api.doRequest('get', '/tranProcessInfo/getTranProcess', {
					id:this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.detailData = res.data.data
						if(res.data.data.tranType=='火运'){
							if(res.data.data.tranCarInfoList.length){
								 if(res.data.data.tranCarInfoList[0].driver){
									this.detailData.driver = res.data.data.tranCarInfoList[0].driver
								}
								this.detailData.driverPhone =res.data.data.tranCarInfoList[0].driverPhone
								this.$set(this.detailData,'sendDateStart',res.data.data.tranCarInfoList[0].sendDateStart)
								this.detailData.receiveDateEnd =
								            res.data.data.tranCarInfoList[0].receiveDateEnd
								this.detailData.carModel = res.data.data.tranCarInfoList[0].carModel
								this.freightspace=res.data.data.tranCarInfoList
							}
						}else if(res.data.data.tranType=='汽运'){
							this.freightspace=res.data.data.tranCarInfoList
							
						}else if(res.data.data.tranType=='船运'){
							if (res.data.data.tranCarInfoList.length > 0) {
							            this.detailData.driver = res.data.data.tranCarInfoList[0].driver
							            this.detailData.driverPhone =
							              res.data.data.tranCarInfoList[0].driverPhone
							            this.$set(
							              this.detailData,
							              'sendDateStart',
							              res.data.data.tranCarInfoList[0].sendDateStart
							            )
							            this.detailData.receiveDateEnd =
							              res.data.data.tranCarInfoList[0].receiveDateEnd
							            this.detailData.shipName = res.data.data.tranCarInfoList[0].shipName
							            this.detailData.shipNo = res.data.data.tranCarInfoList[0].shipNo
							            this.detailData.shipType = res.data.data.tranCarInfoList[0].shipType
							            this.detailData.boxNumber = res.data.data.tranCarInfoList[0].boxNumber
							            //上传附件计数
							            if(this.detailData.tranCarInfoList[0].loadPoundImg){
							              this.pictureTotal =  this.detailData.tranCarInfoList[0].loadPoundImg.split(",").length
							            }
							            this.freightspace = res.data.data.tranCarInfoList
							          }
							
						}
						
					}
				})
			},
			getImgUrl(res1,res2,res3,res4) {
				// debugger
				console.log(res1,res2,res3,res4,res5)
				this.freightspace[res4].loadPoundImg=res1
				// this.detailData.addressUrl = res
				// console.log(res)
				// console.log('------------res-----------')
			},
			setImgUrl(val){
				debugger
				for(let i = 0;i<freightspace.length;i++){
					
				}
			},
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			dateChange(e) {
				this.detailData.sendDateStart = e.year + "-" + e.month + "-" + e.day
			},
			dateChange1(e,index){
				this.$set(this.freightspace[index],'loadingDate',e.year + "-" + e.month + "-" + e.day)
			},
			statuschange(e) {
				this.status = this.statusList[e[0]].name
				this.getList()
			},
			goDetail(val) {
				uni.navigateTo({
					url: '/pages/erp/deliveryfeedback/details?data=' + JSON.stringify(val),
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		overflow: hidden;
	}
	.content{
		margin:10px 0;
	}
	.wrap {
		margin: 10rpx;
		padding: 20rpx 20rpx 140rpx 20rpx;
	
		.top {
			display: flex;
			margin-bottom: 20rpx;
	
			.top-left {
				margin-right: 20rpx;
			}
		}
	}
	
	.content,
	.content1,
	.content2 {
		border-radius: 20rpx;
		background: white;
		padding: 20rpx;
	
		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}
	
		.row {
			display: flex;
			justify-content: space-between;
			// border-bottom: 1px solid #EEEEEE;
			padding: 21rpx 0;
	
			.right,
			input {
				font-size: 28rpx;
				color: #333333;
			}
		}
	
		.row-bottom {
	
			// border: 0;
			.right-bottom {
				width: 280rpx;
				text-align: right;
			}
		}
	}
	
	.content1 {
		margin-top: 20rpx;
	}
	
	.content2 {
		margin-top: 10px;
		// display: flex;
		align-items: center;
	
		.left {
			margin-right: 20px;
		}
	}
	
	.submit {
		width: 40%;
		background: #22C572;
		border-radius: 10rpx;
	}
	
	.edit-btn {
		background: #22C572;
		width: 100rpx;
		height: 50rpx;
		margin: 0;
		color: white;
	}
	
	.has-btn {
		align-items: center;
	}
	
	.bottom-btn {
	    padding: 30rpx;
		background: #FFFFFF;
		width: 92%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		z-index: 9999;
	}
</style>