pms 保养工单 选择物料 界面优化

src/views/pms/iotmainworkorder/WorkOrderMaterial.vue

@@ -20,18 +20,18 @@
     </div>
 
     <!-- 可折叠的区域 展示当前保养项 已经绑定的物料-->
-    <div style="margin-bottom: 15px;">
+    <div v-if="showFoldArea" style="margin-bottom: 10px;">
       <el-button
         type="text"
         @click="showMaterialArea = !showMaterialArea"
-        style="padding-left: 20px; margin-bottom: 10px;"
+        style="padding-left: 10px; margin-bottom: 10px;"
       >
         {{ showMaterialArea ? '隐藏保养项物料' : '显示保养项物料' }}
       </el-button>
 
       <div
         v-show="showMaterialArea"
-        style="background: #f5f7fa; padding: 12px 20px; border-radius: 4px;"
+        style="background: #f5f7fa; padding: 12px 10px; border-radius: 4px;"
       >
         <template v-if="deviceBomMaterials.length === 0">
           <div style="text-align: center; padding: 10px; color: #999;">
@@ -43,9 +43,9 @@
           <div
             style="
             display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
             gap: 15px;
-            margin-bottom: 12px;
+            margin-bottom: 10px;
             font-weight: bold;
             border-bottom: 1px solid #e4e7ed;
             padding-bottom: 8px;
@@ -54,16 +54,16 @@
             <div>物料编码</div>
             <div>物料名称</div>
             <div>数量</div>
+            <div>单位</div>
           </div>
-
           <!-- 内容区 -->
           <div
             v-for="(item, index) in deviceBomMaterials"
             :key="index"
             style="
             display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: 15px;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            gap: 10px;
             padding: 8px 0;
             border-bottom: 1px dashed #ebeef5;
           "
@@ -71,6 +71,7 @@
             <div style="word-break: break-all;">{{ item.code || '-' }}</div>
             <div style="word-break: break-all;">{{ item.name || '-' }}</div>
             <div>{{ item.quantity !== undefined ? item.quantity : '-' }}</div>
+            <div style="word-break: break-all;">{{ item.unit || '-' }}</div>
           </div>
         </template>
       </div>
@@ -261,6 +262,9 @@ const deviceCode = ref('')    // 设备编码
 const bomNodeName = ref('')   // 保养项 or 维修项 名称
 const bomNodeLabel = ref('')   // 保养项 or 维修项 名称
 
+// 控制折叠区域的响应式变量
+const showFoldArea = ref(false)
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -324,6 +328,9 @@ const open = async (deptId: number, bomNodeId: number, row: any, type: string) =
   console.log('传递过来的数据：', row.deviceId)
   Object.assign(queryParams, defaultQueryParams)
 
+  // 根据type设置折叠区域显隐
+  showFoldArea.value = type === 'maintenance'
+
   selectedRows.value = []
   dialogVisible.value = true
   queryParams.deptId = deptId