pms 瑞都日报 明细列表 动态列宽

src/views/pms/iotrddailyreport/index.vue

@@ -62,14 +62,14 @@
   </ContentWrap>
 
   <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+  <ContentWrap ref="tableContainerRef">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="主键id" align="center" prop="id" v-if="false"/>
-      <el-table-column label="施工队伍" align="center" prop="deptName" />
-      <el-table-column label="项目" align="center" prop="contractName" />
-      <el-table-column label="任务" align="center" prop="taskName" />
-      <el-table-column label="时间节点" align="center" prop="timeRange" />
-      <el-table-column :label="t('project.status')" align="center" prop="rdStatus">
+      <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
+      <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"/>
+      <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
+      <el-table-column label="时间节点" align="center" prop="timeRange" :width="columnWidths.timeRange"/>
+      <el-table-column :label="t('project.status')" align="center" prop="rdStatus" :width="columnWidths.rdStatus">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PMS_PROJECT_RD_STATUS" :value="scope.row.rdStatus" />
         </template>
@@ -81,39 +81,39 @@
       <el-table-column label="施工设备" align="center" prop="deviceIds" /> -->
       <!--
       <el-table-column label="时间节点-结束" align="center" prop="endTime" /> -->
-      <el-table-column label="累计施工井" align="center" prop="cumulativeWorkingWell" />
-      <el-table-column label="累计施工层" align="center" prop="cumulativeWorkingLayers" />
-      <el-table-column label="当日泵车台次" align="center" prop="dailyPumpTrips" />
-      <el-table-column label="当日仪表/混砂" align="center" prop="dailyToolsSand" />
-      <el-table-column label="趟数" align="center" prop="runCount" />
-      <el-table-column label="桥塞" align="center" prop="bridgePlug" />
-      <el-table-column label="水方量" align="center" prop="waterVolume" />
-      <el-table-column label="时间H" align="center" prop="hourCount" />
+      <el-table-column label="累计施工井" align="center" prop="cumulativeWorkingWell" :width="columnWidths.cumulativeWorkingWell"/>
+      <el-table-column label="累计施工层" align="center" prop="cumulativeWorkingLayers" :width="columnWidths.cumulativeWorkingLayers"/>
+      <el-table-column label="当日泵车台次" align="center" prop="dailyPumpTrips" :width="columnWidths.dailyPumpTrips"/>
+      <el-table-column label="当日仪表/混砂" align="center" prop="dailyToolsSand" :width="columnWidths.dailyToolsSand"/>
+      <el-table-column label="趟数" align="center" prop="runCount" :width="columnWidths.runCount"/>
+      <el-table-column label="桥塞" align="center" prop="bridgePlug" :width="columnWidths.bridgePlug"/>
+      <el-table-column label="水方量" align="center" prop="waterVolume" :width="columnWidths.waterVolume"/>
+      <el-table-column label="时间H" align="center" prop="hourCount" :width="columnWidths.hourCount"/>
       <el-table-column
         label="施工开始日期"
         align="center"
         prop="constructionStartDate"
         :formatter="dateFormatter"
-        width="180px"
+        :width="columnWidths.constructionStartDate"
       />
       <el-table-column
         label="施工结束日期"
         align="center"
         prop="constructionEndDate"
         :formatter="dateFormatter"
-        width="180px"
+        :width="columnWidths.constructionEndDate"
       />
-      <el-table-column label="当日生产动态" align="center" prop="productionStatus" />
-      <el-table-column label="下步工作计划" align="center" prop="nextPlan" />
-      <el-table-column label="外租设备" align="center" prop="externalRental" />
-      <el-table-column label="故障情况" align="center" prop="malfunction" />
-      <el-table-column label="故障误工H" align="center" prop="faultDowntime" />
+      <el-table-column label="当日生产动态" align="center" prop="productionStatus" :width="columnWidths.productionStatus"/>
+      <el-table-column label="下步工作计划" align="center" prop="nextPlan" :width="columnWidths.nextPlan"/>
+      <el-table-column label="外租设备" align="center" prop="externalRental" :width="columnWidths.externalRental"/>
+      <el-table-column label="故障情况" align="center" prop="malfunction" :width="columnWidths.malfunction"/>
+      <el-table-column label="故障误工H" align="center" prop="faultDowntime" :width="columnWidths.faultDowntime"/>
       <el-table-column
         label="创建时间"
         align="center"
         prop="createTime"
         :formatter="dateFormatter"
