pms 填报保养工单时维护运行时间周期 保养项样式调整

src/api/pms/iotmainworkorderbom/index.ts

@@ -44,6 +44,8 @@ export interface IotMainWorkOrderBomVO {
   status: number // 状态 0启用  1停用
   remark: string // 备注
   version: number // 版本
+  // 扩展字段
+  timeError: string // 运行时间周期 错误提示
 }
 
 // PMS 保养计划明细BOM API

src/locales/en.ts

@@ -980,7 +980,8 @@ export default {
     maintaining: 'Maintaining',
     accumulatedParams: 'COP',
     accumulatedRunTime: 'COT',
-    accumulatedMileage: 'COK'
+    accumulatedMileage: 'COK',
+    runningTimeCycleError: 'MCT must be greater than 0'
   },
   inspect:{
     InspectionItems:'InspectionItems',

src/locales/ru.ts

@@ -961,7 +961,8 @@ export default {
     maintaining: '保养中',
     accumulatedParams: '累计运行参数',
     accumulatedRunTime: '累计运行时长',
-    accumulatedMileage: '累计运行公里数'
+    accumulatedMileage: '累计运行公里数',
+    runningTimeCycleError: '运行时间周期必须大于0'
   },
   inspect:{
     InspectionItems:'巡检项',

src/locales/zh-CN.ts

@@ -976,7 +976,8 @@ export default {
     maintaining: '保养中',
     accumulatedParams: '累计运行参数',
     accumulatedRunTime: '累计运行时长',
-    accumulatedMileage: '累计运行公里数'
+    accumulatedMileage: '累计运行公里数',
+    runningTimeCycleError: '运行时间周期必须大于0'
   },
   inspect:{
     InspectionItems:'巡检项',

src/views/pms/iotmainworkorder/IotMainWorkOrder.vue

@@ -26,11 +26,6 @@
                 />
               </el-select>
             </el-form-item>
-            <!--
-            <el-form-item label="工单编号" prop="orderNumber">
-              <el-input type="text" v-model="formData.orderNumber" disabled/>
-            </el-form-item>
-            -->
           </el-col>
           <el-col :span="8">
             <el-form-item :label="t('mainPlan.MaintenanceCost')" prop="cost">
@@ -82,24 +77,6 @@
     </el-form>
   </ContentWrap>
   <ContentWrap>
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <el-form
-        class="-mb-15px"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-      >
-        <!--
-        <el-form-item>
-          <el-button @click="openForm" type="warning">
-            <Icon icon="ep:plus" class="mr-5px" /> 新增设备</el-button>
-        </el-form-item>
-        -->
-      </el-form>
-    </ContentWrap>
-
     <!-- 列表 -->
     <ContentWrap>
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
@@ -115,7 +92,13 @@
         <el-table-column :label="t('iotDevice.name')" align="center" prop="deviceName" />
         <el-table-column :label="t('operationFillForm.sumTime')" align="center" prop="totalRunTime" :formatter="erpPriceTableColumnFormatter"/>
         <el-table-column :label="t('operationFillForm.sumKil')" align="center" prop="totalMileage" :formatter="erpPriceTableColumnFormatter"/>
-        <el-table-column :label="t('mainPlan.MaintItems')" align="center" prop="name" />
+        <el-table-column :label="t('mainPlan.MaintItems')" align="center" prop="name" :show-overflow-tooltip="false" :width="maintItemsWidth" >
+          <template #default="{ row }">
+            <div class="full-content-cell"> <!-- 自定义样式 -->
+              {{ row.name }}
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column :label="t('main.mileage')" key="mileageRule" width="80">
           <template #default="scope">
             <el-switch
@@ -146,48 +129,75 @@
             />
           </template>
         </el-table-column>
+        <el-table-column
+          v-if="shouldShowRunningTimeColumn"
+          :label="t('mainPlan.RunTimeCycle')"
+          align="center"
+          width="120"
+        >
+          <template #default="scope">
+            <el-input-number
+              v-if="scope.row.runningTimeRule === 0"
+              v-model="scope.row.nextRunningTime"
+              :precision="1"
+              :min="1"
+              :controls="false"
+              style="width: 100%"
+              @change="validateRunningTime(scope.row)"
+            />
+            <span v-else>-</span>
+            <!-- 错误提示 -->
+            <div v-if="scope.row.timeError" class="error-text">
+              {{ scope.row.timeError }}
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column :label="t('common.status')" align="center" width="100">
           <template #default="scope">
             {{ getStatusText(scope.row) }}
           </template>
         </el-table-column>
-        <el-table-column :label="t('iotMaintain.numberOfMaterials')" align="center" width="180">
+        <el-table-column :label="t('iotMaintain.numberOfMaterials')" align="center" width="90">
           <template #default="scope">
             {{ getMaterialCount(scope.row.bomNodeId) }}
           </template>
         </el-table-column>
         <el-table-column :label="t('iotMaintain.operation')" align="center" min-width="120px">
           <template #default="scope">
-            <div style="display: flex; justify-content: center; align-items: center; width: 100%">
-              <!-- 新增配置按钮 -->
-              <div style="margin-left: 12px" v-if="scope.row.status === 0">
-                <el-button
-                  link
-                  type="primary"
-                  @click="openConfigDialog(scope.row)"
-                >
-                  {{ t('stock.DelayMaintenance') }}
-                </el-button>
-              </div>
-              <div style="margin-left: 12px" v-if="scope.row.status === 0">
-                <el-button
-                  link
-                  type="primary"
-                  @click="openMaterialForm(scope.row)"
-                >
-                  {{ t('stock.selectMaterial') }}
-                </el-button>
-              </div>
-              <div style="margin-left: 12px">
-                <el-button
-                  link
-                  type="primary"
-                  @click="handleView(scope.row)"
-                >
-                  {{ t('bomList.materialDetail') }}
-                </el-button>
-              </div>
-            </div>
+            <el-dropdown trigger="hover" @command="handleDropdownCommand">
+              <el-button type="primary" link>
+                {{ t('action.more') }}<el-icon><arrow-down /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <!-- 延迟保养按钮 -->
+                  <el-dropdown-item
+                    v-if="scope.row.status === 0"
+                    :command="{ action: 'delay', row: scope.row }"
+                    :icon="Clock"
+                  >
+                    {{ t('stock.DelayMaintenance') }}
+                  </el-dropdown-item>
+
+                  <!-- 选择物料按钮 -->
+                  <el-dropdown-item
+                    v-if="scope.row.status === 0"
+                    :command="{ action: 'material', row: scope.row }"
+                    :icon="Box"
+                  >
+                    {{ t('stock.selectMaterial') }}
+                  </el-dropdown-item>
+
+                  <!-- 物料详情按钮 -->
+                  <el-dropdown-item
+                    :command="{ action: 'detail', row: scope.row }"
+                    :icon="Document"
+                  >
+                    {{ t('bomList.materialDetail') }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
         </el-table-column>
       </el-table>
@@ -478,6 +488,8 @@ import MaterialListDrawer from "@/views/pms/iotmainworkorder/SelectedMaterialDra
 import WorkOrderMaterial from "@/views/pms/iotmainworkorder/WorkOrderMaterial.vue";
 import { IotDevicePersonApi, IotDevicePersonVO } from '@/api/pms/iotdeviceperson'
 import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+// 引入图标
+import { ArrowDown, Clock, Box, Document } from '@element-plus/icons-vue';
 
 /** 保养计划 表单 */
 defineOptions({ name: 'IotMainWorkOrderBom' })
@@ -506,6 +518,9 @@ const devicePersonsMap = ref<Map<number, Set<string>>>(new Map()) // 存储设
 // 控制抽屉额外列的显示
 const hideExtraColumnsInDrawer = ref(false)
 
+// 新增响应式变量
+const maintItemsWidth = ref('auto')
+
 const formData = ref({
   id: undefined,
   deptId: undefined,
@@ -658,6 +673,30 @@ const openConfigDialog = (row: IotMainWorkOrderBomVO) => {
   configDialog.visible = true
 }
 
+// 运行时间周期 单行校验方法
+const validateRunningTime = (row: IotMainWorkOrderBomVO) => {
+  if (row.runningTimeRule === 0 && (!row.nextRunningTime || row.nextRunningTime <= 0)) {
+    row.timeError = t('mainPlan.runningTimeCycleError');
+    return false;
+  }
+  row.timeError = '';
+  return true;
+};
+
+// 运行时间周期 全局校验方法（在submitForm中调用）
+const validateAllRunningTimes = (): boolean => {
+  let isValid = true;
+  list.value.forEach(row => {
+    if (row.runningTimeRule === 0 && (!row.nextRunningTime || row.nextRunningTime <= 0)) {
+      isValid = false;
+      // 高亮标记错误行
+      row.timeError = t('mainPlan.runningTimeCycleError');
+      message.error(`${t('mainPlan.runningTimeCycleError')}: ${row.deviceCode}-${row.name}`);
+    }
+  });
+  return isValid;
+};
+
 // const materialFormRef = ref()
 const openMaterialForm = (row: any) => {
   bomNodeId.value = row.bomNodeId;
@@ -691,6 +730,11 @@ const selectChoose = (selectedMaterial) => {
   });
 }
 
+// 计算属性：判断是否需要显示运行时间周期列
+const shouldShowRunningTimeColumn = computed(() => {
+  return list.value.some(item => item.runningTimeRule === 0);
+});
+
 /** 查看已经选择的物料 并编辑 */
 const handleView = (row: IotMainWorkOrderBomVO) => {
   currentBomNodeId.value = row.bomNodeId
@@ -890,6 +934,12 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
+
+  // 运行时间周期全局校验
+  if (!validateAllRunningTimes()) {
+    return; // 校验失败则终止提交
+  }
+
   // 校验表格数据
   const isValid = validateTableData()
   if (!isValid) return
@@ -969,6 +1019,48 @@ const configFormRules = reactive({
   ]
 })
 
+// 计算文本宽度的辅助函数
+const getTextWidth = (text: string): number => {
+  const span = document.createElement('span')
+  span.style.visibility = 'hidden'
+  span.style.position = 'absolute'
+  span.style.whiteSpace = 'nowrap'
+  span.style.fontSize = '14px' // 与表格实际字体一致
+  span.style.fontFamily = 'inherit'
+  span.innerText = text
+  document.body.appendChild(span)
+  const width = span.offsetWidth
+  document.body.removeChild(span)
+  return width
+}
+
+// 计算列宽的主函数
+const calculateMaintItemsWidth = () => {
+  if (list.value.length === 0) {
+    maintItemsWidth.value = 'auto'
+    return
+  }
+
+  // 1. 计算表头文本宽度
+  const headerText = t('mainPlan.MaintItems')
+  const headerWidth = getTextWidth(headerText)
+
+  // 2. 计算内容最大宽度
+  let contentMaxWidth = 0
+  list.value.forEach(item => {
+    if (item.name) {
+      const width = getTextWidth(item.name.toString())
+      if (width > contentMaxWidth) {
+        contentMaxWidth = width
+      }
+    }
+  })
+
+  // 3. 取最大值 + 内边距(20px)
+  const maxWidth = Math.max(headerWidth, contentMaxWidth) + 20
+  maintItemsWidth.value = `${maxWidth}px`
+}
+
 const getStatusText = (row: any) => {
   // 状态为1直接返回"完成"
   if (row.status === 1) return t('mainPlan.completed');
@@ -987,6 +1079,26 @@ const getStatusText = (row: any) => {
   return t('mainPlan.maintaining');
 };
 
+// 监听数据变化重新计算
+watch(() => list.value, () => {
+  calculateMaintItemsWidth()
+}, { deep: true })
+
+// 下拉菜单命令处理
+const handleDropdownCommand = (command: { action: string; row: IotMainWorkOrderBomVO }) => {
+  switch (command.action) {
+    case 'delay':
+      openConfigDialog(command.row);
+      break;
+    case 'material':
+      openMaterialForm(command.row);
+      break;
+    case 'detail':
+      handleView(command.row);
+      break;
+  }
+};
+
 /** 校验表格数据 */
 const validateTableData = (): boolean => {
   let isValid = true;
@@ -1082,6 +1194,22 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
+// 防抖函数实现
+function debounce(func: Function, wait: number) {
+  let timeout: ReturnType<typeof setTimeout> | null
+  return function executedFunction(...args: any[]) {
+    const later = () => {
+      clearTimeout(timeout!)
+      func(...args)
+    }
+    clearTimeout(timeout!)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+// 响应窗口大小变化
+const handleResize = debounce(calculateMaintItemsWidth, 300)
+
 onMounted(async () => {
   materialList.value = []
   const deptId = useUserStore().getUser.deptId
@@ -1119,6 +1247,8 @@ onMounted(async () => {
     console.error('数据加载失败:', error)
     message.error('数据加载失败，请重试')
   }
+  window.addEventListener('resize', handleResize)
+  nextTick(calculateMaintItemsWidth)
 })
 
 </script>
@@ -1154,4 +1284,24 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 500;
 }
+
+.error-text {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+:deep(.el-table__body) {
+  .el-table__cell {
+    .cell {
+      word-break: break-word;
+      max-width: 600px; /* 最大宽度限制 */
+    }
+  }
+}
+
+.full-content-cell {
+  white-space: nowrap; /* 禁止换行 */
+  overflow: visible;   /* 允许内容溢出单元格 */
+}
 </style>

src/views/pms/maintenance/IotMaintenancePlanEdit.vue

@@ -71,7 +71,13 @@
         </el-table-column>
         <el-table-column label="tempTotalRunTime" align="center" prop="tempTotalRunTime" :formatter="erpPriceTableColumnFormatter" v-if="false"/>
         <el-table-column label="tempTotalMileage" align="center" prop="tempTotalMileage" :formatter="erpPriceTableColumnFormatter" v-if="false"/>
-        <el-table-column :label="t('bomList.bomNode')" align="center" prop="name" />
+        <el-table-column :label="t('bomList.bomNode')" align="center" prop="name" :show-overflow-tooltip="false" :width="bomNodeColumnWidth">
+          <template #default="{ row }">
+            <div class="full-content-cell"> <!-- 自定义样式 -->
+              {{ row.name }}
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column :label="t('main.mileage')" key="mileageRule" width="80">
           <template #default="scope">
             <el-switch
@@ -382,7 +388,7 @@
 import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
 import * as UserApi from '@/api/system/user'
 import { useUserStore } from '@/store/modules/user'
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { IotMaintenanceBomApi, IotMaintenanceBomVO } from '@/api/pms/iotmaintenancebom'
 import { IotMaintenancePlanApi, IotMaintenancePlanVO } from '@/api/pms/maintenance'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -410,6 +416,8 @@ const list = ref<IotMaintenanceBomVO[]>([]) // 设备bom关联列表的数据
 
 const deviceIds = ref<number[]>([]) // 已经选择的设备id数组
 
+const bomNodeColumnWidth = ref('auto')
+
 // 分页相关变量
 const currentPage = ref(1)
 const pageSize = ref(10)
@@ -762,6 +770,11 @@ const deviceChoose = async(selectedDevices) => {
   currentPage.value = 1
 }
 
+// 监听数据变化重新计算列宽
+watch(() => [...list.value], () => {
+  calculateBomNodeColumnWidth()
+}, { deep: true })
+
 const deviceFormRef = ref<InstanceType<typeof MainPlanDeviceList>>()
 const openForm = () => {
   deviceFormRef.value?.open();
@@ -964,6 +977,32 @@ const sortDeviceList = (devices: IotMaintenanceBomVO[]) => {
   })
 };
 
+// 计算BOM节点列宽
+const calculateBomNodeColumnWidth = () => {
+  // 获取表头文本
+  const headerText = t('bomList.bomNode')
+
+  // 计算表头宽度
+  const headerWidth = getTextWidth(headerText)
+
+  // 计算内容最大宽度
+  let contentMaxWidth = 0
+  if (list.value.length > 0) {
+    list.value.forEach(item => {
+      if (item.name) {
+        const width = getTextWidth(item.name)
+        if (width > contentMaxWidth) {
+          contentMaxWidth = width
+        }
+      }
+    })
+  }
+
+  // 取表头和内容最大宽度 + 内边距(25px)
+  const maxWidth = Math.max(headerWidth, contentMaxWidth) + 25
+  bomNodeColumnWidth.value = `${maxWidth}px`
+}
+
 // 累计运行时长变更
 const handleAccumulatedTimeChange = (option) => {
 }
@@ -1030,8 +1069,26 @@ onMounted(async () => {
     const userInfo = wsCache.get(CACHE_KEY.USER)
     formData.value.responsiblePerson = userInfo.user.id;
   }
+  nextTick(() => {
+    calculateBomNodeColumnWidth()
+  })
 })
 
+// 辅助函数：计算文本实际宽度 BOM节点名称显示全称
+const getTextWidth = (text: string) => {
+  const span = document.createElement('span')
+  span.style.visibility = 'hidden'
+  span.style.position = 'absolute'
+  span.style.whiteSpace = 'nowrap'
+  span.style.fontSize = '14px' // 与表格实际字体一致
+  span.style.fontFamily = 'inherit' // 继承文档字体
+  span.innerText = text
+  document.body.appendChild(span)
+  const width = span.offsetWidth
+  document.body.removeChild(span)
+  return width
+}
+
 onUnmounted(async () => {
   console.log('组件卸载......')
 })
@@ -1104,4 +1161,9 @@ const handleDelete = async (str: string) => {
   justify-content: flex-end;
   margin-top: 20px;
 }
+
+.full-content-cell {
+  white-space: nowrap; /* 禁止换行 */
+  overflow: visible;   /* 允许内容溢出单元格 */
+}
 </style>