emis-sapp/pages/warehousing/detail.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:header></template>
			<template v-slot:body>
				<view class="dt-block">
					<view class="dt-tle">
						<view @click="setClipboardData(postInfo.billCode)" class="t1">订单号: {{postInfo.billCode}}</view>
						<view class="t2">
							<text class="clr-prm"></text>
						</view>
					</view>
					<u-line margin="20rpx 0 20rpx"></u-line>
					<view>
						<bpe-addressjiami-tmp v-model:value="postInfo"></bpe-addressjiami-tmp>
					</view>
					
				</view>
				
				<view class="dt-block">
					<view class="dt-tle" @click="handleCopyWareHouse()">
						<view class="t1">{{postInfo.intoWarehouseName}}联系信息</view>
						<view class="t2">
							<u-icon name="file-text" size="38" custom-style=""></u-icon>
						</view>
					</view>
					<u-line margin="20rpx 0 20rpx"></u-line>
					<view>
						<view>
							<text class="font-weight font-28 pr-20">{{postInfo.intoWarehouseContact}}</text>
							<text class="clr-sub font-28">{{postInfo.intoWarehousePhone}}</text>
						</view>
						<u-text :text="postInfo.intoWarehouseAddress"
							size="24" margin="20rpx 0 0 0" color="#999" 
						></u-text>
					</view>
				</view>
				
				<view class="dt-block">
					<view class="dt-tle">
						<view class="t1">进仓货物总览</view>
						<view class="t2">
							<tpx-text-dic :value="billInfo.confirmStatus" :list="dicData.emis_wsin_tab"></tpx-text-dic>
						</view>
					</view>
					<u-line margin="20rpx 0 20rpx"></u-line>
					<view class="dt-item font-28">
						<view>
							<text class="pr-20 clr-sub">总重量:</text>
							<text class="">{{billInfo. totalWeight }} kg</text>
						</view>
						<view>
							<text class="pr-20 clr-sub">总体积:</text>
							<text class="">{{billInfo.totalVolume}}m³</text>
						</view>
						<view>
							<text class="pr-20 clr-sub">总件数:</text>
							<text class="">{{billInfo.totalParcelQty}}</text>
						</view>
					</view>
				</view>
				
				<view v-for="(item) in billInfo.stockInBatchList" class="dt-block" style="padding-bottom: 2rpx;">
					<view class="dt-tle">
						<view class="t1">进仓单号:{{item.inNo}}</view>
						<view class="t2">
							<!-- <text class="clr-prm">{{'部分入仓'}}</text> -->
						</view>
					</view>
					<u-line margin="20rpx 0 20rpx"></u-line>
					
					<view class="dt-item font-28">
						<view>
							<text class="pr-20 clr-sub">进仓时间:</text>
							<text class="font-weight">{{item.entryDate}}</text>
						</view>
						<view>
							<text class="pr-20 clr-sub">操作员:</text>
							<text class="font-weight">{{item.createByName}}</text>
						</view>
					</view>
					
					<view v-for="(gdItem) in item.cargoList" class="yditem">
						<view class="ydi-lab">
							<text class="font-weight">{{gdItem.goodsName}}</text>
							<text>异常:{{gdItem.abnormalQty}}</text>
						</view>
						<view class="ydi-lab mt-10">
							<text class="clr-sub">{{gdItem.brand}} - {{gdItem.nationArea}}</text>
							<text class="clr-prm">实入:{{gdItem.cargoQty}}</text>
						</view>
					</view>
					
					<view class="yditem" style="padding-bottom: 5rpx;">
						<view class="dt-item font-28">
							<view>
								<text class="pr-20 clr-sub">重量:</text>
								<text class="">{{item.totalWeight}} kg</text>
							</view>
							<view>
								<text class="pr-20 clr-sub">体积:</text>
								<text class="">{{item.totalVolume}}m³</text>
							</view>
							<view>
								<text class="pr-20 clr-sub">件数:</text>
								<text class="">{{item.totalParcelQty}}</text>
							</view>
						</view>
						
						<view class="dt-item font-28">
							<u-row>
								<text class="pr-20 clr-sub">包装类型:</text>
								<tpx-text-dic :value="item.packType" :list="dicData.emis_tab_packing_type"></tpx-text-dic>
							</u-row>
							<view>
								<text class="pr-20 clr-sub">供应商:</text>
								<text class="">{{item.prepareInSupplier}}</text>
							</view>
						</view>
						<view class="dt-item font-28">
							<view>
								<text class="pr-20 clr-sub">同行快递:</text>
								<text class="">{{item.prepareInExpress}}</text>
							</view>
							<view>
								<text class="pr-20 clr-sub">快递单号:</text>
								<text class="">{{item.prepareInBillCode}}</text>
							</view>
						</view>
						<view v-if="item.blPrepareInFreight == '1'" class="dt-item font-28">
							<view>
								<text class="pr-20 clr-sub">代垫运费:</text>
								<text class="font-weight clr-prm">￥{{item.prepareInEstFee}}</text>
							</view>
						</view>
						
						<view class="dt-item font-28">
							<view>
								<text class="pr-20 clr-sub">发货备注:</text>
								<text class=" ">{{item.prepareInRemark}}</text>
							</view>
						</view>
						
						<view class="dt-item font-28" style="margin-bottom: 10rpx;">
							<view>
								<text class="pr-20 clr-sub">仓库收货备注:</text>
								<text class=" ">{{item.remark}}</text>
							</view>
						</view>
						<view class="mb-20">
							<u-row>
								<u-image v-for="(sImgUrl, simIndex) in item.picUrl"
									@click="handlePreviewImgs(item.picUrl, simIndex)" :src="sImgUrl" width="100" height="50" mode="aspectFill"
									custom-style="margin: 20rpx 20rpx 0 0;"
								></u-image>
							</u-row>
						</view>
					</view>
					<u-row justify="end">
						<view style="display: inline-block;white-space: nowrap;" class="mt-10 pb-30">
							<u-row>
								<u-button v-if="item.confirmStatus!=1" @click="handleDialogClick(feedModal)" shape="circle" :plain="true"
									custom-style="height: 54rpx;margin-left: 20rpx;">反馈异常</u-button>
								
								<u-button v-if="billInfo.stockInFlag == 1" :disabled="item.confirmStatus==1" @click="confirmJinCang(item.inNo)" shape="circle" type="primary" 
									custom-style="height: 54rpx;margin-left: 20rpx;">
									{{item.confirmStatus==1?'已确认进仓':'进仓确认'}}
								</u-button>
								
							</u-row>					
						</view>
					</u-row>
					
				</view>
			</template>
			<template v-slot:footer>
				<view class="blcok-white-noradius">
					<u-row justify="space-around">
						<u-button @click="handleDownloadPdf()" :plain="true" size="large" shape="circle"  custom-style="margin: 0 10rpx;height:80rpx;font-size: 30rpx;"
						>下载PDF
						</u-button>
						<u-button v-if="billInfo.stockInFlag == 1" :disabled="billInfo.confirmStatus==1" @click="confirmJinCang()" type="primary" size="large" shape="circle"  custom-style="margin: 0 10rpx;height:80rpx;font-size: 30rpx;"
						>{{billInfo.confirmStatus==1?'已确认进仓':'确认可发货'}}
						</u-button>
					</u-row>
				</view>
			</template>
		</tpx-layout>
		
		
		<tpx-com-dialog v-model:show="feedModal.show" title="反馈内容" @onSure="handleSubmitFeed">
			<template v-slot:body>
				<u-input placeholder="请输入" custom-style="height: 56rpx;font-size: 28rpx;"></u-input>
			</template>
		</tpx-com-dialog>
	</tpx-page>