-        width="180px"
+        :width="columnWidths.createTime"
       />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
@@ -211,6 +211,129 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+// 表格引用
+const tableRef = ref()
+// 表格容器引用
+const tableContainerRef = ref()
+
+// 列宽度配置
+const columnWidths = ref({
+  id: '80px',
+  deptName: '120px',
+  contractName: '120px',
+  taskName: '120px',
+  timeRange: '120px',
+  rdStatus: '120px',
+  cumulativeWorkingWell: '120px',
+  cumulativeWorkingLayers: '120px',
+  dailyPumpTrips: '120px',
+  dailyToolsSand: '120px',
+  runCount: '80px',
+  bridgePlug: '80px',
+  waterVolume: '100px',
+  hourCount: '80px',
+  constructionStartDate: '180px',
+  constructionEndDate: '180px',
+  productionStatus: '200px',
+  nextPlan: '200px',
+  externalRental: '120px',
+  malfunction: '150px',
+  faultDowntime: '120px',
+  createTime: '180px',
+  operation: '120px'
+})
+
+// 计算文本宽度
+const getTextWidth = (text: string, fontSize = 14) => {
+  const span = document.createElement('span');
+  span.style.visibility = 'hidden';
+  span.style.position = 'absolute';
+  span.style.whiteSpace = 'nowrap';
+  span.style.fontSize = `${fontSize}px`;
+  span.style.fontFamily = 'inherit';
+  span.innerText = text;
+
+  document.body.appendChild(span);
+  const width = span.offsetWidth;
+  document.body.removeChild(span);
+
+  return width;
+};
+
+// 计算列宽度
+const calculateColumnWidths = () => {
+  const MIN_WIDTH = 80; // 最小列宽
+  const PADDING = 25; // 列内边距
+
+  // 确保表格容器存在
+  if (!tableContainerRef.value?.$el) return;
+
+  const newWidths: Record<string, string> = {};
+
+  // 计算各列宽度的函数
+  const calculateColumnWidth = (key: string, label: string, getValue: Function) => {
+    const headerWidth = getTextWidth(label) + PADDING;
+    let contentMaxWidth = MIN_WIDTH;
+
+    // 计算内容最大宽度
+    list.value.forEach((row, index) => {
+      let text = '';
+      if (key === 'rdStatus') {
+        // 特殊处理字典列，这里简化处理，实际应该获取字典标签
+        text = String(row[key] || '');
+      } else if (key.includes('Date') || key === 'createTime') {
+        // 日期列使用格式化后的值
+        text = dateFormatter(null, null, row[key]) || '';
+      } else {
+        text = String(getValue ? getValue(row, index) : (row[key] || ''));
+      }
+
+      const textWidth = getTextWidth(text) + PADDING;
+      if (textWidth > contentMaxWidth) contentMaxWidth = textWidth;
+    });
+
+    // 取标题宽度和内容最大宽度的较大值
+    const finalWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH);
+    newWidths[key] = `${finalWidth}px`;
+  };
+
+  // 计算各列宽度
+  calculateColumnWidth('deptName', '施工队伍', (row: any) => row.deptName);
+  calculateColumnWidth('contractName', '项目', (row: any) => row.contractName);
+  calculateColumnWidth('taskName', '任务', (row: any) => row.taskName);
+  calculateColumnWidth('timeRange', '时间节点', (row: any) => row.timeRange);
+  calculateColumnWidth('rdStatus', t('project.status'), (row: any) => row.rdStatus);
+  calculateColumnWidth('cumulativeWorkingWell', '累计施工井', (row: any) => row.cumulativeWorkingWell);
+  calculateColumnWidth('cumulativeWorkingLayers', '累计施工层', (row: any) => row.cumulativeWorkingLayers);
+  calculateColumnWidth('dailyPumpTrips', '当日泵车台次', (row: any) => row.dailyPumpTrips);
+  calculateColumnWidth('dailyToolsSand', '当日仪表/混砂', (row: any) => row.dailyToolsSand);
+  calculateColumnWidth('runCount', '趟数', (row: any) => row.runCount);
+  calculateColumnWidth('bridgePlug', '桥塞', (row: any) => row.bridgePlug);
+  calculateColumnWidth('waterVolume', '水方量', (row: any) => row.waterVolume);
+  calculateColumnWidth('hourCount', '时间H', (row: any) => row.hourCount);
+  calculateColumnWidth('constructionStartDate', '施工开始日期', (row: any) => dateFormatter(null, null, row.constructionStartDate));
+  calculateColumnWidth('constructionEndDate', '施工结束日期', (row: any) => dateFormatter(null, null, row.constructionEndDate));
+  calculateColumnWidth('productionStatus', '当日生产动态', (row: any) => row.productionStatus);
+  calculateColumnWidth('nextPlan', '下步工作计划', (row: any) => row.nextPlan);
+  calculateColumnWidth('externalRental', '外租设备', (row: any) => row.externalRental);
+  calculateColumnWidth('malfunction', '故障情况', (row: any) => row.malfunction);
+  calculateColumnWidth('faultDowntime', '故障误工H', (row: any) => row.faultDowntime);
+  calculateColumnWidth('createTime', '创建时间', (row: any) => dateFormatter(null, null, row.createTime));
+
+  // 操作列固定宽度
+  newWidths.operation = '120px';
+  // id列固定宽度（虽然隐藏）
+  newWidths.id = '80px';
+
+  // 更新列宽配置
+  columnWidths.value = newWidths;
+
+  // 触发表格重新布局
+  nextTick(() => {
+    tableRef.value?.doLayout();
+  });
+};
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -218,6 +341,10 @@ const getList = async () => {
     const data = await IotRdDailyReportApi.getIotRdDailyReportPage(queryParams)
     list.value = data.list
     total.value = data.total
+    // 获取数据后计算列宽
+    nextTick(() => {
+      calculateColumnWidths();
+    });
   } finally {
     loading.value = false
   }
