<template>
|
<view class="">
|
<view class="customer-index">
|
<view class="customer-index-body">
|
|
<!-- 待领取和转发收发单 -->
|
<view class="wait-collection"
|
style="background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain">
|
</view>
|
<!-- 自主配送界面 -->
|
<view class="self-deliver" v-if="personnelType === 1">
|
<view class="self-deliver_text">
|
创建日计划订单
|
</view>
|
<view class="self-deliver_btn">
|
<u-button text="去创建"
|
type="primary"
|
shape="cirle"
|
@click="selfDeliver"></u-button>
|
</view>
|
</view>
|
<view style="position: relative;top: -120px;">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"
|
iconSize="1000"
|
text="暂无数据"
|
v-if="orderPlanData.length == 0"></u-empty>
|
</view>
|
<view class="collection-form">
|
<view class="collection-form-item"
|
v-for="(item, index) in orderPlanData"
|
:key="index"
|
@click="cardBodyClick(item)">
|
<view class="first-line">
|
<view class="dispatch-receive">
|
<!-- <view class="dispatch-dept">{{ item.deptName }}</view>
|
<view class="black-bar"></view> -->
|
<view class="dispatch">{{ item.filedName }}</view>
|
</view>
|
<view class="point-number">
|
<text class="residue">{{ item.cars2 }}</text>
|
<text>/{{ item.carNum }}</text>
|
</view>
|
</view>
|
<view class="second-line"
|
style="width: 94%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
v-if="item.orderType==='内销'||item.orderType==='外购' || item.orderType==='外购退'">
|
{{item.customerName}}
|
</view>
|
<view class="second-line">
|
<view class="coal-name">
|
<view class="coal-name-tag">{{ item.productNames || item.productName }} <text style="margin-left: 20rpx;">{{ proType[item.packingType]}}</text> </view>
|
|
<view class="black-bar"></view>
|
<view class="coal-type"
|
v-if="item.orderType">{{ item.orderType }}</view>
|
</view>
|
</view>
|
<view class="second-line">
|
<text>订单编号：</text>{{item.orderCode}}
|
</view>
|
<view class="second-line">
|
<text>日计划编号：</text>{{item.code}}
|
</view>
|
<view class="third-line">
|
<view class="time-icon">
|
<view
|
style="width: 12rpx;height: 12rpx;line-height: 24rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/clock.png') no-repeat;background-size: cover">
|
</view>
|
</view>
|
<view class="send-date">{{ item.sendDate }}</view>
|
</view>
|
<view class="fourth-line">
|
<view class="receive"
|
@click.stop="receiveClick(item)"
|
v-if="Number(item.cars2) < Number(item.carNum)"
|
>
|
<view class="button-image">领取</view>
|
</view>
|
<view class="forward"
|
@click.stop="forwardClick(item)">
|
<view class="button-image">转发</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 历史收发单 -->
|
<view class="history-numbers">
|
<combined-title title="历史收发单"></combined-title>
|
<scroll-view :scroll-top="scrollTop"
|
scroll-y="true"
|
class="scroll-Y"
|
@scrolltolower="historyScrolltolower">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"
|
iconSize="1000"
|
text="暂无数据"
|
v-if="historyCoalData.length == 0"></u-empty>
|
<view class="history-information"
|
v-for="(item, index) in historyCoalData"
|
:key="index"
|
@click="faYundetail(item)">
|
<view class="first">
|
<view class="">{{ item.filedName || '' }}</view>
|
<view class=""><u-icon name="arrow-right"
|
color="#999999"
|
size="40"></u-icon></view>
|
</view>
|
<view class="second">
|
<view class="coal-name">{{ item.productNames || item.productName }} <text style="margin-left: 20rpx;">{{ proType[item.packingType]}}</text></view>
|
<view class="order-type">{{ item.orderType || '' }}</view>
|
</view>
|
<view class="third">
|
<view class="third-line">
|
<view class="third-line_text">领取数:</view>
|
<view class="third-line_num">{{ item.cars2 }}</view>
|
</view>
|
<view class="third-line">
|
<view class="third-line_text">剩余数:</view>
|
<view class="third-line_num"
|
v-if="roleType == 1">{{ item.carNumSurplus1 }}</view>
|
<view class="third-line_num"
|
v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
|
</view>
|
<view class="third-line">
|
<view class="third-line_text">收发单个数:</view>
|
<view class="third-line_num">{{ item.tmCount }}</view>
|
</view>
|
</view>
|
<view class="fourth">
|
<view class="fourth-icon">
|
<view
|
style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/clock.png') no-repeat;background-size: cover">
|
</view>
|
</view>
|
<view class="senddate">{{ item.sendDate }}</view>
|
</view>
|
<view class="fourth">
|
<view class="fourth-icon">
|
<view
|
style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;">
|
</view>
|
</view>
|
<view class="senddate">{{ item.orderCode }}</view>
|
</view>
|
</view>
|
<view class="more_text"
|
v-if="showMoreData && historyCoalData.length !== 0">没有数据了...</view>
|
<view class="white-block"></view>
|
</scroll-view>
|
</view>
|
</view>
|
<!-- 领取弹出框 -->
|
<u-popup :show="show"
|
@close="close"
|
@open="open"
|
mode="center"
|
round="10">
|
<view class="receiverPopup">
|
<view class="receiverPopup__title"><text>确认领取数量</text></view>
|
<view class="receiverPopup__input"><u--input v-model="receiveNum"
|
@change="change"
|
placeholder="请输入内容"
|
type="number"
|
border="surround"></u--input></view>
|
<view class="receiverPopup__btn"><u-button text="确定"
|
type="primary"
|
@click="popupDetermineClick"
|
:disabled="canClick"
|
:loading="popupDetermineClickLoading"></u-button></view>
|
</view>
|
</u-popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import combinedTitle from '@/components/combined-title/combined-title.vue';
|
export default {
|
props: {
|
orderPlanDataStore: {
|
type: Array,
|
default: []
|
}
|
},
|
components: {
|
combinedTitle
|
},
|
watch: {
|
orderPlanDataStore: {
|
handler(v) {
|
this.orderPlanData = v;
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
computed: {
|
roleType() {
|
return uni.getStorageSync('roleType');
|
}
|
},
|
data() {
|
return {
|
orderPlanData: [],
|
proType:['散装','液氯瓶装','罐装','PVC25','PVC80','PVC1150','PVc1200'],
|
personnelType:'', // 用户类型
|
show: false, // 领取收发单弹出框
|
receiveNum: null,
|
getOrderNum: {
|
num: '',
|
id: null
|
},
|
historyCoalData: [],
|
// 表格加载状态
|
loading: false,
|
scrollTop: 0,
|
// 每页数据量
|
pageSize: 10,
|
// 当前页
|
pageCurrent: 1,
|
// 数据总量
|
total: 0,
|
// 是否显示更多数据
|
showMoreData: false,
|
cars2: "", //领取日计划的车数
|
carNum: "", //日计划的总车数
|
// 剩余的收发单数量
|
carNumSurplus: '',
|
canClick: false,
|
popupDetermineClickLoading: false
|
};
|
},
|
onLoad() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.GetOrderPlan();
|
this.getJhOrderPlanDataPage();
|
this.getType();
|
},
|
// 获取发运计划列表
|
GetOrderPlan() {
|
uni.showLoading({ title: '加载中...' });
|
this.$reqGet('GetOrderPlan').then(res => {
|
if (res.data) {
|
this.orderPlanData = res.data;
|
uni.hideLoading();
|
}
|
});
|
},
|
// 获取历史收发单
|
getJhOrderPlanDataPage() {
|
uni.showLoading({
|
title: '加载中'
|
});
|
this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
|
if (res.data.records) {
|
this.total = res.data.total;
|
if (this.pageCurrent > 1) {
|
this.historyCoalData = this.historyCoalData.concat(res.data.records);
|
this.historyCoalData = this.ArrSet(this.historyCoalData, 'id');
|
uni.hideLoading();
|
} else {
|
this.historyCoalData = res.data.records;
|
uni.hideLoading();
|
}
|
}
|
});
|
},
|
// 上拉加载
|
historyScrolltolower() {
|
if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true);
|
this.pageCurrent++;
|
this.getJhOrderPlanDataPage();
|
},
|
//fix 点击收发单返回会增加重复数据
|
ArrSet(Arr, id) {
|
var obj = {};
|
const arrays = Arr.reduce((setArr, item) => {
|
obj[item[id]] ? '' : (obj[item[id]] = true && setArr.push(item));
|
return setArr;
|
}, []);
|
return arrays;
|
},
|
//领取弹框
|
popupDetermineClick() {
|
if (this.receiveNum > 0) {
|
this.popupDetermineClickLoading = true;
|
this.getOrderNum.num = this.receiveNum;
|
uni.showLoading({ title: '加载中...' });
|
this.$reqPost('customerGet', this.getOrderNum, 'params').then(res => {
|
uni.hideLoading();
|
if (res.code == 0) {
|
this.popupDetermineClickLoading = false;
|
this.getOrderNum.num = '';
|
this.GetOrderPlan();
|
this.show = false;
|
uni.showToast({
|
title: '领取成功！',
|
icon: 'none',
|
duration: 1000
|
});
|
} else {
|
this.popupDetermineClickLoading = false;
|
this.$u.toast(res.msg ? res.msg : '领取失败');
|
}
|
});
|
} else if (Number(this.receiveNum) <= 0) {
|
uni.showToast({
|
title: '请输入合法的数字',
|
icon: 'none'
|
});
|
this.show = true;
|
} else {
|
uni.showToast({
|
title: '请输入领取数量',
|
icon: 'none'
|
});
|
this.show = true;
|
}
|
},
|
/**
|
* @客户领取
|
* 领取弹框
|
*/
|
receiveClick(item) {
|
console.log(item,'213')
|
this.show = true;
|
this.receiveNum = item.carNum;
|
this.getOrderNum.id = item.id; // 获取领取收发单的id
|
this.cars2 = item.cars2
|
this.carNum = item.carNum
|
},
|
open() {},
|
close() {
|
this.show = false;
|
this.receiveNum = null;
|
},
|
change(e) {
|
console.log('输入框', e);
|
this.canClick = e > (this.carNum - this.cars2)
|
if (this.canClick) {
|
this.$u.toast('已超过当前日计划收发单数量,请重新输入')
|
}
|
},
|
// （顶部）发运计划详情
|
cardBodyClick(v) {
|
uni
|
.navigateTo({ url: `/subPages/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
|
},
|
// 点击历史收发单获取详情
|
faYundetail(v) {
|
uni.navigateTo({
|
url: `/subPages/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}&productNames=${v.productNames || v.productName}&deptName=${v.deptName}`
|
});
|
},
|
// 转发
|
forwardClick(obj) {
|
console.log(111,obj)
|
if (obj.cars2 == 0) return this.$u.toast('请先领取后再转发');
|
uni
|
.navigateTo({ url: `/pages/public-page/forward/forward?orderPlanId=${obj.id}&orderType=${obj.orderType}&carNumSurplus1=${obj.carNumSurplus1}&carNum=${obj.carNum}&cars2=${obj.cars2}&productName=${obj.productName}&customerId=${obj.customerId}&pvcPlanMeasure=${obj.pvcPlanMeasure}&packingType=${obj.packingType}&productId=${obj.productId}`});
|
},
|
// 自主配送
|
selfDeliver() {
|
uni.navigateTo({
|
url: '/subPages/addDailyPlan/addDailyPlan'
|
})
|
},
|
//获取用户标识
|
getType(){
|
this.$reqGetId('getPersonnelType',uni.getStorageSync('customerId')).then(res=>{
|
console.log(res,'ressss')
|
if(res.code === 0){
|
this.personnelType = res.data.personnelType;
|
}else{
|
this.personnelType = '';
|
}
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss"
|
scoped>
|
|
@mixin flex {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
// 自主配送
|
.self-deliver {
|
position: relative;
|
top: vww(-150);
|
width: 88%;
|
height: vww(50);
|
margin: vww(8) auto;
|
padding: 0 vww(8);
|
background: #ffffff;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
|
border-radius: 20rpx;
|
@include flex;
|
|
|
}
|
/deep/.u-button {
|
width: 100%;
|
height: 28px !important;
|
line-height: 40px;
|
padding: 0 12px;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #ffffff;
|
background: #497bfb !important;
|
letter-spacing: 4rpx;
|
border-radius: 37rpx 37rpx 37rpx 37rpx !important;
|
box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
|
}
|
|
.wait-collection {
|
width: 100%;
|
height: 600rpx;
|
position: relative;
|
top: vww(-10);
|
z-index: 0;
|
}
|
|
.white-block {
|
width: 100%;
|
height: vww(50);
|
margin-top: vww(10);
|
}
|
|
.scroll-Y {
|
height: 900rpx;
|
|
.more_text {
|
color: #333;
|
font-size: 24rpx;
|
text-align: center;
|
}
|
}
|
|
.history-numbers {
|
width: 100%;
|
position: relative;
|
top: vww(-110);
|
|
.history-information {
|
width: 690rpx;
|
height: 398rpx;
|
margin: vww(10) vww(15);
|
background: #ffffff;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
|
border-radius: 20rpx;
|
@include flex flex-direction: column;
|
align-items: flex-start;
|
justify-content: space-evenly;
|
overflow: hidden;
|
|
.first {
|
width: 96%;
|
height: 34rpx;
|
font-size: 32rpx;
|
font-weight: 300;
|
color: #303030;
|
@include flex;
|
margin: vww(10) vww(10) 0;
|
}
|
|
.second {
|
width: 100%;
|
height: vw(80);
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
margin: vww(10) vww(10) 0;
|
@include flex;
|
justify-content: flex-start;
|
|
.coal-name {
|
width: 70%;
|
height: vww(50);
|
margin-right: vww(21);
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis;
|
}
|
|
.order-type {
|
color: #035cfb;
|
border: 2px solid #035cfb;
|
border-radius: 4rpx;
|
padding: vww(2) vww(4);
|
text-align: center;
|
}
|
}
|
|
.third {
|
width: 96%;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
margin: vww(10) vww(10) 0;
|
@include flex;
|
|
.third-line {
|
@include flex;
|
|
&_text {
|
color: #919090;
|
}
|
|
&_num {
|
color: #035cfb;
|
}
|
}
|
}
|
|
.fourth {
|
width: 100%;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
margin: vww(10) vww(10) 0;
|
@include flex;
|
|
.fourth-icon {
|
width: vww(13);
|
height: vww(13);
|
margin-right: vww(14);
|
}
|
|
.senddate {
|
flex: 1;
|
}
|
}
|
}
|
}
|
|
::v-deep.customer-index {
|
width: 100%;
|
margin: 0 auto;
|
|
// 主体
|
.customer-index-body {
|
.collection-form {
|
width: vww(345);
|
margin: 0 vww(15);
|
position: relative;
|
top: vww(-144);
|
|
.collection-form-item {
|
width: 700rpx;
|
height: 390rpx;
|
background: #ffffff;
|
box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
|
border-radius: 20rpx;
|
overflow: hidden;
|
@include flex;
|
flex-direction: column;
|
position: relative;
|
align-items: flex-start;
|
margin-top: vww(10);
|
|
.first-line {
|
width: 94%;
|
height: vww(30);
|
margin: vww(10) vww(16) 0 vww(16);
|
display: flex;
|
justify-content: space-between;
|
|
.dispatch-receive {
|
width: 70%;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.dispatch-dept {
|
|
display: flex;
|
align-items: center;
|
}
|
|
.black-bar {
|
width: 2rpx;
|
height: 30rpx;
|
background: #515151;
|
margin-left: vww(12);
|
}
|
|
.dispatch {
|
// margin-left: vww(12);
|
min-width: vww(50);
|
}
|
|
}
|
|
.point-number {
|
width: 15%;
|
|
text {
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #c78a64;
|
}
|
|
.residue {
|
font-size: 40rpx;
|
font-weight: 400;
|
color: #f81414;
|
}
|
}
|
}
|
|
.second-line {
|
width: 100%;
|
height: vww(50);
|
margin-left: vww(16);
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
margin-bottom: 15rpx;
|
|
.coal-name {
|
width: 80%;
|
flex-grow: 1;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
position: relative;
|
display: flex;
|
margin-top: 20rpx;
|
align-items: center;
|
.coal-name-tag{
|
width: 70%;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis;
|
}
|
|
.black-bar {
|
width: 2rpx;
|
height: 30rpx;
|
background: #515151;
|
margin-left: vww(12);
|
}
|
|
.coal-type {
|
margin-left: vww(12);
|
min-width: vww(50);
|
height: 30rpx;
|
line-height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
}
|
|
.third-line {
|
width: 40%;
|
height: vww(30);
|
margin-left: vww(15);
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.send-date {
|
margin-left: vww(5);
|
width: 170rpx;
|
height: 24rpx;
|
line-height: 24rpx;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
|
.fourth-line {
|
width: 100%;
|
height: vww(40);
|
@include flex;
|
justify-content: flex-start;
|
position: relative;
|
bottom: vww(10);
|
left: 25%;
|
|
.receive,
|
.forward {
|
width: vww(123);
|
height: vww(48);
|
@include flex;
|
justify-content: center;
|
color: #ffffff;
|
font-size: 28rpx;
|
position: absolute;
|
|
.button-image {
|
width: 100%;
|
height: 100%;
|
background: url('../../../static/image/banner/button.png') no-repeat;
|
background-size: cover;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #ffffff;
|
text-align: center;
|
line-height: vww(45);
|
}
|
}
|
|
.receive {
|
left: vww(20);
|
}
|
|
.forward {
|
width: vww(106);
|
left: vww(140);
|
|
.button-image {
|
width: 100%;
|
height: 100%;
|
background: url('../../../static/image/banner/transpartent.png') no-repeat;
|
background-size: cover;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #3b56eb;
|
text-align: center;
|
line-height: vww(45);
|
}
|
}
|
}
|
}
|
}
|
}
|
|
// 领取弹出框
|
.receiverPopup {
|
height: vww(110);
|
|
.receiverPopup__title {
|
margin: vww(10) auto 0;
|
width: 80%;
|
text-align: center;
|
}
|
|
.receiverPopup__input {
|
width: 80%;
|
margin: vww(10) auto 0;
|
|
.u-input {
|
border: 1px solid #dddddd;
|
}
|
}
|
|
&__btn {
|
margin: vww(10) auto;
|
width: 50%;
|
|
.u-button {
|
height: vww(20);
|
}
|
}
|
}
|
}
|
</style>
|
