whm
/
BookingHeChuanFront
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of http://60.209.125.238:13080/whm/BookingHeChuanFront

Browse Source
szh_zidingyibiaoti
张同海 2 years ago
parent 53b3d9559a 70464ed121
commit d32bce13ff
2 changed files with 178 additions and 3 deletions
Show Stats Download Patch File Download Diff File

178
src/views/main/BookingLedger/list/index.vue
Unescape Escape View File

@ -184,6 +184,26 @@
</div>
</template>
<template #goodsStatusList="{ row }">
<div class="goods-status">
<div class="goods-status-left">
<template v-for="(status, sindex) in row.goodsStatusList" >
<a-popover placement="top" :key="sindex" v-show="status.finishTime || status.remark">
<div slot="content">
<div v-if="status.finishTime">时间：{{ status.finishTime }}</div>
<div v-if="status.remark">备注：{{ status.remark }}</div>
</div>
<span class="goods-tip">{{ status.statusName }}</span>
</a-popover>
</template>
</div>
<!-- @mouseover="goodStatusHover($event, row)" @mouseleave="goodStatusLeave($event, row)" -->
<div class="goods-status-right" @click="goodStatusclick($event, row)" v-if="row.hasGoods > 0">
<i class="iconfont icon-zhankai2"></i>
</div>
</div>
</template>
<template #empty>
<span class="no-data">
<i class="iconfont icon-queshengye_zanwushuju"></i>
@ -258,6 +278,24 @@
<i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }}
</div>
</div>
<div class="goods-hovers-list" :style="{ top: `${goodStatusScreenY}px`, left: `${goodStatusScreenX}px` }" v-show="goodStatusShow">
<div class="title">货运动态</div>
<template v-for="(goodStatusItem, gindex) in goodStatusData" >
<template v-if="goodStatusItem.finishTime || goodStatusItem.remark">
<a-popover placement="top" :key="gindex">
<div slot="content">
<div v-if="goodStatusItem.finishTime">时间：{{ goodStatusItem.finishTime }}</div>
<div v-if="goodStatusItem.remark">备注：{{ goodStatusItem.remark }}</div>
</div>
<div class="goods-btn" :class="{ 'active': goodStatusItem.finishTime || goodStatusItem.remark }">{{ goodStatusItem.statusName }}</div>
</a-popover>
</template>
<template v-else>
<div class="goods-btn" :key="gindex" :class="{ 'active': goodStatusItem.finishTime || goodStatusItem.remark }">{{ goodStatusItem.statusName }}</div>
</template>
</template>
</div>
<!-- 运踪弹窗 start -->
<a-modal width="50vw" :maskClosable="false" v-model="traceModalVisible" title="运踪订阅">
<div class="trace-box">
@ -504,8 +542,8 @@ const formInitData = [
{ title: '主提单号', align: 'center', width: '90', label: 'MBLNO', type: 'input' },
{ title: '分提单号', align: 'center', width: '90', label: 'HBLNO', type: 'input' },
{ title: '订舱编号', align: 'center', width: '90', label: 'CUSTNO', type: 'input' },
{ title: '开船日期', align: 'center', width: '90', label: 'ETD', type: 'date' },
{ title: '实际开船日期', align: 'center', width: '90', label: 'ATD', type: 'date' },
{ title: '开船日期', align: 'center', width: 160, label: 'ETD', type: 'dateRange', resLabel: ['BETD', 'EETD'] },
{ title: '实际开船日期', align: 'center', width: 160, label: 'ATD', type: 'dateRange', resLabel: ['BATD', 'EATD'] },
{ title: '船名', align: 'center', width: '90', label: 'VESSEL', type: 'input' }
]
export default {
@ -592,6 +630,11 @@ export default {
traceValue: [],
addNum: 0,
tableHeight: 0,
// 货运动态位置
goodStatusShow: false,
goodStatusScreenX: 0,
goodStatusScreenY: 0,
goodStatusData: null,
// 批量编辑
editingForm: this.$form.createForm(this),
vesselData: [],
@ -1239,6 +1282,13 @@ export default {
})
}
item.bookstatus = bookstatus
let hasGoods = 0
item.goodsStatusList.map((gitem, gindex) => {
if (gitem.finishTime || gitem.remark) {
hasGoods++
}
})
item.hasGoods = hasGoods
return item
})
this.$set(this.gridOptions.pagerConfig, 'columns', JSON.parse(JSON.stringify(initData.columns)))
@ -1398,6 +1448,34 @@ export default {
this.remarkShow = false
this.remarkData = null
},
goodStatusclick (e, data) {
if (!this.goodStatusShow) {
this.goodStatusHover(e, data)
} else {
this.goodStatusLeave(e, data)
}
},
goodStatusHover(e, data) {
const maxWidth = window.innerWidth
console.log(maxWidth, e.pageX, maxWidth - e.pageX)
if (maxWidth - e.pageX > 230) {
// this.goodStatusScreenX = e.pageX + 20
this.goodStatusScreenX = e.pageX - 139
} else {
// this.goodStatusScreenX = e.pageX - 300
this.goodStatusScreenX = e.pageX - 139
}
// this.goodStatusScreenY = e.pageY + 20
this.goodStatusScreenY = e.pageY + 25
this.goodStatusData = data.goodsStatusList
this.goodStatusShow = true
console.log('== 鼠标滑过 ==', this.goodStatusScreenX, this.goodStatusScreenY, this.goodStatusShow, this.goodStatusData)
},
goodStatusLeave(e, data) {
this.goodStatusShow = false
this.goodStatusData = null
console.log('== 鼠标离开 ==')
},
openTraceModel() {
const select = this.$refs.xGrid.getCheckboxRecords()
if (select.length === 0) {
@ -2151,6 +2229,41 @@ export default {
cursor: pointer;
}
}
// 货物状态
.goods-status{
width: 100%;
display: flex;
height: 48px;
.goods-status-left{
flex: 1;
overflow: hidden;
height: 48px;
text-overflow: ellipsis;
white-space: nowrap;
.goods-tip{
font-size: 12px;
margin: 0 4px;
cursor: pointer;
height: 48px;
line-height: 48px;
display: inline-block;
color: @primary-color;
}
}
.goods-status-right{
width: 30px;
text-align: center;
height: 48px;
i{
color: @primary-color;
cursor: pointer;
height: 48px;
line-height: 48px;
}
}
}
/deep/ .line-box:nth-last-of-type(-n + 5) {
.book-remark-box {
.bookremark {
@ -2226,6 +2339,67 @@ export default {
}
}
}
.goods-hovers-list{
max-height: 400px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 300px;
background: #fff;
box-shadow: 0 0 50px #eee;
border-radius: 4px;
border: 1px solid #eee;
padding: 5px 20px 10px 20px;
white-space: normal;
text-align: left;
z-index: 999 !important;
// overflow: auto;
&::before{
content: '';
float: left;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent #fff transparent transparent;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
top: -15px;
left: 50%;
margin-left: -16px;
}
.title {
height: 30px;
line-height: 30px;
font-size: 12px;
font-weight: 600;
}
.goods-btn {
display:inline-block;
font-size: 12px;
color: #666;
word-break: break-all;
width:82px;
height: 28px;
line-height: 28px;
border-radius: 4px;
border: 1px solid #eee;
margin-bottom: 6px;
text-align: center;
margin: 0 2px 8px;
cursor: pointer;
&.active{
color: @primary-color;
border: 1px solid @primary-color;
}
.icon {
margin-right: 4px;
color: @primary-color;
}
}
}
@media (min-width: 1192px) and (max-width: 1591px) {
.booking-from-box {

3
src/views/main/BookingLedger/list/modules/initData.js
Unescape Escape View File

@ -101,7 +101,8 @@ export default {
{ field: 'pono', label: 'PONO', width: 120, title: 'PO NO', showHeaderOverflow: true, sortable: true },
// 以下为新增字段
{ field: 'dzRemark', label: 'DZREMARK', width: 160, title: '单证备注', showHeaderOverflow: true, sortable: true },
{ field: 'czRemark', label: 'CZREMARK', width: 160, title: '操作备注', showHeaderOverflow: true, sortable: true }
{ field: 'czRemark', label: 'CZREMARK', width: 160, title: '操作备注', showHeaderOverflow: true, sortable: true },
{ field: 'goodsStatusList', label: 'GOODSSTATUSLIST', minWidth: 160, title: '货物状态', showHeaderOverflow: true, slots: { default: 'goodsStatusList' } }
],
// ==== 表单部分 ====
condAllData: [

Write Preview
Loading…
Cancel
Save