From fc28d51e7dd364344f89ce8847937ddd4e0ff96b Mon Sep 17 00:00:00 2001
From: GiveMePast <1248298477@qq.com>
Date: Thu, 14 May 2026 15:55:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=89=80=E5=B1=9E=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7=E7=9A=84=E5=BE=BD=E7=AB=A0=E8=A7=86=E8=A7=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticket/TicketList.vue | 42 ++++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/ticket/TicketList.vue b/src/components/ticket/TicketList.vue
index 570f68c..51e41bb 100644
--- a/src/components/ticket/TicketList.vue
+++ b/src/components/ticket/TicketList.vue
@@ -49,10 +49,15 @@
         prop="company_name"
         label="所属客户"
         min-width="120"
-        show-overflow-tooltip
+        align="center"
       >
         <template #default="{ row }">
-          <span>{{ row.company_name || "未关联" }}</span>
+          <span
+            class="company-badge"
+            :style="getCompanyStyle(row.company_name)"
+          >
+            {{ row.company_name || "未关联" }}
+          </span>
         </template>
       </el-table-column>
 
@@ -169,6 +174,29 @@ const getStatusStyle = (status) => {
   };
   return styles[status] || styles[0];
 };
+
+// 客户徽章颜色映射（同一客户保持同一颜色）
+const companyColorMap = new Map();
+const COMPANY_PALETTE = [
+  { color: "#409EFF", background: "#ecf5ff" },
+  { color: "#67C23A", background: "#f0f9eb" },
+  { color: "#E6A23C", background: "#fdf6ec" },
+  { color: "#F56C6C", background: "#fef0f0" },
+  { color: "#909399", background: "#f4f4f5" },
+  { color: "#9C27B0", background: "#f3e5f5" },
+  { color: "#00BCD4", background: "#e0f7fa" },
+  { color: "#FF9800", background: "#fff3e0" },
+];
+let nextColorIndex = 0;
+
+const getCompanyStyle = (name) => {
+  if (!name) return COMPANY_PALETTE[4]; // 未关联用灰色
+  if (!companyColorMap.has(name)) {
+    companyColorMap.set(name, COMPANY_PALETTE[nextColorIndex % COMPANY_PALETTE.length]);
+    nextColorIndex++;
+  }
+  return companyColorMap.get(name);
+};
 </script>
 
 <style scoped>
@@ -254,7 +282,8 @@ const getStatusStyle = (status) => {
   border: 1px solid #ebeef5;
 }
 
-.status-badge {
+.status-badge,
+.company-badge {
   display: inline-block;
   padding: 0 8px;
   height: 22px;
@@ -263,6 +292,13 @@ const getStatusStyle = (status) => {
   border-radius: 11px;
 }
 
+.company-badge {
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .time-wrapper {
   display: flex;
   flex-direction: column;