新增所属客户的徽章视觉

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;