From a4c2987c5fefb2532ad4c13de8faca2ba0b1d6c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 12 Oct 2026 12:12:24 +0800
Subject: [PATCH] =?UTF-8?q?style(table):=20=E5=85=A8=E7=AB=99=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=90=8D=E5=88=97=E6=B7=BB=E5=8A=A0=E7=9C=81=E7=95=A5?=
 =?UTF-8?q?=E5=8F=B7=E4=B8=8E=E6=BA=A2=E5=87=BA=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一给文件名相关的 el-table-column 添加 class-name="is-ellipsis-link"
- 解决了 el-link 为 flex 项导致列宽撑破的问题
- 在样式中新增 is-ellipsis-link 规则，实现文本溢出省略号效果
- 保证超长文件名不会破坏表格布局且能完整展示链接提示
- 适用于业务多个组件中涉及附件、文件名等长文本列的处理
---
 src/styles/element-ui.scss                    | 36 +++++++++++++++++++
 .../components/business-crud-page.vue         | 16 +++++++--
 .../contract-attachment-section.vue           |  1 +
 .../components/master-order-editor.vue        |  8 ++++-
 .../components/transport-plan-page.vue        | 16 +++++++--
 .../components/waybill-manage-page.vue        |  8 ++++-
 src/views/business/loading-manage.vue         |  1 +
 src/views/business/project-apply.vue          |  8 ++++-
 src/views/business/temporary-credit-limit.vue | 14 ++++++--
 .../components/formal-settlement-editor.vue   |  8 ++++-
 .../components/pre-settlement-editor.vue      |  7 +++-
 .../settlement-adjustment-editor.vue          |  7 +++-
 12 files changed, 118 insertions(+), 12 deletions(-)

diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 1440718..7ec1472 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -1003,6 +1003,39 @@ td.el-table-fixed-column--right {
   text-overflow: clip;
 }
 
+// 全站统一：内容型长文本列（文件名 / 单号 / 备注等）单元格内也放了 el-link，
+// 会被上面两条「含 el-link 的单元格」规则一并命中，导致：
+//   ① 上面第 950 行的 display: flex 让链接成为 flex item，flex item 默认 min-width: auto 无法收缩，
+//      超长文本（如未规范命名的附件名）会直接把列撑破；
+//   ② 豁免规则的 overflow: visible 让溢出内容不再被单元格裁切，直接压到相邻列上。
+// 因此对「内容列」做显式兜底：单元格自身恢复块级 + 省略号截断，链接参与收缩并显示省略号。
+// 用法：在 <el-table-column> 上配置 class-name="is-ellipsis-link"（动态列可 :class-name 绑定）。
+// 操作列不要加此类，否则会失去自动换行能力。
+.el-table .el-table__body .cell.is-ellipsis-link:has(.el-link) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .el-link {
+    display: inline-block;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    vertical-align: middle;
+
+    // Element Plus 的 el-link__inner 是 inline-flex，flex 容器上的 text-overflow 不生效，
+    // 必须降级为块级容器，省略号才会真正渲染出来。
+    .el-link__inner {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
 // 全站统一：Avue 内置行操作按钮（查看 / 编辑 / 删除 / 复制等）视觉对齐为 el-link 链接样式。
 // 选择器仅命中表格行操作列 .avue-crud__menu 内的 is-text 按钮，不误伤顶部工具栏（.avue-crud__header）
 // 与弹窗按钮（.avue-crud__dialog__menu）。事件（rowView/rowEdit/rowDel）与权限（permission 指令）
@@ -1261,3 +1294,6 @@ td.el-table-fixed-column--right {
     cursor: not-allowed;
   }
 }
+.is-ellipsis-link{
+  overflow: hidden;
+}
diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue
index 8410b87..92b7702 100644
--- a/src/views/business/components/business-crud-page.vue
+++ b/src/views/business/components/business-crud-page.vue
@@ -2065,7 +2065,13 @@
           >
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" label="序号" width="70" align="center" />
-            <el-table-column label="文件名" min-width="200" align="left" show-overflow-tooltip>
+            <el-table-column
+              label="文件名"
+              min-width="200"
+              align="left"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row)">
                   {{ row.originalName || row.name }}
