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

504 lines
12 KiB

<template>
<!-- <u-navbar title="拣货扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
<BasicContainer ref="basicContainer" :option="option" :leftClick="backPreviousPage">
<template #head>
<view class="schbox">
<view>拣货日期</view>
<view @click='showCalendar' class="inputsr">
<input :value='datatime' disabled placeholder="请选择时间" />
<view @click.stop.prevent>
<u-icon @click='showCalendar' style="margin-right: 10rpx;" v-if="!datatime" name="calendar"
color="#999999" size="50"></u-icon>
<u-icon @click="cleartime" style="margin-right: 10rpx;" v-else name="close-circle" color="#999999"
size="40"></u-icon>
</view>
</view>
<view @click="init">
查询
</view>
</view>
<view class="tabtip">
<view @click="setstate(0)">
<view :class="status==0?'xz':''">未完成</view>
</view>
<view @click="setstate(1)">
<view :class="status==1?'xz':''">完成</view>
</view>
</view>
</template>
<template #body>
<scroll-view class="sccv" scroll-y="true" @scrolltolower="jiazai">
<view class="mabx">
<view v-for="item in dataList" :key="item">
<view class="topbox">
<view class="type1">
<view>
<text style="color: #90A0AF;">配车类型</text>{{item.typeServiceStr}}
</view>
<view>
<text style="color: #90A0AF;">备货是否完成</text>{{item.stockupStatusStr}}
</view>
</view>
<view class="type1">
<view>
<text style="color: #90A0AF;">客户</text>{{item.customer}}
</view>
<view>
<text style="color: #90A0AF;">备货区域</text>{{item.stockupArea}}
</view>
</view>
<view class="type3">
<view>
<text style="color: #90A0AF;">库位</text>{{item.warehouseArea}}
</view>
</view>
<view class="type3">
<view>
<text style="color: #90A0AF;">托盘</text>{{item.trays}}
</view>
</view>
<view class="type2">
<view>
<view>订单总数</view>
<view>{{item.orderNum}}</view>
</view>
<view>
<view>计划备货件数</view>
<view>{{item.planNum}}</view>
</view>
<view>
<view>备货件数</view>
<view>{{item.realNum}}</view>
</view>
<view>
<view>库存品数</view>
<view>{{item.inventoryNub}}</view>
</view>
</view>
</view>
<view class="bts" v-if="Number(item.stockupStatus)!=40">
<!-- <view @click="submitsuccess">
备货完成
</view> -->
<view @click="gostockuplist(item)">
去备货
</view>
</view>
</view>
</view>
</scroll-view>
</template>
</BasicContainer>
<tips ref="tip"></tips>
<l-calendar v-model:value="show" :initStartDate='date[0]' :initEndDate='date[1]' @hide='showCalendar'
@change="onConfirm"></l-calendar>
<!-- <hd-calendar mode="range" color='#D3832A' minDate='2023-01-01' @confirm="onConfirm" /> -->
</template>
<script lang="ts" setup>
import {
onLoad,
onShow,
onHide,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
import { distributionStockuppageList } from '@/api/user.js'
import { pageData } from '@/interfaces/pagesHome/pickingScan'
import { timeType } from '@/interfaces/pagesHome/allType'
import { inject, reactive, ref, toRefs, watchEffect } from "vue";
import utils from '@/utils/utils';
const option = {
title: '拣货扫描',
haveData: true,
async pullDownRefreshInitPage() {
details.dataList = []
await init()
}
}
let details = reactive<pageData>({
datatime: '',
dataList: [],
show: false,
currentPage: 1,
size: 10,
stockupDate: '',
status: 0,
})
let tip = ref(null)
const basicContainer = ref(null)
const date = ref<number | string[]>([])
function showCalendar() {
details.show = !details.show
}
function onConfirm(e : any) {
console.log(e);
date.value[0] = e.startDate
date.value[1] = e.endDate
details.datatime = date.value[0] + ' 至 ' + date.value[1]
// details.datatime=(uni as any).$u.timeFormat(date.value[0], 'yyyy-mm-dd')+' 至 '+(uni as any).$u.timeFormat(date.value[1], 'yyyy-mm-dd')
}
watchEffect(() => {
if ((date.value as []).length != 0) {
details.datatime = date.value[0] + ' 至 ' + date.value[1]
}
})
onShow(() => {
// #ifdef APP
uni.$off('scancodedate')
// #endif
const timer = setTimeout(() => {
basicContainer.value.startPullDownRefresh()
clearTimeout(timer)
}, 200)
})
onLoad(() => {
date.value[0] = (uni as any).$u.timeFormat((new Date().valueOf() - 1000 * 60 * 60 * 24 * 3), 'yyyy-mm-dd')
date.value[1] = (uni as any).$u.timeFormat((new Date().valueOf()), 'yyyy-mm-dd')
utils.ttsspke('请选择拣货任务')
})
async function init() {
details.currentPage = 1
details.dataList = []
return initpage()
}
function jiazai() {
details.currentPage++
initpage()
}
async function initpage() {
try {
uni.showLoading({
title: '数据加载中',
mask: true
})
let data = {
current: details.currentPage,
size: details.size,
stockupDateStart: date.value[0],
stockupDateEnd: date.value[1],
status: details.status,
}
// for(let i=0;i<=1900;i++){
// await distributionStockuppageList(data)
// }
let response = await distributionStockuppageList(data)
if (response.code !== 200) return
if (details.currentPage == 1 && response.data) {
details.dataList = response.data.records
} else {
if (response.data.records.lngth == 0) {
uni.showToast({
title: '已经到底了。',
icon: 'none'
})
details.currentPage--
return
}
details.dataList = details.dataList.concat(response.data.records)
}
// details.dataList=response.data.records
} catch (e) {
//TODO handle the exception
} finally {
uni.hideLoading()
}
}
function checktime(event : timeType) {
console.log(event);
details.datatime = (uni as any).$u.timeFormat(event.value, 'yyyy-mm-dd');
details.show = false
console.log(details.datatime);
}
function gostockuplist(item : any) {
// uni.navigateTo({
// url: '/pagesHome/pages/PickingScanList/PickingScanList?id=' + item.id + '&stockupArea=' + item.stockupArea,
// })
uni.reLaunch({
url: '/pagesHome/pages/PickingScanList/PickingScanList?id=' + item.id + '&stockupArea=' + item.stockupArea,
})
}
function cleartime() {
// console.log(1231211);
details.datatime = ''
date.value = []
basicContainer.value.startPullDownRefresh()
}
function setstate(state : number) {
details.status = state
basicContainer.value.startPullDownRefresh()
}
function submitsuccess() {
tip.value.setdetails({
title: '提示',
content: '确认备货完成?',
confirmTxt: '确认',
isshow: true,
isshowcancel: true,
success: () => {
tip.value.setisshow(false)
},
cancel: () => {
tip.value.setisshow(false)
},
close: () => {
tip.value.setisshow(false)
}
})
}
// 返回上一级页面
function backPreviousPage() {
console.log('1123 :>> ', 1123);
uni.reLaunch({
url: '/pages/index/index'
})
}
const { datatime, dataList, show, status } = toRefs(details)
</script>
<style lang="scss">
.inputsr {
width: 400upx !important;
height: 64upx;
background: #F5F5F6;
border-radius: 8upx 8upx 8upx 8upx;
opacity: 1;
border: 2upx solid #EEEEEE;
padding: 16upx 18upx;
box-sizing: border-box;
padding-right: 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 26upx;
font-weight: 400;
color: #092C4D;
>input {
flex: 1;
font-size: 26upx;
}
}
.sccv {
width: 100%;
height: 74vh;
margin-top: 20upx;
.mabx {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 20upx 32upx;
padding-top: 0upx;
>view {
width: 686upx;
background: #FFFFFF;
display: flex;
flex-direction: column;
box-sizing: border-box;
border-bottom: 1upx solid #ebebeb;
padding-bottom: 30upx;
background-color: #ffffff;
margin-bottom: 20upx;
padding-top: 20upx;
border-radius: 8upx;
>view:nth-last-child(1) {
border-bottom: none !important;
}
.topbox {
display: flex;
flex-direction: column;
padding: 24upx;
border-bottom: 2upx solid #EEEEEE;
>.type1 {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20upx;
font-size: 28upx;
color: #161616;
>view {
width: 50%;
}
}
>.type2 {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 15upx;
font-size: 28upx;
color: #161616;
margin-top: 20upx;
>view {
display: flex;
flex-direction: column;
align-items: center;
>view:nth-of-type(1) {
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: #3AD8BC;
}
}
&:nth-of-type(3) {
>view:nth-of-type(2) {
color: #FA8C16;
}
}
>view:nth-of-type(2) {
font-size: 36upx;
margin-top: 10upx;
}
}
}
>.type3 {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20upx;
font-size: 26upx;
color: #161616;
}
}
>.bts {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20upx;
>view:nth-of-type(1) {
width: 204upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #0086F1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28upx;
font-weight: 400;
color: #0086F1;
}
>view:nth-of-type(2) {
width: 204upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #D3832A;
display: flex;
align-items: center;
justify-content: center;
font-size: 28upx;
font-weight: 400;
color: #D3832A;
margin-left: 100upx;
}
}
}
}
}
.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;
}
}
.schbox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15upx 32upx;
box-sizing: border-box;
background-color: #ffffff;
>view:nth-of-type(1) {
// width: 150upx;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
>view:nth-of-type(2) {
width: 380upx;
// height: 64upx;
}
>view:nth-of-type(3) {
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;
}
}
</style>