pms 日报 项目 任务列表 客户名称 内容过长时 显示省略号

src/views/pms/iotprojecttask/index.vue

@@ -89,8 +89,8 @@
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="客户名称" align="center" prop="manufactureName" :width="columnWidths.manufactureName" />
-        <el-table-column label="合同名称" align="center" prop="contractName" :width="columnWidths.contractName" />
+        <el-table-column label="客户名称" align="center" prop="manufactureName" :width="columnWidths.manufactureName" show-overflow-tooltip/>
+        <el-table-column label="合同名称" align="center" prop="contractName" :width="columnWidths.contractName" show-overflow-tooltip/>
         <el-table-column label="合同编号" align="center" prop="contractCode" :width="columnWidths.contractCode" />
         <el-table-column label="井号" align="center" prop="wellName" :width="columnWidths.wellName" />
         <!-- <el-table-column label="井型/井别" align="center" prop="wellType" /> -->
@@ -293,8 +293,8 @@ const tableContainerRef = ref()
 // 列宽度配置
 const columnWidths = ref({
   serial: '50px',
-  manufactureName: '120px',
-  contractName: '150px',
+  manufactureName: '200px',
+  contractName: '200px',
   contractCode: '120px',
   wellName: '100px',
   wellType: '100px',
@@ -505,7 +505,7 @@ const getList = async () => {
 const calculateColumnWidths = () => {
   const MIN_WIDTH = 80; // 最小列宽
   const PADDING = 25; // 列内边距
-  const FLEXIBLE_COLUMNS = ['manufactureName', 'contractName', 'contractCode', 'wellName', 'location']; // 可伸缩列
+  const FLEXIBLE_COLUMNS = ['contractCode', 'wellName', 'location']; // 可伸缩列
 
   // 确保表格容器存在
   if (!tableContainerRef.value?.$el) return;
@@ -513,12 +513,27 @@ const calculateColumnWidths = () => {
   const container = tableContainerRef.value.$el;
   const containerWidth = container.clientWidth;
 
+  // 固定列的宽度
+  const FIXED_COLUMNS = {
+    manufactureName: 200,
+    contractName: 200
+  };
+
   // 1. 计算所有列的最小宽度
   const minWidths: Record<string, number> = {};
   let totalMinWidth = 0;
 
+  // 设置固定列的宽度
+  Object.keys(FIXED_COLUMNS).forEach(key => {
+    minWidths[key] = FIXED_COLUMNS[key];
+    totalMinWidth += FIXED_COLUMNS[key];
+  });
+
   // 计算列最小宽度的函数
   const calculateColumnMinWidth = (key: string, label: string, getValue: Function) => {
+    // 如果是固定列，跳过计算
+    if (FIXED_COLUMNS[key]) return;
+
     const headerWidth = getTextWidth(label) * 1.2;
     let contentMaxWidth = 0;
 
@@ -537,8 +552,8 @@ const calculateColumnWidths = () => {
 
   // 计算各列最小宽度
   calculateColumnMinWidth('serial', t('iotDevice.serial'), (row: any, index: number) => `${index + 1}`);
-  calculateColumnMinWidth('manufactureName', '客户名称', (row: any) => row.manufactureName);
-  calculateColumnMinWidth('contractName', '合同名称', (row: any) => row.contractName);
+  // calculateColumnMinWidth('manufactureName', '客户名称', (row: any) => row.manufactureName);
+  // calculateColumnMinWidth('contractName', '合同名称', (row: any) => row.contractName);
   calculateColumnMinWidth('contractCode', '合同编号', (row: any) => row.contractCode);
   calculateColumnMinWidth('wellName', '井号', (row: any) => row.wellName);
   calculateColumnMinWidth('wellType', t('project.wellType'), (row: any) => {
@@ -564,7 +579,11 @@ const calculateColumnWidths = () => {
 
   // 应用最小宽度到所有列
   Object.keys(minWidths).forEach(key => {
-    newWidths[key] = `${minWidths[key]}px`;
+    if (FIXED_COLUMNS[key]) {
+      newWidths[key] = `${FIXED_COLUMNS[key]}px`;
+    } else {
+      newWidths[key] = `${minWidths[key]}px`;
+    }
   });
 
   // 计算可伸缩列需要的宽度
@@ -575,7 +594,9 @@ const calculateColumnWidths = () => {
     const spacePerColumn = Math.floor(extraSpace / flexibleColumnCount);
 
     FLEXIBLE_COLUMNS.forEach(key => {
-      newWidths[key] = `${minWidths[key] + spacePerColumn}px`;
+      if (!FIXED_COLUMNS[key]) { // 确保不是固定列
+        newWidths[key] = `${minWidths[key] + spacePerColumn}px`;
+      }
     });
   }
 
@@ -704,13 +725,19 @@ watch(list, () => {
   min-width: 100%;
 }
 
-/* 强制显示所有内容，防止省略号 */
+/* 为特定列设置省略号，但保持其他列正常显示 */
 :deep(.el-table td.el-table__cell),
 :deep(.el-table th.el-table__cell) {
-  overflow: visible !important;
+  overflow: hidden !important;
 }
 
 :deep(.el-table .cell) {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+/* 确保操作列的内容完全显示（不应用省略号） */
+:deep(.el-table-column--operation .cell) {
   overflow: visible !important;
   text-overflow: clip !important;
 }