aa

src/views/pms/qhse/index.vue

@@ -14,22 +14,19 @@
               placeholder="请输入计量器具名称"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-180px"
-            />
+              class="!w-180px" />
           </el-form-item>
           <el-form-item label="是否过期" prop="expired">
             <el-select
               v-model="queryParams.expired"
               placeholder="请选择是否过期"
               clearable
-              style="width: 180px"
-            >
+              style="width: 180px">
               <el-option
                 v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
                 :key="dict.value"
                 :label="dict.label"
-                :value="dict.value"
-              />
+                :value="dict.value" />
             </el-select>
           </el-form-item>
 
@@ -58,7 +55,7 @@
           height="calc(78vh - 150px)"
           :show-overflow-tooltip="true"
           :row-style="tableRowStyle"
-        >
+          :row-class-name="tableRowClassName">
           <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
             <template #default="scope">
               {{ scope.$index + 1 }}
@@ -102,8 +99,7 @@
             align="center"
             fixed="right"
             action
-            min-width="120px"
-          >
+            min-width="120px">
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
@@ -115,8 +111,7 @@
           :total="total"
           v-model:page="queryParams.pageNo"
           v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-        />
+          @pagination="getList" />
       </ContentWrap>
       <ContentWrap style="margin-top: -5px">
         <el-alert title="台账已过期红色预警" type="error" show-icon :closable="false">
@@ -134,15 +129,13 @@
     v-model="dialogVisible"
     width="800px"
     destroy-on-close
-    @close="closeDialog"
-  >
+    @close="closeDialog">
     <el-form
       ref="formRef"
       :model="formData"
       :rules="formRules"
       label-width="120px"
-      v-loading="formLoading"
-    >
+      v-loading="formLoading">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="计量器具名称" prop="measureName">
@@ -167,8 +160,7 @@
               check-strictly
               node-key="id"
               filterable
-              placeholder="请选择所在部门"
-            />
+              placeholder="请选择所在部门" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -198,14 +190,12 @@
               v-model="formData.classify"
               placeholder="请选择分类"
               clearable
-              class="!w-240px"
-            >
+              class="!w-240px">
               <el-option
                 v-for="dict in getStrDictOptions(DICT_TYPE.MEASURE_TYPE)"
                 :key="dict.value"
                 :label="dict.label"
-                :value="dict.value"
-              />
+                :value="dict.value" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -216,8 +206,7 @@
               :precision="2"
               :step="1"
               placeholder="请输入价格"
-              style="width: 100%"
-            />
+              style="width: 100%" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -230,8 +219,7 @@
               type="date"
               value-format="x"
               placeholder="请选择采购日期"
-              style="width: 100%"
-            />
+              style="width: 100%" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -280,16 +268,16 @@
     title="检测信息"
     size="60%"
     direction="rtl"
-    :before-close="closeDrawer"
-  >
+    :before-close="closeDrawer">
     <div v-loading="drawerLoading">
       <zm-table
         :loading="loading"
         :data="measureDetectionData"
         :stripe="true"
+        :row-style="tableRowStyle"
+        :row-class-name="tableRowClassName"
         height="80vh"
-        :show-overflow-tooltip="true"
-      >
+        :show-overflow-tooltip="true">
         <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
           <template #default="scope">
             {{ scope.$index + 1 }}
@@ -300,8 +288,7 @@
           align="center"
           prop="measureName"
           min-width="160"
-          fixed="left"
-        />
+          fixed="left" />
         <zm-table-column label="证书编码" align="center" prop="measureCertNo" min-width="160" />
         <zm-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
           <template #default="scope">
@@ -313,8 +300,7 @@
           label="检测/校准标准"
           align="center"
           prop="detectStandard"
-          min-width="160"
-        />
+          min-width="160" />
         <zm-table-column label="检测/校准内容" align="center" prop="detectContent" min-width="220">
           <template #default="scope">
             <div class="detect-content" v-html="scope.row.detectContent"></div>
@@ -333,8 +319,7 @@
           prop="file"
           min-width="90"
           fixed="right"
-          action
-        >
+          action>
           <template #default="scope">
             <el-button v-if="scope.row.file" link type="primary" @click="viewFile(scope.row.file)">
               查看
@@ -349,8 +334,7 @@
           :total="totalMsg"
           v-model:page="queryParams2.pageNo"
           v-model:limit="queryParams2.pageSize"
-          @pagination="getList2"
-        />
+          @pagination="getList2" />
       </div>
     </div>
   </el-drawer>
@@ -359,8 +343,7 @@
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5"
-    >
+      class="flex items-center justify-between mt-5">
       <span class="file-name-text">{{ extractFileName(file) }}</span>
       <div>
         <el-button link type="primary" @click="viewFileInfo(file)">
@@ -423,6 +406,13 @@ const tableRowStyle = ({ row }) => {
   return {}
 }
 
+const tableRowClassName = ({ row }) => {
+  if (row.expired) {
+    return 'expired-row'
+  }
+  return ''
+}
+
 // 对话框相关
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
@@ -775,10 +765,39 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-::deep(.el-tree--highlight-current) {
+:deep(.el-tree--highlight-current) {
   height: 200px !important;
 }
-::deep(.el-transfer-panel__body) {
+:deep(.el-transfer-panel__body) {
   height: 700px !important;
 }
+
+/* 过期行的红色背景 - 基础状态 */
+:deep(.el-table__body tr.expired-row > td.el-table__cell) {
+  background-color: #ffe6e6 !important;
+}
+
+/* 过期行 - 鼠标悬浮状态 */
+:deep(.el-table__body tr.expired-row:hover > td.el-table__cell) {
+  background-color: #ffcccc !important;
+}
+
+/* 过期行 - 选中状态 */
+:deep(.el-table__body tr.expired-row.current-row > td.el-table__cell) {
+  background-color: #ffb3b3 !important;
+}
+
+/* 过期行 - 悬浮且选中状态 */
+:deep(.el-table__body tr.expired-row.current-row:hover > td.el-table__cell) {
+  background-color: #ff9999 !important;
+}
+
+/* 确保斑马纹不影响过期行 */
+:deep(.el-table__body tr.expired-row.el-table__row--striped > td.el-table__cell) {
+  background-color: #ffe6e6 !important;
+}
+
+:deep(.el-table__body tr.expired-row.el-table__row--striped:hover > td.el-table__cell) {
+  background-color: #ffcccc !important;
+}
 </style>