@@ -4225,7 +4231,13 @@
           >
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" label="序号" width="70" align="center" />
-            <el-table-column label="文件名" min-width="200" align="center" show-overflow-tooltip>
+            <el-table-column
+              label="文件名"
+              min-width="200"
+              align="center"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row, dispatchItemAttachmentRows)">
                   {{ attachmentName(row) }}
diff --git a/src/views/business/components/contract-attachment-section.vue b/src/views/business/components/contract-attachment-section.vue
index e843d8e..f245546 100644
--- a/src/views/business/components/contract-attachment-section.vue
+++ b/src/views/business/components/contract-attachment-section.vue
@@ -45,6 +45,7 @@
           align="left"
           header-align="left"
           show-overflow-tooltip
+          class-name="is-ellipsis-link"
         >
           <template #default="{ row }">
             <el-link type="primary" @click="preview?.(row, rows)">{{
diff --git a/src/views/business/components/master-order-editor.vue b/src/views/business/components/master-order-editor.vue
index f0ab6ba..ee62fc4 100644
--- a/src/views/business/components/master-order-editor.vue
+++ b/src/views/business/components/master-order-editor.vue
@@ -261,7 +261,13 @@
         >
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column type="index" label="序号" width="70" align="center" />
-          <el-table-column label="文件名" min-width="240" align="center" show-overflow-tooltip>
+          <el-table-column
+            label="文件名"
+            min-width="240"
+            align="center"
+            show-overflow-tooltip
+            class-name="is-ellipsis-link"
+          >
             <template #default="{ row }">
               <el-link type="primary" @click="previewAttachment(row)">
                 {{ attachmentName(row) }}
diff --git a/src/views/business/components/transport-plan-page.vue b/src/views/business/components/transport-plan-page.vue
index f8bf310..e6336a7 100644
--- a/src/views/business/components/transport-plan-page.vue
+++ b/src/views/business/components/transport-plan-page.vue
@@ -492,7 +492,13 @@
           >
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" label="序号" width="70" align="center" />
-            <el-table-column label="文件名" min-width="200" align="left" show-overflow-tooltip>
+            <el-table-column
+              label="文件名"
+              min-width="200"
+              align="left"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row)">
                   {{ row.originalName || row.name }}
@@ -2201,7 +2207,13 @@
           >
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" label="序号" width="70" align="center" />
-            <el-table-column label="文件名" min-width="200" align="center" show-overflow-tooltip>
+            <el-table-column
+              label="文件名"
+              min-width="200"
+              align="center"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row, dispatchItemAttachmentRows)">
                   {{ attachmentName(row) }}
diff --git a/src/views/business/components/waybill-manage-page.vue b/src/views/business/components/waybill-manage-page.vue
index 57223a2..01834e1 100644
--- a/src/views/business/components/waybill-manage-page.vue
+++ b/src/views/business/components/waybill-manage-page.vue
@@ -1473,7 +1473,13 @@
           >
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" label="序号" width="70" align="center" />
-            <el-table-column label="文件名" min-width="200" align="left" show-overflow-tooltip>
+            <el-table-column
+              label="文件名"
+              min-width="200"
+              align="left"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row)">
                   {{ row.originalName || row.name }}
diff --git a/src/views/business/loading-manage.vue b/src/views/business/loading-manage.vue
index c07f2e7..9a79744 100644
--- a/src/views/business/loading-manage.vue
+++ b/src/views/business/loading-manage.vue
@@ -1049,6 +1049,7 @@
                   label="运单号"
                   min-width="150"
                   show-overflow-tooltip
+                  class-name="is-ellipsis-link"
                 >
                   <template #default="{ row }">
                     <el-link v-if="row.waybillNo" type="primary" @click="openWaybillDetail(row)">
diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue
index 87447c0..d566f0b 100644
--- a/src/views/business/project-apply.vue
+++ b/src/views/business/project-apply.vue
@@ -645,7 +645,13 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column label="文件名" min-width="220" align="center" show-overflow-tooltip>
+            <el-table-column
+              label="文件名"
+              min-width="220"
+              align="center"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row)">
                   {{ attachmentName(row) }}
diff --git a/src/views/business/temporary-credit-limit.vue b/src/views/business/temporary-credit-limit.vue
index 0fdb589..8126ad2 100644
--- a/src/views/business/temporary-credit-limit.vue
+++ b/src/views/business/temporary-credit-limit.vue
@@ -99,7 +99,12 @@
           <el-table :data="attachmentRows" border @selection-change="selectedAttachments = $event">
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" label="序号" width="70" align="center" />
-            <el-table-column label="文件名称" min-width="240" show-overflow-tooltip>
+            <el-table-column
+              label="文件名称"
+              min-width="240"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row)">
                   {{ attachmentName(row) }}
@@ -216,7 +221,12 @@
             </div>
             <el-table :data="attachmentRows" empty-text="暂无附件">
               <el-table-column type="index" label="序号" width="70" align="center" />
-              <el-table-column label="文件名称" min-width="240" show-overflow-tooltip>
+              <el-table-column
+              label="文件名称"
+              min-width="240"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
                 <template #default="{ row }">
                   <el-link type="primary" @click="previewAttachment(row)">
                     {{ attachmentName(row) }}
diff --git a/src/views/settlement/components/formal-settlement-editor.vue b/src/views/settlement/components/formal-settlement-editor.vue
index 569c7c1..764f93d 100644
--- a/src/views/settlement/components/formal-settlement-editor.vue
+++ b/src/views/settlement/components/formal-settlement-editor.vue
@@ -298,7 +298,13 @@
               <span v-else>{{ attachmentTypeName(row.type) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="文件名" min-width="220" align="left" show-overflow-tooltip>
+          <el-table-column
+            label="文件名"
+            min-width="220"
+            align="left"
+            show-overflow-tooltip
+            class-name="is-ellipsis-link"
+          >
             <template #default="{ row }">
               <el-link
                 :disabled="!getAttachmentUrl(row)"
diff --git a/src/views/settlement/components/pre-settlement-editor.vue b/src/views/settlement/components/pre-settlement-editor.vue
index 5fe72cf..ed95f27 100644
--- a/src/views/settlement/components/pre-settlement-editor.vue
+++ b/src/views/settlement/components/pre-settlement-editor.vue
@@ -354,7 +354,12 @@
                 <span v-else>{{ attachmentTypeName(row.type) }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="文件名称" min-width="260" show-overflow-tooltip>
+            <el-table-column
+              label="文件名称"
+              min-width="260"
+              show-overflow-tooltip
+              class-name="is-ellipsis-link"
+            >
               <template #default="{ row }">
                 <el-link type="primary" @click="previewAttachment(row)">
                   {{ attachmentName(row) }}
diff --git a/src/views/settlement/components/settlement-adjustment-editor.vue b/src/views/settlement/components/settlement-adjustment-editor.vue
index f2df1ce..be18feb 100644
--- a/src/views/settlement/components/settlement-adjustment-editor.vue
+++ b/src/views/settlement/components/settlement-adjustment-editor.vue
@@ -193,7 +193,12 @@
         <el-table :data="attachments" border @selection-change="selectedAttachments = $event">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column type="index" label="序号" width="64" align="center" />
-          <el-table-column label="文件名" min-width="220" show-overflow-tooltip>
+          <el-table-column
+            label="文件名"
+            min-width="220"
+            show-overflow-tooltip
+            class-name="is-ellipsis-link"
+          >
             <template #default="{ row }">
               <el-link type="primary" @click="previewAttachment(row)">
                 {{ attachmentName(row) }}