13 changed files with 640 additions and 294 deletions
@ -0,0 +1,568 @@
|
||||
<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 flex-c-sb" @click="()=> handleIdnex(index)"> |
||||
<view class="text flex-c-c"> |
||||
<!-- <text class="mr10 serialNumber">{{index + 1}}</text> --> |
||||
|
||||
<text class="mr10 "> |
||||
{{value.title}} |
||||
</text> |
||||
|
||||
<text> {{value.scanNum}} </text> |
||||
<text class="ml10 mr10"> / </text> |
||||
<text> {{value.dataList.length}} </text> |
||||
</view> |
||||
|
||||
<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="{'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); |
||||
color: #fff; |
||||
font-weight: bold; |
||||
|
||||
.tip { |
||||
font-weight: normal; |
||||
font-size: 0.8rem; |
||||
background: #d79040; |
||||
padding: 10upx 20upx; |
||||
border-radius: 10upx; |
||||
|
||||
&.perform { |
||||
color: var(--subjectColor); |
||||
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> |
||||
@ -1,245 +0,0 @@
|
||||
<template> |
||||
<BasicContainer ref='basicContainer' :option="option"> |
||||
<!-- 头部 --> |
||||
<template #head> |
||||
<view class="header-container"> |
||||
<view class=""> |
||||
<text> |
||||
订单号： |
||||
</text> |
||||
|
||||
<text> |
||||
{{details.pageInfo.orderCode}} |
||||
</text> |
||||
</view> |
||||
|
||||
<view class=""> |
||||
已扫 / 总数：{{details.pageInfo.scanNum + '/' + details.pageInfo.totalNum}} |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<!-- 主体 --> |
||||
<template #body> |
||||
<u-divider text="订单列表" textPosition="left"></u-divider> |
||||
|
||||
<view class="table-row title"> |
||||
<view class="table-row-item"> |
||||
包条码 |
||||
</view> |
||||
<view class="table-row-item"> |
||||
品类名 |
||||
</view> |
||||
<view class="table-row-item"> |
||||
状态 |
||||
</view> |
||||
<view class="table-row-item"> |
||||
异常 |
||||
</view> |
||||
</view> |
||||
<!-- 提货单件数 --> |
||||
<scroll-view class="scollView" scroll-y="true" :style="{height: details.height}" |
||||
@scrolltolower="utils.debounce(reachDown, 500)"> |
||||
|
||||
<view class="table-row"> |
||||
|
||||
</view> |
||||
|
||||
<block v-for="(item, index) in details.data" :key="item.id"> |
||||
<view class="table-row"> |
||||
<view class="table-row-item"> |
||||
{{item.orderPackageCode}} |
||||
</view> |
||||
<view class="table-row-item"> |
||||
{{item.name || '暂无数据'}} |
||||
</view> |
||||
<view class="table-row-item"> |
||||
{{Number(item.packageStatus) === 1 ? '已扫': '未扫' }} |
||||
</view> |
||||
<view class="table-row-item"> |
||||
</view> |
||||
</view> |
||||
</block> |
||||
</scroll-view> |
||||
</template> |
||||
</BasicContainer> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { |
||||
postFindAdvanceDetailList |
||||
} 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.page.pageNum = 1 |
||||
details.data = [] |
||||
|
||||
// 重置被选中数据 |
||||
initpage() |
||||
|
||||
return null |
||||
}, |
||||
// 触底加载回到函数 |
||||
reachBottomInitPage: async () => { return null }, |
||||
haveData: true, |
||||
isEnd: false |
||||
}) |
||||
|
||||
let details = reactive({ |
||||
/** 提货批次列表 */ |
||||
data: [] as any[], |
||||
/** 页面分页 */ |
||||
page: { |
||||
/** 每页页数 */ |
||||
pageSize: 20, |
||||
/** 当前页码 */ |
||||
pageNum: 1, |
||||
/** 总数 */ |
||||
total: 0 |
||||
}, |
||||
/** 滚动区高度 */ |
||||
height: '80vh', |
||||
/** 页面数据 */ |
||||
pageInfo: {} as any, |
||||
}) |
||||
|
||||
// 组件实例 |
||||
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() |
||||
|
||||
// 设置滚动区高度 |
||||
details.height = await utils.getViewDistanceFormTop('.scollView') |
||||
}) |
||||
|
||||
async function initpage() { |
||||
try { |
||||
const _submitData = { |
||||
...details.page, |
||||
orderCode: details.pageInfo.orderCode |
||||
} |
||||
|
||||
const res = await postFindAdvanceDetailList(_submitData) |
||||
|
||||
const { code, data } = res |
||||
|
||||
if (code !== 200) return |
||||
|
||||
|
||||
details.data = data |
||||
// 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() |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.header-container { |
||||
margin: 20upx; |
||||
padding: 20upx; |
||||
background: #fff; |
||||
font-size: 0.8rem; |
||||
|
||||
>view { |
||||
&:first-child { |
||||
margin-bottom: 20upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
:deep(.u-divider__text) { |
||||
font-size: 1rem !important; |
||||
color: var(--subjectColor) !important; |
||||
} |
||||
|
||||
:deep(.u-line) { |
||||
border-color: var(--subjectColor) !important; |
||||
} |
||||
|
||||
.table-row { |
||||
display: flex; |
||||
background: #fff; |
||||
font-size: 0.8rem; |
||||
text-align: center; |
||||
min-height: 60upx; |
||||
|
||||
&.title { |
||||
background: var(--subjectColor); |
||||
color: #fff; |
||||
width: 100%; |
||||
position: absolute; |
||||
z-index: 9; |
||||
|
||||
.table-row-item { |
||||
border-color: #fff; |
||||
} |
||||
} |
||||
|
||||
.table-row-item { |
||||
box-sizing: border-box; |
||||
border-left: 2upx solid #959595; |
||||
padding: 10upx 5upx; |
||||
word-break: break-all; |
||||
border-top: 2upx solid #959595; |
||||
|
||||
&:nth-child(1) { |
||||
width: 40%; |
||||
} |
||||
|
||||
&:nth-child(2) { |
||||
width: 35%; |
||||
} |
||||
|
||||
&:nth-child(3) { |
||||
width: 15%; |
||||
} |
||||
|
||||
&:nth-child(4) { |
||||
width: 10%; |
||||
border-right: 2upx solid #959595; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue