货无忧
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.
 
 
 
 
 

628 lines
13 KiB

<template>
<u-navbar title="客户订单扫描" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
:autoBack="true" leftIconSize='35'></u-navbar>
<view class="hdtp">
<view>
<view>
客户{{items.consignee}}
</view>
<view class="butlur" @click="showsdqs">
录入包条码
</view>
</view>
<view>
<view>备货是否完成{{items.isstock}}</view>
<view>装车是否完成{{items.isload}}</view>
</view>
</view>
<view class="hdtpnum">
<view>
<view>订单总数</view>
<view>{{items.ordNub}}</view>
</view>
<view>
<view>计划件数</view>
<view>{{items.reservationNum}}</view>
</view>
<view>
<view>装车件数</view>
<view>{{loadingNub}}</view>
</view>
<view>
<view>签收件数</view>
<view>{{items.signNub}}</view>
</view>
</view>
<view class="scinp">
<view>齐套状态</view>
<view>
<cusSelects @change='checktype' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145'
:clearable='true'></cusSelects>
</view>
<view class="inputs">
<input placeholder="请输入查询的订单号" v-model="inputtxt" />
</view>
<view @click="initpage" class="btscan">查询</view>
</view>
<view class="tabtip">
<view @click="setorderStatus(1)">
<view :class="orderStatus==1?'xz':''">定制品</view>
</view>
<view @click="setorderStatus(2)">
<view :class="orderStatus==2?'xz':''">库存品</view>
</view>
</view>
<scroll-view class="scve" scroll-y="true">
<view class="mabx">
<block v-for="(item,index) in datalist" :key="item">
<template v-if="orderStatus==1">
<view class="itec" @click="checkphon(index)">
<view class="contenbx1">
<view><text style="color: #90A0AF;"
@click.stop="goorderdetail(item)">订单编号</text>{{item.orderCode}}
</view>
</view>
<view class="contenbx1">
<view><text style="color: #90A0AF;">配送数</text>{{item.reservationNum}}</view>
<view><text style="color: #90A0AF;">已扫码数</text>{{item.loadingNub}}</view>
</view>
<view class="xialaxz" v-if="listcheckindex==index">
<view v-for="ite in item.distributionAppParcelListVOS">
<view>包条码:{{ite.orderPackageCode}}</view>
<view>货物品类:{{ite.thirdProduct}}</view>
<view>扫描状态:{{ite.isScan?ite.isScan:'未扫'}}</view>
</view>
</view>
<view v-if="item.complete"
:class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">
{{item.complete}}
</view>
<!-- 当有异常状态时, 显示异常状态 -->
<template v-if="item.isHaveAbnormalPackageName">
<view class="abnormalStyleContainer">
<view class="abnormalStyle">
{{item.isHaveAbnormalPackageName}}
</view>
</view>
</template>
</view>
</template>
<template v-if="orderStatus==2">
<view class="itec" @click="checkphon(index)">
<view class="contenbx1">
<view><text style="color: #90A0AF;">SKU:</text>{{item.sku}}</view>
</view>
<view class="contenbx1">
<view><text style="color: #90A0AF;">物品:</text>{{item.descriptionGoods}}</view>
<view><text style="color: #90A0AF;">规格:</text>{{item.specification}}</view>
</view>
<view class="contenbx1">
<view><text style="color: #90A0AF;">单位:</text>{{item.logpmUnit}}</view>
<!-- <view><text style="color: #90A0AF;">签收:</text>{{item.signforNub}}</view> -->
</view>
<!-- <view :class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">{{item.complete}}</view> -->
</view>
</template>
</block>
</view>
</scroll-view>
<tiplist ref="tiplists"></tiplist>
<saomiao2></saomiao2>
</template>
<script lang="ts" setup>
import {
deliveryorder,
signforinventory,
deliveryloadingscan,
deliveryloadinginventory,
postAbnormalTruckLoading
} from '@/api/user.js'
import {
onLoad,
onShow,
onHide,
onUnload
} from '@dcloudio/uni-app'
import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
import { computed, inject, reactive, ref, toRefs, watchEffect } from "vue";
const utils = inject('utils') as any
let details = reactive({
schanvalue: '',
typearr: [
{
value: 3,
label: '齐套'
},
{
value: 2,
label: '部分扫'
},
{
value: 1,
label: '未扫'
}
],
items: {} as any,
datalist: [],
scancode: '',
orderStatus: 1,
id: '',
orderType: 0,
inputtxt: '',
listcheckindex: -1,
isscan: false
})
const tiplists = ref(null)
onLoad((op) => {
details.items = JSON.parse(op.item)
details.id = op.id
})
function goorderdetail(item) {
uni.navigateTo({
url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
})
}
onShow(() => {
uni.$on('scancodedate', function (code) {
if (code) {
console.log(code);
details.scancode = code
details.isscan = true
scandata()
}
})
initpage()
})
onHide(() => {
uni.$off('scancodedate')
})
const loadingNub = computed(() => {
let num = 0
details.datalist.map(item => {
if (item.loadingNub) {
num += item.loadingNub
}
})
return num
})
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 })
}
})
}
async function initpage() {
let data = {
reservationId: details.items.id,
completecode: details.orderType,
orderCode: details.inputtxt
}
details.datalist = []
let response = null
if (details.orderStatus == 1) {
response = await deliveryorder(data)
} else if (details.orderStatus == 2) {
response = await signforinventory(data)
}
details.datalist = response.data.records || []
// if (loadingNub.value != 0 && details.isscan) {
// console.log(loadingNub.value + '件')
// setTimeout(() => {
// utils.ttsspke(loadingNub.value + '件')
// }, 1000)
// }
}
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
console.log(details.schanvalue)
}
})
}
function setorderStatus(state : number) {
details.orderStatus = state
initpage()
}
/** 扫描接口
* */
async function scandata() {
try {
let loadingId = uni.getStorageSync('checkvehicle').id
// 定制品
if (details.orderStatus == 1) {
let data = {
reservationId: details.items.id,
deliveryId: details.id,
loadingId,
type: 1,
barcode: details.scancode
}
let res = await deliveryloadingscan(data)
console.log(res);
const { code, audio } = res
// 异常装车
if (code === 5000) {
console.log(123123)
utils.ttsspke('不在本次计划, 是否继续装车')
// 开启弹出层
tiplists.value.setdetails({
isshow: true,
tipstate: 2,
title: '是否异常装车',
lsit: [],
isonecheck: true,
success: async (detail) => {
let loadingId = uni.getStorageSync('checkvehicle').id
let data = {
reservationId: details.items.id,
deliveryId: details.id,
loadingId,
type: 1,
barcode: details.scancode
}
// 提价异常装车请求
const res = await postAbnormalTruckLoading(data)
console.log('res :>> ', res);
tiplists.value.setdetails({ isshow: false })
},
cancel: () => {
tiplists.value.setdetails({ isshow: false })
},
close: () => {
tiplists.value.setdetails({ isshow: false })
}
})
}
// 窜货
if (code === 3001) utils.ttsspke(audio)
// 库存品
} else if (details.orderStatus == 2) {
let data = {
reservationId: details.items.id,
deliveryId: details.id,
loadingId,
type: 1,
barcode: details.scancode
}
let res = await deliveryloadinginventory(data)
console.log(res);
}
} catch (err) {
console.log('err :>> ', err);
//TODO handle the exception
} finally {
initpage()
}
}
function checkphon(index : number) {
// details.listcheckindex=index
if (details.listcheckindex == index) {
details.listcheckindex = -1
} else {
details.listcheckindex = index
}
}
const { listcheckindex, inputtxt, orderStatus, schanvalue, typearr, items, datalist } = toRefs(details)
</script>
<style lang="scss">
.xialaxz {
display: flex;
flex-direction: column;
>view {
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;
>view {
word-wrap: break-word;
word-break: break-all;
margin-right: 10upx;
&:nth-last-child(1) {
margin-right: 0upx;
}
}
}
}
.butlur {
width: 200upx !important;
height: 64upx !important;
background: #D3832A;
border-radius: 8upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32upx;
font-weight: 400;
color: #FFFFFF;
}
.tabtip {
display: flex;
align-items: center;
justify-content: space-between;
>view {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
font-size: 32upx;
font-weight: 400;
color: #90A0AF;
>view {
height: 80upx;
border-bottom: 8upx solid #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
.xz {
color: #D3832A;
border-bottom: 8upx solid #D3832A;
// border-radius: 5upx;
}
}
.hdtp {
padding: 34upx 32upx;
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 {
display: flex;
flex-direction: column;
align-items: center;
>.itec {
width: 686upx;
// height: 176upx;
background: #FFFFFF;
border-radius: 8upx;
padding: 36upx 24upx;
box-sizing: border-box;
position: relative;
margin-bottom: 20upx;
overflow: hidden;
&:nth-last-child(1) {
margin-bottom: 0;
}
>.contenbx1 {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28upx;
color: #092C4D;
margin-bottom: 20upx;
&:nth-last-child(1) {
margin-bottom: 0;
}
>view {
flex: 1;
}
}
.tip {
position: absolute;
right: 0;
top: 0;
width: 96upx;
height: 48upx;
border-radius: 0 8upx 0 8upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24upx;
}
.tp1 {
background-color: #0086F120;
color: #0086F1;
}
.tp2 {
background-color: #F8544B20;
color: #F8544B;
}
.tp3 {
background-color: #FA8C1620;
color: #FA8C16;
}
}
}
}
.scinp {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12upx 32upx;
box-sizing: border-box;
background-color: #ffffff;
>view:nth-of-type(1) {
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
.inputs {
width: 276upx;
height: 64upx;
background: #F5F5F6;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #EEEEEE;
padding: 10upx;
box-sizing: border-box;
font-size: 24upx;
font-weight: 400;
color: #AFB4BA;
>input {
flex: 1;
font-size: 24upx;
color: #092C4D;
}
}
.btscan {
width: 128upx;
height: 64upx;
background: #D3832A;
border-radius: 8upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32upx;
font-weight: 400;
color: #FFFFFF;
}
}
.hdtpnum {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
padding: 28upx 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;
margin-top: 20upx;
}
}
}
.abnormalStyleContainer {
top: -20upx;
left: -20upx;
position: absolute;
padding: 10upx;
border: 1upx solid #f8544b;
border-radius: 50%;
}
// 异常标签
.abnormalStyle {
font-size: 28upx;
height: 80upx;
width: 80upx;
display: flex;
align-items: center;
text-align: center;
color: #f8544b;
padding: 10upx;
border-radius: 50%;
border: 1upx solid #f8544b;
opacity: 0.6;
}
</style>