@@ -269,8 +396,57 @@ const handleExport = async () => {
   }
 }
 
+// 声明 ResizeObserver 实例
+let resizeObserver: ResizeObserver | null = null;
+
 /** 初始化 **/
 onMounted(() => {
   getList()
+  // 创建 ResizeObserver 监听表格容器尺寸变化
+  if (tableContainerRef.value?.$el) {
+    resizeObserver = new ResizeObserver(() => {
+      // 使用防抖避免频繁触发
+      clearTimeout((window as any).resizeTimer);
+      (window as any).resizeTimer = setTimeout(() => {
+        calculateColumnWidths();
+      }, 100);
+    });
+    resizeObserver.observe(tableContainerRef.value.$el);
+  }
+})
+
+onUnmounted(() => {
+  // 清除 ResizeObserver
+  if (resizeObserver && tableContainerRef.value?.$el) {
+    resizeObserver.unobserve(tableContainerRef.value.$el);
+    resizeObserver = null;
+  }
+
+  // 清除定时器
+  if ((window as any).resizeTimer) {
+    clearTimeout((window as any).resizeTimer);
+  }
 })
+
+// 监听列表数据变化重新计算列宽
+watch(list, () => {
+  nextTick(calculateColumnWidths)
+}, { deep: true })
 </script>
+
+<style scoped>
+/* 确保表格单元格内容不换行 */
+:deep(.el-table .cell) {
+white-space: nowrap;
+}
+
+/* 确保表格列标题不换行 */
+:deep(.el-table th > .cell) {
+white-space: nowrap;
+}
+
+/* 调整表格最小宽度，确保内容完全显示 */
+:deep(.el-table) {
+min-width: 100%;
+}
+</style>