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

488 lines
11 KiB

<template>
<BasicContainer ref="basicContainer" :option="option" :leftClick="backPreviousPage">
<template #head>
<view class="hedtopt">
<!-- <view class="topBox">
<input type="text" v-model="details.searchValue" class="searchInput" placeholder="请输入库位名称" />
<view class="button" @click="handleSearch">搜索</view>
</view> -->
<view class="typto">
<view class="align-center">
<text>
备货区域:
</text>
<!-- <text class="vibx">{{items.stockupArea}}</text> -->
<text class="vibx">{{details.stockUpStorageInfo.stockupAllocationName}}</text>
</view>
</view>
<view class="typto">
<view>备货编码:{{items.stockupCode}}</view>
</view>
<view class="typto">
<view>备货状态:{{items.stockupStatusStr}}</view>
<view>备货类型:{{items.typeServiceStr}}</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.customer}}
</view>
<view class="contsx">
<view class="content">
<view><text style="color: #90A0AF;">备货是否完成</text>{{item.stockStatusName}}</view>
<view><text style="color: #90A0AF;">备货类型</text>{{item.typeServiceStr}}</view>
</view>
<view class="content mt10">
<view><text style="color: #90A0AF;">商场名称</text>{{item.mallName || '暂无数据'}}</view>
</view>
<view class="total mt10">
<view>
<view>订单总数</view>
<view>{{item.orderNum}}</view>
</view>
<!-- <view>
<view>定制品数</view>
<view>{{item.planNum || 0}}</view>
</view> -->
<!-- <view>
<view>零担数</view>
<view>{{item.planNum || 0}}</view>
</view> -->
<view>
<view>库存品数量</view>
<view>{{item.inventoryNub || 0}}</view>
</view>
<view>
<view>计划件数</view>
<view>{{item.planNum + item.inventoryNub}}</view>
</view>
<view>
<view>已备数量</view>
<view>{{item.stockupNum || 0}}</view>
</view>
</view>
</view>
</view>
</template>
</view>
</scroll-view>
</template>
</BasicContainer>
<!-- #ifdef APP -->
<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
<!-- #endif -->
<tiplist ref="tiplists"></tiplist>
<tips ref="tip"></tips>
</template>
<script lang="ts" setup>
import {
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()
}
}
let details = reactive({
id: '',
datalist: [],
items: {} as any,
scancode: '',
authbuts: uni.getStorageSync('authbuts'),
stockupArea: '',
/** 搜索框的值 */
searchValue: '',
/** 备货库位信息 */
stockUpStorageInfo: {
/** 备货库位ID */
stockupAllocationId: '',
/** 备货库位名称 */
stockupAllocationName: ''
}
})
const tip = ref(null)
onLoad((op) => {
details.id = op.id
details.stockupArea = op.stockupArea
// details.items=JSON.parse(op.item)
// #ifdef APP
// utils.ttsspke('请扫描备货库位')
// #endif
})
onShow(async () => {
// initpage()
// #ifdef APP
uni.$off('scancodedate')
uni.$on('scancodedate', function (code) {
if (code) {
console.log(code);
details.scancode = code
scandata()
}
})
// #endif
// 延时调用组件刷新函数
await nextTick()
basicContainer.value.startPullDownRefresh()
})
// 初始化请求页面数据
async function initpage() {
let data = {
stockupId: details.id
}
let response = await distributionStockuppageListClient(data)
if (response.code !== 200) return
details.datalist = []
if (response.data && response.data.orderList) details.datalist = response.data.orderList.map(val => {
val.inventoryNub = val.inventoryNub !== 0 ? val.inventoryNub : 0
val.planNum = val.planNum !== 0 ? val.planNum : 0
return val
})
details.items = response.data
}
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.id
+ '&stockupAllocationId=' + details.stockUpStorageInfo.stockupAllocationId
+ '&stockupAllocationName=' + details.stockUpStorageInfo.stockupAllocationName
})
}
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)
}
})
}
/** 搜索 */
const handleSearch = async () => {
details.scancode = details.searchValue
scandata()
// try {
// uni.showLoading()
// const submitData = { fragment: details.searchValue }
// const res = await distributionInspectStockUpArea(submitData)
// const { code, data } = res
// console.log('data :>> ', data);
// } catch (e) {
// //TODO handle the exception
// } finally {
// uni.hideLoading()
// }
}
// 返回上一级页面
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 {
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>