</template>

<script>
	import BpeAddressjiamiTmp from "@/components/buns-post-edit-templates/bpe-addressjiami-tmp"
	import BpeGoodstaticTmp from "@/components/buns-post-edit-templates/bpe-goodstatic-tmp"
	import * as apiService from "@/common/api"
	import { saveNetFile } from "@/common/untool"
	
	export default {
		components: { BpeAddressjiamiTmp, BpeGoodstaticTmp },
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		computed: {
			dicData() {
			  return this.$store.getters.dicData
			},
		},
		data() {
			return {
				pageLoading: true,
				queryOption: {
					inNo: '', // 进仓单号
				},
				billInfo: {},
				postInfo: {},
				feedModal: {
					show: false
				}
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad(option) {
			this.queryOption = option
			this.initData();
		},
		onUnload() {
		
		},
		methods: {
			initData() {
				this.inNo = this.queryOption.inNo
				this.inNo && (this.queryOrderDetail(this.queryOption))
			},
			async queryOrderDetail(params) {
				let res = await apiService.getWarehouseInInfo({...params, _loading: true})
				if(!res.data) {
					this.showToast("进仓单号数据不存在")
				}
				let data = res.data || {}
				data?.stockInBatchList?.map?.(t=> {
					t.picUrl && (t.picUrl = t.picUrl.split(","))
				})
				this.billInfo = data
				if(data.billCode) {
					let ores = await apiService.getOrderDetail({ billCode: data.billCode })
					this.postInfo = ores.data
				}
				this.pageLoading = false
			},
			handleDialogClick(curModal){
				curModal.show = !curModal.show
			},
			handleCopyWareHouse(){
				let { intoWarehouseName, intoWarehouseContact,intoWarehousePhone, intoWarehouseAddress } = this.postInfo
				let text = `仓库名称:${intoWarehouseName}\n仓库联系人:${intoWarehouseContact}\n仓库联系人电话：${intoWarehousePhone}\n仓库地址:${intoWarehouseAddress}`
				this.setClipboardData(text)
			},
			handlePreviewImgs(list = [], index) {
				uni.previewImage({
					current: index,
					urls: list
				})
			},
			async handleDownloadPdf(){
				let res = await apiService.exportWarehouseInTpl({ orderSn: this.postInfo.orderSn })
				let sres = await saveNetFile(res)
			},
			async confirmJinCang(inNo) {
				let confirmStatus = '2' // 部分入仓
				if(!inNo) {
					confirmStatus = '1' // 全部入仓
					inNo = this.billInfo.inNo
				}
				let res = await apiService.cusConfirmWsIn({ inNo, confirmStatus, _loading: true })
				this.initData()
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
	
</style>
<style scoped lang="scss">
	.dt-block {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #FFF;
		position: relative;
	}
	.dt-tle {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.t1 {
			font-size: 30rpx;
			font-weight: 600;
		}
		.t2{
			font-size: 30rpx;
		}
	}
	.dt-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
		justify-content: space-between;
	}
	
	.yditem{
		padding: 20rpx 20rpx;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.ydi-lab{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>