286 lines
8.3 KiB
Vue
286 lines
8.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<z-paging ref="pagingRef" class="containerBox" v-model="listData" :default-page-size="queryParams.pageSize" @query="queryList">
|
||
<template #top>
|
||
<view style="padding: 20rpx 32rpx 0;">
|
||
<!-- 项目号/项目描述/物料号/物料描述/供应商编码/供应商名称/订单编号 -->
|
||
<uv-search v-model="queryParams.keyword" placeholder="请输入" :showAction="true" actionText="搜索" @search="searchList" @custom="searchList"></uv-search>
|
||
<uv-tabs :list="list" @click="click" lineColor="#199793"></uv-tabs>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<view class="box">
|
||
<view v-for="item in listData" class="item">
|
||
<view class="title">配送号：{{ item.orderNo }}</view>
|
||
<view><text>发货人：</text>{{ item.shipperName }}</view>
|
||
<view><text>发货地：</text>{{ item.originName }}</view>
|
||
<view><text>接收人：</text>{{ item.receiverName }}</view>
|
||
<view style="display: flex; align-items: center;">
|
||
<view><text>目的地：</text>{{ item.destName }}</view>
|
||
<image :src="openMap" mode="scaleToFill" v-show="item.orderStatus == 2" style="width: 30rpx; height: 30rpx;margin-left: 20rpx;" @tap="toMap(item, 'location')" />
|
||
</view>
|
||
<view><text>货物数量：</text>{{ item.items.length }}</view>
|
||
<view><text>配送日期：</text>{{ item.deliveryDate }}</view>
|
||
<view class="statusBtn">
|
||
<!-- <uv-button :plain="true" shape="circle" text="查看详情" @tap="goDetail(item)" style="margin-right: 20rpx;"></uv-button> -->
|
||
<uv-button type="primary" shape="circle" v-show="item.orderStatus == 1" text="开始配送" @tap="changeOrder(item, 'ORIGIN')"></uv-button>
|
||
<uv-button type="primary" shape="circle" v-show="item.orderStatus == 2" text="完成配送" @tap="changeOrder(item, 'DEST')"></uv-button>
|
||
<uv-button type="primary" shape="circle" v-show="item.orderStatus == 3" text="查看单据" style="margin-right: 20rpx;" @tap="changeOrder(item, 'COMPLETE')"></uv-button>
|
||
<!-- <uv-button type="primary" shape="circle" v-show="item.orderStatus == 1" text="开始配送" @tap="change1(item, 'ORIGIN')"></uv-button>
|
||
<uv-button type="primary" shape="circle" v-show="item.orderStatus == 2" text="完成配送" @tap="change1(item, 'DEST')"></uv-button> -->
|
||
<uv-button type="primary" v-show="item.orderStatus == 3" :plain="true" shape="circle" text="历史轨迹" @tap="toMap(item, 'history')"></uv-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
|
||
<view class="btn">
|
||
<uv-button type="primary" text="确定" size="large" style="width: 100%;" class="mainBtn" @tap="handleAdd">新 增 配 送 任 务</uv-button>
|
||
</view>
|
||
|
||
<uv-modal ref="modalRef" title="单据明细" class="modalInfo" confirmText="关闭" confirmColor="#606266"
|
||
:closeOnClickOverlay="false">
|
||
<view class="box">
|
||
<view v-for="items in infoList" class="item">
|
||
<view><text>订单编号：</text>{{ items.sapNo }}</view>
|
||
<view><text>项目描述：</text>{{ items.xmMs }}</view>
|
||
<view><text>项目号：</text>{{ items.xmNo }}</view>
|
||
<view><text>物料号：</text>{{ items.wlNo }}</view>
|
||
<view><text>物料描述：</text>{{ items.wlMs }}</view>
|
||
<view><text>供应商名称：</text>{{ items.gysMc }}</view>
|
||
<view><text>存放位置：</text>{{ items.pcode || "-" }}</view>
|
||
<view><text>身份码：</text>{{ items.entityId || "-" }}</view>
|
||
<view><text>备注：</text>{{ items.remark || '-' }}</view>
|
||
</view>
|
||
</view>
|
||
</uv-modal>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
|
||
import { getOrder, getOrderDetail } from "@/api/index"
|
||
import openMap from "@/static/openMap.png"
|
||
|
||
|
||
|
||
const list = ref([{
|
||
name: '待接单',
|
||
value: '0',
|
||
}, {
|
||
name: '待配送',
|
||
value: '1',
|
||
}, {
|
||
name: '配送中',
|
||
value: '2',
|
||
}, {
|
||
name: '已完成',
|
||
value: '3',
|
||
}])
|
||
const click = (item) => {
|
||
queryParams.value.orderStatus = item.value
|
||
pagingRef.value.reload()
|
||
console.log('item', item);
|
||
}
|
||
const queryParams = ref({
|
||
// keyword: "",
|
||
orderStatus: 0,
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
})
|
||
const pagingRef = ref(null)
|
||
const listData = ref([])
|
||
// 获取列表
|
||
const queryList = (pageNo, pageSize) => {
|
||
queryParams.value.pageNum = pageNo
|
||
console.log(pageNo, pageSize, queryParams.value)
|
||
getOrder(queryParams.value).then(res => {
|
||
console.log(res.rows)
|
||
pagingRef.value.complete(res.rows)
|
||
}).catch(res => {
|
||
pagingRef.value.complete(false)
|
||
})
|
||
}
|
||
const searchList = () => {
|
||
pagingRef.value.reload()
|
||
}
|
||
|
||
onLoad(() => {
|
||
})
|
||
|
||
onShow(() => {
|
||
pagingRef.value?.reload()
|
||
})
|
||
|
||
|
||
// 弹窗
|
||
const modalRef = ref()
|
||
const infoList = ref([])
|
||
const goDetail = (item) => {
|
||
if (item.infoList && item.infoList.length > 0) {
|
||
infoList.value = item.infoList
|
||
modalRef.value.open()
|
||
return
|
||
}
|
||
getOrderDetail({ orderNo: item.orderNo }).then(res => {
|
||
infoList.value = res.data
|
||
item.infoList = res.data
|
||
modalRef.value.open()
|
||
})
|
||
}
|
||
|
||
// 跳转地图
|
||
const toMap = (item, type) => {
|
||
if (type === 'location') {
|
||
uni.navigateTo({
|
||
url: "/pages/index/map?orderNo=" + item.orderNo + "&plateNo=" + item.plateNo + "&type=" + type
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/index/map?orderNo=" + item.orderNo + "&plateNo=" + item.plateNo + "&type=" + type
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const changeOrder = (item, type) => {
|
||
uni.navigateTo({
|
||
url: "/pages/index/deliveryBill?type=" + type + "&orderNo=" + item.orderNo + "&billNoCk=" + item.billNoCk
|
||
})
|
||
}
|
||
|
||
const change1 = (item, type) => {
|
||
uni.navigateTo({
|
||
url: "/pages/index/editDelivery?type=" + type + "&orderNo=" + item.orderNo + "&billNoCk=" + item.billNoCk
|
||
})
|
||
}
|
||
|
||
const handleAdd = (item) => {
|
||
uni.navigateTo({
|
||
url: "/pages/index/addDelivery"
|
||
})
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
position: relative;
|
||
.containerBox{
|
||
// padding: 32rpx;
|
||
padding-bottom: 120rpx;
|
||
min-height: calc(100vh - 196rpx - 120rpx);
|
||
|
||
::v-deep .uv-tabs__wrapper__nav{
|
||
width: 100%;
|
||
}
|
||
::v-deep .uv-tabs__wrapper__nav__item{
|
||
flex: 1;
|
||
}
|
||
.dropDown{
|
||
padding: 0 30rpx;
|
||
border-bottom: 1px solid #dadbde;
|
||
.item_dropDown{
|
||
padding: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
::v-deep .uv-text{
|
||
width: unset !important;
|
||
flex: unset !important;
|
||
}
|
||
::v-deep .item_text{
|
||
max-width: 200rpx;
|
||
margin-right: 10rpx !important;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .uv-search {
|
||
flex: unset;
|
||
}
|
||
::v-deep .zp-scroll-view-super {
|
||
background-color: #F3F4F8;
|
||
}
|
||
.box{
|
||
// background-color: #ebebeb;
|
||
// background-color: #f5f5f5;
|
||
// padding-top: 20rpx;
|
||
background-color: #F3F4F8;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
.item {
|
||
background: white;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
line-height: 50rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 8rpx;
|
||
color: #333;
|
||
position: relative;
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
text{
|
||
color: #666;
|
||
}
|
||
.statusBtn {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
border-top: 1px solid #c7c7c7;
|
||
padding-top: 10rpx;
|
||
::v-deep .uv-button{
|
||
height: 60rpx !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
::v-deep .uv-input__content{
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
.btn {
|
||
position: fixed;
|
||
width: calc(100vw - 64rpx);
|
||
bottom: 0;
|
||
left: 32rpx;
|
||
z-index: 99;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.modalInfo {
|
||
.box {
|
||
width: 100%;
|
||
max-height: 60vh;
|
||
overflow: auto;
|
||
.item {
|
||
background: #efefef;
|
||
padding: 20rpx;
|
||
margin-top: 20rpx;
|
||
line-height: 50rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 8rpx;
|
||
color: #333;
|
||
border: unset;
|
||
|
||
}
|
||
}
|
||
}
|
||
::v-deep .zp-paging-container-content{
|
||
background-color: #F3F4F8;
|
||
}
|
||
|
||
</style>
|