保养工单累计公里数

src/views/pms/iotmainworkorder/IotMainWorkOrderOptimize.vue

@@ -5,7 +5,7 @@
       :model="formData"
       :rules="formRules"
       v-loading="formLoading"
-      style="margin-right: 4em; margin-left: 0.5em; margin-top: 1em"
+      style="margin-top: 1em; margin-right: 4em; margin-left: 0.5em"
       label-width="130px"
     >
       <div class="base-expandable-content">
@@ -553,8 +553,8 @@
     <ContentWrap>
       <div
         style="
-          margin-bottom: 15px;
           display: flex;
+          margin-bottom: 15px;
           justify-content: flex-start;
           align-items: center;
           gap: 12px;
@@ -1537,6 +1537,7 @@ const validateMainRuntime = (row: IotMainWorkOrderBomVO) => {
 
 // 校验 mainMileage 的方法
 const validateMainMileage = (row: IotMainWorkOrderBomVO) => {
+  if (row.mileageRule !== 0) return true
   // 清除之前的错误
   row.mainMileageError = ''
 
@@ -2998,17 +2999,17 @@ const handleRowClick = (row) => {
 }
 
 :deep(.el-input-number .el-input__inner) {
-  text-align: left !important;
   padding-left: 10px; /* 保持左侧间距 */
+  text-align: left !important;
 }
 
 /* 分组容器样式 */
 .form-group {
   position: relative;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
   padding: 20px 15px 10px;
   margin-bottom: 18px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
   transition: border-color 0.2s;
 }
 
@@ -3017,51 +3018,54 @@ const handleRowClick = (row) => {
   position: absolute;
   top: -10px;
   left: 20px;
-  background: white;
   padding: 0 8px;
-  color: #606266;
   font-size: 12px;
   font-weight: 500;
+  color: #606266;
+  background: white;
 }
 
 .error-text {
-  color: #f56c6c;
-  font-size: 12px;
   margin-top: 5px;
+  font-size: 12px;
+  color: #f56c6c;
 }
 
 :deep(.el-table__body) {
   .el-table__cell {
     .cell {
-      word-break: break-word;
       max-width: 600px; /* 最大宽度限制 */
+      word-break: break-word;
     }
   }
 }
 
 .full-content-cell {
-  white-space: nowrap; /* 禁止换行 */
   overflow: visible; /* 允许内容溢出单元格 */
+  white-space: nowrap; /* 禁止换行 */
 }
 
 /* 分组表头样式 */
 :deep(.el-table__header) {
   border: 1px solid #dcdfe6 !important;
 }
+
 :deep(.el-table__header th) {
   border-right: 1px solid #dcdfe6 !important;
   border-bottom: 1px solid #dcdfe6 !important;
 }
 
 :deep(.el-table__header .is-group th) {
+  position: relative;
+  font-weight: 600;
   background-color: #f5f7fa !important;
   border-bottom: 1px solid #dcdfe6 !important;
-  font-weight: 600;
-  position: relative;
 }
+
 :deep(.el-table__header .is-group th::after) {
   display: none !important;
 }
+
 /* 分组标题下的子表头单元格 */
 :deep(.el-table__header .el-table__cell:not(.is-group)) {
   border-top: 1px solid #dcdfe6 !important; /* 添加顶部边框连接分组标题 */
@@ -3085,14 +3089,14 @@ const handleRowClick = (row) => {
 
 /* 使用伪元素创建更明显的底部边框 */
 :deep(.el-table .group-first-row::after) {
-  content: '';
   position: absolute;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+  z-index: 1;
   height: 2px;
   background-color: #606266; /* 深灰色边框 */
-  z-index: 1;
+  content: '';
 }
 
 /* 调整分组行的高度，使边框更明显 */
@@ -3126,16 +3130,16 @@ const handleRowClick = (row) => {
 /* 单价列统一容器样式：强制居左，固定宽度，对齐基准一致 */
 .unit-price-container {
   width: 100%;
-  text-align: left; /* 强制内容居左 */
   padding: 0 4px; /* 可选：添加轻微内边距，避免内容贴边 */
+  text-align: left; /* 强制内容居左 */
   box-sizing: border-box;
 }
 
 /* 单价输入框样式：消除默认内边距差异，与静态文本对齐 */
 :deep(.unit-price-input .el-input__inner) {
-  text-align: left !important; /* 覆盖el-input默认居中对齐 */
-  padding-left: 8px !important; /* 统一输入框内边距，与文本缩进匹配 */
   padding-right: 8px !important;
+  padding-left: 8px !important; /* 统一输入框内边距，与文本缩进匹配 */
+  text-align: left !important; /* 覆盖el-input默认居中对齐 */
 }
 
 /* 单价静态文本样式：与输入框保持一致的内边距和对齐 */
@@ -3143,15 +3147,15 @@ const handleRowClick = (row) => {
   display: inline-block; /* 转为行内块，支持padding */
   width: 100%;
   padding: 4px 8px; /* 与输入框内边距匹配（输入框默认height约32px，padding上下4px） */
-  box-sizing: border-box;
   vertical-align: middle; /* 确保与输入框垂直对齐 */
+  box-sizing: border-box;
 }
 
 /* 禁用物料行的样式 */
 :deep(.disabled-material-row) {
-  background-color: #f5f7fa !important;
   color: #c0c4cc !important;
   cursor: not-allowed !important;
+  background-color: #f5f7fa !important;
 }
 
 :deep(.disabled-material-row:hover > td) {
@@ -3159,19 +3163,19 @@ const handleRowClick = (row) => {
 }
 
 :deep(.disabled-material-row .el-input.is-disabled .el-input__inner) {
-  background-color: #f5f7fa !important;
   color: #c0c4cc !important;
   cursor: not-allowed !important;
+  background-color: #f5f7fa !important;
 }
 
 :deep(.disabled-material-row .el-input-number.is-disabled) {
-  opacity: 0.6;
   cursor: not-allowed !important;
+  opacity: 0.6;
 }
 
 :deep(.disabled-material-row .el-button.is-disabled) {
-  opacity: 0.6;
   cursor: not-allowed !important;
+  opacity: 0.6;
 }
 
 /* 新增物料行的样式 */
@@ -3197,30 +3201,32 @@ const handleRowClick = (row) => {
 /* 必填输入框红色边框样式（含hover状态） */
 :deep(.is-required-input .el-input__inner) {
   border-color: #f56c6c !important; /* Element错误色 */
-  box-shadow: 0 0 0 1px rgba(245, 108, 108, 0.4) !important; /* 错误阴影 */
+  box-shadow: 0 0 0 1px rgb(245 108 108 / 40%) !important; /* 错误阴影 */
 }
+
 :deep(.is-required-input .el-input-number__input),
 :deep(.error-input .el-input-number__input) {
-  border-color: #f56c6c !important;
   background-color: #fef0f0 !important;
-  box-shadow: 0 0 0 1px rgba(245, 108, 108, 0.4) !important;
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px rgb(245 108 108 / 40%) !important;
 }
 
 /* 鼠标悬停时保持红色边框（覆盖Element默认hover样式） */
 :deep(.is-required-input .el-input__inner:hover) {
   border-color: #f56c6c !important;
 }
+
 :deep(.is-required-input .el-input-number__input:hover),
 :deep(.error-input .el-input-number__input:hover) {
-  border-color: #f56c6c !important;
   background-color: #fef0f0 !important;
+  border-color: #f56c6c !important;
 }
 
 :deep(.is-required-input .el-input-number__input:focus),
 :deep(.error-input .el-input-number__input:focus) {
-  border-color: #f56c6c !important;
   background-color: #fef0f0 !important;
-  box-shadow: 0 0 0 1px rgba(245, 108, 108, 0.2) !important;
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px rgb(245 108 108 / 20%) !important;
 }
 
 /* 状态列容器样式 - 水平排列 */
@@ -3239,9 +3245,9 @@ const handleRowClick = (row) => {
 
 /* 状态列样式优化 */
 .status-text {
+  min-width: 40px; /* 为文本设置最小宽度，确保对齐 */
   font-size: 12px;
   color: #666;
-  min-width: 40px; /* 为文本设置最小宽度，确保对齐 */
   text-align: left;
   flex-shrink: 0; /* 防止文本被压缩 */
 }
@@ -3271,12 +3277,12 @@ const handleRowClick = (row) => {
 
 /* 自定义淡红色背景的 tooltip */
 :deep(.main-runtime-tooltip) {
-  background: #fef0f0 !important;
-  border: 1px solid #fbc4c4 !important;
-  color: #f56c6c !important;
   max-width: 300px;
-  font-size: 12px;
   padding: 8px 12px;
+  font-size: 12px;
+  color: #f56c6c !important;
+  background: #fef0f0 !important;
+  border: 1px solid #fbc4c4 !important;
 }
 
 /* 隐藏 Tooltip 菱形箭头（核心需求） */
@@ -3289,14 +3295,14 @@ const handleRowClick = (row) => {
 
 /* 新增包装层样式，确保tooltip正确触发 */
 .main-runtime-input-wrapper {
-  width: 100%;
   position: relative;
+  width: 100%;
 }
 
 /* 负数值红色样式 */
 :deep(.negative-value) {
-  color: #f56c6c !important;
   font-weight: 600;
+  color: #f56c6c !important;
 }
 
 /* 确保在表格单元格中正确显示 */