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

517 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>备货区域:<text class="vibx" @click="showlist">{{items.stockupArea}}</text></view>
<!-- <view>备货区域:{{items.stockupArea || '暂无数据'}}</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.stockupStatusStr}}</view>
<view><text style="color: #90A0AF;">备货类型</text>{{item.typeServiceStr}}</view>
</view>
<view class="content">
<view><text style="color: #90A0AF;">商场名称</text>{{item.mallName || '暂无数据'}}</view>
</view>
<view class="total">
<view>
<view>订单总数</view>
<view>{{item.orderNum}}</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="tips"></tips>
</template>
<script lang="ts" setup>
import {
distributionStockuppageListClient,
distributionStockupgetStockupArea,
distributionStockupupdateStockArea,
distributionInspectStockUpArea,
distributionScanStockUpArea
} 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 { storeToRefs } from 'pinia';
// 是否后台监控扫描
const { scanState } = storeToRefs(useSystemSettingsStore())
// 用户信息
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: ''
})
// const tips = ref(null)
onLoad((op) => {
details.id = op.id
details.stockupArea = op.stockupArea
// details.items=JSON.parse(op.item)
})
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()
})
/* onHide(() => {
uni.$off('scancodedate')
}) */
async function showlist() {
// #ifdef APP
utils.ttsspke('请选择备货区')
// #endif
let list = []
const user = userInfo.value as any
let data = {
userId: user.user_id
}
let res = await distributionStockupgetStockupArea(data)
console.log(res);
if (res.code == 200) {
res.data.map(item => {
list.push(item.headline)
})
}
// return
tiplists.value.setdetails({
title: '请选择备货区域',
isshow: true,
tipstate: 2,
list,
checklist: [],
inputtext: '',
confirmTxt: '确认选择',
isonecheck: true,
success: async (deta) => {
// console.log(res.data[deta.checklist[0]].id);
if (deta.checklist.length == 0) {
uni.showToast({
title: '请选择备货区域',
icon: 'none'
})
return
}
let data = {
type: 2,
stockupId: details.id,
stockupAreaId: res.data[deta.checklist[0]].id,
stockupArea: res.data[deta.checklist[0]].headline,
}
let response = await distributionStockupupdateStockArea(data)
if (response.code == 200) {
// 调用组件刷新函数
basicContainer.value.startPullDownRefresh()
}
tiplists.value.setdetails({ isshow: false })
},
cancel: (details) => {
tiplists.value.setdetails({ isshow: false })
},
close: (details) => {
tiplists.value.setdetails({ isshow: false })
}
})
}
// 初始化请求页面数据
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) {
uni.navigateTo({
url: '/pagesHome/pages/StockUplist/StockUplist?item='
+ JSON.stringify(item) + '&id=' + item.reservationId
+ '&stockupId=' + details.id
})
}
const { items, datalist } = toRefs(details)
// 扫码后执行的回调函数
async function scandata() {
const submitData = { stockUpAreaCode: details.scancode }
const res = await distributionScanStockUpArea(submitData)
const { code, data } = res
if (code !== 200) return
tiplists.value.setdetails({
isshow: true,
tipstate: 1,
title: '是否切换备货区',
placeholder: '是否切换备货区',
inputtext: '',
success: async (detail) => {
// details.scancode=
let data = {
type: 1,
stockupId: details.id,
stockupAreaCode: details.scancode
}
let res = await distributionStockupupdateStockArea(data)
console.log("res", res);
if (res.code === 200) {
// 调用组件刷新函数
basicContainer.value.startPullDownRefresh()
}
tiplists.value.setdetails({ isshow: false })
},
cancel: () => {
tiplists.value.setdetails({ isshow: false })
},
close: () => {
tiplists.value.setdetails({ isshow: false })
}
})
}
/** 搜索 */
const handleSearch = async () => {
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>
.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: 60vh;
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;
margin-top: 44upx;
>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: 20upx;
}
}
}
}
}
}
}
.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: 1upx 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>