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.
489 lines
10 KiB
489 lines
10 KiB
<template> |
|
<BasicContainer ref='basicContainer' :option="option"> |
|
<!-- 头部 --> |
|
<template #head> |
|
<view class=""> |
|
<image class="header_bg" src="@/pagesHome/static/bgby.png"></image> |
|
|
|
<view class="header-container"> |
|
<!-- 顶部背景 --> |
|
<view class="header"> |
|
<view class="search_row"> |
|
<input placeholder="请输入包条码" v-model='details.searchText' type="text" name="" id=""> |
|
<view class="search_button" @click="handleSearch"> |
|
确认 |
|
</view> |
|
</view> |
|
|
|
<view class="header_row"> |
|
<view> |
|
托盘码：{{details.pageInfo.trayCode || '暂无数据'}} |
|
</view> |
|
|
|
<view> |
|
托盘名称：{{details.pageInfo.trayName || '暂无数据'}} |
|
</view> |
|
</view> |
|
|
|
<view class="header_row"> |
|
<view> |
|
打托方式：{{details.pageInfo.pageName || '暂无数据'}} |
|
</view> |
|
|
|
<view> |
|
名称：{{details.detauser.name || '暂无数据'}} |
|
</view> |
|
</view> |
|
|
|
<view class="header_row"> |
|
<view> |
|
订单在托数：{{details.detauser.orderlNum }} |
|
</view> |
|
|
|
<view> |
|
订单总数：{{details.detauser.orderTotalNum }} |
|
</view> |
|
</view> |
|
|
|
<view class="header_row"> |
|
<view> |
|
路线：{{details.pageInfo.lineNameTitle || '暂无数据'}} |
|
</view> |
|
</view> |
|
|
|
<view class="header_row"> |
|
<view> |
|
批次号：{{details.pageInfo.billladingCode || '暂无数据'}} |
|
</view> |
|
</view> |
|
|
|
<view class="header_row"> |
|
<view> |
|
备注：{{details.detauser.remark || '暂无数据'}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</template> |
|
|
|
<!-- 主体 --> |
|
<template #body> |
|
<u-divider text="订 单 列 表" textPosition="left"></u-divider> |
|
|
|
<!-- 提货单件数 --> |
|
<scroll-view class="scollView" scroll-y="true" :style="{height: details.height}" |
|
@scrolltolower="utils.debounce(reachDown, 500)"> |
|
<block v-for="(item, index) in details.data" :key="item.id"> |
|
<view @click="handleChooseStatus(index)" |
|
:class="{'list_container': true, 'active': details.chooseIndex === index}"> |
|
<view class="list_row" @click="godetaillist(item)"> |
|
订单号: {{item.dataCode || '暂无数据'}} |
|
</view> |
|
|
|
<view class="list_row"> |
|
<view class=""> |
|
总数： |
|
<text> |
|
{{item.orderTotalNum }} |
|
</text> |
|
</view> |
|
<view> |
|
已扫： |
|
<text style="color: #10d269;"> |
|
{{item.scanNum }} |
|
</text> |
|
</view> |
|
<view class=""> |
|
未扫： |
|
<text :style="{color: item.residueNum > 0? '#f00': '#000'}"> |
|
{{item.residueNum }} |
|
</text> |
|
</view> |
|
</view> |
|
|
|
<!-- 状态标签 --> |
|
<view :class="{ |
|
'list_tips': true, |
|
'none':item.scanNum === 0, |
|
'portion':item.scanNum < item.orderTotalNum && item.scanNum > 0, |
|
'all':item.scanNum === item.orderTotalNum}"> |
|
{{details.type[item.scanNum ===item.orderTotalNum? 3: item.scanNum !==0?2: 1 ]|| '暂无状态数据'}} |
|
</view> |
|
</view> |
|
</block> |
|
|
|
<!-- 底部站位 --> |
|
<view class="footer"> |
|
|
|
</view> |
|
</scroll-view> |
|
|
|
<!-- 底部站位 --> |
|
<!-- <view class="button_container"> |
|
<view @click="handleConfirm"> |
|
确认打托 |
|
</view> |
|
</view> --> |
|
</template> |
|
|
|
</BasicContainer> |
|
|
|
<!-- #ifdef APP --> |
|
<saomiao2 :ishidestop="scanState !== 0"></saomiao2> |
|
<!-- #endif --> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
getBillladingList, |
|
postIncomingIncomingPackage, |
|
warehouseTrayTypeorderScanTrayCode |
|
} from '@/api/user.js' |
|
import { |
|
onLoad, |
|
onShow, |
|
} from '@dcloudio/uni-app' |
|
import { nextTick, reactive, ref } from "vue"; |
|
import utils from '@/utils/utils.js' |
|
import useSystemSettingsStore from '@/store/useSystemSettingsStore'; |
|
import { storeToRefs } from 'pinia'; |
|
const { scanState } = storeToRefs(useSystemSettingsStore()) |
|
// 组件配置 |
|
const option = reactive({ |
|
// 标题 |
|
title: '码板打托', |
|
// 下拉刷新回调函数 |
|
async pullDownRefreshInitPage() { |
|
// 重置被选中数据 |
|
details.chooseIndex = -1 |
|
|
|
details.data = [] |
|
details.page.pageNum = 1 |
|
initpage() |
|
|
|
return null |
|
}, |
|
// 触底加载回到函数 |
|
reachBottomInitPage: async () => { return null }, |
|
haveData: true, |
|
isEnd: false |
|
}) |
|
|
|
let details = reactive({ |
|
/** 提货批次列表 */ |
|
data: [] as any[], |
|
/** 页面分页 */ |
|
page: { |
|
pageSize: 10, |
|
pageNum: 1, |
|
total: 0 |
|
}, |
|
/** 被选中的元素的索引 */ |
|
chooseIndex: -1, |
|
/** 提货状态 */ |
|
type: { |
|
1: '未 扫', 2: '部分扫', 3: '齐 套', |
|
}, |
|
/** 滚动区高度 */ |
|
height: '80vh', |
|
/** 页面数据 */ |
|
pageInfo: {} as any, |
|
/** 扫描的码值 */ |
|
scancode: '', |
|
detauser: {}, |
|
/** 输入框中的值 */ |
|
searchText: '' |
|
}) |
|
|
|
// 组件实例 |
|
const basicContainer = ref() |
|
|
|
/** 扫描后执行的回调函数 */ |
|
const scandata = async () => { |
|
const _code = details.scancode |
|
|
|
const _submitData = { |
|
orderPackageCode: _code, |
|
billladingId: details.pageInfo.id, |
|
incomingType: "1", |
|
trayCode: details.pageInfo.trayCode, |
|
trayType: details.pageInfo.trayType |
|
} |
|
|
|
const res = await postIncomingIncomingPackage(_submitData) |
|
|
|
const { code } = res |
|
if (code !== 200) return |
|
|
|
basicContainer.value.startPullDownRefresh() |
|
|
|
console.log('res :>> ', res); |
|
} |
|
|
|
onLoad((op) => { |
|
console.log('op :>> ', op); |
|
details.pageInfo = JSON.parse(op.pageInfo) |
|
|
|
// #ifdef APP |
|
utils.ttsspke('请扫描或输入包条码') |
|
// #endif |
|
}) |
|
|
|
onShow(async () => { |
|
// #ifdef APP |
|
// 初始化关闭监听 |
|
uni.$off('scancodedate') |
|
|
|
uni.$on('scancodedate', (code) => { |
|
if (code) { |
|
details.scancode = code |
|
|
|
scandata() |
|
} |
|
}) |
|
// #endif |
|
|
|
await nextTick() |
|
basicContainer.value.startPullDownRefresh() |
|
|
|
details.height = await utils.getViewDistanceFormTop('.scollView') |
|
}) |
|
|
|
async function initpage() { |
|
try { |
|
const _submitData = { |
|
trayCode: details.pageInfo.trayCode, |
|
|
|
} |
|
|
|
const res = await warehouseTrayTypeorderScanTrayCode(_submitData) |
|
|
|
const { code, data } = res |
|
|
|
console.log('data :>> ', data); |
|
|
|
console.log('111 :>> ', 111); |
|
if (code !== 200) return |
|
|
|
if (res.data.isHasData == 1) { |
|
// details.datelist = res.data.data.list |
|
details.detauser = data.data |
|
details.pageInfo.trayName = data.data.trayName |
|
details.pageInfo.pageName = data.data.trayTypeName |
|
|
|
console.log('details.pageInfo :>> ', details.pageInfo); |
|
|
|
for (let item of details.detauser.packageList) { |
|
item.scanNum = item.scanNum || 0 |
|
item.orderTotalNum = item.orderTotalNum || 0 |
|
item.residueNum = (item.orderTotalNum || 0) - (item.scanNum || 0) |
|
} |
|
|
|
details.data = details.detauser.packageList |
|
} |
|
// 无数据 |
|
// else { |
|
// res.data.data.map(item => { |
|
// if (item.dictKey == details.trayType) { |
|
// details.trayCodevalue = item.dictValue |
|
// } |
|
// }) |
|
// } |
|
|
|
// details.data = [...details.data, ...data.records] |
|
// details.page.total = data.total |
|
|
|
return null |
|
} catch (err) { |
|
//TODO handle the exception |
|
console.log('err :>> ', err); |
|
} finally { |
|
return null |
|
} |
|
} |
|
|
|
/** 触底加载 */ |
|
const reachDown = () => { |
|
console.log('111 :>> ', 111); |
|
details.page.pageNum += 1 |
|
if (details.page.total <= details.data.length) return uni.showToast({ |
|
title: '数据加载完毕', |
|
icon: 'none' |
|
}) |
|
initpage() |
|
} |
|
|
|
async function godetaillist(item) { |
|
uni.navigateTo({ |
|
url: '/pagesHome/pages/OrderSortingDetailList/OrderSortingDetailList?orderCode=' |
|
+ item.dataCode + '&trayCode=' |
|
+ details.pageInfo.trayCode |
|
}) |
|
} |
|
|
|
/** 输入包条码 */ |
|
const handleSearch = () => { |
|
if (details.searchText === '') return uni.showToast({ |
|
title: '请输入包条码', |
|
icon: 'none' |
|
}) |
|
|
|
details.scancode = details.searchText |
|
scandata() |
|
} |
|
|
|
/** 元素激活状态 */ |
|
const handleChooseStatus = (index : number) => { |
|
// details.chooseIndex = details.chooseIndex === index ? -1 : index |
|
} |
|
|
|
/** 确认 */ |
|
const handleConfirm = () => { |
|
uni.navigateBack() |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
// 顶部背景 |
|
.header-container { |
|
position: relative; |
|
} |
|
|
|
// 头部背景 |
|
.header_bg { |
|
position: absolute; |
|
width: 100%; |
|
top: -20upx; |
|
} |
|
|
|
// 头部 |
|
.header { |
|
width: calc(100vw - 60upx); |
|
background: #fff; |
|
padding: 20upx; |
|
border-radius: 10upx; |
|
margin: 10upx 10upx 30upx; |
|
font-size: 0.8rem; |
|
|
|
|
|
|
|
// 搜索行 |
|
.search_row { |
|
display: flex; |
|
align-items: center; |
|
|
|
input { |
|
margin-right: 20upx; |
|
background: #eee; |
|
flex: 1; |
|
padding: 10upx 20upx; |
|
border-radius: 5upx; |
|
} |
|
|
|
.search_button { |
|
padding: 10upx 30upx; |
|
background: var(--subjectColor); |
|
color: #fff; |
|
border-radius: 5upx; |
|
} |
|
} |
|
|
|
.header_row { |
|
margin-top: 10upx; |
|
display: flex; |
|
|
|
>view { |
|
flex: 1; |
|
} |
|
} |
|
} |
|
|
|
// 分割线 |
|
:deep(.u-divider__text) { |
|
font-size: 1rem !important; |
|
color: var(--subjectColor) !important; |
|
} |
|
|
|
:deep(.u-line) { |
|
border-color: var(--subjectColor) !important; |
|
} |
|
|
|
// 列表容器 |
|
.list_container { |
|
// 边框圆角 |
|
$borderRadius: 5upx; |
|
|
|
position: relative; |
|
margin: 10upx; |
|
font-size: 0.8rem; |
|
background: #fff; |
|
padding: 10upx; |
|
border-radius: $borderRadius; |
|
box-shadow: 0 0 10px #eee, 3px 3px #eee; |
|
|
|
&.active { |
|
box-shadow: 0 0 10px var(--subjectColor), 3px 3px var(--subjectColor); |
|
} |
|
|
|
.list_row { |
|
margin: 10upx; |
|
display: flex; |
|
|
|
>view { |
|
flex: 1; |
|
} |
|
} |
|
|
|
.list_tips { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
padding: 10upx 20upx; |
|
background: var(--subjectColor); |
|
color: #fff; |
|
border-top-right-radius: $borderRadius; |
|
|
|
&.none { |
|
color: #f8625a; |
|
background-color: #feeded; |
|
} |
|
|
|
&.portion { |
|
color: #fa8c16; |
|
background: #fef3e7; |
|
} |
|
|
|
&.all { |
|
color: #0086F1; |
|
background-color: #e5f2fd; |
|
} |
|
} |
|
} |
|
|
|
// 底部按钮 |
|
.button_container { |
|
display: flex; |
|
justify-content: center; |
|
position: fixed; |
|
width: 100%; |
|
bottom: 40upx; |
|
left: 0; |
|
|
|
>view { |
|
width: 60vw; |
|
padding: 20upx; |
|
text-align: center; |
|
background: var(--subjectColor); |
|
border-radius: 5upx; |
|
color: #fff; |
|
box-shadow: 0 0 10px var(--subjectColor); |
|
} |
|
} |
|
|
|
// 底部站位 |
|
.footer { |
|
height: 160upx; |
|
} |
|
</style> |