jingrunTechnology-ui/pages/home/myorder/operation/index.vue

<template>
	<view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">基础信息</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic" v-if="form.mdLoadAddr">
				<view>运单号</view>
				<view>{{form.mdLoadAddr}}</view>
			</view>
			<view class="basic" v-else>
				<view>运单号</view>
				<view></view>
			</view>
			<view class="basic">
				<view>车号</view>
				<view>{{form.carregNo}}</view>
			</view>
			<view class="basic">
				<view>调度员</view>
				<view>{{form.planUserId}}</view>
			</view>
			<view class="basic">
				<view>驾驶员</view>
				<view>{{form.driverName}}</view>
			</view>
			<view class="basic">
				<view>装货品名</view>
				<view>{{form.goodsId}}</view>
			</view>
			<view class="basic">
				<view>调度数量</view>
				<view>{{form.cntrQty}}</view>
			</view>
			<view class="basic">
				<view>提单号</view>
				<view>{{form.mblno}}</view>
			</view>
		</view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">信息提交</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view style="width: 94%;margin: 0rpx auto;">
				<u-form-item v-if="option == 1" :border-bottom="false" label-width="155rpx" label="接单日期：">
					<u-input :clearable="false" v-model="form.acceptDate" placeholder="请选择接单日期" :disabled="true"
						@click="show = true" />
				</u-form-item>
				<u-form-item v-if="option == 3" :border-bottom="false" label-width="155rpx" label="提箱日期：">
					<u-input :clearable="false" v-model="form.loadDate" placeholder="请选择提箱日期" :disabled="true"
						@click="show = true" />
				</u-form-item>
				<u-form-item v-if="option == 4" :border-bottom="false" label-width="155rpx" label="装卸日期：">
					<u-input :clearable="false" v-model="form.mdLoadDate" placeholder="请选择装卸日期" :disabled="true"
						@click="show = true" />
				</u-form-item>
				<u-form-item v-if="option == 5" :border-bottom="false" label-width="155rpx" label="卸柜日期：">
					<u-input :clearable="false" v-model="form.unLoadDate" placeholder="请选择卸柜日期" :disabled="true"
						@click="show = true" />
				</u-form-item>
			</view>
			<view style="width: 94%;margin: 0rpx auto;">
				<u-form-item v-if="option == 1" :border-bottom="false" label-width="155rpx" label="接单备注：">
					<u-input type="textarea" :height="35" :clearable="false" v-model="form.acceptRemarks" />
				</u-form-item>
				<u-form-item v-if="option == 3" :border-bottom="false" label-width="155rpx" label="提箱备注：">
					<u-input type="textarea" :height="35" :clearable="false" v-model="form.loadRemarks" />
				</u-form-item>
				<u-form-item v-if="option == 4" :border-bottom="false" label-width="155rpx" label="装卸备注：">
					<u-input type="textarea" :height="35" :clearable="false" v-model="form.mdLoadRemarks" />
				</u-form-item>
				<u-form-item v-if="option == 5" :border-bottom="false" label-width="155rpx" label="卸柜备注：">
					<u-input type="textarea" :height="35" :clearable="false" v-model="form.unLoadRemarks" />
				</u-form-item>
			</view>
			<!-- <view style="width: 94%;margin: 0rpx auto;">
				<u-form-item :border-bottom="false" label-width="155rpx" label="起始里程：">
					<u-input :clearable="false" v-model="form.odometerFrom" />
				</u-form-item>
			</view>
			<view style="width: 94%;margin: 0rpx auto;">
				<u-form-item :border-bottom="false" label-width="155rpx" label="结束里程：">
					<u-input :clearable="false" v-model="form.odometerEnd " />
				</u-form-item>
			</view> -->
		</view>
		<view class="ordertop" v-if="option == 5">
			<view>
				<view class="iconblue"></view>
				<text class="license">费用信息</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view style="width: 94%;margin: 0rpx auto;">
				<u-form-item :border-bottom="false" label-width="155rpx" label="油气费：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.oilAmt"/>
				</u-form-item>
				<!-- <u-form-item :border-bottom="false" label-width="155rpx" label="单趟提成：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.driverbonus" />
				</u-form-item> -->
				<u-form-item :border-bottom="false" label-width="155rpx" label="其他费用：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costOth" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="费用备注：">
					<u-input type="text" :height="35" :clearable="false" v-model="form.costRemarks" />
				</u-form-item>
			</view>
			<view style="width: 94%;margin: 0rpx auto;" v-if="form.billType == 1">
				<u-form-item :border-bottom="false" label-width="155rpx" label="修洗费：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costomAmt03" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="吊装费：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costomAmt04" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="其他费用：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costomAmt01" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="费用备注：">
					<u-input type="text" :height="35" :clearable="false" v-model="form.costomStr01" />
				</u-form-item>
			</view>
			<view style="width: 94%;margin: 0rpx auto;" v-if="form.billType == 2">
				<u-form-item :border-bottom="false" label-width="155rpx" label="港杂费：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costomAmt05" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="提箱费：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costomAmt06" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="其他费用：">
					<u-input type="digit" :height="35" :clearable="false" v-model="form.costomAmt02" />
				</u-form-item>
				<u-form-item :border-bottom="false" label-width="155rpx" label="费用备注：">
					<u-input type="text" :height="35" :clearable="false" v-model="form.costomStr02" />
				</u-form-item>
			</view>
		</view>
		<view class="ordertop" style="margin-bottom: 120rpx;" v-if="operationType !== 'acceptDate'">
			<view>
				<view class="iconblue"></view>
				<text class="license">附件上传</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view style="width: 94%;margin: 0rpx auto;">
				<u-upload ref="uUpload" :action="action" :header="headers" @on-success="success" :file-list="fileList">
				</u-upload>
			</view>
		</view>
		<view style="position: fixed; bottom: 20rpx;width: 96%;margin-left: 2%;">
			<u-button type="primary" @click="submIt = true">提交</u-button>
		</view>
		<u-modal v-model="submIt" @confirm="submit" @cancel="submIt = false" :show-cancel-button="true"
			:content="content"></u-modal>
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import {
		request
	} from '@/common/request/request'
	export default {
		data() {
			return {
				title: '', //标题
				show: false,
				mode: 'date',
				option: '',
				action: 'https://jingrun.tubaosoft.com/prod-api/common/upload',
				headers: {
					Authorization: 'Bearer ' + uni.getStorageSync('vuex_token')
				},
				content: '是否确认提交',
				fileList: [],
				submIt: false,
				operationType: '',
				form: {
					mblno: '', //提单号
					carregNo: '', //车号
					planUserId: '', //调度员*
					goodsId: '', //装货品名
					cntrQty: '', //调度数量
					ysl: '', //船名
					voy: '', //航次
					loadAddr: '', //提箱地点
					loadDate: '', //提箱时间
					loadAttntel: '', //提箱联系
					mdLoadAddr: '', //装卸地点
					mdLoadDate: '', //装卸时间
					mdLoadAttnTel: '', //装卸联系
					unLoadAddrL: '', //卸车地点
					unLadDate: '', //卸车时间
					unLoadAttnTel: '' //卸车联系
				},
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.option = option.res
			this.form = {}
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
			switch (option.res) {
				case '1':
					this.title = '接单状态'
					this.receiving(option.id, 1)
					this.operationType = "acceptDate"
					break
				case '2':
					this.title = '出车状态'
					this.receiving(option.id, 2)
					this.operationType = "offData"
					break
				case '3':
					this.title = '提箱状态'
					this.receiving(option.id, 3)
					this.operationType = "loadDate"
					break
				case '4':
					this.title = '装卸状态'
					this.receiving(option.id, 4)
					this.operationType = "mdLoadDate"
					break
				case '5':
					this.title = '卸柜状态'
					this.receiving(option.id, 5)
					this.operationType = "unLoadDate"
					break
				default:
					console.log("未知错误")
					break
			}
		},
		methods: {
			change(e) {
				// console.log(this.form.orderStatus)
				switch (this.form.orderStatus) {
					case 10:
						this.form.acceptDate = e.result
						break
					case 20:
						this.form.loadDate = e.result
						break
					case 40:
						this.form.mdLoadDate = e.result
						break
					case 50:
						this.form.unLoadDate = e.result
						break
					default:
						console.log("未知错误")
						break
				}
			},
			receiving(id, i) {
				// 获取当前时间
				let date = new Date();
				let dateYear = date.getFullYear(); //获取年 
				let dateMonth = date.getMonth(); //获取月  
				let dateDate = date.getDate(); //获取当日
				if (dateDate < 10) {
					dateDate = "0" + dateDate
				}
				uni.setNavigationBarTitle({
					title: this.title
				})
				request({
					url: '/fleet/ftmsorderbillscars/selectDriver',
					method: 'post',
					data: {
						id: id
					}
				}).then(res => {
					console.log(res)
					this.form = res.data.data.cars
					switch (i) {
						case 1:
							this.form.acceptDate = dateYear + '-' + Number(dateMonth+1) + '-' + dateDate
							break
						case 3:
							this.form.loadDate = dateYear + '-' + Number(dateMonth+1) + '-' + dateDate
							break
						case 4:
							this.form.mdLoadDate = dateYear + '-' + Number(dateMonth+1) + '-' + dateDate
							break
						case 5:
							this.form.unLoadDate = dateYear + '-' + Number(dateMonth+1) + '-' + dateDate
							break
						default:
							uni.showToast({
								icon: 'none',
								title: '未知错误状态=' + i,
								position: "bottom"
							})
							break
					}
					if (this.form.acceptDate) {
						this.form.acceptDate = this.form.acceptDate.slice(0, 10)
					}
					if (this.form.loadDate) {
						this.form.loadDate = this.form.loadDate.slice(0, 10)
					}
					if (this.form.mdLoadDate) {
						this.form.mdLoadDate = this.form.mdLoadDate.slice(0, 10)
					}
					if (this.form.unLoadDate) {
						this.form.unLoadDate = this.form.unLoadDate.slice(0, 10)
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络繁忙请稍后再试',
						position: "bottom"
					})
				})
			},
			success(data, index, lists, name) {
				// console.log(data)
				// console.log(index)
				// console.log(lists)
				// console.log(this.fileList)
			},
			//提交
			submit() {
				// console.log(this.$refs.uUpload.lists)
				let lists = []
				if(this.operationType !== 'acceptDate'){
					for (let item in this.$refs.uUpload.lists) {
						lists.push({
							attachUrl: this.$refs.uUpload.lists[item].response.url,
							thumbnailUrl: this.$refs.uUpload.lists[item].response.thumbnailUrl,
							attachName: this.$refs.uUpload.lists[item].response.fileName
						})
					}
				}
				console.log(lists)
				if(this.operationType == 'acceptDate'){
					request({
						url: '/fleet/ftmsorderbillscars/wechatInsertDriver',
						method: 'post',
						data: {
							cars: JSON.stringify(this.form),
							attachs: JSON.stringify(lists),
							fees: "[]",
							operationType: this.operationType
						}
					}).then(res => {
						console.log(res)
						if (res.data.code == 500) {
							if(res.data.msg == 'parseDecimal error, field : oilAmt'){
								uni.showToast({
									icon: 'none',
									title: '数字不正确，请检查后再提交',
									position: "bottom"
								})
							}else{
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									position: "bottom"
								})
							}
						} else if (res.data.code == 200) {
							uni.navigateBack();
						}
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '网络繁忙请稍后再试',
							position: "bottom"
						})
					})
				}else{
					if (lists.length == this.$refs.uUpload.lists.length) {
						request({
							url: '/fleet/ftmsorderbillscars/wechatInsertDriver',
							method: 'post',
							data: {
								cars: JSON.stringify(this.form),
								attachs: JSON.stringify(lists),
								fees: "[]",
								operationType: this.operationType
							}
						}).then(res => {
							console.log(res)
							if (res.data.code == 500) {
								if(res.data.msg == 'parseDecimal error, field : oilAmt'){
									uni.showToast({
										icon: 'none',
										title: '数字不正确，请检查后再提交',
										position: "bottom"
									})
								}else{
									uni.showToast({
										icon: 'none',
										title: res.data.msg,
										position: "bottom"
									})
								}
							} else if (res.data.code == 200) {
								uni.navigateBack();
							}
						}).catch(err => {
							uni.showToast({
								icon: 'none',
								title: '网络繁忙请稍后再试',
								position: "bottom"
							})
						})
					}
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.iconblue {
		width: 10rpx;
		height: 50rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}
</style>