170 lines
3.5 KiB
Vue
170 lines
3.5 KiB
Vue
<template>
|
||
<el-drawer
|
||
title="发货清单详情"
|
||
size="60%"
|
||
:append-to-body="true"
|
||
:visible.sync="centervisible"
|
||
@close='close'>
|
||
<div class="box1">
|
||
<el-row>
|
||
<el-col :span='12'>
|
||
<span class="title">订单名：</span>
|
||
<span class="text">{{orderName ? orderName : '-'}}</span>
|
||
</el-col>
|
||
<el-col :span='12'>
|
||
<span class="title">发货单号：</span>
|
||
<span class="text">{{code ? code : '-'}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="boxTitle">
|
||
<span class="blueTitle"></span>
|
||
<span>详情</span>
|
||
</div>
|
||
<base-table
|
||
:page="queryParams.pageNo"
|
||
:limit="queryParams.pageSize"
|
||
:table-props="tableProps"
|
||
:table-data="tableData"
|
||
:max-height="tableH"
|
||
/>
|
||
<pagination
|
||
:page.sync="queryParams.pageNo"
|
||
:limit.sync="queryParams.pageSize"
|
||
:total="total"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
</el-drawer>
|
||
</template>
|
||
<script>
|
||
import { parseTime } from '@/utils/ruoyi'
|
||
import { deliveryLogDetPage } from '@/api/base/delivery'
|
||
const tableProps = [
|
||
{
|
||
prop: 'createTime',
|
||
label: '添加时间',
|
||
filter: parseTime,
|
||
minWidth: 150
|
||
},
|
||
{
|
||
prop: 'deliveryCarCode',
|
||
label: '装车单号',
|
||
showOverflowtooltip: true
|
||
},
|
||
{
|
||
prop: 'loadTime',
|
||
label: '装车时间',
|
||
filter: parseTime,
|
||
minWidth: 150
|
||
},
|
||
{
|
||
prop: 'productName',
|
||
label: '装车产品'
|
||
},
|
||
{
|
||
prop: 'packagingSize',
|
||
label: '装箱规格(片/箱)',
|
||
width: 120
|
||
},
|
||
{
|
||
prop: 'packagingNum',
|
||
label: '箱数'
|
||
},
|
||
{
|
||
prop: 'quantity',
|
||
label: '装车总量'
|
||
},
|
||
{
|
||
prop: 'productDate',
|
||
label: '产品批次',
|
||
minWidth: 150,
|
||
showOverflowtooltip: true
|
||
}
|
||
]
|
||
export default {
|
||
name: 'DeliveryLogDetail',
|
||
data() {
|
||
return {
|
||
centervisible: false,
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
logId: ''
|
||
},
|
||
total: 0,
|
||
tableProps,
|
||
tableData: [],
|
||
tableH: this.tableHeight(275),
|
||
orderName: '',
|
||
code: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
window.addEventListener('resize', () => {
|
||
this.tableH = this.tableHeight(275)
|
||
})
|
||
},
|
||
methods: {
|
||
init(param) {
|
||
this.orderName = param.orderName
|
||
this.code = param.code
|
||
this.queryParams.logId = param.id
|
||
this.centervisible = true
|
||
this.getList()
|
||
},
|
||
getList() {
|
||
deliveryLogDetPage({...this.queryParams}).then(res => {
|
||
this.tableData = res.data.list || []
|
||
this.total = res.data.total || 0
|
||
})
|
||
},
|
||
close() {
|
||
this.orderName = ''
|
||
this.code = ''
|
||
this.queryParams.pageNo = 1
|
||
this.queryParams.pageSize = 20
|
||
this.queryParams.logId = ''
|
||
this.tableData = []
|
||
this.total = 0
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang='scss'>
|
||
.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;
|
||
}
|
||
.box1 {
|
||
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);
|
||
}
|
||
}
|
||
.box2 {
|
||
padding:32px 32px 30px 30px;
|
||
height: calc(100vh - 125px);
|
||
}
|
||
</style> |