<template>
|
<view class="">
|
<view class="fayunPlan">
|
<view class="plan-banner">
|
<view class="top-container">
|
<view class="back-icon"
|
@click="backPage"><u-icon name="arrow-left"
|
size="50"
|
color="#fff"></u-icon></view>
|
<view class="top-title">发运计划详情</view>
|
</view>
|
<view class="middle-container">
|
<view class="dept-name">
|
{{ !pageType ? deptName : customerName }}
|
<text v-show="deptName">({{ productNames || productName}})</text>
|
</view>
|
<view class="dept-num" v-if="!pageType">
|
<text style="font-size: 46rpx;
|
font-weight: 400;
|
color: #FFFFFF;
|
text-shadow: 0rpx 4rpx 0rpx #1A66FE;">
|
{{ orderPlanDetail.fowardSum || 0 }}
|
</text>
|
<text style="font-size: 24rpx;
|
font-weight: 400;
|
color: #F81414;
|
text-shadow: 0rpx 4rpx 0rpx #1A66FE;">
|
/{{ cars2 ||carNum||'' }}
|
</text>
|
</view>
|
</view>
|
<view class="bottom-container">
|
<view class="bottom-block" v-if="!pageType">
|
<view class="bottom-content"
|
v-for="(item, index) in orderPlanDetail.huodaiList"
|
:key="index">
|
<view class="forward-name">{{ item.huoDaiName }}</view>
|
<view class="forward-num">
|
{{ item.fleetOrHuodaiNub }}
|
<text>张</text>
|
</view>
|
</view>
|
<view class="bottom-content"
|
v-for="(item, index) in orderPlanDetail.cheduiList"
|
:key="index">
|
<view class="fleet-name">{{ item.cheduiName }}</view>
|
<view class="fleet-num">
|
{{ item.fleetOrHuodaiNub }}
|
<text>张</text>
|
</view>
|
</view>
|
<view class="bottom-content">
|
<view class="fleet-name">司机</view>
|
<view class="fleet-num">
|
{{ orderPlanDetail.sijiSum || 0 }}
|
<text>张</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="block-top">
|
<combined-title title="收发单历史"></combined-title>
|
<view class="total">
|
总净重
|
<text>{{ Number(total).toFixed(2) || 0 }}</text>
|
</view>
|
</view>
|
<view class="main-banner">
|
<view class="empty-pointer"
|
v-if="!yyDailyList">暂无更多数据</view>
|
<view class="main-block">
|
<view class="main-container">
|
<view class="main-container_content"
|
v-for="(item, index) in yyDailyList"
|
:key="index"
|
@click="showMore(item)">
|
<view class="deleteBtn" v-if="roleType === 1 && item.status <=3">
|
<u-button style="height:40rpx" size='mini' :color='"red"' type="primary" text="删除"
|
@tap.stop="deleteOrder(item)"
|
></u-button>
|
</view>
|
<view class="arrow-icon" v-else><u-icon name="arrow-right"
|
size="30"
|
color="#999999"></u-icon></view>
|
<view class="divider"><u-divider></u-divider></view>
|
<view class="first-line">
|
<view class="car-num">{{ item.carNo || '' }}</view>
|
<view class="order-type">{{ coalStatus[item.status] }}</view>
|
</view>
|
<view class="second-line">
|
<view class="line-content">
|
<view class="line-content_text">净重</view>
|
<view class="line-content_num">{{ Number(item.clean) .toFixed(2) || 0 }}</view>
|
</view>
|
<view class="line-content">
|
<view class="line-content_text">余量</view>
|
<view class="line-content_num">{{ Number(item.orderSurplus).toFixed(2) || 0 }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="white-block"></view>
|
<!-- 请求退单弹窗 -->
|
<view class="">
|
<u-modal :show="cancelAppointShow"
|
title="退单确认"
|
showCancelButton
|
content="是否确认删除此订单"
|
@confirm="cancelAppointConfirm"
|
@cancel="cancelAppointCancel"></u-modal>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import combinedTitle from '@/components/combined-title/combined-title.vue';
|
export default {
|
navigationStyle: 'custom',
|
components: {
|
combinedTitle
|
},
|
onLoad(value) {
|
this.orderPlanId = value.orderPlanId;
|
this.orderCode = value.code;
|
this.cars2 = value.cars2 ? value.cars2 : null;
|
this.deptName = value.deptName;
|
this.coalName = value.coalName;
|
this.productName = value.productNames;
|
this.customerName = value.customerName;
|
this.carNum = value.carNum ? value.carNum : null
|
console.log(value, '发运计划参数');
|
if(value.roleType && value.roleType === '5'){
|
this.pageType = true; // 表示是库管，隐藏某些元素
|
}
|
},
|
data() {
|
return {
|
orderPlanId: null,
|
orderCode: null,
|
customerName:'',
|
orderPlanDetail: {},
|
pageType:false, // 页面显示dom判断条件
|
coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入仓库', '出仓库', '放空', '作废', '入场申请',
|
'进入场院', '异常审核中', '返回加减吨', '超时', '打印中', '打印中', '填写', '放空确认中', '超最大毛重确认中','补打','入场检查','质检中',
|
'离场检查','已打印','装卸','返回加减吨确认中'
|
],
|
yyDailyList: [],
|
// 领取数量
|
cars2: '',
|
cancelAppointShow:false,
|
coalName: '',
|
productName:'',
|
cancelAppointId:'',
|
deptName: '',
|
total: 0,
|
carNum: ''
|
};
|
},
|
onShow() {
|
this.init();
|
},
|
methods: {
|
backPage() {
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
showMore(item) {
|
uni.navigateTo({
|
url: `/subPages/fayunPlanDetails/fayunPlanMore/fayunPlanMore?orderPlanId=${this.orderPlanId}&id=${item.id}&orderType=${item.orderType}`
|
});
|
},
|
init() {
|
this.GetOrderPlanDetail();
|
},
|
// 获取发运计划详情
|
GetOrderPlanDetail() {
|
uni.showLoading({
|
title: '加载中...'
|
});
|
this.$reqGet('xiangqingList', { orderPlanId: this.orderPlanId }).then(res => {
|
if (res.code == 0) {
|
this.orderPlanDetail = res.data;
|
this.yyDailyList = res.data.yyDailyList;
|
if (res.data.yyDailyList) {
|
this.total = this.yyDailyList.reduce((prev, cur) => {
|
return Number(prev) + Number(cur.clean);
|
}, 0);
|
console.log(this.total,'total')
|
} else {
|
this.total = 0;
|
}
|
uni.hideLoading();
|
} else {
|
this.$u.toast('加载失败，请稍后重试');
|
uni.hideLoading();
|
}
|
});
|
},
|
//客户请求退单
|
deleteOrder(item){
|
if (item.status >= 3 && item.status !== 24) {
|
this.$u.toast('当前状态不可退单')
|
return
|
}
|
this.cancelAppointShow = true
|
this.cancelAppointId = item.id
|
},
|
cancelAppointConfirm() {
|
this.cancelAppointShow = false
|
uni.showLoading({
|
title: '加载中'
|
})
|
this.$reqPost('cancelAppoint', { takeCoalId: this.cancelAppointId }, 'params').then(res => {
|
uni.hideLoading()
|
if (res.code == 0) {
|
this.$u.toast('退单成功');
|
} else {
|
this.$u.toast(res.msg ? res.msg : '退单失败');
|
}
|
}).then(() => {
|
setTimeout(() => {
|
this.GetOrderPlanDetail();
|
}, 1000);
|
}).catch(e => {
|
uni.hideLoading()
|
})
|
},
|
cancelAppointCancel() {
|
this.cancelAppointShow = false
|
},
|
},
|
computed:{
|
roleType() {
|
return uni.getStorageSync('roleType');
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss"
|
scoped>
|
.deleteBtn{
|
width: 50rpx;
|
height: 25rpx;
|
background: red;
|
position: absolute;
|
right: vww(30);
|
top: vww(17);
|
}
|
@mixin flex {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.empty-pointer {
|
position: absolute;
|
top: 50%;
|
left: 38%;
|
color: #909399;
|
}
|
|
.white-block {
|
width: 100%;
|
height: vww(50);
|
margin-top: vww(10);
|
}
|
|
::v-deep.fayunPlan {
|
width: 100%;
|
margin: 0 auto;
|
background-color: #f4f4f4;
|
display: flex;
|
flex-direction: column;
|
|
.plan-banner {
|
width: 100%;
|
background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
|
background-size: contain;
|
position: relative;
|
top: 0;
|
|
.top-container {
|
width: 468rpx;
|
height: 38rpx;
|
position: relative;
|
top: vww(48);
|
@include flex margin-left: vww(10);
|
|
.top-title {
|
width: 250rpx;
|
height: 36rpx;
|
font-size: 38rpx;
|
font-weight: normal;
|
color: #fff;
|
line-height: 69rpx;
|
}
|
}
|
|
.middle-container {
|
width: 626rpx;
|
height: 34rpx;
|
margin: vww(27) vww(31) 0 vww(31);
|
@include flex;
|
position: relative;
|
top: vww(54);
|
|
.dept-name {
|
min-width: 100rpx;
|
font-size: 32rpx;
|
font-weight: normal;
|
color: #ffffff;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
line-height: 69rpx;
|
text-shadow: 0rpx 4rpx 0rpx #1a66fe;
|
}
|
}
|
|
.bottom-container {
|
width: 100%;
|
@include flex;
|
justify-content: center;
|
margin-top: vww(80);
|
|
.bottom-block {
|
width: 690rpx;
|
min-height: 185rpx;
|
background: #ffffff;
|
box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
|
border-radius: 20rpx;
|
@include flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
padding: 0 vww(8);
|
|
.bottom-content {
|
@include flex;
|
flex-direction: column;
|
height: vww(56);
|
margin-right: vww(5);
|
|
.forward-name,
|
.fleet-name {
|
font-size: 28rpx;
|
font-weight: normal;
|
color: #757575;
|
line-height: 69rpx;
|
}
|
|
.forward-num,
|
.fleet-num {
|
font-size: 40rpx;
|
font-weight: 400;
|
color: #303030;
|
line-height: 69rpx;
|
|
text {
|
font-size: 30rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.block-top {
|
width: 94%;
|
margin: vww(15);
|
@include flex;
|
|
.total {
|
height: 30rpx;
|
line-height: vww(15);
|
font-size: 28rpx;
|
font-weight: normal;
|
color: #757575;
|
|
text {
|
width: 118rpx;
|
height: 30rpx;
|
line-height: vww(15);
|
font-size: 40rpx;
|
font-weight: 400;
|
color: #f81414;
|
}
|
}
|
}
|
|
.main-banner {
|
width: 100%;
|
@include flex;
|
justify-content: center;
|
|
.main-block {
|
width: 90%;
|
background: #ffffff;
|
box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
|
border-radius: 20rpx;
|
|
.main-container {
|
width: 100%;
|
@include flex;
|
justify-content: center;
|
flex-direction: column;
|
background-color: #fff;
|
|
&_content {
|
width: 96%;
|
height: 194rpx;
|
@include flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: flex-start;
|
margin-top: vww(8);
|
position: relative;
|
|
.arrow-icon {
|
position: absolute;
|
right: vww(10);
|
top: vww(17);
|
}
|
|
.divider {
|
position: absolute;
|
width: 94%;
|
height: vww(1);
|
margin: 0 auto;
|
border-bottom: 1px soild #d6d6d6;
|
left: vww(15);
|
bottom: vww(18);
|
}
|
|
.first-line {
|
width: 50%;
|
@include flex;
|
margin: 0 vww(15);
|
|
.car-num {
|
height: 31rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #303030;
|
}
|
|
.order-type {
|
border: 2px solid #035cfb;
|
border-radius: 4rpx;
|
color: #035cfb;
|
padding: vww(2) vww(4);
|
text-align: center;
|
}
|
}
|
|
.second-line {
|
width: 94%;
|
height: vww(14);
|
margin: 0 vww(15);
|
@include flex;
|
justify-content: space-between;
|
|
.line-content {
|
width: 40%;
|
|
@include flex &_text {
|
width: 69rpx;
|
height: 29rpx;
|
line-height: 29rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #919090;
|
}
|
|
&_num {
|
height: 29rpx;
|
line-height: 29rpx;
|
font-size: 38rpx;
|
font-weight: 400;
|
color: #035cfb;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.fayunPlanBody {
|
width: 94%;
|
margin: 0 auto;
|
|
.compDetails {
|
width: 94%;
|
margin: vww(24) auto 0 auto;
|
|
.comp {
|
font-size: vww(16);
|
font-weight: 400;
|
padding: 0 vww(10);
|
height: vww(40);
|
line-height: vww(40);
|
border: 1px solid #ebeef5;
|
border-bottom: none;
|
background-color: #f5f5f5;
|
}
|
}
|
|
.card {
|
width: 94%;
|
height: vww(150);
|
margin: vww(24) auto 0 auto;
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 #ebeef5;
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
|
.coal-status,
|
.coal-clean,
|
.coal-allowance,
|
.coal-carNo {
|
width: 50%;
|
margin-top: vww(30);
|
height: vww(50);
|
text-align: center;
|
|
.label-title {
|
color: #909399;
|
}
|
|
.label-value {
|
min-width: vww(85);
|
margin-top: vww(10);
|
color: #606266;
|
}
|
}
|
|
.more-button {
|
width: vww(60);
|
position: absolute;
|
top: vww(100);
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
// 表格样式
|
.uni-table {
|
.uni-table-tr {
|
padding: 0;
|
border: vww(1) solid #c6c6c6;
|
|
.uni-table-th {
|
font-size: vww(14);
|
height: vww(30);
|
line-height: vww(30);
|
padding: vww(5) vww(10);
|
color: #111111;
|
font-weight: 500;
|
background: #e2e2e2;
|
}
|
|
.uni-table-td {
|
font-size: vww(14);
|
font-weight: 400;
|
height: vww(30);
|
line-height: vww(30);
|
padding: vww(5) vww(10);
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
