|
|
|
|
@ -88,6 +88,21 @@
|
|
|
|
|
<template #operate="{ row }">
|
|
|
|
|
<vxe-button class="operate-btn" type="text" icon="vxe-icon-edit" @click="editColumns(row)"></vxe-button>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- <template #bookstatus="{ row }">
|
|
|
|
|
<span class="book-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex"> {{ enmuBookingBtn(btn.staCode) }}<i>/</i></span>
|
|
|
|
|
</template> -->
|
|
|
|
|
<template #bookstatus="{ row, column }">
|
|
|
|
|
<div class="billtrace-box" :class=" column.resizeWidth > 240 ? 'normal-box' : 'flex-box'">
|
|
|
|
|
<div class="billtrace-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex">
|
|
|
|
|
<a-popover placement="topLeft" v-if="btn.staTime">
|
|
|
|
|
<div slot="content">{{ btn.staTime }}</div>
|
|
|
|
|
<span :class="{'active': btn.isChecked}">{{ enmuBookingBtn(btn.staCode) }}</span>
|
|
|
|
|
</a-popover>
|
|
|
|
|
<span :class="{'active': btn.isChecked}" v-else>{{ enmuBookingBtn(btn.staCode) }}</span>
|
|
|
|
|
<i class="iconfont icon-right-1-copy" :class="{'hide': bindex===row.bookstatus.length-1}"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-grid>
|
|
|
|
|
</div>
|
|
|
|
|
</x-card>
|
|
|
|
|
@ -507,13 +522,32 @@ export default {
|
|
|
|
|
BookingOrderPage(query)
|
|
|
|
|
.then(res => {
|
|
|
|
|
if (res.success) {
|
|
|
|
|
const _data = res.data.rows.map((item, index) => {
|
|
|
|
|
const _data = res.data.items.map((item, index) => {
|
|
|
|
|
item.index = (currentPage - 1) * pageSize + index
|
|
|
|
|
const bookstatus = [
|
|
|
|
|
{ staCode: 'sta_cangdan', isChecked: false },
|
|
|
|
|
{ staCode: 'sta_haifang', isChecked: false },
|
|
|
|
|
{ staCode: 'sta_zhuangzai', isChecked: false },
|
|
|
|
|
{ staCode: 'sta_mafang', isChecked: false },
|
|
|
|
|
{ staCode: 'sta_zhuangchuan', isChecked: false },
|
|
|
|
|
{ staCode: 'sta_atd', isChecked: false },
|
|
|
|
|
]
|
|
|
|
|
if (item.bookstatus.length > 0) {
|
|
|
|
|
bookstatus.map((book, bindex) => {
|
|
|
|
|
item.bookstatus.map((item, index) => {
|
|
|
|
|
if (item.staCode === book.staCode) {
|
|
|
|
|
bookstatus[bindex] = item
|
|
|
|
|
bookstatus[bindex].isChecked = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
item.bookstatus = bookstatus
|
|
|
|
|
return item
|
|
|
|
|
})
|
|
|
|
|
this.$set(this.gridOptions.pagerConfig, 'columns', JSON.parse(JSON.stringify(initData.columns)))
|
|
|
|
|
this.$set(this.gridOptions, 'data', [..._data])
|
|
|
|
|
this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalRows)
|
|
|
|
|
this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalCount)
|
|
|
|
|
this.$set(this.gridOptions, 'loading', false)
|
|
|
|
|
const bookingList = {}
|
|
|
|
|
this.gridOptions.data.map(($item, $index) => {
|
|
|
|
|
@ -608,6 +642,32 @@ export default {
|
|
|
|
|
this.tableOrderLabel = property || ''
|
|
|
|
|
this.tableOrderType = order || ''
|
|
|
|
|
this.getList(this.formRes)
|
|
|
|
|
},
|
|
|
|
|
enmuBookingBtn (val) {
|
|
|
|
|
switch (val) {
|
|
|
|
|
case 'sta_cangdan':
|
|
|
|
|
return '舱单'
|
|
|
|
|
case 'sta_haifang':
|
|
|
|
|
return '海放'
|
|
|
|
|
case 'sta_zhuangzai':
|
|
|
|
|
return '装载'
|
|
|
|
|
case 'sta_mafang':
|
|
|
|
|
return '码放'
|
|
|
|
|
case 'sta_zhuangchuan':
|
|
|
|
|
return '装船'
|
|
|
|
|
case 'sta_atd':
|
|
|
|
|
return '离港'
|
|
|
|
|
case 'sta_so':
|
|
|
|
|
return '已订舱'
|
|
|
|
|
case 'sta_bc':
|
|
|
|
|
return '订舱确认'
|
|
|
|
|
case 'sta_letter_yard':
|
|
|
|
|
return '放舱'
|
|
|
|
|
case 'sta_xhz':
|
|
|
|
|
return '下货纸'
|
|
|
|
|
default:
|
|
|
|
|
return '--'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -905,4 +965,103 @@ export default {
|
|
|
|
|
color: @primary-color !important;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
.book-btn{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
color:#999;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
i{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
&.sta_so{
|
|
|
|
|
color: #8BC34A;
|
|
|
|
|
border: 1px solid #8BC34A;
|
|
|
|
|
}
|
|
|
|
|
&.sta_bc{
|
|
|
|
|
color: #FBC02D;
|
|
|
|
|
border: 1px solid #FBC02D;
|
|
|
|
|
}
|
|
|
|
|
&.sta_letter_yard{
|
|
|
|
|
color: #00BCD4;
|
|
|
|
|
border: 1px solid #00BCD4;
|
|
|
|
|
}
|
|
|
|
|
&.sta_xhz{
|
|
|
|
|
color: #E64A19;
|
|
|
|
|
border: 1px solid #E64A19;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.billtrace-box{
|
|
|
|
|
width:100%;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// height: 48px;
|
|
|
|
|
// flex-wrap:wrap;
|
|
|
|
|
// padding:3px 0;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
.billtrace-btn{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size:12px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
// width:30%;
|
|
|
|
|
// display: flex;
|
|
|
|
|
span{
|
|
|
|
|
// flex: 1;
|
|
|
|
|
text-align: right;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
i{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
// flex: 1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
&.hide{
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.active{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: @primary-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.normal-box{
|
|
|
|
|
.billtrace-btn{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.flex-box{
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 48px;
|
|
|
|
|
flex-wrap:wrap;
|
|
|
|
|
padding:3px 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
justify-content:center;
|
|
|
|
|
.billtrace-btn{
|
|
|
|
|
font-size:12px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
width:30%;
|
|
|
|
|
display: flex;
|
|
|
|
|
span{
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: right;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
i{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
&.hide{
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.active{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: @primary-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
张同海
2 years ago