feat: 修改表头

main
sankeyangshu 2024-12-10 18:14:22 +08:00
parent 64bd7c1949
commit c81e3c41d0
7 changed files with 37 additions and 48 deletions

View File

@ -2,9 +2,6 @@
--el-table-border-color: rgb(127 127 127 / 100%);
--el-table-current-row-bg-color: #ffc;
}
.el-table .cell {
white-space: pre;
}
.el-table__header th {
font-weight: bold;
color: #fff;

View File

@ -25,24 +25,14 @@
>
<el-table-column prop="ship.name" label="船名" align="center" />
<el-table-column prop="voyage" label="航次" align="center" />
<el-table-column align="center">
<template #header>
<el-tooltip effect="dark" :content="'装货港 / 装货码头'" placement="top">
<span>装货港 / 装货码头</span>
</el-tooltip>
</template>
<el-table-column align="center" label="装货港/装货码头" width="130">
<template #default="scope">
<div class="goods-name">
{{ scope.row.loadPort.name }} / {{ scope.row.loadWharf.name }}
</div>
</template>
</el-table-column>
<el-table-column label="卸货港 / 卸货码头" align="center">
<template #header>
<el-tooltip effect="dark" content="卸货港 / 卸货码头" placement="top">
<span>卸货港 / 卸货码头</span>
</el-tooltip>
</template>
<el-table-column label="卸货港/卸货码头" width="130" align="center">
<template #default="scope">
<div class="goods-name">
{{ scope.row.dischargePort.name }} / {{ scope.row.dischargeWharf.name }}
@ -252,6 +242,11 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
}
.footer-table {
position: relative;
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.update-btn {
display: flex;
align-items: center;

View File

@ -54,12 +54,7 @@
<el-table-column prop="deck" label="舱层" align="center" />
<el-table-column prop="cabin" label="舱段" align="center" />
<el-table-column prop="billNo" label="提单号" align="center" />
<el-table-column label="货名/品牌/型号" align="center">
<template #header>
<el-tooltip effect="dark" content="货名/品牌/型号" placement="top">
<span>货名/品牌/型号</span>
</el-tooltip>
</template>
<el-table-column label="货名/品牌/型号" width="130" align="center">
<template #default="scope">
<div class="goods-name">
{{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
@ -83,7 +78,6 @@
</el-tooltip>
</template>
</el-table-column>
<!-- TODO:港口没有 -->
<el-table-column prop="consigner" label="发货人" align="center" />
<el-table-column prop="consignee" label="收货人" align="center" />
<el-table-column prop="goodsStatus" label="货物状态" align="center" />
@ -424,6 +418,11 @@ const onClickExportManifestDetail = () => {
color: #aaa;
}
}
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

View File

@ -440,8 +440,11 @@ const onClickReturn = () => {
border-radius: 13px;
.map-content {
display: flex;
flex-direction: row-reverse;
flex-flow: row-reverse nowrap;
width: 100%;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
.triangle-right {
width: 0;
height: 0;
@ -453,8 +456,8 @@ const onClickReturn = () => {
width: 258px;
height: 300px;
margin-right: 3px;
overflow: hidden;
.map-deck-title {
width: 100%;
height: 30px;
font-weight: 700;
line-height: 30px;

View File

@ -32,12 +32,7 @@
<el-table-column prop="deck" label="舱层" align="center" />
<el-table-column prop="cabin" label="舱段" align="center" />
<el-table-column prop="billNo" label="提单号" align="center" />
<el-table-column label="货名/品牌/型号" align="center">
<template #header>
<el-tooltip effect="dark" content="货名/品牌/型号" placement="top">
<span>货名/品牌/型号</span>
</el-tooltip>
</template>
<el-table-column label="货名/品牌/型号" width="130" align="center">
<template #default="scope">
<div class="goods-name">
{{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
@ -222,5 +217,10 @@ const onClickOpenManifestDetail = async (row: ManifestType) => {
}
}
}
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>

View File

@ -57,12 +57,7 @@
<el-table-column prop="deck" label="舱层" align="center" />
<el-table-column prop="cabin" label="舱段" align="center" />
<el-table-column prop="billNo" label="提单号" align="center" />
<el-table-column label="货名/品牌/型号" align="center">
<template #header>
<el-tooltip effect="dark" content="货名/品牌/型号" placement="top">
<span>货名/品牌/型号</span>
</el-tooltip>
</template>
<el-table-column label="货名/品牌/型号" width="130" align="center">
<template #default="scope">
<div class="goods-name">
{{ scope.row?.goodsName }}/{{ scope.row.brand?.name }}/{{ scope.row?.model }}
@ -390,6 +385,11 @@ const endManifestDetail = () => {
box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
}
}
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

View File

@ -17,24 +17,14 @@
>
<el-table-column prop="ship.name" label="船名" align="center" />
<el-table-column prop="voyage" label="航次" align="center" />
<el-table-column label="装货港 / 装货码头" align="center">
<template #header>
<el-tooltip effect="dark" :content="'装货港 / 装货码头'" placement="top">
<span>装货港 / 装货码头</span>
</el-tooltip>
</template>
<el-table-column label="装货港/装货码头" width="130" align="center">
<template #default="scope">
<div class="goods-name">
{{ scope.row.loadPort?.name }} / {{ scope.row.loadWharf?.name }}
</div>
</template>
</el-table-column>
<el-table-column label="卸货港 / 卸货码头" align="center">
<template #header>
<el-tooltip effect="dark" content="卸货港 / 卸货码头" placement="top">
<span>卸货港 / 卸货码头</span>
</el-tooltip>
</template>
<el-table-column label="卸货港/卸货码头" width="130" align="center">
<template #default="scope">
<div class="goods-name">
{{ scope.row.dischargePort?.name }} / {{ scope.row.dischargeWharf?.name }}
@ -185,6 +175,11 @@ const onClickOpenDetail = async (row: BoatInfoType) => {
.footer-table {
position: relative;
flex: 1;
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.update-btn {
display: flex;
align-items: center;