feat: 修改表格样式超出省略

src/styles/element.scss

@@ -2,6 +2,9 @@
   --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;

src/views/Boat/components/BoatTable.vue

@@ -18,13 +18,19 @@
           v-loading="loadMoreState === 'loading'"
           :data="tableData"
           max-height="400px"
+          show-overflow-tooltip
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
           @row-click="onClickCellOpenDetail"
         >
           <el-table-column prop="ship.name" label="船名" align="center" />
           <el-table-column prop="voyage" label="航次" align="center" />
-          <el-table-column label="装货港 / 装货码头" align="center">
+          <el-table-column align="center">
+            <template #header>
+              <el-tooltip effect="dark" :content="'装货港 / 装货码头'" placement="top">
+                <span>装货港 / 装货码头</span>
+              </el-tooltip>
+            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.loadPort.name }} / {{ scope.row.loadWharf.name }}
@@ -32,6 +38,11 @@
             </template>
           </el-table-column>
           <el-table-column label="卸货港 / 卸货码头" align="center">
+            <template #header>
+              <el-tooltip effect="dark" content="卸货港 / 卸货码头" placement="top">
+                <span>卸货港 / 卸货码头</span>
+              </el-tooltip>
+            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.dischargePort.name }} / {{ scope.row.dischargeWharf.name }}

src/views/Boat/components/HistoryTable.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
 
-    <el-table :data="historyData">
+    <el-table :data="historyData" show-overflow-tooltip>
       <el-table-column prop="ship.name" label="船名" align="center" />
       <el-table-column prop="voyage" label="航次" align="center" />
       <el-table-column prop="loadPort.name" label="装货港" align="center" />
@@ -44,6 +44,7 @@
         :data="manifestTable"
         style="width: 100%"
         max-height="400px"
+        show-overflow-tooltip
         highlight-current-row
         @row-click="onClickOpenManifestDetail"
       >
