yyb
21 小时以前 04d6024553ac73e67148ce578cb01b541eebd02a
src/views/equipmentManagement/measurementEquipment/index.vue
@@ -1,6 +1,6 @@
<template>
   <div class="app-container">
      <div class="search_form">
      <div class="search_form mb20">
         <div>
            <span class="search_title">录入日期:</span>
            <el-date-picker
@@ -23,6 +23,7 @@
            <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
            >搜索</el-button
            >
            <el-button @click="handleReset" style="margin-left: 10px">重置</el-button>
         </div>
         <div>
            <el-button type="primary" @click="openForm('add')">新增计量器具</el-button>
@@ -41,6 +42,7 @@
            :tableLoading="tableLoading"
            @pagination="pagination"
        :dbRowClick="dbRowClick"
        :rowClassName="rowClassName"
         ></PIMTable>
      </div>
      <form-dia ref="formDia" @close="handleQuery"></form-dia>
@@ -51,7 +53,7 @@
</template>
<script setup>
import {onMounted, ref} from "vue";
import {onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import FormDia from "@/views/equipmentManagement/measurementEquipment/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user.js";
@@ -81,18 +83,12 @@
    minWidth:150,
    align:"center"
   },
   {
      label: "部门",
      prop: "deptName",
      width: 130,
    align:"center"
   },
   {
      label: "安装位置",
      prop: "installationLocation",
      width: 150,
    align:"center"
   },
  {
    label: "计量器具名称",
    prop: "name",
    width: '160px',
    align: "center",
  },
   {
      label: "检定单位",
      prop: "unit",
@@ -129,12 +125,6 @@
      width: 130,
    align:"center"
   },
  {
    label: "检定周期(天)",
    prop: "cycle",
    width: 130,
    align:"center"
  },
  {
    label: "状态",
    prop: "status",
@@ -194,6 +184,31 @@
  rowClickData.value?.openDialog(row)
}
// 行样式:快到期(7天内)或逾期标红
const rowClassName = ({ row }) => {
  console.log('rowClassName called:', row);
  // valid 是有效天数,mostDate 是最新检定日期
  if (row.valid && row.mostDate) {
    const mostDate = new Date(row.mostDate);
    // 计算到期日期 = 检定日期 + 有效天数
    const validDays = parseInt(row.valid) || 0;
    const expireDate = new Date(mostDate);
    expireDate.setDate(expireDate.getDate() + validDays);
    const now = new Date();
    const diffDays = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24));
    console.log('row:', row.code, 'validDays:', validDays, 'expireDate:', expireDate, 'diffDays:', diffDays);
    // 7天内到期或已逾期都标红
    if (diffDays <= 7) {
      console.log('return warning-row');
      return 'warning-row';
    }
  } else {
    console.log('row missing valid or mostDate:', row.valid, row.mostDate);
  }
  return '';
}
// 表格选择数据
const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
@@ -204,6 +219,15 @@
// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
   page.current = 1;
   getList();
};
// 重置搜索条件
const handleReset = () => {
   searchForm.value.recordDate = "";
   searchForm.value.code = "";
   searchForm.value.status = "";
   page.current = 1;
   getList();
};
@@ -284,5 +308,13 @@
</script>
<style scoped>
:deep(.el-table .warning-row) {
  background-color: #fef0f0 !important;
}
:deep(.el-table .warning-row:hover > td) {
  background-color: #f9d5d5 !important;
}
:deep(.el-table .el-table__body tr.warning-row td) {
  background-color: #fef0f0 !important;
}
</style>