|
|
|
|
@ -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">
|
|
|
|
|
@ -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 {
|
|
|
|
|
|
