pms 选择物料 弹出框页面 样式调整 减小高度

src/views/pms/iotmainworkorder/WorkOrderMaterial.vue

@@ -1,44 +1,45 @@
 <template>
-  <Dialog v-model="dialogVisible" title="选择物料" style="width: 1400px; min-height: 400px">
+  <Dialog v-model="dialogVisible" title="选择物料" style="width: 1400px; padding: 0px 0px 0px 0px; min-height: 300px">
 
     <div ref="measureSpan"
-         style="position:absolute;left:-9999px;top:-9999px;visibility:hidden;white-space:nowrap;padding:0 15px;font:14px Arial, PingFang SC, Microsoft YaHei, sans-serif;">
+         style="position:absolute;left:-9999px;top:-9999px;visibility:hidden;
+         white-space:nowrap;padding:0 12px;font:13px Arial, PingFang SC, Microsoft YaHei, sans-serif;">
     </div>
 
     <!-- 设备分类和BOM节点信息显示 -->
-    <div style="margin: 0 0px 15px; background: #f5f7fa; padding: 12px 20px; border-radius: 4px;">
+    <div style="margin: 0 0px 0px; background: #f5f7fa; padding: 5px 15px; border-radius: 4px;">
       <el-row>
         <el-col :span="8">
-          <span style="font-weight: bold; margin-right: 10px;">设备编码：</span>
-          <span>{{ deviceCode }}</span>
+          <span style="font-weight: bold; margin-right: 8px; font-size: 13px;">设备编码：</span>
+          <span style="font-size: 13px;">{{ deviceCode }}</span>
         </el-col>
         <el-col :span="8">
-          <span style="font-weight: bold; margin-right: 10px;">设备名称：</span>
-          <span>{{ deviceName }}</span>
+          <span style="font-weight: bold; margin-right: 8px; font-size: 13px;">设备名称：</span>
+          <span style="font-size: 13px;">{{ deviceName }}</span>
         </el-col>
         <el-col :span="8">
-          <span style="font-weight: bold; margin-right: 10px;">{{bomNodeLabel}}：</span>
-          <span>{{ bomNodeName }}</span>
+          <span style="font-weight: bold; margin-right: 8px; font-size: 13px;">{{bomNodeLabel}}：</span>
+          <span style="font-size: 13px;">{{ bomNodeName }}</span>
         </el-col>
       </el-row>
     </div>
 
     <!-- 可折叠的区域 展示当前保养项 已经绑定的物料-->
-    <div v-if="showFoldArea" style="margin-bottom: 10px;">
+    <div v-if="showFoldArea" style="margin-bottom: 2px;">
       <el-button
         type="text"
         @click="showMaterialArea = !showMaterialArea"
-        style="padding-left: 10px; margin-bottom: 10px;"
+        style="padding-left: 8px; margin-bottom: 2px; font-size: 13px;"
       >
         {{ showMaterialArea ? '隐藏保养项物料' : '显示保养项物料' }}
       </el-button>
 
       <div
         v-show="showMaterialArea"
-        style="background: #f5f7fa; padding: 12px 10px; border-radius: 4px;"
+        style="background: #f5f7fa; padding: 5px 8px; border-radius: 4px;"
       >
         <template v-if="deviceBomMaterials.length === 0">
-          <div style="text-align: center; padding: 10px; color: #999;">
+          <div style="text-align: center; padding: 8px; color: #999; font-size: 13px;">
             无绑定物料
           </div>
         </template>
@@ -48,11 +49,12 @@
             style="
             display: grid;
             grid-template-columns: 1fr 1fr 1fr 1fr;
-            gap: 15px;
-            margin-bottom: 10px;
+            gap: 12px;
+            margin-bottom: 8px;
             font-weight: bold;
             border-bottom: 1px solid #e4e7ed;
-            padding-bottom: 8px;
+            padding-bottom: 6px;
+            font-size: 13px;
           "
           >
             <div>物料编码</div>
@@ -67,9 +69,10 @@
             style="
             display: grid;
             grid-template-columns: 1fr 1fr 1fr 1fr;
-            gap: 10px;
-            padding: 8px 0;
+            gap: 8px;
+            padding: 6px 0;
             border-bottom: 1px dashed #ebeef5;
+            font-size: 13px;
           "
           >
             <div style="word-break: break-all;">{{ item.code || '-' }}</div>
@@ -81,47 +84,50 @@
       </div>
     </div>
 
