TuBaoSoft-Ui-Zd/pages/home/delivery/orderDetails/index.vue

<template>
	<view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">基础信息</text>
				<view class="various">{{form.billstatus}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>货主</view>
				<view>{{form.corpName}}</view>
			</view>
			<view class="basic">
				<view>提单号</view>
				<view>{{form.fMblno}}</view>
			</view>
			<view class="basic">
				<view>箱型/箱量/箱号</view>
				<view>{{form.fCntrtype}}/{{form.fCntqty}}/{{form.fCntrno}}</view>
			</view>
			<!-- <view class="basic">
				<view>箱量</view>
				<view>{{form.cntqty}}</view>
			</view> -->
			<!-- <view class="basic">
				<view>箱号</view>
				<view>{{form.cntrno}}</view>
			</view> -->
			<!-- <view class="basic">
				<view>入库日期</view>
				<view>{{form.bsdate}}</view>
			</view> -->
			<!-- <view class="basic">
				<view>入库状态</view>
				<view>{{form.billstatus}}</view>
			</view> -->
			<view class="basic">
				<view>品名/属性详情</view>
				<view>{{form.goodsName}}/{{form.marks}}</view>
			</view>
			<view class="basic">
				<view>车号/司机</view>
				<view>{{form.fTruckno}}/{{form.fDriverName}}</view>
			</view>
			<!-- <view class="basic">
				<view>司机</view>
				<view>{{form.fDriverName}}</view>
			</view> -->
			<view class="basic">
				<view>司机电话</view>
				<view>{{form.fDriverTel}}</view>
			</view>
			<view class="basic">
				<view>货物属性</view>
				<view>{{form.businessType}}</view>
			</view>
			<!-- <view class="basic">
				<view>货物名称</view>
				<view>{{form.fMarks}}</view>
			</view> -->
			<!-- <view class="basic">
				<view>属性详情</view>
				<view>{{form.marks}}</view>
			</view> -->
			<view class="basic">
				<view>劳务公司</view>
				<view>{{form.fleetName}}</view>
			</view>
			<view class="basic">
				<view>库区</view>
				<view>{{form.fWarehouseInformation}}</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 class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="100rpx" label="件数：">
					<u-input type="digit" :clearable="false" v-model="form.fQty" />
				</u-form-item>
			</view>
			<view class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="100rpx" label="毛重：">
					<u-input type="digit" :clearable="false" v-model="form.fGrossweight" />
				</u-form-item>
			</view>
			<view class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="100rpx" label="净重：">
					<u-input type="digit" :clearable="false" v-model="form.fNetweight" />
				</u-form-item>
			</view>
			<!-- <view class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="100rpx" label="库区：">
					<u-select v-model="formation" mode="mutil-column-auto" :list="list" @confirm="mation"
						label-name="label" value-name="id" child-name="children"></u-select>
					<u-input type="type" :clearable="false" v-model="warehouseInformation" placeholder="请选择库区" disabled
						@click="formation = !formation" />
				</u-form-item>
			</view> -->
			<view class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="160rpx" label="出库日期：">
					<u-calendar v-model="show_bsdate" mode="date" max-date="2050" @change="changeBsdate"></u-calendar>
					<u-input type="type" :clearable="false" v-model="form.fBsdate" placeholder="请选择日期" disabled @click="show_bsdate = !show_bsdate"/>
				</u-form-item>
			</view>
			<view class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="130rpx" label="装卸工：">
					<u-input type="type" :clearable="false" v-model="form.fStevedore" />
				</u-form-item>
			</view>
			<view class="basic" style="margin: 0 auto;height: 55rpx;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="130rpx" label="叉车工：">
					<u-input type="type" :clearable="false" v-model="form.fForkliftman" />
				</u-form-item>
			</view>
			<view class="basic" style="margin: 0 auto;">
				<u-form-item style="width: 100%;" :border-bottom="false" label-width="100rpx" label="备注：">
					<u-input type="textarea" height="20rpx" :clearable="false" v-model="form.remark" />
				</u-form-item>
			</view>
		</view>
		<view class="ordertop" v-if="entryPrinting == 0?form.billstatus == '出库中'||form.billstatus == '已出库':true" style="margin-bottom: 60rpx;">
			<view>
				<view class="iconblue"></view>
				<text class="license">{{form.billstatus != '已出库'?"附件上传":'查看附件'}}</text>
				<view class="various" @click="attachmentP" v-if="deptName != '外部用户'&&form.billstatus != '已出库'">保存附件</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed'/>
			</view>
			<view style="width: 94%;margin: 0 auto;">
				<u-upload ref="uUpload" :max-count="form.billstatus == '已出库'?fileList.length:999" :deletable="form.billstatus == '已出库'?false:true" @on-remove="onRemove" :action="action" :header="headers"
					@on-success="success" :file-list="fileList" :before-upload="beforeUpload">
				</u-upload>
				<u-empty v-if="fileList.length == 0&&form.billstatus == '已出库'" text="无图片" mode="list" style="margin: 20rpx auto;"></u-empty>
			</view>
		</view>
		<br>
		<view
			style="width: 100%;position:fixed; bottom:0;background-color: #FFFFFF;padding-left: 20px;padding-right: 20px;z-index: 9999;" v-if="deptName != '外部用户'">
			<u-button type="primary" @click="appCheckCode" v-if="entryPrinting != 0?form.billstatus == '出库中'||form.billstatus == '计划'||form.billstatus == '待出库':form.billstatus == '出库中'">出库确认</u-button>
			<u-button type="primary" @click="appCheckCode" v-else-if="entryPrinting == 0?form.billstatus == '计划'||form.billstatus == '待出库':false">叫车进场</u-button>
		</view>
		<u-modal v-model="submIt" @confirm="submit" :content="content" @cancel="submIt = false"
			:show-cancel-button="true" />
		<u-modal v-model="CheckStatus" @confirm="getForm" :content="content2" @cancel="CheckStatus = false"
			:show-cancel-button="true" />
		 <view style="position: absolute;top: -999999px;">
		 	<view>
		 		<canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas"></canvas>
		 	</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				urldata: "",
				CheckStatus: false,
				title: '', //标题
				formation: false,
				show_bsdate:false,
				list: [],
				action: this.$u.http.config.baseUrl + '/common/upload',
				// action: 'https://test.tms.tubaosoft.com/prod-api/common/upload',
				headers: {
					Authorization: 'Bearer ' + this.$store.state.vuex_token
				},
				warehouseInformation: '',
				content: '是否确认提交',
				content2: "数据发生变化，是否需要更新一下？",
				fileList: [],
				submIt: false,
				operationType: '',
				lists: [],
				warehouseBills: {},
				form: {
					mblno: '', //提单号
					carregNo: '', //车号
					transUserId: '', //调度员*
					driverUserId: '', //驾驶员*
					goodsId: '', //装货品名
					cntrQty: '', //调度数量
					ysl: '', //船名
					voy: '', //航次
					loadAddr: '', //提箱地点
					loadDate: '', //提箱时间
					loadAttntel: '', //提箱联系
					mdLoadAddr: '', //装卸地点
					mdLoadDate: '', //装卸时间
					mdLoadAttnTel: '', //装卸联系
					unLoadAddrL: '', //卸车地点
					unLadDate: '', //卸车时间
					unLoadAttnTel: '' //卸车联系
				},
				entryPrinting:1,
				deptName:''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.deptName = uni.getStorageSync('deptName')
			this.$u.get('/system/config/configKey/entry.printing').then(res =>{
				// console.log(res)
				this.entryPrinting = res.msg
			})
			// console.log(option); //打印出上个页面传递的参数.
			let listi = {
				fId: JSON.parse(decodeURIComponent(option.item)).fId
			}
			this.$u.get('/warehouseBusiness/applets/appWarehouseItemDataById', listi).then(res => {
				// console.log(res)
				this.form = res.data.item
				this.warehouseInformation = this.form.warehouseInformation
				this.warehouseBills = res.data.warehouseBills
				this.form.enclosure = res.data.enclosure
				for (let item in this.form.enclosure) {
					this.fileList.push({
						url: this.form.enclosure[item].fUrl,
						response: {
							fileName: this.form.enclosure[item].fName,
							url: this.form.enclosure[item].fUrl
						}
					})
				}
			})
			console.log(this.form)
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
		},
		methods: {
			changeBsdate(e){
				this.form.fBsdate = e.result
			},
			getForm() {
				this.$u.get('/warehouseBusiness/applets/appWarehouseItemDataById', {
					fId: this.form.fId
				}).then(res => {
					this.form = res.data.item
					this.warehouseInformation = this.form.warehouseInformation
					this.warehouseBills = res.data.warehouseBills
				}).catch(err => {
					console.log(err)
				})
			},
			appCheckCode() {
				if (this.form.fWarehouseInformation) {
					this.$u.get('/warehouseBusiness/applets/appCheckCode', {
						fId: this.warehouseBills.fId,
						fType: "warehouse",
						codeVal: this.warehouseBills.fDateChanged,
					}).then(res => {
						if (!res.data) {
							this.CheckStatus = true
						} else {
							this.submIt = true
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择库区',
						position: "bottom"
					})
				}
			},
			mation(e) {
				// console.log(e)
				let res = ''
				let id = ''
				for (let item in e) {
					id = e[item].value
					res += e[item].label + '/'
				}
				this.form.fWarehouseInformation = res.substr(0, res.length - 1)
				this.form.fWarehouselocid = id
				this.warehouseInformation = res.substr(0, res.length - 1)
			},
			receiving(id, i) {
				// 获取当前时间
				let date = new Date();
				let dateYear = date.getFullYear(); //获取年 
				let dateMonth = date.getMonth(); //获取月  
				let dateDate = date.getDate(); //获取当日
				uni.setNavigationBarTitle({
					title: this.title
				})
				this.$u.post('/fleet/ftmsorderbillscars/selectDriver', {
					id: id
				}).then(res => {
					console.log(res)
					this.form = res.data.cars
					switch (i) {
						case 1:
							this.form.acceptDate = dateYear + '-' + dateMonth + '-' + dateDate
							break
						case 3:
							this.form.loadDate = dateYear + '-' + dateMonth + '-' + dateDate
							break
						case 4:
							this.form.mdLoadDate = dateYear + '-' + dateMonth + '-' + dateDate
							break
						case 5:
							this.form.unLoadDate = dateYear + '-' + dateMonth + '-' + 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(name)
				// console.log(this.fileList)
			},
			attachmentP() {
				this.lists = []
				console.log(this.fileList)
				console.log(this.$refs.uUpload.lists)
				let lists = this.$refs.uUpload.lists
				if (lists.length != 0) {
					for (let item in this.$refs.uUpload.lists) {
						console.log(this.$refs.uUpload.lists[item].response)
						if (this.$refs.uUpload.lists[item].response) {
							this.lists.push({
								fUrl: this.$refs.uUpload.lists[item].response.url,
								fName: this.$refs.uUpload.lists[item].response.fileName
							})
						}
					}
				}
				let fileList = []
				console.log(this.fileList)
				if (this.fileList.length != 0) {
					for (let item in this.fileList) {
						fileList.push({
							fUrl: this.fileList[item].response.url,
							fName: this.fileList[item].response.fileName
						})
					}
				}
				this.lists = this.lists.concat(fileList)
				console.log(this.lists)
				this.$u.post('/warehouseBusiness/applets/appSubmitWarehouse', {
					item: this.form,
					attachs: this.lists
				}).then(res => {
					console.log(res.code)
					if (res.code == 200) {
						// uni.navigateBack();
						uni.showToast({
							icon: 'none',
							title: '保存成功',
							position: "bottom"
						})
					} else 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"
							})
						}
					}
				})
			},
			//提交
			submit() {
				if (this.form.billstatus == '出库中' || this.entryPrinting != 0) {
					this.lists = []
					console.log(this.fileList)
					console.log(this.$refs.uUpload.lists)
					let lists = this.$refs.uUpload.lists
					if (lists.length != 0) {
						for (let item in this.$refs.uUpload.lists) {
							console.log(this.$refs.uUpload.lists[item].response)
							if (this.$refs.uUpload.lists[item].response) {
								this.lists.push({
									fUrl: this.$refs.uUpload.lists[item].response.url,
									fName: this.$refs.uUpload.lists[item].response.fileName
								})
							}
						}
					}
					let fileList = []
					console.log(this.fileList)
					if (this.fileList.length != 0) {
						for (let item in this.fileList) {
							fileList.push({
								fUrl: this.fileList[item].response.url,
								fName: this.fileList[item].response.fileName
							})
						}
					}
					this.lists = this.lists.concat(fileList)
					this.$u.post('/warehouseBusiness/applets/appOperationConfirmation', {
						item: this.form,
						attachs: this.lists
					}).then(res => {
						console.log(res)
						if (res.code == 500) {
							if (res.msg == 'parseDecimal error, field : oilAmt') {
								uni.showToast({
									icon: 'none',
									title: '数字不正确，请检查后再提交',
									position: "bottom"
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg,
									position: "bottom"
								})
							}
						} else if (res.code == 200) {
							uni.navigateBack();
						}
					})
				} else {
					this.$u.post('/warehouseBusiness/applets/appWarehouseOperation', {
						item: this.form,
						attachs: []
					}).then(res => {
						console.log(res)
						if (res.code == 500) {
							if (res.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.code == 200) {
							uni.redirectTo({
								url: '../index'
							});
							uni.makePhoneCall({
								phoneNumber: '' + this.form.fDriverTel, // 手机号
							});
						}
					})
				}
			},
			// 上传照片
			async beforeUpload(index, list) {
				uni.showLoading({
					title: '上传中...',
				})
				var data = await this.getWatermark(index, list);
				uni.hideLoading()
				return data;
			},
			//照片添加水印
				getWatermark(index, list) {
					return new Promise((resolve, reject) => {
						var that = this;
						uni.getImageInfo({
							src: list[index].url,
							success: (ress) => {
								let ctx = uni.createCanvasContext('firstCanvas'); //创建画布
								//将图片src放到cancas内，宽高为图片大小
								ctx.drawImage(list[index].url, 0, 0, ress.width / 3, ress.height / 3)
								ctx.setFillStyle('#FFFFFF') //字体颜色
								let textToWidth = ress.width / 3 * 0.3; //字体宽度
								let textToHeight = ress.height / 3; //字体高度
								let address = ''
								//获取当前时间
								let dataTime = new Date().getFullYear() + '-' + Number(new Date()
									.getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date()
									.getHours() + ':' + new Date().getMinutes() + ':' + new Date()
									.getSeconds()
								// 获取地理位置
								uni.getLocation({
									type: 'gcj02',
									geocode: true,
									success: function(res) {
										address = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum
										if (uni.getSystemInfoSync().platform == 'ios') {
											ctx.setFontSize(34) //字体大小
											ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
												0.7) // 设置字体
											ctx.fillText("地址："+address, textToWidth * 0.2,
												textToHeight * 0.7 + 34) // 设置字体
										} else {
											ctx.setFontSize(12) //字体大小
											ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
												0.95) // 设置字体
											ctx.fillText("地址："+address, textToWidth * 0.2,
												textToHeight * 0.95 + 12) // 设置字体
										}
										ctx.draw(false, () => {
											setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
												uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
													width: ress.width / 3, // 画布宽
													height: ress.height / 3, // 画布高
													canvasId: 'firstCanvas',
													success: (res) => {
														list[index].url = res
															.tempFilePath
														uni.saveImageToPhotosAlbum({ //保存到手机
															filePath: res
																.tempFilePath,
															success: (re) => {
																resolve(true);
															}
														})
													}
												})
											}, 500)
										});
									},
									fail: function(e) {
										uni.showToast({
											icon: 'none',
											title: '获取地址失败, 请检查是否开启定位权限',
											duration: 5000,
											position:'bottom'
										})
										if (uni.getSystemInfoSync().platform == 'ios') {
											ctx.setFontSize(34) //字体大小
											ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
												0.7) // 设置字体
											ctx.fillText("地址："+address, textToWidth * 0.2,
												textToHeight * 0.7 + 34) // 设置字体
										} else {
											ctx.setFontSize(12) //字体大小
											ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
												0.95) // 设置字体
											ctx.fillText("地址："+address, textToWidth * 0.2,
												textToHeight * 0.95 + 12) // 设置字体
										}
										ctx.draw(false, () => {
											setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
												uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
													width: ress.width / 3, // 画布宽
													height: ress.height / 3, // 画布高
													canvasId: 'firstCanvas',
													success: (res) => {
														list[index].url = res
															.tempFilePath
														uni.saveImageToPhotosAlbum({ //保存到手机
															filePath: res
																.tempFilePath,
															success: (re) => {
																resolve(true);
															}
														})
													}
												})
											}, 500)
										});
									}
								});
							}
						})
					})
				}
		}
	};
</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: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.various {
		float: right;
		width: 150rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #3a63cf;
	}

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