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.
578 lines
12 KiB
578 lines
12 KiB
<template> |
|
<BasicContainer ref='basicContainer' :option="option"> |
|
<!-- 头部 --> |
|
<template #head> |
|
<view class="header"> |
|
<view class="bgimg"> |
|
<image src="https://huo5you.oss-cn-chengdu.aliyuncs.com/other/pdaImages/pdaImages/bgby.png" mode=""> |
|
</image> |
|
</view> |
|
<view class="header-container"> |
|
<view class=""> |
|
<text> |
|
订单号： |
|
</text> |
|
|
|
<text> |
|
{{details.pageInfo.orderCode}} |
|
</text> |
|
</view> |
|
|
|
<view class="flex-c-sb"> |
|
<view class=""> |
|
<text>入库数：</text> |
|
<text style="color: #12a6df;">{{details.pageInfo.scanNum}}</text> |
|
</view> |
|
|
|
<view class=""> |
|
<text>总数：</text> |
|
<text>{{details.pageInfo.totalNum}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="tabbar mb20"> |
|
<block v-for="(item, index) in details.tabbarOption"> |
|
<view :class="{'tabbar_item': true, active: index === details.tabbarStatus, 'flex-c-c': true}" |
|
@click="()=> handleTabbar(index)"> |
|
<text> |
|
{{item.label}} |
|
</text> |
|
</view> |
|
</block> |
|
|
|
<view class="activeItem" :style="`transform: translateX(${100 * details.tabbarStatus}%);`"> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
|
|
</template> |
|
|
|
<!-- 主体 --> |
|
<template #body> |
|
<!-- 提货单件数 --> |
|
<view> |
|
<block v-for="(value, index) in details.data" :key="value.title"> |
|
<view |
|
:class="{pullDownBox: true, notShow: details.tabbarStatus === 2 ? false: details.tabbarStatus === 0 ? value.scanNum === value.dataList.length: value.scanNum === 0 }"> |
|
<view :class="{title: true, active: value.scanNum === value.dataList.length }" |
|
@click="()=> handleIdnex(index)"> |
|
<view class="flex-c-sb"> |
|
<text class="mr10 "> |
|
{{value.title}} |
|
</text> |
|
|
|
<view class="flex-c-c"> |
|
<text |
|
:class="{'tip': true, 'perform': value.scanNum === value.dataList.length,'mr10': true}"> |
|
{{value.scanNum === 0 ? '未扫' : value.scanNum < value.dataList.length ? '未扫完' : '已扫完'}} |
|
</text> |
|
|
|
<view :class="{'icon': true, 'active': details.activeIndex === index}"> |
|
<u-icon name="arrow-up" color="#fff" size="28"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="flex-c-sb mt20 rem-0-9"> |
|
<text>未入：{{value.dataList.length - value.scanNum}} </text> |
|
<text>已入：{{value.scanNum}} </text> |
|
<text>总数： {{value.dataList.length}} </text> |
|
</view> |
|
|
|
</view> |
|
|
|
<view :class="{'container': true, 'active': details.activeIndex === index}"> |
|
<block v-for="(item, index) in value.dataList" :key="value.id"> |
|
|
|
<view |
|
:class="{ |
|
'table-row': true, |
|
'red': Number(item.packageStatus) !== 1, |
|
'green': Number(item.packageStatus) === 1, |
|
'mb20': index!== value.dataList.length - 1, |
|
notShow:details.tabbarStatus === 2 ? false: details.tabbarStatus === 1 ? item.packageStatus === 0: item.packageStatus === 1}"> |
|
<view class=" table-row-item"> |
|
<text>包条码：</text> |
|
<text> |
|
{{item.orderPackageCode}} |
|
</text> |
|
</view> |
|
|
|
<view class="table-row-item flex"> |
|
<view class="flex1"> |
|
<text>托盘：</text> |
|
<text> |
|
{{item.pallet || '暂无数据'}} |
|
</text> |
|
</view> |
|
|
|
<view class=""> |
|
<text>仓库：</text> |
|
<text> |
|
{{item.warehouse || '暂无数据'}} |
|
</text> |
|
</view> |
|
</view> |
|
|
|
<view class="table-row-item"> |
|
品类名： |
|
|
|
{{item.materialName || '暂无数据'}} |
|
</view> |
|
|
|
<view |
|
:class="{'table-tag': true, 'red': Number(item.packageStatus) !== 1, 'green': Number(item.packageStatus) === 1, flexnone: true}"> |
|
{{Number(item.packageStatus) === 1 ? '已入库': '未入库' }} |
|
</view> |
|
</view> |
|
|
|
</block> |
|
</view> |
|
</view> |
|
</block> |
|
</view> |
|
</template> |
|
</BasicContainer> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
postDeliveryOrderCodeWarehouseDetail |
|
} from '@/api/user.js' |
|
import { |
|
onLoad, |
|
onShow, |
|
} from '@dcloudio/uni-app' |
|
import { nextTick, reactive, ref } from "vue"; |
|
import utils from '@/utils/utils.js' |
|
// 组件配置 |
|
const option = reactive({ |
|
// 标题 |
|
title: '订单在库详情', |
|
// 下拉刷新回调函数 |
|
async pullDownRefreshInitPage() { |
|
details.data = [] |
|
|
|
// 重置被选中数据 |
|
initpage() |
|
|
|
return null |
|
}, |
|
// 触底加载回到函数 |
|
reachBottomInitPage: async () => { return null }, |
|
haveData: true, |
|
isEnd: false, |
|
isFixed: true, |
|
haveReachBottom: false |
|
}) |
|
|
|
let details = reactive({ |
|
/** 提货批次列表 */ |
|
data: [] as any[], |
|
/** 页面数据 */ |
|
pageInfo: {} as any, |
|
activeIndex: 0, |
|
tabbarStatus: 0, |
|
tabbarOption: [ |
|
{ label: '未入库' }, |
|
{ label: '已入库' }, |
|
{ label: '全部' }, |
|
] |
|
}) |
|
|
|
// 组件实例 |
|
const basicContainer = ref() |
|
|
|
|
|
onLoad((op) => { |
|
console.log('op :>> ', op); |
|
details.pageInfo = JSON.parse(op.pageInfo) |
|
|
|
|
|
}) |
|
|
|
onShow(async () => { |
|
// #ifdef APP |
|
// 初始化关闭监听 |
|
uni.$off('scancodedate') |
|
// #endif |
|
|
|
await nextTick() |
|
basicContainer.value.startPullDownRefresh() |
|
|
|
}) |
|
|
|
async function initpage() { |
|
try { |
|
const _submitData = { |
|
orderCode: details.pageInfo.orderCode |
|
} |
|
|
|
const res = await postDeliveryOrderCodeWarehouseDetail(_submitData) |
|
|
|
const { code, data } = res |
|
|
|
if (code !== 200 || utils.getObjType(data) !== 'object') return |
|
|
|
const { warehouse, unWarehouse } = data |
|
|
|
const _data = [] |
|
|
|
// 已扫数 |
|
let _scanNum = 0 |
|
let _total = 0 |
|
|
|
if (utils.getObjType(warehouse) === 'array') { |
|
|
|
_total += warehouse.length |
|
|
|
for (let i = 0; i < warehouse.length; i++) { |
|
const value = warehouse[i] |
|
|
|
_scanNum++ |
|
|
|
let _item = null |
|
|
|
for (let index = 0; index < _data.length; index++) { |
|
const item = _data[index] |
|
|
|
if (value.thirdProduct === item.title) { |
|
_item = item |
|
break |
|
} |
|
} |
|
|
|
const _obj = { |
|
orderPackageCode: value.orderPackageCode, |
|
pallet: value.pallet, |
|
warehouse: value.warehouse, |
|
materialName: value.materialName, |
|
packageStatus: 1 |
|
} |
|
|
|
// 是否存在该品类 |
|
if (_item) { |
|
_item.dataList.push(_obj) |
|
_item.scanNum++ |
|
} else { |
|
_data.push({ title: value.thirdProduct, dataList: [_obj], scanNum: 1 }) |
|
} |
|
} |
|
} |
|
|
|
if (utils.getObjType(unWarehouse) === 'array') { |
|
_total += unWarehouse.length |
|
|
|
for (let i = 0; i < unWarehouse.length; i++) { |
|
const value = unWarehouse[i] |
|
|
|
let _item = null |
|
|
|
for (let index = 0; index < _data.length; index++) { |
|
const item = _data[index] |
|
|
|
if (value.thirdProduct === item.title) { |
|
_item = item |
|
break |
|
} |
|
} |
|
|
|
const _obj = { |
|
orderPackageCode: value.orderPackageCode, |
|
pallet: value.pallet, |
|
warehouse: value.warehouse, |
|
materialName: value.materialName, |
|
packageStatus: 0 |
|
} |
|
|
|
// 是否存在该品类 |
|
if (_item) { |
|
_item.dataList.unshift(_obj) |
|
} else { |
|
_data.push({ title: value.thirdProduct, dataList: [_obj], scanNum: 0 }) |
|
} |
|
} |
|
} |
|
|
|
|
|
console.log('_data :>> ', _data); |
|
|
|
details.data = _data |
|
details.pageInfo.scanNum = _scanNum |
|
details.pageInfo.totalNum = _total |
|
|
|
details.activeIndex = 0 |
|
|
|
if (details.tabbarStatus === 2) return |
|
for (let i = 0; i < details.data.length; i++) { |
|
const value = details.data[i] |
|
|
|
// 已入库 |
|
if (details.tabbarStatus === 1) { |
|
if (value.scanNum === 0) continue |
|
details.activeIndex = i |
|
break |
|
} |
|
// 未入库 |
|
else if (details.tabbarStatus === 0) { |
|
if (value.scanNum === value.dataList.length) continue |
|
details.activeIndex = i |
|
break |
|
} |
|
} |
|
|
|
return null |
|
} catch (err) { |
|
//TODO handle the exception |
|
console.log('err :>> ', err); |
|
} finally { |
|
return null |
|
} |
|
} |
|
|
|
|
|
const handleTabbar = (status : number) => { |
|
details.tabbarStatus = status |
|
details.activeIndex = 0 |
|
|
|
if (status === 2) return |
|
for (let i = 0; i < details.data.length; i++) { |
|
const value = details.data[i] |
|
|
|
// 已入库 |
|
if (status === 1) { |
|
if (value.scanNum === 0) continue |
|
details.activeIndex = i |
|
break |
|
} |
|
// 未入库 |
|
else if (status === 0) { |
|
if (value.scanNum === value.dataList.length) continue |
|
details.activeIndex = i |
|
break |
|
} |
|
} |
|
} |
|
/** 触底加载 */ |
|
// const reachDown = () => { |
|
// console.log('111 :>> ', 111); |
|
// details.page.pageNum += 1 |
|
// if (details.page.total <= details.data.length) return uni.showToast({ |
|
// title: '数据加载完毕', |
|
// icon: 'none' |
|
// }) |
|
// initpage() |
|
// } |
|
/** 是否展开数据 */ |
|
const handleIdnex = (index : number) => { |
|
details.activeIndex = index === details.activeIndex ? -1 : index |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url(@/utils/style/common.scss); |
|
|
|
.bgimg { |
|
position: absolute; |
|
z-index: 1; |
|
width: 100vw; |
|
top: -300upx; |
|
left: 0; |
|
|
|
image { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.header { |
|
width: 100vw; |
|
padding-bottom: 20upx; |
|
background-color: #f5f5f6; |
|
} |
|
|
|
.header-container { |
|
position: relative; |
|
z-index: 9; |
|
margin: 20upx; |
|
padding: 40upx; |
|
background: #fff; |
|
font-size: 0.8rem; |
|
border-radius: 10upx; |
|
font-weight: bold; |
|
|
|
>view { |
|
&:first-child { |
|
margin-bottom: 30upx; |
|
font-size: 0.9rem; |
|
} |
|
} |
|
} |
|
|
|
// tabbar |
|
.tabbar { |
|
position: relative; |
|
z-index: 9; |
|
background-color: #fff; |
|
display: flex; |
|
height: 90upx; |
|
position: relative; |
|
border-radius: 10upx; |
|
margin: 0 20upx; |
|
overflow: hidden; |
|
|
|
.tabbar_item { |
|
flex: 1; |
|
transition: all 0.3s; |
|
|
|
text { |
|
position: relative; |
|
z-index: 10; |
|
} |
|
|
|
&.active { |
|
color: #fff; |
|
} |
|
} |
|
|
|
// 选中背景 |
|
.activeItem { |
|
width: 33.33%; |
|
height: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
background-color: var(--subjectColor); |
|
transition: all 0.3s; |
|
} |
|
} |
|
|
|
:deep(.u-divider__text) { |
|
font-size: 1rem !important; |
|
color: var(--subjectColor) !important; |
|
} |
|
|
|
:deep(.u-line) { |
|
border-color: var(--subjectColor) !important; |
|
} |
|
|
|
.table-row { |
|
background: #fff; |
|
font-size: 0.8rem; |
|
min-height: 60upx; |
|
position: relative; |
|
border-radius: 15upx; |
|
overflow: hidden; |
|
background: #F5F5F6; |
|
|
|
.table-row-item { |
|
padding: 10upx; |
|
box-sizing: border-box; |
|
word-break: break-all; |
|
} |
|
|
|
// 标签 |
|
.table-tag { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
color: #fff; |
|
padding: 10upx 20upx; |
|
|
|
&.red { |
|
color: #f8625a; |
|
background-color: #feeded; |
|
} |
|
|
|
&.green { |
|
color: #1ba035; |
|
background-color: #edfef2; |
|
} |
|
} |
|
} |
|
|
|
.main_box { |
|
padding: 20upx; |
|
background-color: #fff; |
|
margin: 10upx; |
|
} |
|
|
|
// 下拉框 |
|
.pullDownBox { |
|
margin: 0 20upx; |
|
margin-bottom: 20upx; |
|
border-radius: 10upx; |
|
overflow: hidden; |
|
|
|
>.title { |
|
font-family: serif; |
|
padding: 20upx; |
|
// background: var(--subjectColor); |
|
background-color: var(--errColor); |
|
color: #fff; |
|
font-weight: bold; |
|
|
|
&.active { |
|
background-color: var(--primaryColor); |
|
} |
|
|
|
.tip { |
|
font-weight: bold; |
|
font-size: 0.8rem; |
|
// background: #d79040; |
|
background-color: #fff; |
|
color: var(--errColor); |
|
padding: 10upx 20upx; |
|
border-radius: 10upx; |
|
|
|
&.perform { |
|
// color: var(--subjectColor); |
|
color: var(--primaryColor); |
|
background: #fff; |
|
} |
|
} |
|
|
|
.icon { |
|
transition: all 0.3s; |
|
|
|
&.active { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
|
|
>.container { |
|
background: #fff; |
|
padding: 0; |
|
height: 0; |
|
box-sizing: border-box; |
|
|
|
&.active { |
|
padding: 20upx; |
|
height: auto; |
|
} |
|
} |
|
} |
|
|
|
.notShow { |
|
display: none; |
|
} |
|
|
|
// 序号 |
|
$serialNumberHeight: 1.4rem; |
|
|
|
.serialNumber { |
|
border: 4upx solid; |
|
min-width: $serialNumberHeight; |
|
height: $serialNumberHeight; |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 0.7rem; |
|
box-sizing: border-box; |
|
font-weight: normal; |
|
font-size: 0.8rem; |
|
font-weight: bold; |
|
padding: 5upx; |
|
} |
|
</style> |