Prechádzať zdrojové kódy

pms 保养物料消耗 新增物料空白行 必填项

zhangcl 1 týždeň pred
rodič
commit
69dd5ead82

+ 63 - 2
src/views/pms/iotmainworkorder/IotMainWorkOrderOptimize.vue

@@ -454,12 +454,23 @@
         </el-table-column>
         <el-table-column label="物料名称" align="center" prop="materialName" >
           <template #default="{ row }">
-            <el-input
+            <!-- 新增物料行:显示tooltip和必填红色边框 -->
+            <el-tooltip
               v-if="row.isNew"
+              effect="warning"
+              content="必填项"
+              placement="top"
+              :disabled="row.materialName?.trim()"
+            >
+            <el-input
               v-model="row.materialName"
-              placeholder="请输入物料名称"
+              placeholder="请输入物料名称(必填)"
               style="width: 100%"
+              :class="{ 'is-required-input': row.isNew && !row.materialName?.trim() }"
+            :disabled="isMaterialDisabled(row)"
             />
+            </el-tooltip>
+            <!-- 非新增行:正常显示 -->
             <span v-else>{{ row.materialName }}</span>
           </template>
         </el-table-column>
@@ -493,7 +504,28 @@
         </el-table-column>
         <el-table-column label="消耗数量" align="center" prop="quantity" width="120px">
           <template #default="{ row }">
+            <!-- 新增物料行:显示tooltip、必填红色边框、禁止输入0 -->
+            <el-tooltip
+              v-if="row.isNew"
+              effect="warning"
+              content="必填项,需大于0"
+              placement="top"
+              :disabled="row.quantity > 0"
+            >
             <el-input-number
+              v-model="row.quantity"
+              :precision="4"
+              :min="1"
+            :controls="false"
+            style="width: 100%"
+            :class="{ 'is-required-input': row.isNew && row.quantity <= 0 }"
+            :disabled="isMaterialDisabled(row)"
+            placeholder="请输入(必填)"
+            />
+            </el-tooltip>
+            <!-- 非新增行:正常显示 -->
+            <el-input-number
+              v-else
               v-model="row.quantity"
               :precision="4"
               :min="0"
@@ -2435,4 +2467,33 @@ const handleRowClick = (row) => {
   border: 1px solid #dcdfe6 !important;
 }
 
+/* 必填输入框红色边框样式(含hover状态) */
+:deep(.is-required-input .el-input__inner) {
+  border-color: #f56c6c !important; /* Element错误色 */
+  box-shadow: 0 0 0 1px rgba(227, 59, 59, 0.2) !important; /* 错误阴影 */
+}
+:deep(.is-required-input .el-input-number__input) {
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px rgba(238, 85, 85, 0.2) !important;
+}
+
+/* 鼠标悬停时保持红色边框(覆盖Element默认hover样式) */
+:deep(.is-required-input .el-input__inner:hover) {
+  border-color: #f56c6c !important;
+}
+:deep(.is-required-input .el-input-number__input:hover) {
+  border-color: #f56c6c !important;
+}
+
+/* Tooltip提示样式优化 */
+:deep(.el-tooltip__popper.is-warning) {
+  background-color: #fff3cd !important;
+  border-color: #ffeeba !important;
+  color: #856404 !important;
+}
+:deep(.el-tooltip__popper.is-warning .el-tooltip__arrow) {
+  border-top-color: #ffeeba !important;
+  border-bottom-color: #ffeeba !important;
+}
+
 </style>