货无忧
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1046 lines
23 KiB

<template>
<BasicContainer ref="basicContainer" :option="option" :leftClick="leftClick">
<template #head>
<view class="hdtp">
<view>
<view>
配载批次{{details.pageInfo.carsNo}}
</view>
<view class="butlur" v-if="Number(details.pageType) !== 2" @click="showsdqs">
录入包条码
</view>
<view class="butlur" v-else @click="showsdqs">
录入托盘码
</view>
</view>
<view>
<view>司机名称:{{details.pageInfo.driverName}}</view>
<view>司机电话:{{details.pageInfo.driverMobile}}</view>
</view>
<view>
<view>车牌号:{{details.pageInfo.carNumber}}</view>
</view>
<view>
<view>路线:{{details.pageInfo.carsLineName}}</view>
</view>
<!-- <view>
<view>备货是否完成:{{items.isstock}}</view>
<view>装车是否完成:{{items.isload}}</view>
</view> -->
</view>
<view class="hdtpnum">
<view>
<view>订单总数</view>
<view>{{items.orderNum || 0}}</view>
</view>
<view>
<view>计划件数</view>
<view>{{details.pageInfo.planLoadingNumber || 0}}</view>
</view>
<view>
<view>装车件数</view>
<view>{{details.pageInfo.realLoadingNumber || 0}}</view>
</view>
<view>
<view>卸车数</view>
<view>{{details.pageInfo.realLoadingNumber || 0}}</view>
</view>
</view>
<view class="tabtip">
<view @click="setorderStatus(1)" :class="orderStatus==1?'active':''">
<view>定制品</view>
</view>
<view @click="setorderStatus(2)" :class="orderStatus==2?'active':''">
<view>零担</view>
</view>
<view @click="setorderStatus(3)" :class="orderStatus==3?'active':''">
<view>异常</view>
</view>
</view>
</template>
<template #body>
<jp-virtual-list ref="jpScorllView" :style="{height: details.jpScorllViewHeight}" code="id"
class="jpScorllView" :refresher="false" :data="datalist">
<template v-slot="{ list }">
<view v-for="item in list" :key="item.orderCode" :id="item.orderCode" :ref="item.orderCode">
<template v-if="Number(orderStatus) !== 3">
<PullDownBox>
<template #title>
<view class="contenbx1">
<view style="flex: 1;">
<view>订单号:</view>
<view class="">
{{item.orderCode}}
</view>
</view>
<view style="flex: 1;">
<view>运单号:</view>
<view class="">
{{item.waybillNo}}
</view>
</view>
</view>
<view class="contenbx1">
<view>
<text>订单总数:</text>
{{item.totalNum}}
</view>
<view>
<text>
装车数/卸车数:
</text>
{{item.loadingNum + '/' + item.unloadNum}}
</view>
</view>
</template>
<template #content>
<u-divider text="详情"></u-divider>
<block v-for="value in item.unloadPackageList" :key="value.name">
<view class="details_container">
<!-- 定制品 -->
<template v-if="Number(orderStatus) === 1">
<view class="flex-c-sb">
<view class="">
包条码: {{value.orderPackageCode}}
</view>
<view class="flex1" style="display: flex; align-items: center; margin-left:5px;">
卸车状态:
<view class="tip">
{{Number(value.scanStatus) === 1? '已装车': Number(value.scanStatus) === 2? '已卸车': '已签收'}}
</view>
</view>
</view>
<view class="flex-c-sb mt10">
<view class="flex1">
托盘名称: {{value.trayName || '暂无数据'}}
</view>
<view class="flex1">
托盘码: {{value.trayCode || '暂无数据'}}
</view>
</view>
</template>
<!-- 零担 -->
<template v-if="Number(orderStatus) === 2">
<view class="flex-c-sb" @click="handleZeroStowage(item, value)">
<view class="flex1">
产品名称: {{value.orderPackageCode}}
</view>
<view class="flex1">
装车数/卸车数: {{value.num + '/' + (value.unloadNum || 0)}}
</view>
</view>
<view class="flex-c-sb mt10">
<view class="flex1">
托盘名称: {{value.trayName || '暂无数据'}}
</view>
<view class="flex1">
托盘码: {{value.trayCode || '暂无数据'}}
</view>
</view>
</template>
</view>
</block>
</template>
</PullDownBox>
</template>
<template v-else>
<view class="abnormal">
<view class="flex-c-sb" style="zoom: 0.9;">
<view class="flex1">
包条码: {{item.scanCode}}
</view>
<view class="flex1" style="display: flex; align-items: center; margin-left:5px;">
卸车状态:
<view class="tip">
{{Number(item.scanStatus) === 1? '已装车': Number(item.scanStatus) === 2? '已卸车': '已签收'}}
</view>
</view>
</view>
<view class="flex-c-sb mt10" style="zoom: 0.9;">
<view class="flex1">
托盘名称: {{item.trayName || '暂无数据'}}
</view>
<view class="flex1">
托盘码: {{item.trayCode || '暂无数据'}}
</view>
</view>
</view>
</template>
</view>
</template>
</jp-virtual-list>
</template>
</BasicContainer>
<tiplist ref="tiplists">
</tiplist>
<!-- 零担装车 -->
<PopUp ref='ZeroStowage'>
<scroll-view scroll-y="true">
<view class="contenbx1">
<view><text style="color: #90A0AF;">订单编号:</text>{{details.zeroInfo.orderCode}}
</view>
</view>
<view class="contenbx1">
<view><text style="color: #90A0AF;">运单号:</text>{{details.zeroInfo.waybillNo}}
</view>
</view>
<view class="contenbx1">
<view><text style="color: #90A0AF;">物料名称:</text>{{details.zeroInfo.orderPackageCode}}
</view>
</view>
<view class="flex-c-sb">
<view><text style="color: #90A0AF;">装车数:</text>{{details.zeroInfo.num || 0}}</view>
<view><text style="color: #90A0AF;">卸车数:</text>{{details.zeroInfo.unloadNum || 0}}</view>
</view>
<inputNum :minNum="0" :maxNum="details.zeroInfo.num" v-model="details.zeroInfo.unloadNum" />
</scroll-view>
</PopUp>
<!-- 定制品异常装车 -->
<PopUp ref='OrderStowage'>
<scroll-view scroll-y="true">
<view class="">
当前包件未在本次计划, 是否异常卸车
</view>
<view class="">
包条码: {{details.scancode}}
</view>
</scroll-view>
</PopUp>
<!-- 整托卸车 -->
<PopUp ref='TrayStowage'>
<view>托盘名称:{{details.trayInfo.trayName}}</view>
<view>托盘码:{{details.trayInfo.trayCode}}</view>
<scroll-view style="margin-top: 10px; height: 50vh; zoom: 0.9" scroll-y="true">
<view class="">
零担:
</view>
<block v-for="item in details.trayInfo.zeroList" :key="item.scanCode">
<view class="pop_row">
<view>订单号:{{item.orderCode}}</view>
<view>运单号:{{item.waybillNo}}</view>
<view class="flex-c-sb">
<view>产品名称:{{item.scanCode}}</view>
<view>数量:{{item.num}}</view>
</view>
</view>
</block>
<view class="mt10">
定制品:
</view>
<block v-for="item in details.trayInfo.packageList" :key="item">
<view class="pop_row">
<view>订单号{{item.orderCode}}</view>
<view class="flex-c-sb">
<view>包条码{{item.scanCode}}</view>
<view>数量{{item.num}}</view>
</view>
</view>
</block>
</scroll-view>
</PopUp>
<!-- #ifdef APP -->
<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
<!-- #endif -->
</template>
<script lang="ts" setup>
import {
postCarsLoadUnloadPackage,
postArriveUnloadCarsDetail,
postCarsLoadUnloadZero,
postFindUnloadTrayGoodsList,
postUnloadTray
} from '@/api/user.js'
import {
onLoad,
onShow,
} from '@dcloudio/uni-app'
import { computed, inject, nextTick, onMounted, reactive, ref, toRefs, } from "vue";
import useSystemSettingsStore from '@/store/useSystemSettingsStore';
import { storeToRefs } from 'pinia';
const { scanState } = storeToRefs(useSystemSettingsStore())
const utils = inject('utils') as any
const option = reactive({
title: '配载按件卸车',
haveData: true,
async pullDownRefreshInitPage() {
return await initpage()
},
})
let details = reactive({
schanvalue: '',
typearr: [
{
value: 3,
label: '齐套'
},
{
value: 2,
label: '部分扫'
},
{
value: 1,
label: '未扫'
}
],
items: {} as any,
datalist: [],
scancode: '',
orderStatus: 1,
loadId: '',
orderType: 0,
inputtxt: '',
listcheckindex: -1,
isscan: false,
order: [],
zero: [],
pageInfo: {},
// 零担详情装车列表
zeroList: [],
/** 页面类型 1: 按件装车 2: 整托卸车 */
pageType: 1,
/** 整托渲染列表 */
trayInfo: {
zeroList: [],
packageList: []
},
/** 卸车的零担信息 */
zeroInfo: {},
jpScorllViewHeight: ''
})
// 获取组件实例
const tiplists = ref(null)
const basicContainer = ref(null)
/** 零担装车 */
const ZeroStowage = ref()
/** 定制品异常装车 */
const OrderStowage = ref()
/** 整托卸车 */
const TrayStowage = ref()
const jpScorllView = ref()
onLoad((op) => {
details.loadId = op.id
details.pageType = op.type
option.title = Number(op.type) === 2 ? '配载整托卸车' : '配载按件卸车'
let content = ''
if (Number(details.pageType) === 1) content = '请扫描包件码'
else if (Number(details.pageType) === 2) content = '请扫描托盘码'
// #ifdef APP
utils.ttsspke(content)
// #endif
})
/** 查看订单详情 -- 上架数据(保留页面, 后续跳详情直接cv) */
function goorderdetail(item) {
uni.navigateTo({
url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
})
}
onShow(async () => {
// #ifdef APP
uni.$off('scancodedate')
uni.$on('scancodedate', function (code) {
if (code) {
console.log('code', code);
details.scancode = code
details.isscan = true
scandata()
}
})
// #endif
await nextTick()
// 请求页面
// const timer = setTimeout(() => {
basicContainer.value.startPullDownRefresh()
// clearTimeout(timer)
// }, 10)
})
onMounted(async () => {
// 等待子组件加载完毕
await nextTick()
console.log('uni.getSystemInfoSync ().windowHeight :>> ', uni.getSystemInfoSync().windowHeight);
console.log('jpScorllView :>> ', jpScorllView.value.clientHeight);
details.jpScorllViewHeight = await utils.getViewDistanceFormTop('.jpScorllView')
// uni.getSystemInfo({
// success: resu => {
// const query = uni.createSelectorQuery();
// // 获取当前swiper距离顶部的位置
// query.select('.jpScorllView').boundingClientRect();
// query.exec(res => {
// // 屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度,然后动态赋值给swiperHeight
// details.jpScorllViewHeight = resu.windowHeight - res[0].top + 'px';
// console.log('页面的剩余高度', details.jpScorllViewHeight);
// });
// },
// fail: res => { }
// });
})
function showsdqs() {
tiplists.value.setdetails({
isshow: true,
tipstate: 1,
title: '请输入扫描的码',
placeholder: '请输入扫描的码',
inputtext: '',
success: (detail) => {
details.scancode = detail.inputtext
scandata()
tiplists.value.setdetails({ isshow: false })
},
cancel: () => {
tiplists.value.setdetails({ isshow: false })
},
close: () => {
tiplists.value.setdetails({ isshow: false })
}
})
}
/** 请求页面 -- 按件装车 */
const initPageByOrder = async () => {
try {
const response = await postArriveUnloadCarsDetail({
loadId: details.loadId
})
const { code, data } = response
console.log('response :>> ', response);
if (code === 200) {
details.pageInfo = data
details.datalist = details.orderStatus === 1 ?
details.pageInfo.unloadScanOrderList :
details.orderStatus === 2 ?
details.pageInfo.unloadZeroList :
details.pageInfo.exceptionList
}
} catch (e) {
//TODO handle the exception
} finally {
return null
}
}
/** 请求页面数据 */
async function initpage() {
try {
// 按件请求页面
const res = await initPageByOrder()
} catch (err) {
console.log('err :>> ', err);
//TODO handle the exception
} finally {
console.log('details.datalist :>> ', details.datalist);
return null
}
}
function checktype(e) {
if (e == '') {
details.schanvalue = ''
details.orderType = 0
}
details.typearr.map(item => {
if (item.value == e) {
details.schanvalue = item.label
details.orderType = item.value
}
})
}
/**
* 切换tabBer状态
* @param {type} state 选中的状态
*/
function setorderStatus(state : number) {
if (details.orderStatus === state) return
details.orderStatus = state
details.datalist = details.orderStatus === 1 ?
details.pageInfo.unloadScanOrderList :
details.orderStatus === 2 ?
details.pageInfo.unloadZeroList :
details.pageInfo.exceptionList
// for (let i = 0; i < 1000; i++) {
// details.datalist.push({ orderCode: i, unloadPackageList: [] })
// }
// return
console.log('details.datalist :>> ', details.datalist);
}
/** 包件卸车 -- 单个 */
const handleOrderStowage = async (_scanCode) => {
try {
uni.showLoading({
mask: true
})
const submitData = {
orderPackageCode: _scanCode,
loadId: details.loadId
}
const res = await postCarsLoadUnloadPackage(submitData)
return res
} catch (err) {
console.log('err :>> ', err);
//TODO handle the exception
} finally {
uni.hideLoading()
// 刷新
basicContainer.value.startPullDownRefresh()
}
}
/** 扫描包件 */
const scanOrder = async () => {
OrderStowage.value.details.showPopUp = false
let _scanCode = details.scancode
// 是否存在该包件
let isHave = false
// 该包件是否已被卸车或签收
let returnContent = ''
// 该包件是否有托盘信息
let _trayCode = ''
for (let item of details.pageInfo.unloadScanOrderList) {
let isBreak = false
for (let val of item.unloadPackageList) {
if (_scanCode === val.orderPackageCode) {
isHave = true
isBreak = true
if (Number(val.scanStatus) === 2) {
returnContent = '该包件已卸车'
} else if (Number(val.scanStatus) === 3) {
returnContent = '该包件已签收'
}
if (val.trayCode) {
_trayCode = val.trayCode
}
}
}
if (isBreak) break
}
if (returnContent) {
// #ifdef APP
utils.ttsspke(returnContent)
// #endif
uni.showToast({
title: returnContent,
icon: 'none'
})
return
}
if (!isHave) {
OrderStowage.value.setDetails({
title: '异常装车',
showPopUp: true,
async success() {
try {
const submitData = {
orderPackageCode: _scanCode,
loadId: details.loadId
}
const res = await postCarsLoadUnloadPackage(submitData)
return res
} catch (err) {
console.log('err :>> ', err);
//TODO handle the exception
} finally {
OrderStowage.value.details.showPopUp = false
// 刷新
basicContainer.value.startPullDownRefresh()
}
}
})
return
}
if (_trayCode) {
tiplists.value.setdetails({
isshow: true,
tipstate: 2,
list: [],
isonecheck: true,
title: '是否整托装车',
success: () => {
tiplists.value.setdetails({ isshow: false })
// 整托卸车
scanTray()
},
cancel: async () => {
tiplists.value.setdetails({ isshow: false })
handleOrderStowage(_scanCode)
},
close: () => {
tiplists.value.setdetails({ isshow: false })
}
})
details.scancode = _trayCode
return
}
handleOrderStowage(_scanCode)
}
/** 扫描托盘 */
const scanTray = async () => {
const submitData = {
trayCode: details.scancode,
loadId: details.loadId
}
const res = await postFindUnloadTrayGoodsList(submitData)
const { code, data } = res
if (code !== 200) return res
details.trayInfo.zeroList = data.filter(val => {
return Number(val.type) === 2
})
details.trayInfo.packageList = data.filter(val => {
return Number(val.type) === 1
})
details.trayInfo.trayCode = data[0].trayCode
details.trayInfo.trayName = data[0].trayName
TrayStowage.value.setDetails({
title: '整托卸车',
showPopUp: true,
async success() {
try {
uni.showLoading({
mask: true
})
const res = await postUnloadTray(submitData)
if (res.code !== 200) return
uni.showToast({
title: '装车成功',
icon: 'none'
})
TrayStowage.value.details.showPopUp = false
} catch (e) {
//TODO handle the exception
} finally {
uni.hideLoading()
basicContainer.value.startPullDownRefresh()
}
},
close() {
TrayStowage.value.details.showPopUp = false
}
})
// return res
}
/** 扫描接口
* */
function scandata() {
// 按件卸车
if (Number(details.pageType) === 1) scanOrder()
else if (Number(details.pageType) === 2) scanTray()
}
/** 返回上一页 */
const leftClick = () => {
uni.navigateBack()
}
/** 零担 -- 单独卸车 */
const handleZeroSoleStowage = (_item, _value) => {
details.zeroInfo = { waybillNo: _item.waybillNo, orderCode: _item.orderCode, ..._value }
details.zeroInfo.unloadNum = details.zeroInfo.num
ZeroStowage.value.setDetails({
title: '零担卸车',
showPopUp: true,
success() {
console.log('details.zeroInfo :>> ', details.zeroInfo);
const submitData = {
loadId: details.loadId,
waybillNo: details.zeroInfo.waybillNo,
orderCode: details.zeroInfo.orderCode,
productName: details.zeroInfo.orderPackageCode,
enterNum: details.zeroInfo.unloadNum
}
postCarsLoadUnloadZero(submitData)
}
})
}
/** 零担卸车 */
const handleZeroStowage = (_item, _value) => {
// 检测该零担是否符合卸车要求
let content = ''
if (Number(_value.scanStatus) === 2) {
content = '该零担已卸车'
}
else if (Number(_value.scanStatus) === 2) {
content = '该零担已签收'
}
if (content) {
// #ifdef APP
utils.ttsspke(content)
// #endif
uni.showToast({
title: content,
icon: 'none'
})
return
}
// 检测该零担是否有托盘信息; 有: 询问是否整托卸车, 当在整托卸车时, 不允许单独卸车
if (_value.trayCode) {
tiplists.value.setdetails({
isshow: true,
tipstate: 2,
list: [],
isonecheck: true,
title: '是否整托装车',
success: () => {
tiplists.value.setdetails({ isshow: false })
// 整托卸车
scanTray()
},
cancel: () => {
tiplists.value.setdetails({ isshow: false })
if (Number(details.pageType) === 2) return
handleZeroSoleStowage(_item, _value)
},
close: () => {
tiplists.value.setdetails({ isshow: false })
}
})
details.scancode = _value.trayCode
return
}
if (Number(details.pageType) === 2) return
handleZeroSoleStowage(_item, _value)
}
const { orderStatus, items, datalist } = toRefs(details)
</script>
<style lang="scss" scoped>
.xialaxz {
display: flex;
flex-direction: column;
.box {
display: flex;
align-items: flex-start;
justify-content: space-between;
border-top: 1upx solid #00000010;
padding: 20upx 0;
box-sizing: border-box;
font-size: 28upx;
color: #092C4D;
flex-wrap: wrap;
>view {
min-width: 50%;
word-wrap: break-word;
word-break: break-all;
&:nth-last-child(1) {
margin-right: 0upx;
}
}
}
}
.butlur {
width: 200upx !important;
height: 64upx !important;
background: var(--subjectColor);
border-radius: 8upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32upx;
font-weight: 400;
color: #FFFFFF;
}
.tabtip {
display: flex;
background-color: #fff;
>view {
padding: 20upx 0;
flex: 1;
position: relative;
text-align: center;
&::after {
content: '';
display: block;
position: absolute;
width: 0%;
height: 6upx;
background: var(--subjectColor);
bottom: 3upx;
left: 50%;
transform: translateX(-50%);
transition: all .3s;
}
&.active {
&::after {
content: '';
display: block;
width: 100%;
}
}
}
}
.hdtp {
padding: 34upx 32upx 0;
box-sizing: border-box;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
>view {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
margin-bottom: 24upx;
&:nth-last-child(1) {
margin-bottom: 0;
}
>view {
width: 50%;
// flex: 1;
}
}
}
.scve {
width: 100%;
height: 50vh;
margin-top: 20upx;
.mabx {
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
background: #FFFFFF;
}
}
.contenbx1 {
display: flex;
justify-content: space-between;
font-size: 28upx;
color: #092C4D;
margin-bottom: 20upx;
&:nth-last-child(1) {
margin-bottom: 0;
}
// >view {
// flex: 1;
// }
}
.hdtpnum {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
padding: 20upx 0;
border-bottom: 3upx solid #EEEEEE;
>view {
display: flex;
align-items: center;
flex-direction: column;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
&:nth-of-type(1) {
>view:nth-of-type(2) {
color: #092C4D;
}
}
&:nth-of-type(2) {
>view:nth-of-type(2) {
color: #0086F1;
}
}
&:nth-of-type(3) {
>view:nth-of-type(2) {
color: #3AD8BC;
}
}
&:nth-of-type(4) {
>view:nth-of-type(2) {
color: #FA8C16;
}
}
>view:nth-of-type(2) {
font-size: 36upx;
font-weight: 400;
color: #092C4D;
}
}
}
.flex-c-sb {
display: flex;
align-items: center;
justify-content: space-between;
}
// 按钮
.button {
padding: 10upx 15upx;
background: var(--subjectColor);
color: #fff;
border-radius: 5upx;
width: auto;
display: inline-block;
font-size: 28upx;
&.abnormalBtn {
background: #f8544b;
}
}
// 异常
.abnormal {
padding: 10upx;
background: #fff;
margin: 5upx 0;
}
.w100 {
width: 100%;
}
.input {
padding: 10upx 20upx;
border: 1upx solid #aaa;
border-radius: 10upx;
margin: 5upx 0 20upx;
}
.pop_row {
padding: 10upx 0;
border-bottom: 1upx solid #aaa;
}
// 分界线
:deep(.u-divider) {
margin: 10upx 0;
}
:deep(.u-divider__text) {
font-size: 28upx !important;
}
// 详情
.details_container {
font-size: 28upx;
zoom: 0.9;
border-bottom: 1upx solid #FA8C16;
padding: 15upx 0;
&:last-child {
border-bottom: 0upx;
}
}
.mt10 {
margin-top: 10upx;
}
.flex1 {
flex: 1;
}
// 标签
.tip {
padding: 10upx 15upx;
background: var(--subjectColor);
color: #fff;
border-radius: 5upx;
margin-left: 10upx;
}
.h100 {
height: 40vh;
}
</style>