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.
702 lines
16 KiB
702 lines
16 KiB
<template> |
|
<BasicContainer ref="basicContainer" :option="option" :leftClick="backPreviousPage"> |
|
<template #head> |
|
<view class="header"> |
|
<view class="headtop"> |
|
<view @click='showCalendar' class="inputsr flex1 mr20"> |
|
<view class="timeInput"> |
|
{{datatime|| '请选择时间'}} |
|
</view> |
|
<view @click.stop.prevent> |
|
<u-icon @click='showCalendar' style="margin-right: 10upx;" v-if="!datatime" name="calendar" |
|
color="#999999" size="50"></u-icon> |
|
<u-icon @click="cleartime" style="margin-right: 10upx;" v-else name="close-circle" color="#999999" |
|
size="40"></u-icon> |
|
</view> |
|
</view> |
|
|
|
|
|
<view @click="init">查询</view> |
|
</view> |
|
|
|
<view class="input mt20"> |
|
<MyInput clearable v-model="details.scancode" placeholder="请扫描或输入订单号"> |
|
<view class="pl10" @click="handleScan"> |
|
<u-icon style="margin-right: 10upx;" name="scan" color="#999999" size="50"></u-icon> |
|
</view> |
|
</MyInput> |
|
</view> |
|
</view> |
|
|
|
<view class="tabtip"> |
|
<view @click="setstate(1)"> |
|
<view :class="status==1?'xz':''">未完成</view> |
|
</view> |
|
<view @click="setstate(2)"> |
|
<view :class="status==2?'xz':''">已完成</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<template #body> |
|
<scroll-view class="sccv mt20" scroll-y="true" @scrolltolower="jiazai" :style="{height: details.scrollHeight}"> |
|
<view class="pd20"> |
|
<block v-for="(item, index) in details.dataList"> |
|
|
|
<view :class="{PullDownBox: true, mt20: index !== 0}"> |
|
<!-- 标题 --> |
|
<view class="PullDownBox_title content"> |
|
<view class="row mb10"> |
|
<text class="title"> |
|
拆单任务编号： |
|
</text> |
|
|
|
<text>{{item.no}}</text> |
|
</view> |
|
|
|
<view class="row mb10"> |
|
<text class="title"> |
|
原订单号： |
|
</text> |
|
|
|
<text>{{item.orderCode}}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<view class=""> |
|
<view class="title pb20"> |
|
拆单数 |
|
</view> |
|
|
|
<view class="mt10 text-center number errColor"> |
|
{{item.number}} |
|
</view> |
|
</view> |
|
|
|
<view class=""> |
|
<view class="title pb20"> |
|
完成单数 |
|
</view> |
|
|
|
<view class="mt10 text-center number subjectColor"> |
|
0 |
|
</view> |
|
</view> |
|
|
|
<view class=""> |
|
<view class="title pb20"> |
|
拆单总件数 |
|
</view> |
|
|
|
<view class="mt10 text-center number primaryColor"> |
|
{{item.orderPackageNumber}} |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 状态 --> |
|
<view class="tip primary"> |
|
已完成 |
|
</view> |
|
</view> |
|
|
|
<!-- 下拉显示内容 --> |
|
<view :class="{'PullDownBox_content': true, transition: true}" :id="`pullDownItem${index}`" |
|
ref="pullDownItemRef" :style="{height: item.height}"> |
|
<view class="container"> |
|
|
|
<view class="mask" v-if="item.loading"> |
|
<u-loading-icon text="数据加载中" textSize="0.9rem" size="50" mode="circle" |
|
inactive-color="#f8c286" color="#d3832a" textColor="#d3832a" vertical></u-loading-icon> |
|
</view> |
|
|
|
<!-- 单项任务 --> |
|
<template v-if="item.list && item.list.length > 0"> |
|
<uni-swipe-action> |
|
<block v-for="(val, i) in item.list"> |
|
<uni-swipe-action-item :class="{mt20: i !== 0}" :show="item.isShow" @change="(val)=>{ |
|
for (let j = 0; j < item.list.length; j++){ |
|
const el = item.list[j] |
|
i !== j && (el.isShow = 'none') |
|
} |
|
}"> |
|
<view :class="{content:true, pd20: true }" @click="handleGoDetail"> |
|
<view class="row mb10"> |
|
<text class="title"> |
|
拆单订单号： |
|
</text> |
|
|
|
<text>{{val.newOrderCode}}</text> |
|
</view> |
|
|
|
<view class="row mb10 flex-c-sb"> |
|
<view class="flex1"> |
|
<view class="title"> |
|
客户姓名： |
|
</view> |
|
|
|
<view>{{val.customerName || '暂无'}}</view> |
|
</view> |
|
|
|
<view class="flex1"> |
|
<view class="title"> |
|
客户电话： |
|
</view> |
|
|
|
<view>{{val.customerTelephone || '暂无'}}</view> |
|
</view> |
|
</view> |
|
|
|
<view class="row flex"> |
|
<view class="title"> |
|
拆单数 / 已拆件数： |
|
</view> |
|
|
|
<view class="text-center"> |
|
<text class="errColor fwb">0</text> |
|
<text class="ml10 mr10">/</text> |
|
<text class="primaryColor fwb">0</text> |
|
</view> |
|
</view> |
|
|
|
<!-- 状态 --> |
|
<view class="tip primary"> |
|
已完成 |
|
</view> |
|
</view> |
|
<template v-slot:right> |
|
<view @click="()=> handleRemoveItem(item)" class="removeButton" |
|
hover-class="clickClass"><u-icon name="trash" color="#fff" |
|
size="40"></u-icon> |
|
</view> |
|
</template> |
|
</uni-swipe-action-item> |
|
</block> |
|
</uni-swipe-action> |
|
</template> |
|
|
|
|
|
<view v-else class="text-center pd20" style="padding: 30px 0; color: #fff;"> |
|
暂无任务 |
|
</view> |
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 显示控件 --> |
|
<view class="PullDown_control" hover-class="clickClass" hover-stay-time="100" |
|
@click="() => handleShowItem(item, index)"> |
|
<view class="flex-c-c"> |
|
<text class="mr20 title">{{item.isActive?'点击收起':'点击展开'}}</text> |
|
|
|
<view :class="{icon_box: true, active: item.isActive}"> |
|
<u-icon name="arrow-left-double" color="#aaa" size="36"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
|
|
</block> |
|
</view> |
|
</scroll-view> |
|
|
|
</template> |
|
</BasicContainer> |
|
|
|
|
|
<tips ref="tip"></tips> |
|
<l-calendar v-model:value="show" :initStartDate='date[0]' :initEndDate='date[1]' @hide='showCalendar' |
|
@change="onConfirm"></l-calendar> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
onLoad, |
|
onShow, |
|
onHide, |
|
onUnload, |
|
onPullDownRefresh |
|
} from '@dcloudio/uni-app' |
|
import { getSplitOrderTaskAllTaskList, getSplitOrderTaskTaskList } from '@/api/user.js' |
|
import { timeType } from '@/interfaces/pagesHome/allType' |
|
import functions from '@/utils/functions.js'; |
|
import { reactive, ref, toRefs, nextTick, } from "vue"; |
|
import utils from '@/utils/utils'; |
|
const option = { |
|
title: '拆单列表', |
|
haveData: true, |
|
isEnd: false, |
|
async pullDownRefreshInitPage() { |
|
details.pageNum = 1 |
|
details.dataList.splice(0) |
|
return await initpage() |
|
} |
|
} |
|
let details = reactive({ |
|
datatime: '', |
|
/** 页面渲染数组 */ |
|
dataList: [{}], |
|
/** 未发车数据 */ |
|
NoTrainData: [{ list: [{}] }], |
|
/** 已发车数据 */ |
|
HaveLeftnData: [], |
|
show: false, |
|
pageNum: 1, |
|
size: 10, |
|
stockupDate: '', |
|
status: 1, |
|
loadType: { |
|
'1': '干线', |
|
'2': '支线', |
|
'3': '专车', |
|
}, |
|
imgFileList: [], |
|
scancode: '', |
|
notRefresh: false, |
|
scrollHeight: '60vh', |
|
}) |
|
|
|
|
|
// 上传图片 -- 弹窗 |
|
const pullDownItemRef = ref() |
|
|
|
// 初始化页面展示未发车数据 |
|
details.dataList = details.NoTrainData |
|
|
|
let tip = ref(null) |
|
const basicContainer = ref(null) |
|
const date = ref<number | string[]>([]) |
|
function showCalendar() { |
|
details.show = !details.show |
|
} |
|
function onConfirm(e : any) { |
|
console.log(e); |
|
date.value[0] = e.startDate |
|
date.value[1] = e.endDate |
|
details.datatime = date.value[0] + ' 至 ' + date.value[1] |
|
|
|
basicContainer.value.startPullDownRefresh() |
|
} |
|
|
|
onShow(async () => { |
|
uni.$off('scancodedate') |
|
await nextTick() |
|
if (!details.notRefresh) basicContainer.value.startPullDownRefresh() |
|
}) |
|
onLoad(async () => { |
|
date.value[0] = (uni as any).$u.timeFormat((new Date().valueOf() - 1000 * 60 * 60 * 24 * 3), 'yyyy-mm-dd') |
|
date.value[1] = (uni as any).$u.timeFormat((new Date().valueOf()), 'yyyy-mm-dd') |
|
details.datatime = date.value[0] + ' 至 ' + date.value[1] |
|
// #ifdef APP |
|
utils.ttsspke('请选择配载计划') |
|
// #endif |
|
|
|
await nextTick() |
|
details.scrollHeight = await utils.getViewDistanceFormTop('.sccv') |
|
}) |
|
async function init() { |
|
details.pageNum = 1 |
|
details.dataList.splice(0) |
|
return initpage() |
|
} |
|
|
|
const handleSearch = () => { |
|
basicContainer.value.startPullDownRefresh() |
|
} |
|
|
|
function jiazai() { |
|
if (option.isEnd) return utils.handleToast('数据已加载完毕') |
|
|
|
details.pageNum++ |
|
initpage() |
|
} |
|
|
|
function scandata() { |
|
basicContainer.value.startPullDownRefresh() |
|
} |
|
|
|
/** 扫描 */ |
|
const handleScan = () => { |
|
details.notRefresh = true |
|
|
|
console.log('details.notRefresh :>> ', details.notRefresh); |
|
uni.scanCode({ |
|
success(res) { |
|
console.log('res :>> ', res); |
|
details.scancode = res.result |
|
scandata() |
|
} |
|
}) |
|
} |
|
|
|
async function initpage() { |
|
if (date.value.length === 0) return uni.showToast({ |
|
title: '请选择时间', |
|
icon: 'none' |
|
}) |
|
|
|
try { |
|
uni.showLoading({ |
|
title: '数据加载中', |
|
mask: true |
|
}) |
|
let data = { |
|
current: details.pageNum, |
|
size: details.size, |
|
createTime: date.value, |
|
orderCode: details.scancode |
|
} |
|
let response = await getSplitOrderTaskAllTaskList(data) |
|
if (response.code !== 200 || !response.data) return |
|
|
|
if (response.data.records.length < details.size) { |
|
uni.showToast({ |
|
title: '已经到底了。', |
|
icon: 'none' |
|
}) |
|
|
|
option.isEnd = true |
|
details.pageNum-- |
|
} |
|
|
|
|
|
if (details.status === 1) { |
|
for (let item of response.data.records) { |
|
item.list = [] |
|
details.NoTrainData.push(item) |
|
} |
|
} else { |
|
for (let item of response.data.records) { |
|
item.list = [] |
|
details.HaveLeftnData.push(item) |
|
} |
|
} |
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
uni.hideLoading() |
|
return null |
|
} |
|
} |
|
|
|
const handleShowItem = async (item, index) => { |
|
item.isActive = !item.isActive |
|
|
|
if (!item.isActive) { |
|
return item.height = '0px' |
|
} |
|
|
|
const setHeight = () => { |
|
// 获取元素的高度 |
|
uni.createSelectorQuery().select('#pullDownItem' + index + ' .container').boundingClientRect(async function (rect) { |
|
// console.log('元素的高度是：', rect.height); |
|
console.log('rect :>> ', rect); |
|
item.height = '0px' |
|
await nextTick() |
|
item.aciveHeight = rect.height + 'px' |
|
item.height = item.aciveHeight |
|
}).exec(); |
|
} |
|
|
|
setHeight() |
|
|
|
try { |
|
item.loading = true |
|
const res = await getSplitOrderTaskTaskList({ splitOrderAllTaskId: item.id, current: 1, size: 999 }, { isShowLoading: false }) |
|
|
|
const { code, data } = res |
|
|
|
if (code !== 200) return |
|
|
|
item.list = data.records || [] |
|
|
|
await nextTick() |
|
item.isActive && setHeight() |
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
item.loading = false |
|
} |
|
} |
|
|
|
function cleartime() { |
|
// console.log(1231211); |
|
details.datatime = '' |
|
date.value = [] |
|
basicContainer.value.startPullDownRefresh() |
|
} |
|
|
|
function setstate(state : number) { |
|
details.status = state |
|
details.dataList = state === 1 ? details.NoTrainData : details.HaveLeftnData |
|
basicContainer.value.startPullDownRefresh() |
|
} |
|
|
|
// 返回上一级页面 |
|
function backPreviousPage() { |
|
uni.reLaunch({ |
|
url: '/pages/index/index' |
|
}) |
|
} |
|
|
|
/** 跳转详情 */ |
|
const handleGoDetail = () => { |
|
uni.navigateTo({ |
|
url: '/pagesHome/pages/UnorderDetail/UnorderDetail' |
|
}) |
|
} |
|
|
|
const { datatime, dataList, show, status } = toRefs(details) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url("@/utils/style/common.scss"); |
|
|
|
// 搜索输入框 |
|
.inputsr { |
|
// width: 400upx !important; |
|
height: 64upx; |
|
background: #F5F5F6; |
|
border-radius: 8upx 8upx 8upx 8upx; |
|
opacity: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
font-size: 26upx; |
|
font-weight: 400; |
|
color: #092C4D; |
|
|
|
>.timeInput { |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
flex: 1; |
|
font-size: 26upx; |
|
} |
|
} |
|
|
|
.header { |
|
background-color: #FFFFFF; |
|
padding: 20upx 30upx; |
|
|
|
.input { |
|
height: 60upx; |
|
background: #F5F5F6; |
|
border-radius: 8upx; |
|
opacity: 1; |
|
border: 2upx solid #00000020; |
|
padding: 4upx; |
|
|
|
:deep(.input_container) { |
|
border: none; |
|
} |
|
} |
|
} |
|
|
|
.headtop { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
|
|
>view:nth-of-type(1) { |
|
width: 540upx; |
|
border: 2upx solid #00000020; |
|
padding: 10upx 20upx; |
|
box-sizing: border-box; |
|
|
|
>input { |
|
flex: 1; |
|
font-size: 28upx; |
|
} |
|
} |
|
|
|
>view:nth-of-type(2) { |
|
width: 128upx; |
|
height: 64upx; |
|
background: var(--subjectColor); |
|
border-radius: 8upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
} |
|
} |
|
|
|
|
|
// tabbar |
|
.tabtip { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
position: relative; |
|
|
|
>view { |
|
width: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-color: #ffffff; |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #90A0AF; |
|
|
|
>view { |
|
height: 80upx; |
|
border-bottom: 8upx solid #ffffff; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
|
|
.xz { |
|
color: var(--subjectColor); |
|
border-bottom: 8upx solid var(--subjectColor); |
|
// border-radius: 5upx; |
|
} |
|
} |
|
|
|
// 下拉框 |
|
.PullDownBox { |
|
background: #fff; |
|
border-radius: 10upx; |
|
overflow: hidden; |
|
font-size: 0.9rem; |
|
// box-shadow: 0 0 20upx 4upx #c9c9c9; |
|
|
|
.title { |
|
font-size: 0.9rem; |
|
color: #999; |
|
font-weight: bold; |
|
} |
|
|
|
.tip { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
padding: 10upx 30upx; |
|
font-size: 0.9rem; |
|
|
|
&.primary { |
|
background-color: #0086f120; |
|
color: var(--primaryColor); |
|
} |
|
|
|
&.err { |
|
background-color: #f8544b20; |
|
color: var(--errColor); |
|
} |
|
} |
|
|
|
// 标题 |
|
.PullDownBox_title { |
|
padding: 20upx; |
|
position: relative; |
|
// font-size: 0.9rem; |
|
} |
|
|
|
.content { |
|
position: relative; |
|
background-color: #fff; |
|
border-radius: 10upx; |
|
overflow: hidden; |
|
} |
|
|
|
$transitionTime: 0.3s; |
|
|
|
// 下拉显示内容 |
|
.PullDownBox_content { |
|
height: 0px; |
|
overflow: hidden; |
|
position: relative; |
|
|
|
// 子任务 |
|
.container { |
|
background-color: #e6e8eb; |
|
padding: 20upx; |
|
} |
|
|
|
// loading蒙层 |
|
.mask { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-color: #fde5cc; |
|
opacity: 0.8; |
|
z-index: 99; |
|
} |
|
|
|
&.transition { |
|
transition: height $transitionTime; |
|
} |
|
} |
|
|
|
// 显示控件 |
|
.PullDown_control { |
|
padding: 20upx; |
|
background: #fff; |
|
transition: all $transitionTime; |
|
border-top: 2upx solid #e6e8eb; |
|
|
|
.icon_box { |
|
// transform: rotate(-90deg); |
|
transform: rotate(-90deg); |
|
transition: all $transitionTime; |
|
|
|
&.active { |
|
transform: rotate(90deg); |
|
} |
|
} |
|
|
|
&.clickClass { |
|
background-color: #e6e8eb; |
|
} |
|
} |
|
} |
|
|
|
// 移除按钮 |
|
.removeButton { |
|
margin-left: 20upx; |
|
background: #f8625a; |
|
padding: 20upx 40upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 10upx; |
|
color: #fff; |
|
transition: all 0.3s; |
|
} |
|
|
|
.clickClass { |
|
opacity: 0.7; |
|
} |
|
|
|
.number { |
|
font-size: 1.1rem; |
|
} |
|
|
|
.errColor { |
|
color: var(--errColor); |
|
} |
|
|
|
|
|
.primaryColor { |
|
color: var(--primaryColor); |
|
} |
|
|
|
|
|
.subjectColor { |
|
color: var(--subjectColor); |
|
} |
|
</style> |