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.
535 lines
11 KiB
535 lines
11 KiB
<template> |
|
<BasicContainer ref="basicContainer" :option="option"> |
|
<template #head> |
|
<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image> |
|
<view class="mabxtop"> |
|
<view> |
|
<view> |
|
<view>{{(detauser?.trayName)||'暂无数据'}}</view> |
|
<view>托盘名称</view> |
|
</view> |
|
<view> |
|
<view>{{(detauser?.trayCode)||'暂无数据'}}</view> |
|
<view>托盘码</view> |
|
</view> |
|
</view> |
|
|
|
<view> |
|
<view> |
|
<view>{{(details.datelist.length)||0}}</view> |
|
<view>订单在托数量</view> |
|
</view> |
|
<view> |
|
<view>{{detauser?.trayTypeName || '暂无数据'}}</view> |
|
<view>打托方式</view> |
|
</view> |
|
</view> |
|
<view> |
|
|
|
<view> |
|
<view class="printBtn" @click.stop.prevent="handleGetSynchronousData">同步托盘</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<template #body> |
|
<scroll-view class="scvmabx" :style="{height: details.scrollHeight}" scroll-y="true"> |
|
<uni-table v-show="!details.isShowSelect" border stripe emptyText="暂无更多数据" |
|
@selection-change="selectionChange"> |
|
<!-- 表头行 --> |
|
<uni-tr> |
|
<uni-th align="left">订单号</uni-th> |
|
<uni-th align="left">运单号</uni-th> |
|
<uni-th align="left">包条码</uni-th> |
|
<uni-th align="center">数量</uni-th> |
|
</uni-tr> |
|
<!-- 表格数据行 --> |
|
<block v-for="item in details.datelist"> |
|
<uni-tr> |
|
<!-- 订单号 --> |
|
<uni-td>{{item.orderCode}}</uni-td> |
|
<!-- 运单号 --> |
|
<uni-td>{{item.waybillNo}}</uni-td> |
|
<!-- 包条码 --> |
|
<uni-td>{{item.orderPackageCode}}</uni-td> |
|
<uni-td align="center">{{item.num}}</uni-td> |
|
</uni-tr> |
|
</block> |
|
</uni-table> |
|
|
|
<uni-table v-show="details.isShowSelect" ref="uniTable1" border stripe type="selection" emptyText="暂无更多数据" |
|
@selection-change="selectionChange"> |
|
<!-- 表头行 --> |
|
<uni-tr> |
|
<uni-th align="left">订单号</uni-th> |
|
<uni-th align="left">运单号</uni-th> |
|
<uni-th align="left">包条码</uni-th> |
|
<uni-th align="center">数量</uni-th> |
|
</uni-tr> |
|
<!-- 表格数据行 --> |
|
<block v-for="item in details.datelist"> |
|
<uni-tr> |
|
<!-- 订单号 --> |
|
<uni-td>{{item.orderCode}}</uni-td> |
|
<!-- 运单号 --> |
|
<uni-td>{{item.waybillNo}}</uni-td> |
|
<!-- 包条码 --> |
|
<uni-td>{{item.orderPackageCode}}</uni-td> |
|
<uni-td align="center">{{item.num}}</uni-td> |
|
</uni-tr> |
|
</block> |
|
|
|
</uni-table> |
|
|
|
|
|
<!-- 底部站位 --> |
|
<view class="footer"></view> |
|
<view class="submitBtn" @click="handleSubmit">提交同步</view> |
|
<!-- <button type="default" @click="moni">moni</button> --> |
|
</scroll-view> |
|
|
|
</template> |
|
</BasicContainer> |
|
<!-- #ifdef APP --> |
|
<saomiao2 :ishidestop="scanState !== 0"></saomiao2> |
|
<!-- #endif --> |
|
<tiplist ref="tiplists"></tiplist> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
postFindSyncTrayData, |
|
postFindSyncOldTrayData, |
|
postSyncOldTrayData |
|
} from '@/api/user.js' |
|
import { |
|
onLoad, |
|
onShow, |
|
} from '@dcloudio/uni-app' |
|
import utils from '@/utils/utils.js' |
|
import { nextTick, reactive, ref, toRefs } from "vue"; |
|
// 引入Pinia仓库 |
|
import useSystemSettingsStore from '@/store/useSystemSettingsStore'; |
|
import { storeToRefs } from 'pinia'; |
|
const { scanState } = storeToRefs(useSystemSettingsStore()) |
|
|
|
// 组件实例 |
|
const uniTable1 = ref(null) |
|
|
|
const option = reactive({ |
|
title: '托盘数据同步', |
|
haveData: true, |
|
async pullDownRefreshInitPage() { |
|
details.isShowSelect = false |
|
details.datelist = [] |
|
details.detauser = {} |
|
details.seletionList = [] |
|
return null |
|
} |
|
}) |
|
|
|
let details = reactive({ |
|
trayCode: '', |
|
scancode: '', |
|
datelist: [], |
|
seletionList: [], |
|
waybillCode: '', |
|
detauser: {} as any, |
|
/** 设置滚动容器的高度 */ |
|
scrollHeight: '', |
|
/** 是否显示复选框 */ |
|
isShowSelect: false |
|
}) |
|
|
|
|
|
const tiplists = ref(null) |
|
const basicContainer = ref(null) |
|
|
|
onLoad(() => { |
|
utils.ttsspke('请扫描托盘码') |
|
}) |
|
|
|
onShow(async () => { |
|
// #ifdef APP |
|
uni.$off('scancodedate') |
|
uni.$on('scancodedate', function (code) { |
|
if (code) { |
|
console.log(code); |
|
details.scancode = code |
|
|
|
scandata() |
|
} |
|
}) |
|
// #endif |
|
|
|
await nextTick() |
|
details.scrollHeight = await utils.getViewDistanceFormTop('.scvmabx') |
|
}) |
|
|
|
async function scandata() { |
|
// uni.showLoading({ |
|
// mask: true, |
|
// // duration: 30000 |
|
// }) |
|
try { |
|
// 表格不显示复选框 |
|
details.isShowSelect = false |
|
const res = await postFindSyncTrayData({ trayCode: details.scancode }) |
|
const { code, data } = res |
|
if (code !== 200 || !data) return |
|
details.detauser = data |
|
details.datelist = data.packageList ? data.packageList : [] |
|
|
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
// await nextTick() |
|
// uni.hideLoading() |
|
} |
|
} |
|
|
|
const selectionChange = (list) => { |
|
details.seletionList = list.detail.index |
|
} |
|
|
|
/** 获取同步数据 */ |
|
const handleGetSynchronousData = async () => { |
|
if (!details.detauser.trayCode) { |
|
let content = '请先扫描托盘码' |
|
uni.showToast({ |
|
title: content, |
|
icon: "none" |
|
}) |
|
// #ifdef APP |
|
utils.ttsspke(content) |
|
// #endif |
|
return |
|
} |
|
|
|
// uni.showLoading({ |
|
// mask: true |
|
// }) |
|
try { |
|
|
|
const res = await postFindSyncOldTrayData({ trayCode: details.detauser.trayCode }) |
|
const { code, data } = res |
|
if (code !== 200 || !data) return |
|
details.detauser.trayTypeName = data.trayTypeName |
|
details.datelist = data.packageList ? data.packageList : [] |
|
// 表格显示复选框 |
|
details.isShowSelect = true |
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
await nextTick() |
|
// 开启全选 |
|
uniTable1.value.selectionAll() |
|
console.log('111 :>> ', 111); |
|
// 关闭loading |
|
// uni.hideLoading() |
|
} |
|
} |
|
|
|
/** 提交 */ |
|
const handleSubmit = async () => { |
|
let content = '' |
|
if (!details.isShowSelect) content = '请获取同步数据' |
|
else if (details.seletionList.length <= 0) content = '最少选择一条数据' |
|
if (content) { |
|
// #ifdef APP |
|
utils.ttsspke(content) |
|
// #endif |
|
uni.showToast({ |
|
title: content, |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
|
|
try { |
|
uni.showLoading({ |
|
mask: true |
|
}) |
|
|
|
console.log('details.seletionList :>> ', details.seletionList); |
|
const orderPackageCodes = [] |
|
details.datelist.forEach((val, index) => { |
|
if (details.seletionList.includes(index)) orderPackageCodes.push(val.orderPackageCode) |
|
}) |
|
const submitData = { |
|
trayCode: details.detauser.trayCode, |
|
trayType: details.detauser.trayType, |
|
orderPackageCodes, |
|
} |
|
const res = await postSyncOldTrayData(submitData) |
|
const { code } = res |
|
if (code !== 200) return |
|
basicContainer.value.startPullDownRefresh() |
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
uni.hideLoading() |
|
} |
|
} |
|
|
|
// function moni(){ |
|
// details.scancode = 'T2966' |
|
// scandata() |
|
// } |
|
const { datelist, detauser } = toRefs(details) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
// 主题色 |
|
$subjectColor: #d3832a; |
|
|
|
.mabxtop { |
|
position: relative; |
|
width: 684upx; |
|
// height: 348upx; |
|
background: #FFFFFF; |
|
border-radius: 20upx; |
|
margin: auto; |
|
margin-top: 20upx; |
|
padding: 60upx; |
|
box-sizing: border-box; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
>view { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 10upx; |
|
|
|
&:nth-last-child(1) { |
|
margin-bottom: 0; |
|
} |
|
|
|
>view { |
|
&:nth-of-type(1) { |
|
width: 60%; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
width: 40%; |
|
} |
|
|
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
|
|
>view:nth-of-type(1) { |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #020B18; |
|
word-wrap: break-word; |
|
word-break: break-all; |
|
} |
|
|
|
>view:nth-of-type(2) { |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #90A0AF; |
|
} |
|
} |
|
} |
|
|
|
.printBtn { |
|
background: var(--subjectColor); |
|
color: #fff !important; |
|
// width: 100upx; |
|
padding: 10upx 20upx; |
|
text-align: center; |
|
border-radius: 5upx; |
|
} |
|
} |
|
|
|
.bgimg { |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
} |
|
|
|
.scvmabx { |
|
width: 684rpx; |
|
height: 45vh; |
|
margin: auto; |
|
margin-top: 20upx; |
|
|
|
// 商场名称 |
|
.marketName { |
|
display: flex; |
|
margin-bottom: 20upx; |
|
align-items: center; |
|
} |
|
|
|
.maxboxs { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
|
|
.chuanhuo { |
|
border: #ff0000; |
|
} |
|
|
|
.weiqt { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 70upx; |
|
height: 70upx; |
|
} |
|
|
|
.qitao { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 70upx; |
|
height: 70upx; |
|
} |
|
|
|
>.items { |
|
width: 690upx; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 20upx 30upx; |
|
box-sizing: border-box; |
|
background-color: #ffffff; |
|
border-radius: 10upx; |
|
margin-bottom: 30upx; |
|
position: relative; |
|
|
|
&:nth-last-child(1) { |
|
margin-bottom: 20upx; |
|
} |
|
|
|
.tophd { |
|
width: 100%; |
|
display: flex; |
|
align-items: flex-start; |
|
justify-content: flex-start; |
|
padding: 15upx 20upx; |
|
box-sizing: border-box; |
|
padding-top: 30upx; |
|
border-bottom: 4upx solid #EEEEEE; |
|
|
|
>image { |
|
width: 48upx; |
|
height: 48upx; |
|
margin-right: 10upx; |
|
box-sizing: border-box; |
|
} |
|
|
|
>view { |
|
font-size: 32upx; |
|
color: #020B18; |
|
font-weight: 400; |
|
word-wrap: break-word; |
|
word-break: break-all; |
|
|
|
&:nth-of-type(1) { |
|
width: 180upx; |
|
} |
|
} |
|
|
|
>view:nth-of-type(2) { |
|
flex: 1; |
|
} |
|
} |
|
|
|
.tophd1 { |
|
width: 100%; |
|
display: flex; |
|
box-sizing: border-box; |
|
padding: 15upx 20upx; |
|
border-bottom: 4upx solid #EEEEEE; |
|
|
|
&>view { |
|
display: flex; |
|
flex: 1; |
|
align-items: center; |
|
} |
|
|
|
image { |
|
width: 64upx; |
|
height: 64upx; |
|
} |
|
} |
|
|
|
.numbxvie { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
padding: 15upx 25upx; |
|
box-sizing: border-box; |
|
|
|
.zhon { |
|
color: $subjectColor; |
|
} |
|
|
|
.yish { |
|
color: #1197EB; |
|
} |
|
|
|
.weish { |
|
color: #020B18; |
|
} |
|
|
|
>view { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
|
|
>view:nth-of-type(1) { |
|
font-size: 36upx; |
|
margin-bottom: 12upx; |
|
} |
|
|
|
>view:nth-of-type(2) { |
|
font-size: 28upx; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 底部站位 |
|
.footer { |
|
height: 150upx; |
|
} |
|
|
|
// 底部提交按钮 |
|
.submitBtn { |
|
width: fit-content; |
|
position: fixed; |
|
bottom: 20upx; |
|
background: var(--subjectColor); |
|
color: #fff; |
|
padding: 20upx 50upx; |
|
border-radius: 5upx; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
|
|
.uni-table-scroll { |
|
zoom: 0.9; |
|
} |
|
|
|
.uni-table-td, |
|
.uni-table-th { |
|
padding: 10upx; |
|
} |
|
</style> |