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.
422 lines
8.4 KiB
422 lines
8.4 KiB
<template> |
|
<BasicContainer ref="basicContainer" :option="option"> |
|
<template #head> |
|
<view class="header_total_container"> |
|
<PullDownBox ref="pullDownBox"> |
|
<template #title> |
|
<text class="fwb"> |
|
预约号: |
|
</text> |
|
<text> |
|
{{details.pageInfo.reservationCode || '暂无数据'}} |
|
</text> |
|
</template> |
|
|
|
<template #content> |
|
<view class="header_total"> |
|
<view class="header_total_item"> |
|
<view class=""> |
|
总件数 |
|
</view> |
|
|
|
<view class="total"> |
|
{{ details.info.sumNum || 0 }} |
|
</view> |
|
</view> |
|
|
|
<view class="header_total_item"> |
|
<view class=""> |
|
已扫件数 |
|
</view> |
|
|
|
<view class="scanNum"> |
|
{{ details.info.inNum || 0 }} |
|
</view> |
|
</view> |
|
|
|
<view class="header_total_item"> |
|
<view class=""> |
|
未扫件数 |
|
</view> |
|
|
|
<view class="notScanNum"> |
|
{{ (details.info.sumNum || 0) - (details.info.inNum || 0) }} |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
</PullDownBox> |
|
</view> |
|
<view class="tabBar_container fwb"> |
|
<view :class="{'tabBar-item': true, active: details.tabBarActive === 0}" |
|
@click="() => handleTabbarStatus(0)"> |
|
未 入 库 |
|
</view> |
|
|
|
<view :class="{'tabBar-item': true, active: details.tabBarActive === 1}" |
|
@click="() => handleTabbarStatus(1)"> |
|
已 入 库 |
|
</view> |
|
|
|
<!-- 激活进度条 --> |
|
<view class="activeView" :style="{left: ((details.tabBarActive) * (100 / 2)) + '%'}"> |
|
<view class="item"> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<template #body> |
|
<scroll-view :style="{height: details.scrollHeight}" @touchmove.stop class="scve" scroll-y="true" |
|
@refresherpulling="()=>{}"> |
|
|
|
<block v-for="(item,index) in details.data" :key="item.id"> |
|
<view class="orderPackage_container"> |
|
<view class="orderPackage_container_item"> |
|
<text class=""> |
|
订单号： |
|
</text> |
|
|
|
<text class="flex1"> |
|
{{item.orderCode}} |
|
</text> |
|
</view> |
|
|
|
<view class="orderPackage_container_item"> |
|
<text class=""> |
|
包条码： |
|
</text> |
|
|
|
<text class="flex1"> |
|
{{item.orderPackageCode}} |
|
</text> |
|
</view> |
|
|
|
<view class="orderPackage_container_item"> |
|
<text class=""> |
|
一级品： |
|
</text> |
|
|
|
<text class="flex1"> |
|
{{item.firsts}} |
|
</text> |
|
</view> |
|
|
|
<view class="orderPackage_container_item"> |
|
<text class=""> |
|
二级品： |
|
</text> |
|
|
|
<text class="flex1"> |
|
{{item.second}} |
|
</text> |
|
</view> |
|
|
|
<view class="orderPackage_container_item"> |
|
<text class=""> |
|
三级品： |
|
</text> |
|
|
|
<text class="flex1"> |
|
{{item.thirdProduct}} |
|
</text> |
|
</view> |
|
|
|
<view class="orderPackage_container_item"> |
|
<text class=""> |
|
物料： |
|
</text> |
|
|
|
<text class="flex1"> |
|
{{item.materialName}} |
|
</text> |
|
</view> |
|
|
|
<view :class="details.tabBarActive === 0 ? 'tip red' : 'tip blue'"> |
|
{{details.tabBarActive === 0 ?'未入库' : '已入库'}} |
|
</view> |
|
</view> |
|
</block> |
|
</scroll-view> |
|
</template> |
|
</BasicContainer> |
|
|
|
<tiplist ref="tiplists"></tiplist> |
|
<!-- #ifdef APP --> |
|
<saomiao2 :ishidestop="scanState !== 0"></saomiao2> |
|
<!-- #endif --> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { ref, reactive, onMounted, nextTick, } from 'vue'; |
|
import { |
|
onShow, |
|
onLoad, |
|
} from '@dcloudio/uni-app' |
|
import utils from '@/utils/utils.js'; |
|
import { |
|
postBusinessPreOrderList, |
|
postBusinessPreOrderscanOrderPackageCode |
|
} from '@/api/user.js' |
|
import useSystemSettingsStore from '@/store/useSystemSettingsStore'; |
|
import { storeToRefs } from 'pinia'; |
|
const { scanState } = storeToRefs(useSystemSettingsStore()) |
|
|
|
const option = reactive({ |
|
title: '预入库包件入库', |
|
haveData: true, |
|
async pullDownRefreshInitPage() { |
|
|
|
return await initpage() |
|
} |
|
}) |
|
|
|
const details = reactive({ |
|
/** 扫码码值 */ |
|
scancode: '', |
|
/** 内容容器高度 */ |
|
scrollHeight: '60vh', |
|
/** tabBar激活值, 0 -- 有数据, 1 -- 无数据 */ |
|
tabBarActive: 0 as 0 | 1, |
|
pageInfo: { |
|
/** 预约单号 */ |
|
reservationCode: '' |
|
}, |
|
info: {}, |
|
data: [] |
|
}) |
|
|
|
|
|
// 组件实例 |
|
const tiplists = ref(null) |
|
const pullDownBox = ref() |
|
|
|
onLoad(() => { |
|
// #ifdef APP |
|
utils.ttsspke('请扫描预约号') |
|
// #endif |
|
}) |
|
|
|
// 开启监听扫描 |
|
onShow(async () => { |
|
// #ifdef APP |
|
uni.$off('scancodedate') |
|
uni.$on('scancodedate', function (code) { |
|
if (code) { |
|
details.scancode = code |
|
scandata() |
|
} |
|
}) |
|
// #endif |
|
|
|
await nextTick() |
|
pullDownBox.value.handleShowPullDown(true) |
|
// orderRef.value.details.showPopUp = true |
|
}) |
|
|
|
onMounted(async () => { |
|
await nextTick() |
|
details.scrollHeight = await utils.getViewDistanceFormTop('.scve') |
|
}) |
|
|
|
/** 扫描预约单号 */ |
|
const scanReservationCode = () => { |
|
console.log('扫描预约单号') |
|
const reg = new RegExp('^YY', 'i') |
|
|
|
if (!reg.test(details.scancode)) return utils.handleToast('请扫描预约单号') |
|
|
|
initpage() |
|
} |
|
|
|
/** 扫描包件 */ |
|
const scanOrderPackageCode = async () => { |
|
console.log('扫描包件') |
|
const { reservationCode } = details.pageInfo |
|
|
|
const submitData = { |
|
reservationCode: reservationCode, |
|
orderPackageCode: details.scancode |
|
} |
|
|
|
if (!submitData.reservationCode) return |
|
const res = await postBusinessPreOrderscanOrderPackageCode(submitData) |
|
|
|
const { code } = res |
|
if (code !== 200) return |
|
initpage() |
|
} |
|
|
|
/** 扫描函数 */ |
|
async function scandata() { |
|
if (!details.pageInfo.reservationCode) scanReservationCode() |
|
else scanOrderPackageCode() |
|
} |
|
|
|
/** 设置tabBar激活状态 */ |
|
const handleTabbarStatus = (code : 0 | 1) => { |
|
if (code === details.tabBarActive) return |
|
details.tabBarActive = code |
|
|
|
initpage() |
|
} |
|
|
|
|
|
const initpage = async () => { |
|
const { reservationCode } = details.pageInfo |
|
|
|
details.data = [] |
|
|
|
const submitData = { |
|
reservationCode: reservationCode ? reservationCode : details.scancode, |
|
inWarehouse: details.tabBarActive |
|
} |
|
|
|
console.log('submitData.reservationCode :>> ', submitData.reservationCode); |
|
|
|
if (!submitData.reservationCode) return utils.handleToast('请扫描预约单号') |
|
|
|
const response = await postBusinessPreOrderList(submitData, {}, true) |
|
|
|
const { code, data } = response |
|
|
|
if (code !== 200) return |
|
details.pageInfo.reservationCode = submitData.reservationCode |
|
details.data = data.list |
|
details.info = data |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url("@/utils/style/common.scss"); |
|
|
|
.tabBar_container { |
|
display: flex; |
|
position: relative; |
|
// font-family: 黑体; |
|
margin-bottom: 20upx; |
|
background: #fff; |
|
|
|
.activeView { |
|
display: block; |
|
height: 2px; |
|
position: absolute; |
|
width: 50%; |
|
top: 100%; |
|
z-index: 1; |
|
transition: all .3s; |
|
|
|
>.item { |
|
background: var(--subjectColor); |
|
height: 100%; |
|
width: 40%; |
|
margin: 0 auto; |
|
} |
|
} |
|
|
|
.tabBar-item { |
|
flex: 1; |
|
text-align: center; |
|
padding: 20upx; |
|
position: relative; |
|
background-color: transparent; |
|
z-index: 10; |
|
transition: all 0.3s; |
|
|
|
&.active { |
|
color: var(--subjectColor); |
|
} |
|
} |
|
|
|
} |
|
|
|
:deep(.u-divider__text) { |
|
color: var(--subjectColor) !important; |
|
font-size: 1rem !important; |
|
} |
|
|
|
.header { |
|
margin: 10upx; |
|
} |
|
|
|
// 头部统计容器 |
|
.header_total_container { |
|
padding: 10upx; |
|
} |
|
|
|
// 头部统计 |
|
.header_total { |
|
padding: 10upx; |
|
border-radius: 10upx; |
|
margin-top: 20upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
background: #f5f7fb; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.header_total_item { |
|
height: 100upx; |
|
text-align: center; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
|
|
>view { |
|
&:nth-child(2) { |
|
font-size: 1.2rem; |
|
|
|
&.total { |
|
color: var(--subjectColor); |
|
} |
|
|
|
&.scanNum { |
|
color: #0f0; |
|
} |
|
|
|
&.notScanNum { |
|
color: #f00; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 包件样式 |
|
.orderPackage_container { |
|
margin: 10upx; |
|
padding: 10upx; |
|
background: #fff; |
|
border-radius: 5upx; |
|
font-size: 0.9rem; |
|
position: relative; |
|
overflow: hidden; |
|
|
|
.tip { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
padding: 15upx 20upx; |
|
|
|
&.blue { |
|
background-color: #0086F120; |
|
color: #0086F1; |
|
} |
|
|
|
&.red { |
|
background-color: #F8544B20; |
|
color: #F8544B; |
|
} |
|
|
|
&.tp3 { |
|
background-color: #FA8C1620; |
|
color: #FA8C16; |
|
} |
|
} |
|
|
|
.orderPackage_container_item { |
|
padding: 10upx; |
|
} |
|
} |
|
</style> |