pms 保养工单列表 通过左侧部门树筛选数据 调整保养工单列表样式

src/views/pms/iotmainworkorder/index.vue

@@ -1,164 +1,162 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item :label="t('bomList.name')" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          :placeholder="t('bomList.nHolder')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item :label="t('bomList.status')" prop="result">
-        <el-select
-          v-model="queryParams.result"
-          :placeholder="t('bomList.status')"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in resultOptions"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('common.createTime')" prop="createTime" label-width="100px">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          :start-placeholder="t('operationFill.start')"
-          :end-placeholder="t('operationFill.end')"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />
-          {{ t('operationFill.search') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('operationFill.reset') }}</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['pms:iot-main-work-order:create']"
+  <el-row :gutter="20">
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <DeptTree @node-click="handleDeptNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="68px"
         >
-          <Icon icon="ep:plus" class="mr-5px" />  {{ t('operationFill.add') }}
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['pms:iot-main-work-order:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap ref="tableContainerRef" class="table-wrap">
-    <el-table v-loading="loading" :data="list" :stripe="true" style="width: 100%" ref="tableRef">
-      <el-table-column :label="t('iotDevice.serial')" align="center" :width="columnWidths.serial">
-        <template #default="scope">
-          {{ scope.$index + 1 }}
-        </template>
-      </el-table-column>
-      <!--
-      <el-table-column label="工单号" align="center" prop="orderNumber" /> -->
-      <el-table-column :label="t('bomList.name')" align="left" prop="name" :width="columnWidths.name"/>
-      <el-table-column :label="t('bomList.status')" align="center" prop="result" :width="columnWidths.result">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.PMS_MAIN_WORK_ORDER_RESULT" :value="scope.row.result" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('bomList.serviceDue')" align="center" :width="columnWidths.serviceDue">
-        <template #default="scope">
+          <el-form-item :label="t('bomList.name')" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              :placeholder="t('bomList.nHolder')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('bomList.status')" prop="result">
+            <el-select
+              v-model="queryParams.result"
+              :placeholder="t('bomList.status')"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="dict in resultOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('common.createTime')" prop="createTime" label-width="100px">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              :start-placeholder="t('operationFill.start')"
+              :end-placeholder="t('operationFill.end')"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />
+              {{ t('operationFill.search') }}</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('operationFill.reset') }}</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['pms:iot-main-work-order:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" />  {{ t('operationFill.add') }}
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['pms:iot-main-work-order:export']"
+            >
+              <Icon icon="ep:download" class="mr-5px" /> 导出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <!-- 列表 -->
+      <ContentWrap ref="tableContainerRef" class="table-wrap">
+        <el-table v-loading="loading" :data="list" :stripe="true" style="width: 100%" ref="tableRef">
+          <el-table-column :label="t('iotDevice.serial')" align="center" :width="columnWidths.serial">
+            <template #default="scope">
+              {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+          <!--
+          <el-table-column label="工单号" align="center" prop="orderNumber" /> -->
+          <el-table-column :label="t('bomList.name')" align="left" prop="name" :width="columnWidths.name"/>
+          <el-table-column :label="t('bomList.status')" align="center" prop="result" :width="columnWidths.result">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PMS_MAIN_WORK_ORDER_RESULT" :value="scope.row.result" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('bomList.serviceDue')" align="center" :width="columnWidths.serviceDue">
+            <template #default="scope">
           <span :class="getDistanceClass(scope.row.mainDistance)">
             {{ scope.row.mainDistance }}
           </span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('bomList.type')" align="center" prop="type" :width="columnWidths.type">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.PMS_MAIN_WORK_ORDER_TYPE" :value="scope.row.type" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('iotMaintain.PersonInCharge')" align="center"
-                       prop="responsiblePersonName" :width="columnWidths.responsiblePersonName"/>
-      <el-table-column
-        :label="t('dict.createTime')"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        :width="columnWidths.createTime"
-      />
-      <el-table-column
-        :label="t('dict.fillTime')"
-        align="center"
-        prop="updateTime"
-        :width="columnWidths.updateTime"
-      >
-        <template #default="scope">
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('bomList.type')" align="center" prop="type" :width="columnWidths.type">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PMS_MAIN_WORK_ORDER_TYPE" :value="scope.row.type" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('iotMaintain.PersonInCharge')" align="center"
+                           prop="responsiblePersonName" :width="columnWidths.responsiblePersonName"/>
+          <el-table-column
+            :label="t('dict.createTime')"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            :width="columnWidths.createTime"
+          />
+          <el-table-column
+            :label="t('dict.fillTime')"
+            align="center"
+            prop="updateTime"
+            :width="columnWidths.updateTime"
+          >
+            <template #default="scope">
           <span v-if="scope.row.result == 2">
             {{ formatCellDate(scope.row.updateTime) }}
           </span>
-          <span v-else></span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('iotMaintain.operation')" align="center" :width="columnWidths.operation">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['pms:iot-main-work-order:update']"
-            v-if="scope.row.result === 1"
-          >
-            {{ t('operationFill.fill') }}
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="detail(scope.row.id)"
-            v-hasPermi="['pms:iot-main-work-order:query']"
-          >
-            {{ t('operationFill.view')  }}
-          </el-button>
-          <!--
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['pms:iot-main-work-order:delete']"
-          >
-            删除
-          </el-button>
-          -->
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
+              <span v-else></span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('iotMaintain.operation')" align="center" :width="columnWidths.operation">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['pms:iot-main-work-order:update']"
+                v-if="scope.row.result === 1"
+              >
+                {{ t('operationFill.fill') }}
+              </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="detail(scope.row.id)"
+                v-hasPermi="['pms:iot-main-work-order:query']"
+              >
+                {{ t('operationFill.view')  }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </el-col>
+  </el-row>
   <!-- 表单弹窗：添加/修改 -->
   <IotMainWorkOrderForm ref="formRef" @success="getList" />
 </template>
@@ -169,6 +167,7 @@ import download from '@/utils/download'
 import { IotMainWorkOrderApi, IotMainWorkOrderVO } from '@/api/pms/iotmainworkorder'
 import IotMainWorkOrderForm from './IotMainWorkOrderForm.vue'
 import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
+import DeptTree from "@/views/system/user/DeptTree.vue";
 const { push } = useRouter() // 路由跳转
 
 /** 保养工单 列表 */
@@ -213,7 +212,7 @@ const exportLoading = ref(false) // 导出的加载中
 // 列宽度配置
 const columnWidths = ref({
   serial: '80px',
-  name: '1',
+  name: '200px',
   result: '120px',
   serviceDue: '150px',
   type: '120px',
@@ -240,106 +239,90 @@ const getTextWidth = (text: string, fontSize = 14) => {
   return width;
 };
 
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+
 // 计算列宽度
 const calculateColumnWidths = () => {
   const MIN_WIDTH = 80; // 最小列宽
   const PADDING = 25; // 列内边距
-  const FIXED_COLUMN_PADDING = 15;  // 固定列额外内边距
-
-  // 可伸缩列的key（这里设置为名称列）
-  const FLEXIBLE_COLUMN = 'name';
-
-  // 需要自适应的列配置
-  const autoColumns = [
-    { key: 'serial', label: t('iotDevice.serial'), getValue: (row, index) => `${index + 1}` },
-    { key: 'name', label: t('bomList.name'), getValue: (row) => row.name },
-    {
-      key: 'result',
-      label: t('bomList.status'),
-      getValue: (row) => {
-        const dict = getStrDictOptions(DICT_TYPE.PMS_MAIN_WORK_ORDER_RESULT)
-          .find(d => d.value === row.result);
-        return dict ? dict.label : '';
-      }
-    },
-    { key: 'serviceDue', label: t('bomList.serviceDue'), getValue: (row) => row.mainDistance || '' },
-    {
-      key: 'type',
-      label: t('bomList.type'),
-      getValue: (row) => {
-        const dict = getStrDictOptions(DICT_TYPE.PMS_MAIN_WORK_ORDER_TYPE)
-          .find(d => d.value === row.type);
-        return dict ? dict.label : '';
-      }
-    },
-    { key: 'responsiblePersonName', label: t('iotMaintain.PersonInCharge'), getValue: (row) => row.responsiblePersonName },
-    { key: 'createTime', label: t('dict.createTime'), getValue: (row) => dateFormatter(null, null, row.createTime) },
-    {
-      key: 'updateTime',
-      label: t('dict.fillTime'),
-      getValue: (row) => row.result == 2 ? formatCellDate(row.updateTime) : ''
-    },
-    { key: 'operation', label: t('iotMaintain.operation'), fixedWidth: 180 } // 操作列固定宽度
-  ];
+  const FLEXIBLE_COLUMN = 'name'; // 可伸缩列
 
-  const newWidths: Record<string, string> = {};
+  // 确保表格容器存在
+  if (!tableContainerRef.value?.$el) return;
 
-  let totalFixedWidth = 0; // 所有固定宽度列的总和 用于计算剩余空间
+  const container = tableContainerRef.value.$el;
+  const containerWidth = container.clientWidth;
 
-  // 先计算所有非伸缩列的宽度
-  autoColumns.forEach(col => {
-    if (col.fixedWidth) {
-      newWidths[col.key] = `${col.fixedWidth}px`;
-      if (col.key !== FLEXIBLE_COLUMN) {
-        totalFixedWidth += col.fixedWidth;
-      }
-      return;
-    }
+  // 1. 计算所有列的最小宽度
+  const minWidths: Record<string, number> = {};
+  let totalMinWidth = 0;
 
-    // 跳过伸缩列
-    if (col.key === FLEXIBLE_COLUMN) return;
-
-    const headerText = col.label;
-    const headerWidth = getTextWidth(headerText) * 1.2;
+  // 计算列最小宽度的函数
+  const calculateColumnMinWidth = (key: string, label: string, getValue: Function) => {
+    const headerWidth = getTextWidth(label) * 1.2;
+    let contentMaxWidth = 0;
 
     // 计算内容最大宽度
-    let contentMaxWidth = 0;
     list.value.forEach((row, index) => {
-      const text = col.getValue ? String(col.getValue(row, index)) : String(row[col.key] || '');
+      const text = String(getValue ? getValue(row, index) : (row[key] || ''));
       const textWidth = getTextWidth(text);
       if (textWidth > contentMaxWidth) contentMaxWidth = textWidth;
     });
 
-    // 取最大值并添加内边距
-    const finalWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING;
-    newWidths[col.key] = `${finalWidth}px`;
-    totalFixedWidth += finalWidth;
+    const minWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING;
+    minWidths[key] = minWidth;
+    totalMinWidth += minWidth;
+    return minWidth;
+  };
+
+  // 计算各列最小宽度
+  calculateColumnMinWidth('serial', t('iotDevice.serial'), (row: any, index: number) => `${index + 1}`);
+  const nameMinWidth = calculateColumnMinWidth('name', t('bomList.name'), (row: any) => row.name);
+  calculateColumnMinWidth('result', t('bomList.status'), (row: any) => {
+    const dict = getStrDictOptions(DICT_TYPE.PMS_MAIN_WORK_ORDER_RESULT)
+      .find(d => d.value === row.result);
+    return dict ? dict.label : '';
   });
+  calculateColumnMinWidth('serviceDue', t('bomList.serviceDue'), (row: any) => row.mainDistance || '');
+  calculateColumnMinWidth('type', t('bomList.type'), (row: any) => {
+    const dict = getStrDictOptions(DICT_TYPE.PMS_MAIN_WORK_ORDER_TYPE)
+      .find(d => d.value === row.type);
+    return dict ? dict.label : '';
+  });
+  calculateColumnMinWidth('responsiblePersonName', t('iotMaintain.PersonInCharge'), (row: any) => row.responsiblePersonName);
+  calculateColumnMinWidth('createTime', t('dict.createTime'), (row: any) => dateFormatter(null, null, row.createTime));
+  calculateColumnMinWidth('updateTime', t('dict.fillTime'), (row: any) => row.result == 2 ? formatCellDate(row.updateTime) : '');
 
-  // 计算伸缩列所需的宽度
-  if (tableContainerRef.value?.$el) {
-    const containerWidth = tableContainerRef.value.$el.clientWidth;
-    // 计算剩余空间：容器宽度 - 所有固定列宽度 - 滚动条宽度(17px)
-    const remainingWidth = containerWidth - totalFixedWidth - 17;
-
-    if (remainingWidth > MIN_WIDTH) {
-      // 将剩余宽度分配给伸缩列
-      newWidths[FLEXIBLE_COLUMN] = `${Math.max(remainingWidth, MIN_WIDTH)}px`;
-    } else {
-      // 空间不足时使用内容宽度
-      const headerText = t('bomList.name');
-      const headerWidth = getTextWidth(headerText) * 1.2;
-      newWidths[FLEXIBLE_COLUMN] = `${Math.max(headerWidth, MIN_WIDTH) + PADDING}px`;
-    }
+  // 操作列固定宽度
+  minWidths.operation = 180;
+  totalMinWidth += 180;
+
+  // 2. 计算可伸缩列最终宽度
+  const newWidths: Record<string, string> = {};
+  const availableWidth = containerWidth - 17; // 减去滚动条宽度
+
+  // 应用最小宽度到所有列
+  Object.keys(minWidths).forEach(key => {
+    newWidths[key] = `${minWidths[key]}px`;
+  });
+
+  // 计算可伸缩列需要的宽度
+  if (totalMinWidth < availableWidth) {
+    // 有剩余空间：分配给可伸缩列
+    newWidths[FLEXIBLE_COLUMN] = `${minWidths[FLEXIBLE_COLUMN] + (availableWidth - totalMinWidth)}px`;
   } else {
-    // 默认处理
-    newWidths[FLEXIBLE_COLUMN] = '200px';
+    // 空间不足：确保可伸缩列至少显示内容
+    newWidths[FLEXIBLE_COLUMN] = `${nameMinWidth}px`;
   }
 
-  // 更新列宽度
+  // 3. 更新列宽配置
   columnWidths.value = newWidths;
 
-  // 重新布局表格
+  // 4. 触发表格重新布局
   nextTick(() => {
     tableRef.value?.doLayout();
   });
@@ -495,13 +478,12 @@ watch(list, () => {
 }
 
 .table-wrap {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+  overflow-x: auto; /* 允许水平滚动 */
 }
 
 /* 确保所有内容不换行 */
 :deep(.el-table) {
+  min-width: 100% !important;
   width: auto !important;
 }