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

454 lines
10 KiB

<template>
<BasicContainer ref="basicContainer" :option="option" :leftClick="backPreviousPage">
<template #head>
<view class="hedtopt">
<view class="typto">
<view>备货编码{{items.stockupCode}}</view>
</view>
<view class="typto">
<view>备货状态{{items.stockupStatusName}}</view>
<view>备货类型{{items.deliveryTypeName}}</view>
</view>
</view>
</template>
<template #body>
<scroll-view class="scoolv" scroll-y="true">
<view class="minbx">
<template v-if="datalist.length !== 0">
<view class="its" @click="goCustomerOrdersDetails(item)" v-for="item in datalist" :key="item">
<view class="titl">
客户{{item.consignee}}
</view>
<view class="contsx">
<view class="content">
<!-- <view><text style="color: #90A0AF;">备货是否完成</text>{{item.stockStatusName}}</view> -->
<view><text style="color: #90A0AF;">备货类型</text>{{item.deliveryTypeName}}</view>
</view>
<view class="content mt10">
<view><text style="color: #90A0AF;">商场名称</text>{{item.marketName || '暂无数据'}}</view>
</view>
<view class="total mt10">
<view>
<view>订单总数</view>
<view>{{item.orderNum ||0}}</view>
</view>
<view>
<view>库存品数量</view>
<view>{{item.inventoryNum || 0}}</view>
</view>
<view>
<view>计划件数</view>
<view>{{item.planNum || 0 }}</view>
</view>
<view>
<view>已备数量</view>
<view>{{item.scanNum || 0}}</view>
</view>
</view>
</view>
</view>
</template>
</view>
</scroll-view>
</template>
</BasicContainer>
<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
<tiplist ref="tiplists"></tiplist>
<tips ref="tip"></tips>
</template>
<script lang="ts" setup>
import {
distributionStockupNewClientDetail,
distributionStockuppageListClient,
postUpShelfScanAllocation
} from '@/api/user.js'
import {
onLoad,
onShow,
onHide,
onPullDownRefresh
} from '@dcloudio/uni-app'
import { nextTick, reactive, ref, toRefs } from "vue";
import utils from '@/utils/utils';
// 引入pinia仓库
import { useUserStore } from '@/store/uaeUserStore.js';
import useSystemSettingsStore from '@/store/useSystemSettingsStore';
import useStorageStore from '@/store/useStorageStore.js';
import { storeToRefs } from 'pinia';
// 是否后台监控扫描
const { scanState } = storeToRefs(useSystemSettingsStore())
// 检测扫描的是否为库位
const { HANDLE_ISSTORAGECODE } = useStorageStore()
// 用户信息
const { userInfo } = storeToRefs(useUserStore())
//获取组件实例
const tiplists = ref(null)
const basicContainer = ref(null)
const option = {
title: '拣货客户列表',
haveData: true,
async pullDownRefreshInitPage() {
return await initpage()
},
haveReachBottom: false,
isFixed: true
}
let details = reactive({
/** 备货任务id */
stockupId: '',
datalist: [],
items: {} as any,
scancode: '',
authbuts: uni.getStorageSync('authbuts'),
stockupArea: '',
/** 搜索框的值 */
searchValue: '',
/** 备货库位信息 */
stockUpStorageInfo: {
/** 备货库位ID */
stockupAllocationId: '',
/** 备货库位名称 */
stockupAllocationName: ''
}
})
const tip = ref(null)
onLoad((op) => {
details.stockupId = op.stockupId
// #ifdef APP
// utils.ttsspke('请扫描备货库位')
// #endif
})
onShow(async () => {
// initpage()
uni.$off('scancodedate')
uni.$on('scancodedate', function (code) {
if (code) {
console.log(code);
details.scancode = code
scandata()
}
})
// 延时调用组件刷新函数
await nextTick()
basicContainer.value.startPullDownRefresh()
})
// 初始化请求页面数据
async function initpage() {
let submitData = {
stockupId: details.stockupId
}
let response = await distributionStockupNewClientDetail(submitData)
// const response = await distributionStockuppageListClient(submitData)
const { code, data } = response
if (code !== 200) return
details.datalist = []
console.log('data :>> ', data);
details.items = data.data[0]
details.datalist = data.data[0].stockUpClientVOList
// details.datalist = data.orderList
}
function goCustomerOrdersDetails(item) {
// if (!details.stockUpStorageInfo.stockupAllocationId) return utils.handleToast('请扫描备货库位')
uni.navigateTo({
// url: '/pagesHome/pages/StockUplist/StockUplist?item='
// + JSON.stringify(item) + '&id=' + item.reservationId
// + '&stockupId=' + details.stockupId
// + '&stockupAllocationId=' + details.stockUpStorageInfo.stockupAllocationId
// + '&stockupAllocationName=' + details.stockUpStorageInfo.stockupAllocationName
url: '/pagesHome/pages/StockUplist/StockUplist?reservationId='
+ item.reservationId + '&typeService=' + item.typeService + '&stockupId=' + details.stockupId
})
}
const { items, datalist } = toRefs(details)
// 扫码后执行的回调函数
async function scandata() {
if (details.stockUpStorageInfo.stockupAllocationId === details.scancode) return utils.handleToast('当前已在该备货区')
if (!HANDLE_ISSTORAGECODE(details.scancode)) return utils.handleToast('该码值不是库位码')
const submitData = { allocationId: details.scancode }
const res = await postUpShelfScanAllocation(submitData)
const { code, data } = res
if (code !== 200) return
if (!data) return utils.handleToast('请扫描备货库位')
tip.value.setdetails({
title: '是否切换备货区',
content: `备货区:${data.qrCode}`,
confirmTxt: '确认',
isshow: true,
isshowcancel: true,
success: async () => {
details.stockUpStorageInfo.stockupAllocationId = data.id
details.stockUpStorageInfo.stockupAllocationName = data.qrCode
utils.handleToast('切换成功')
tip.value.setisshow(false)
},
cancel: () => {
tip.value.setisshow(false)
},
close: () => {
tip.value.setisshow(false)
}
})
}
// 返回上一级页面
function backPreviousPage() {
uni.navigateBack()
}
</script>
<style lang="scss" scoped>
@import url(@/utils/style/common.scss);
.topBox {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 10upx;
border-radius: 10upx;
.searchInput {
margin-right: 10upx;
background: #eee;
padding: 12upx 20upx;
flex: 1;
}
}
// 按钮样式
.button {
padding: 10upx 40upx;
border-radius: 5upx;
background-color: var(--subjectColor);
color: #fff;
}
.scoolv {
width: 100%;
height: 70vh;
margin-top: 20upx;
.minbx {
display: flex;
flex-direction: column;
align-items: center;
>.its {
display: flex;
flex-direction: column;
align-items: center;
width: 686upx;
background: #FFFFFF;
border-radius: 8upx;
// padding:0upx 0;
box-sizing: border-box;
margin-bottom: 20upx;
&:nth-last-child(1) {
margin-bottom: 0;
}
.titl {
width: 100%;
font-size: 32upx;
font-weight: 400;
color: #092C4D;
border-bottom: 3upx solid #EEEEEE;
padding: 26upx 24upx;
box-sizing: border-box;
}
.bts {
display: flex;
align-items: center;
justify-content: center;
padding: 20upx 0;
>view {
width: 204upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #D3832A;
font-size: 28upx;
color: #D3832A;
display: flex;
align-items: center;
justify-content: center;
}
}
.contsx {
width: 100%;
display: flex;
flex-direction: column;
padding: 34upx 24upx;
box-sizing: border-box;
border-bottom: 3upx solid #EEEEEE;
.content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28upx;
color: #092C4D;
>view {
flex: 1;
}
}
.total {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
>view {
display: flex;
flex-direction: column;
align-items: center;
font-size: 28upx;
color: #092C4D;
&:nth-of-type(1) {
>view:nth-of-type(2) {
color: #0086F1;
}
}
&: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;
color: #0086F1;
margin-top: 10upx;
}
}
}
}
}
}
}
.hedtopt {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #ffffff;
padding: 36upx 32upx;
box-sizing: border-box;
.typto {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
margin-bottom: 20upx;
.vibx {
display: inline-block;
min-width: 100upx;
height: 60upx;
padding: 10upx;
box-sizing: border-box;
border: 2upx solid #90A0AF;
word-wrap: break-word;
word-break: break-all;
}
&:nth-last-child(1) {
margin-bottom: 0;
}
>view {
flex: 1;
}
}
.kehupeison {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 20upx;
>view {
display: flex;
flex-direction: column;
align-items: center;
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;
}
}
}
}
</style>