@@ -52,9 +53,13 @@
         <el-table-column prop="schedule.voyage" label="航次" align="center" />
         <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 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>
           <template #default="scope">
             <div class="goods-name">
               {{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
@@ -64,8 +69,20 @@
         <el-table-column prop="shippingMark" label="唛头" align="center" />
         <el-table-column prop="carNum" label="商品车" align="center" />
         <el-table-column prop="spareNum" label="件杂货" align="center" />
-        <el-table-column prop="weight" label="重量 (kg)" align="center" />
+        <el-table-column prop="weight" label="重量 (kg)" align="center">
-        <el-table-column prop="volume" label="体积 (m3)" align="center" />
+          <template #header>
+            <el-tooltip effect="dark" content="重量 (kg)" placement="top">
+              <span>重量(kg)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="volume" label="体积(m3)" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="体积(m3)" placement="top">
+              <span>体积(m3)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <!-- TODO:港口没有 -->
         <el-table-column prop="consigner" label="发货人" align="center" />
         <el-table-column prop="consignee" label="收货人" align="center" />
@@ -90,24 +107,61 @@
         :data="manifestDetail"
         highlight-current-row
         max-height="400px"
+        show-overflow-tooltip
       >
         <el-table-column type="index" label="No." />
         <el-table-column prop="manifest.billNo" label="提单号" align="center" />
         <el-table-column prop="manifest.brand.name" label="品牌" align="center" />
         <el-table-column prop="vehicleType.name" label="车型" align="center" />
-        <el-table-column prop="vehicleTypeDetail.name" label="车型明细" align="center" />
+        <el-table-column prop="vehicleTypeDetail.name" label="车型明细" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="车型明细" placement="top">
+              <span>车型明细</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="manifest.model" label="型号" align="center" />
         <el-table-column prop="vin" label="VIN" align="center" />
-        <el-table-column prop="weight" label="重量(kg)" align="center" />
+        <el-table-column prop="weight" label="重量(kg)" align="center">
-        <el-table-column prop="volume" label="体积(m3)" align="center" />
+          <template #header>
+            <el-tooltip effect="dark" content="重量 (kg)" placement="top">
+              <span>重量(kg)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="volume" label="体积(m3)" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="体积(m3)" placement="top">
+              <span>体积(m3)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="length" label="长 mm" align="center" />
         <el-table-column prop="width" label="宽 mm" align="center" />
         <el-table-column prop="height" label="高 mm" align="center" />
         <el-table-column prop="bamm" label="BAmm" align="center" />
         <el-table-column prop="lrmm" label="LRmm" align="center" />
-        <el-table-column prop="damage" label="有无质损" align="center" />
+        <el-table-column prop="damage" label="有无质损" align="center">
-        <el-table-column prop="damageDesc" label="质损描述" align="center" />
+          <template #header>
-        <el-table-column prop="updateDate" label="更新时间" align="center" />
+            <el-tooltip effect="dark" content="有无质损" placement="top">
+              <span>有无质损</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="damageDesc" label="质损描述" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="质损描述" placement="top">
+              <span>质损描述</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateDate" label="更新时间" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="更新时间" placement="top">
+              <span>更新时间</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </div>

src/views/History/components/HistoryTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="historyTable">
-    <el-table :data="historyData">
+    <el-table :data="historyData" show-overflow-tooltip>
       <el-table-column prop="ship.name" label="船名" align="center" />
       <el-table-column prop="voyage" label="航次" align="center" />
       <el-table-column prop="loadPort.name" label="装货港" align="center" />
@@ -23,6 +23,7 @@
         style="width: 100%"
         max-height="400px"
         highlight-current-row
+        show-overflow-tooltip
         @row-click="onClickOpenManifestDetail"
       >
         <el-table-column type="index" label="No." />
@@ -30,9 +31,13 @@
         <el-table-column prop="schedule.voyage" label="航次" align="center" />
         <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 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>
           <template #default="scope">
             <div class="goods-name">
               {{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
@@ -42,9 +47,20 @@
         <el-table-column prop="shippingMark" label="唛头" align="center" />
         <el-table-column prop="carNum" label="商品车" align="center" />
         <el-table-column prop="spareNum" label="件杂货" align="center" />
-        <el-table-column prop="weight" label="重量 (kg)" align="center" />
+        <el-table-column prop="weight" label="重量 (kg)" align="center">
-        <el-table-column prop="volume" label="体积 (m3)" align="center" />
+          <template #header>
-        <!-- TODO:港口没有 -->
+            <el-tooltip effect="dark" content="重量 (kg)" placement="top">
+              <span>重量(kg)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="volume" label="体积(m3)" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="体积(m3)" placement="top">
+              <span>体积(m3)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="consigner" label="发货人" align="center" />
         <el-table-column prop="consignee" label="收货人" align="center" />
         <el-table-column prop="goodsStatus" label="货物状态" align="center" />
@@ -62,24 +78,61 @@
         :data="manifestDetail"
         highlight-current-row
         max-height="400px"
+        show-overflow-tooltip
       >
         <el-table-column type="index" label="No." />
         <el-table-column prop="manifest.billNo" label="提单号" align="center" />
         <el-table-column prop="manifest.brand.name" label="品牌" align="center" />
         <el-table-column prop="vehicleType.name" label="车型" align="center" />
         <el-table-column prop="vehicleTypeDetail.name" label="车型明细" align="center" />
-        <el-table-column prop="manifest.model" label="型号" align="center" />
+        <el-table-column prop="manifest.model" label="型号" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="车型明细" placement="top">
+              <span>车型明细</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="vin" label="VIN" align="center" />
-        <el-table-column prop="weight" label="重量(kg)" align="center" />
+        <el-table-column prop="weight" label="重量 (kg)" align="center">
-        <el-table-column prop="volume" label="体积(m3)" align="center" />
+          <template #header>
+            <el-tooltip effect="dark" content="重量 (kg)" placement="top">
+              <span>重量(kg)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="volume" label="体积(m3)" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="体积(m3)" placement="top">
+              <span>体积(m3)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="length" label="长 mm" align="center" />
         <el-table-column prop="width" label="宽 mm" align="center" />
         <el-table-column prop="height" label="高 mm" align="center" />
         <el-table-column prop="bamm" label="BAmm" align="center" />
         <el-table-column prop="lrmm" label="LRmm" align="center" />
-        <el-table-column prop="damage" label="有无质损" align="center" />
+        <el-table-column prop="damage" label="有无质损" align="center">
-        <el-table-column prop="damageDesc" label="质损描述" align="center" />
+          <template #header>
-        <el-table-column prop="updateDate" label="更新时间" align="center" />
+            <el-tooltip effect="dark" content="有无质损" placement="top">
+              <span>有无质损</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="damageDesc" label="质损描述" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="质损描述" placement="top">
+              <span>质损描述</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateDate" label="更新时间" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="更新时间" placement="top">
+              <span>更新时间</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </div>

src/views/History/components/PublishTable.vue

@@ -14,6 +14,7 @@
           v-loading="loadMoreState === 'loading'"
           :data="tableData"
           max-height="400px"
+          show-overflow-tooltip
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
           @row-click="onClickCellOpenDetail"

src/views/History/components/ReceiveTable.vue

@@ -14,6 +14,7 @@
           v-loading="loadMoreState === 'loading'"
           :data="tableData"
           max-height="400px"
+          show-overflow-tooltip
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
           @row-click="onClickCellOpenDetail"

src/views/Send/components/BoatInfoDialog.vue

@@ -273,7 +273,7 @@ const form = reactive<any>({
 watch(
   () => form.dischargePortId ?? '',
   (newValue, oldValue) => {
-    if (newValue !== oldValue) {
+    if (newValue !== oldValue && oldValue) {
       form.dischargeWharfId = '';
     }
   }

src/views/Send/components/HistoryTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="historyTable">
-    <el-table :data="boatInfoTable" @row-dblclick="onClickEditHistoryTable">
+    <el-table :data="boatInfoTable" show-overflow-tooltip @row-dblclick="onClickEditHistoryTable">
       <el-table-column prop="ship.name" label="船名" align="center" />
       <el-table-column prop="voyage" label="航次" align="center" />
       <el-table-column label="装货港 / 装货码头" align="center">
@@ -47,6 +47,7 @@
         style="width: 100%"
         max-height="400px"
         highlight-current-row
+        show-overflow-tooltip
         @row-click="onClickOpenManifestDetail"
         @row-dblclick="onClickEditManifest"
       >
@@ -55,9 +56,13 @@
         <el-table-column prop="schedule.voyage" label="航次" align="center" />
         <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 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>
           <template #default="scope">
             <div class="goods-name">
               {{ scope.row?.goodsName }}/{{ scope.row.brand?.name }}/{{ scope.row?.model }}
@@ -67,9 +72,20 @@
         <el-table-column prop="shippingMark" label="唛头" align="center" />
         <el-table-column prop="carNum" label="商品车" align="center" />
         <el-table-column prop="spareNum" label="件杂货" align="center" />
-        <el-table-column prop="weight" label="重量 (kg)" align="center" />
+        <el-table-column prop="weight" label="重量 (kg)" align="center">
-        <el-table-column prop="volume" label="体积 (m3)" align="center" />
+          <template #header>
-        <!-- TODO:港口没有 -->
+            <el-tooltip effect="dark" content="重量 (kg)" placement="top">
+              <span>重量(kg)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="volume" label="体积(m3)" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="体积(m3)" placement="top">
+              <span>体积(m3)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="consigner" label="发货人" align="center" />
         <el-table-column prop="consignee" label="收货人" align="center" />
         <el-table-column prop="goodsStatus" label="货物状态" align="center" />
@@ -87,25 +103,62 @@
         :data="manifestDetail"
         highlight-current-row
         max-height="400px"
+        show-overflow-tooltip
         @row-dblclick="onClickEditManifestDetail"
       >
         <el-table-column type="index" label="No." />
         <el-table-column prop="manifest.billNo" label="提单号" align="center" />
         <el-table-column prop="manifest.brand.name" label="品牌" align="center" />
         <el-table-column prop="vehicleType.name" label="车型" align="center" />
-        <el-table-column prop="vehicleTypeDetail.name" label="车型明细" align="center" />
+        <el-table-column prop="vehicleTypeDetail.name" label="车型明细" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="车型明细" placement="top">
+              <span>车型明细</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="manifest.model" label="型号" align="center" />
         <el-table-column prop="vin" label="VIN" align="center" />
-        <el-table-column prop="weight" label="重量(kg)" align="center" />
+        <el-table-column prop="weight" label="重量 (kg)" align="center">
-        <el-table-column prop="volume" label="体积(m3)" align="center" />
+          <template #header>
+            <el-tooltip effect="dark" content="重量 (kg)" placement="top">
+              <span>重量(kg)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="volume" label="体积(m3)" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="体积(m3)" placement="top">
+              <span>体积(m3)</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="length" label="长 mm" align="center" />
         <el-table-column prop="width" label="宽 mm" align="center" />
         <el-table-column prop="height" label="高 mm" align="center" />
         <el-table-column prop="bamm" label="BAmm" align="center" />
         <el-table-column prop="lrmm" label="LRmm" align="center" />
-        <el-table-column prop="damage" label="有无质损" align="center" />
+        <el-table-column prop="damage" label="有无质损" align="center">
-        <el-table-column prop="damageDesc" label="质损描述" align="center" />
+          <template #header>
-        <el-table-column prop="updateDate" label="更新时间" align="center" />
+            <el-tooltip effect="dark" content="有无质损" placement="top">
+              <span>有无质损</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="damageDesc" label="质损描述" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="质损描述" placement="top">
+              <span>质损描述</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateDate" label="更新时间" align="center">
+          <template #header>
+            <el-tooltip effect="dark" content="更新时间" placement="top">
+              <span>更新时间</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
 

src/views/Send/components/ManifestDetailDialog.vue

@@ -107,7 +107,7 @@ const form = reactive<any>({
 watch(
   () => form.vehicleTypeId ?? '',
   (newValue, oldValue) => {
-    if (newValue !== oldValue) {
+    if (newValue !== oldValue && oldValue) {
       form.vehicleTypeDetailId = '';
     }
   }

src/views/Send/components/SendTable.vue

@@ -10,6 +10,7 @@
           v-loading="loadMoreState === 'loading'"
           :data="tableData"
           max-height="400px"
+          show-overflow-tooltip
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
           @row-click="onClickCellOpenDetail"
@@ -17,6 +18,11 @@
           <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>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.loadPort?.name }} / {{ scope.row.loadWharf?.name }}
@@ -24,6 +30,11 @@
             </template>
           </el-table-column>
           <el-table-column label="卸货港 / 卸货码头" align="center">
+            <template #header>
+              <el-tooltip effect="dark" content="卸货港 / 卸货码头" placement="top">
+                <span>卸货港 / 卸货码头</span>
+              </el-tooltip>
+            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.dischargePort?.name }} / {{ scope.row.dischargeWharf?.name }}

src/views/Subscription/components/PublishTable.vue

@@ -10,10 +10,11 @@
           v-loading="loadMoreState === 'loading'"
           :data="tableData"
           max-height="400px"
+          show-overflow-tooltip
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
         >
-          <el-table-column type="index" label="序号" />
+          <el-table-column type="index" width="60px" label="序号" />
           <el-table-column prop="subPort.name" label="上游港口" align="center" />
           <el-table-column prop="subWharf.name" label="装货码头" align="center" />
           <el-table-column prop="subInfo" label="订阅信息" align="center" />

src/views/Subscription/components/ReceiveTable.vue

@@ -10,6 +10,7 @@
           v-loading="loadMoreState === 'loading'"
           :data="tableData"
           max-height="400px"
+          show-overflow-tooltip
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
         >