365 lines
8.2 KiB
Vue
365 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<el-drawer
|
|||
|
|
title="发货进度"
|
|||
|
|
:visible.sync="centervisible"
|
|||
|
|
size="80%"
|
|||
|
|
class="deliveryLogDetail"
|
|||
|
|
@close='closeA'>
|
|||
|
|
<div class="box1">
|
|||
|
|
<div class="box_col">
|
|||
|
|
<div class="blodTip">订单名</div>
|
|||
|
|
<div class="lightTip">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box_col">
|
|||
|
|
<div class="blodTip">订单数量</div>
|
|||
|
|
<div class="lightTip">{{orderMsg.orderNum ? orderMsg.orderNum : '-'}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box_col">
|
|||
|
|
<div class="blodTip">装货数量</div>
|
|||
|
|
<div class="lightTip">{{orderMsg.num ? orderMsg.num : '-'}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box_col">
|
|||
|
|
<div class="blodTip">累积占比(%)</div>
|
|||
|
|
<div class="lightTip">{{orderMsg.rate ? orderMsg.rate : '-'}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box_col">
|
|||
|
|
<div class="blodTip">累积运输费用</div>
|
|||
|
|
<div class="lightTip">{{orderMsg.cost ? orderMsg.cost : '-'}}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box2">
|
|||
|
|
<div class="boxTitle">
|
|||
|
|
<span class="blueTitle"></span>
|
|||
|
|
<span>发货清单</span>
|
|||
|
|
</div>
|
|||
|
|
<el-tabs v-model="activeName" @tab-click="toggleTab">
|
|||
|
|
<el-tab-pane label="数据列表" name="dataList">
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<base-table
|
|||
|
|
:page="queryParams.pageNo"
|
|||
|
|
:limit="queryParams.pageSize"
|
|||
|
|
:table-props="tableProps"
|
|||
|
|
:table-data="tableData"
|
|||
|
|
:max-height="tableH"
|
|||
|
|
>
|
|||
|
|
<method-btn
|
|||
|
|
v-if="tableBtn.length"
|
|||
|
|
slot="handleBtn"
|
|||
|
|
:width="150"
|
|||
|
|
label="操作"
|
|||
|
|
:method-list="tableBtn"
|
|||
|
|
@clickBtn="viewDetDetail"
|
|||
|
|
/>
|
|||
|
|
</base-table>
|
|||
|
|
<pagination
|
|||
|
|
:page.sync="queryParams.pageNo"
|
|||
|
|
:limit.sync="queryParams.pageSize"
|
|||
|
|
:total="total"
|
|||
|
|
@pagination="getList"
|
|||
|
|
/>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="环形图" name="barChart">
|
|||
|
|
<div
|
|||
|
|
id="logDetPieBar"
|
|||
|
|
style="width: 182px; height: 180px;"
|
|||
|
|
></div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
<!-- 详情抽屉 -->
|
|||
|
|
<el-drawer
|
|||
|
|
title="发货详情"
|
|||
|
|
size="60%"
|
|||
|
|
:append-to-body="true"
|
|||
|
|
:visible.sync="innerDrawer"
|
|||
|
|
@close='closeB'>
|
|||
|
|
<div class="box3">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span='12'>
|
|||
|
|
<span class="title">订单名：</span>
|
|||
|
|
<span class="text">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span='12'>
|
|||
|
|
<span class="title">发货单号：</span>
|
|||
|
|
<span class="text">{{logCode ? logCode : '-'}}</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
<div class="box4">
|
|||
|
|
<div class="boxTitle">
|
|||
|
|
<span class="blueTitle"></span>
|
|||
|
|
<span>详情</span>
|
|||
|
|
</div>
|
|||
|
|
<base-table
|
|||
|
|
:page="queryParams2.pageNo"
|
|||
|
|
:limit="queryParams2.pageSize"
|
|||
|
|
:table-props="tableProps2"
|
|||
|
|
:table-data="tableData2"
|
|||
|
|
:max-height="tableH2"
|
|||
|
|
/>
|
|||
|
|
<pagination
|
|||
|
|
:page.sync="queryParams2.pageNo"
|
|||
|
|
:limit.sync="queryParams2.pageSize"
|
|||
|
|
:total="total2"
|
|||
|
|
@pagination="getList2"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</el-drawer>
|
|||
|
|
</el-drawer>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { deliveryLogPage, deliveryLogDetPage } from '@/api/base/delivery'
|
|||
|
|
import { parseTime } from '@/utils/ruoyi'
|
|||
|
|
const tableProps = [
|
|||
|
|
{
|
|||
|
|
prop: 'deliveryTime',
|
|||
|
|
label: '发货时间',
|
|||
|
|
filter: parseTime,
|
|||
|
|
minWidth: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'code',
|
|||
|
|
label: '发货单号',
|
|||
|
|
showOverflowtooltip: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'orderNum',
|
|||
|
|
label: '订单数量'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'num',
|
|||
|
|
label: '发货数量'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'rate',
|
|||
|
|
label: '发货比列(%)'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'principalCost',
|
|||
|
|
label: '运输费用'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
const tableProps2 = [
|
|||
|
|
{
|
|||
|
|
prop: 'createTime',
|
|||
|
|
label: '添加时间',
|
|||
|
|
filter: parseTime,
|
|||
|
|
minWidth: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'deliveryCarCode',
|
|||
|
|
label: '装车单号',
|
|||
|
|
showOverflowtooltip: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'loadTime',
|
|||
|
|
label: '装车时间',
|
|||
|
|
filter: parseTime,
|
|||
|
|
minWidth: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'productName',
|
|||
|
|
label: '装车产品',
|
|||
|
|
showOverflowtooltip: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'packagingSize',
|
|||
|
|
label: '装箱规格（片/箱）'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'packagingNum',
|
|||
|
|
label: '箱数'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'quantity',
|
|||
|
|
label: '装车总量'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: 'productDate',
|
|||
|
|
label: '产品批次',
|
|||
|
|
showOverflowtooltip: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
export default {
|
|||
|
|
name: 'DeliveryLogDetDetail',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
centervisible: false,
|
|||
|
|
activeName: 'dataList',
|
|||
|
|
// 查询参数
|
|||
|
|
queryParams: {
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 100,
|
|||
|
|
orderId: ''
|
|||
|
|
},
|
|||
|
|
orderMsg: {},
|
|||
|
|
tableProps,
|
|||
|
|
tableData: [],
|
|||
|
|
tableH: this.tableHeight(350),
|
|||
|
|
tableBtn: [
|
|||
|
|
this.$auth.hasPermi('base:group-team:update')
|
|||
|
|
? {
|
|||
|
|
type: 'detDetail',
|
|||
|
|
btnName: '查看发货详情'
|
|||
|
|
}
|
|||
|
|
: undefined
|
|||
|
|
].filter((v) => v),
|
|||
|
|
innerDrawer: false,
|
|||
|
|
// 详情
|
|||
|
|
queryParams2: {
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 20,
|
|||
|
|
logId: ''
|
|||
|
|
},
|
|||
|
|
tableProps2,
|
|||
|
|
tableData2: [],
|
|||
|
|
tableH2: this.tableHeight(275),
|
|||
|
|
total2: 0,
|
|||
|
|
logCode: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
this.tableH = this.tableHeight(350)
|
|||
|
|
})
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
this.tableH2 = this.tableHeight(275)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init(params) {
|
|||
|
|
this.queryParams.orderId = params.orderId
|
|||
|
|
this.orderMsg = params
|
|||
|
|
this.centervisible = true
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
getList() {
|
|||
|
|
deliveryLogPage({...this.queryParams}).then(res => {
|
|||
|
|
this.tableData = res.data.list || []
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
toggleTab() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
getBar() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
viewDetDetail(val) {
|
|||
|
|
this.logCode = val.data.code
|
|||
|
|
this.innerDrawer = true
|
|||
|
|
this.queryParams2.logId = val.data.id
|
|||
|
|
this.getList2()
|
|||
|
|
},
|
|||
|
|
closeA() {
|
|||
|
|
// 清空数据
|
|||
|
|
this.activeName = 'dataList'
|
|||
|
|
this.queryParams.orderId = ''
|
|||
|
|
this.tableData = []
|
|||
|
|
this.orderMsg = {}
|
|||
|
|
this.innerDrawer = false
|
|||
|
|
},
|
|||
|
|
getList2() {
|
|||
|
|
deliveryLogDetPage({...this.queryParams2}).then(res => {
|
|||
|
|
this.tableData2 = res.data.list || []
|
|||
|
|
this.total2 = res.data.total || 0
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
closeB() {
|
|||
|
|
this.logCode = ''
|
|||
|
|
this.queryParams2.pageNo = 1
|
|||
|
|
this.queryParams2.pageSize = 20
|
|||
|
|
this.queryParams2.logId = ''
|
|||
|
|
this.tableData2 = []
|
|||
|
|
this.total2 = 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang='scss'>
|
|||
|
|
.box1 {
|
|||
|
|
height: 56px;
|
|||
|
|
.box_col {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 20%;
|
|||
|
|
padding: 8px 8px 8px 40px;
|
|||
|
|
.blodTip {
|
|||
|
|
height: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(0,0,0,0.85);
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
.lightTip {
|
|||
|
|
height: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: rgba(102,102,102,0.75);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.box2 {
|
|||
|
|
padding:32px 32px 30px 30px;
|
|||
|
|
height: calc(100vh - 150px);
|
|||
|
|
}
|
|||
|
|
.boxTitle {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #000000;
|
|||
|
|
margin:0 10px 10px 0;
|
|||
|
|
}
|
|||
|
|
.blueTitle {
|
|||
|
|
content: '';
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 4px;
|
|||
|
|
height: 18px;
|
|||
|
|
background-color: #0B58FF;
|
|||
|
|
border-radius: 1px;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
vertical-align: bottom;
|
|||
|
|
}
|
|||
|
|
.box3 {
|
|||
|
|
padding: 8px 8px 8px 40px;
|
|||
|
|
.title {
|
|||
|
|
height: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(0,0,0,0.85);
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
height: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: rgba(102,102,102,0.75);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.box4 {
|
|||
|
|
padding:32px 32px 30px 30px;
|
|||
|
|
height: calc(100vh - 125px);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang='scss'>
|
|||
|
|
.deliveryLogDetail {
|
|||
|
|
.el-tabs__nav::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 2px;
|
|||
|
|
background-color: #e4e7ed;
|
|||
|
|
/* z-index: 1; */
|
|||
|
|
}
|
|||
|
|
.el-tabs__nav-wrap::after {
|
|||
|
|
width: 0;
|
|||
|
|
}
|
|||
|
|
.el-tabs__item {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
.el-tabs__item:hover {
|
|||
|
|
color: rgba(0, 0, 0, 0.85);
|
|||
|
|
}
|
|||
|
|
.el-tabs__item.is-active {
|
|||
|
|
color: rgba(0, 0, 0, 0.85);
|
|||
|
|
}
|
|||
|
|
.el-tabs__item {
|
|||
|
|
color: rgba(0, 0, 0, 0.45);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|