|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2022-01-17 10:39:22
|
|
|
- * @LastEditTime: 2022-05-20 14:19:57
|
|
|
+ * @LastEditTime: 2022-05-20 16:48:33
|
|
|
* @LastEditors: your name
|
|
|
* @Description: 行李视图
|
|
|
-->
|
|
@@ -63,9 +63,9 @@
|
|
|
v-for="(item, index) in stepData"
|
|
|
:key="index"
|
|
|
:ref="'popover' + index"
|
|
|
- :value="item.hover || item.tableHover"
|
|
|
- :disabled="!item.DealTime"
|
|
|
- placement="top"
|
|
|
+ :value="popoverVisible(item)"
|
|
|
+ :open-delay="500"
|
|
|
+ placement="left-end"
|
|
|
popper-class="popover-dark"
|
|
|
trigger="manual"
|
|
|
>
|
|
@@ -89,18 +89,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-download"
|
|
|
- size="mini"
|
|
|
- />
|
|
|
- <el-button
|
|
|
- class="btn-set"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-s-tools"
|
|
|
- size="mini"
|
|
|
+ <img
|
|
|
+ class="btn-square"
|
|
|
+ src="../../../../assets/baggage/ic_export.png"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="btn-square"
|
|
|
+ src="../../../../assets/baggage/ic_setting.png"
|
|
|
@click="show"
|
|
|
- />
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
@@ -118,8 +115,7 @@
|
|
|
<el-table
|
|
|
ref="table"
|
|
|
:data="baggageTableData"
|
|
|
- style="width: 100%;"
|
|
|
- max-height="calc(100vh - 80px - 232px - 128px - 24px - 44px)"
|
|
|
+ height="calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px)"
|
|
|
size="mini"
|
|
|
border
|
|
|
fit
|
|
@@ -128,7 +124,7 @@
|
|
|
:cell-class-name="cellClass"
|
|
|
:span-method="tableSpanMethod"
|
|
|
@cell-mouse-enter="cellMouseEnterHandler"
|
|
|
- @mouseleave.native="() => { hoveredRow = null }"
|
|
|
+ @cell-mouse-leave="cellMouseLeaveHandler"
|
|
|
>
|
|
|
<el-table-column
|
|
|
v-for="item in tableColsCopy"
|
|
@@ -140,10 +136,7 @@
|
|
|
show-overflow-tooltip
|
|
|
>
|
|
|
<template slot="header">
|
|
|
- <div
|
|
|
- class="cell-content"
|
|
|
- @mouseenter="() => { hoveredRow = null }"
|
|
|
- >{{ item.name }}</div>
|
|
|
+ <div class="cell-content">{{ item.name }}</div>
|
|
|
</template>
|
|
|
<template slot-scope="scope">
|
|
|
<div class="cell-content">{{ scope.row[item.prop] }}</div>
|
|
@@ -160,17 +153,15 @@
|
|
|
<header class="head">
|
|
|
<div class="title">行李跟踪信息</div>
|
|
|
<div class="btns">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-download"
|
|
|
- size="mini"
|
|
|
- />
|
|
|
- <el-button
|
|
|
- class="btn-set"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-s-tools"
|
|
|
- size="mini"
|
|
|
- />
|
|
|
+ <img
|
|
|
+ class="btn-square"
|
|
|
+ src="../../../../assets/baggage/ic_export.png"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="btn-square"
|
|
|
+ src="../../../../assets/baggage/ic_setting.png"
|
|
|
+ @click="show"
|
|
|
+ >
|
|
|
</div>
|
|
|
</header>
|
|
|
<main class="main">
|
|
@@ -446,6 +437,14 @@ export default {
|
|
|
return message ? `${message.date}\n${message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n')}` : ''
|
|
|
}
|
|
|
},
|
|
|
+ popoverVisible() {
|
|
|
+ return function (item) {
|
|
|
+ return (
|
|
|
+ (item.hover || item.tableHover) &&
|
|
|
+ this.messageTooltipList.some(message => message.resourceFile === item.resourceFile)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
formattedBaggageInfo() {
|
|
|
return function (prop) {
|
|
|
const value = this.baggageBasicInfo[prop]
|
|
@@ -573,8 +572,8 @@ export default {
|
|
|
itemMouseEnterHandler(item) {
|
|
|
if (item.resourceFile) {
|
|
|
this.checkBaggageMessage(item.resourceFile)
|
|
|
+ item.hover = true
|
|
|
}
|
|
|
- item.hover = true
|
|
|
},
|
|
|
itemMouseLeaveHandler(item) {
|
|
|
item.hover = false
|
|
@@ -585,6 +584,9 @@ export default {
|
|
|
}
|
|
|
this.hoveredRow = row
|
|
|
},
|
|
|
+ cellMouseLeaveHandler() {
|
|
|
+ this.hoveredRow = null
|
|
|
+ },
|
|
|
async checkBaggageMessage(resourceFile) {
|
|
|
if (!this.messageTooltipList.some(message => message.resourceFile === resourceFile)) {
|
|
|
const result = await this.queryMessage([resourceFile])
|
|
@@ -818,7 +820,8 @@ export default {
|
|
|
}
|
|
|
.part3 {
|
|
|
width: 100%;
|
|
|
- height: calc(100vh - 80px - 232px - 128px - 24px - 44px);
|
|
|
+ // header-80px、part1-232px、part2-128px、间隙3*8px、底部44px
|
|
|
+ height: calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px);
|
|
|
background: #ffffff;
|
|
|
::v-deep .el-table {
|
|
|
width: 100%;
|
|
@@ -854,6 +857,7 @@ export default {
|
|
|
}
|
|
|
.part4 {
|
|
|
width: 100%;
|
|
|
+ height: calc(100vh - 80px - 232px - 2 * 8px - 44px);
|
|
|
.head {
|
|
|
padding: 16px 24px 11px 30px;
|
|
|
background: transparent;
|
|
@@ -902,12 +906,10 @@ export default {
|
|
|
.btns {
|
|
|
height: 30px;
|
|
|
display: flex;
|
|
|
- .el-button {
|
|
|
+ .btn-square {
|
|
|
margin-left: 10px;
|
|
|
width: 30px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|