yudao-dev/src/views/delivery/deliveryLog/components/deliveryLogDetail.vue

223 lines
4.9 KiB
Vue
Raw Normal View History

2023-11-03 16:59:07 +08:00
<template>
2023-11-09 15:01:50 +08:00
<div>
<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>
2023-11-03 16:59:07 +08:00
</div>
2023-11-09 15:01:50 +08:00
<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"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="editDetDetail"
/>
</base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</div>
</el-drawer>
<!-- 编辑详情 -->
<base-dialog
dialogTitle="编辑"
:dialogVisible="detailEditVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="50%"
>
<edit-detail ref="editDetail" @successSubmit="successSubmit" />
</base-dialog>
</div>
2023-11-03 16:59:07 +08:00
</template>
<script>
import { parseTime } from '@/utils/ruoyi'
import { deliveryLogDetPage } from '@/api/base/delivery'
2023-11-09 15:01:50 +08:00
import EditDetail from './editDetail.vue'
2023-11-03 16:59:07 +08:00
const tableProps = [
{
prop: 'createTime',
label: '添加时间',
filter: parseTime,
minWidth: 150
},
{
prop: 'deliveryCarCode',
label: '装车单号',
2023-11-09 15:01:50 +08:00
minWidth: 100,
2023-11-03 16:59:07 +08:00
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: [],
2023-11-09 15:01:50 +08:00
tableBtn: [
this.$auth.hasPermi('extend:delivery-log:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined
].filter((v) => v),
2023-11-03 16:59:07 +08:00
tableH: this.tableHeight(275),
orderName: '',
2023-11-09 15:01:50 +08:00
code: '',
detailEditVisible: false
2023-11-03 16:59:07 +08:00
}
},
2023-11-09 15:01:50 +08:00
components: { EditDetail },
2023-11-03 16:59:07 +08:00
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
2023-11-09 15:01:50 +08:00
},
editDetDetail(val) {
this.detailEditVisible = true
this.$nextTick(() => {
this.$refs.editDetail.init(val.data.id)
})
},
handleCancel() {
this.$refs.editDetail.formClear()
this.detailEditVisible = false
},
handleConfirm() {
this.$refs.editDetail.submitForm()
},
successSubmit() {
this.handleCancel()
this.getList()
2023-11-03 16:59:07 +08:00
}
}
}
</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;
2023-11-07 15:49:07 +08:00
font-size: 14px;
2023-11-03 16:59:07 +08:00
font-weight: 600;
color: rgba(0,0,0,0.85);
}
.text {
height: 16px;
2023-11-07 15:49:07 +08:00
font-size: 14px;
2023-11-03 16:59:07 +08:00
font-weight: 400;
color: rgba(102,102,102,0.75);
}
}
.box2 {
padding:32px 32px 30px 30px;
height: calc(100vh - 125px);
}
</style>