-    <ContentWrap>
+    <ContentWrap style="padding: 0px 0;">
       <el-form
-        class="-mb-15px"
+        class="-mb-5px"
         :model="queryParams"
         ref="queryFormRef"
         :inline="true"
         label-width="68px"
+        style="font-size: 13px;"
       >
-        <el-form-item :label="t('workOrderMaterial.materialCode')" prop="materialCode">
+        <el-form-item :label="t('workOrderMaterial.materialCode')" prop="materialCode" style="margin-bottom: 2px;">
           <el-input
             v-model="queryParams.materialCode"
             :placeholder="t('workOrderMaterial.codeHolder')"
             clearable
             @keyup.enter="handleQuery"
+            size="small"
           />
         </el-form-item>
-        <el-form-item :label="t('workOrderMaterial.materialName')" prop="materialName">
+        <el-form-item :label="t('workOrderMaterial.materialName')" prop="materialName" style="margin-bottom: 2px;">
           <el-input
             v-model="queryParams.materialName"
             :placeholder="t('workOrderMaterial.nameHolder')"
             clearable
             @keyup.enter="handleQuery"
+            size="small"
           />
         </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />
+        <el-form-item style="margin-bottom: 2px;">
+          <el-button @click="handleQuery" size="small"><Icon icon="ep:search" class="mr-5px" />
             {{ t('workOrderMaterial.search') }}</el-button>
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />
+          <el-button @click="resetQuery" size="small"><Icon icon="ep:refresh" class="mr-5px" />
             {{ t('workOrderMaterial.reset') }}</el-button>
-          <el-button @click="handleConfirm" class="custom-green-button"
+          <el-button @click="handleConfirm" class="custom-green-button" size="small"
             ><Icon icon="ep:check" class="mr-5px" />
             {{ t('workOrderMaterial.confirm') }}</el-button
           >
-          <el-button @click="handleView" type="warning"
+          <el-button @click="handleView" type="warning" size="small"
             ><Icon icon="ep:plus" class="mr-5px" />
             {{ t('workOrderMaterial.added') }}</el-button
           >
         </el-form-item>
       </el-form>
     </ContentWrap>
-    <ContentWrap>
+    <ContentWrap style="padding: 0px 0px 0px 0px; margin-bottom: 0px">
       <el-table
         v-loading="loading"
         :data="list"
@@ -130,6 +136,7 @@
         class="adaptive-table"
         @row-click="handleRowClick"
         :row-class-name="rowClassName"
+        size="small"
       >
         <el-table-column width="60" :label="t('workOrderMaterial.select')">
           <template #default="{ row }">
@@ -207,6 +214,7 @@
               @click.stop=""
               @focus="handleInputFocus(scope.row)"
               @blur="(event) => handleQuantityBlur(event, scope.row)"
+              size="small"
             />
           </template>
         </el-table-column>
@@ -226,6 +234,7 @@
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
+        style="margin-bottom: 5px; padding: 0px 0px 5px 0px;"
       />
     </ContentWrap>
   </Dialog>
@@ -649,8 +658,9 @@ onUnmounted(() => {
 // 表格自适应样式
 :deep(.adaptive-table) {
   width: 100%;
-
+  font-size: 13px;
   .el-table__cell {
+    padding: 4px 0;
     .cell {
       white-space: nowrap; /* 禁止换行 */
       overflow: hidden;
@@ -664,7 +674,9 @@ onUnmounted(() => {
     text-overflow: ellipsis;
     max-width: 100%;
   }
-
+  .el-table__row {
+    height: 36px;
+  }
 }
 
 // 移除溢出提示（防止省略号）
@@ -672,4 +684,44 @@ onUnmounted(() => {
   overflow: visible !important;
 }
 
+// 调整表格表头样式
+:deep(.adaptive-table .el-table__header) {
+  th {
+    padding: 6px 0;
+    .cell {
+      font-weight: bold;
+      font-size: 13px;
+    }
+  }
+}
+
+// 调整分页组件样式
+:deep(.el-pagination) {
+  padding: 8px 0;
+
+  .btn-prev, .btn-next, .number {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
+// 调整输入框高度
+:deep(.el-input__inner) {
+  height: 28px;
+  line-height: 28px;
+}
+
+// 调整按钮样式
+:deep(.el-button) {
+  padding: 8px 12px;
+}
+
+// 调整表单标签样式
+:deep(.el-form-item__label) {
+  font-size: 13px;
+  height: 28px;
+  line-height: 28px;
+}
+
 </style>