1.设备工具明细和树-过期标红

gaoluyang

2025-05-06 90c8680cbc67d4b2680b1e5af4ad1129a96efa0c

1.设备工具明细和树-过期标红

 src/components/Table/lims-table.vue

@@ -505,4 +505,7 @@
.lims-table .highlight-danger-row-border td:last-child {
  border-right: 4px solid #f56c6c;
}
>>>.red-row td {
  background: #FFCCCC !important;
}
</style>

 src/views/CNAS/resourceDemand/device/component/management.vue

@@ -33,7 +33,7 @@
    </div>
        <div class="table" v-show="!showData">
            <lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 300px)'"
                :page="page" @pagination="pagination"></lims-table>
                :page="page" @pagination="pagination" :row-class-name="tableRowClassName"></lims-table>
        </div>
        <el-dialog :title="isUp ? '设备详情' : '档案修订'" :visible.sync="dialogVisible" width="70%" top="5vh"
            :before-close="handleClose">
@@ -606,6 +606,18 @@
            this.page.size = limit;
            this.getList();
        },
    tableRowClassName({ row }) {
      const today = new Date();
      const targetDate = new Date(row.activationDate);
      const fiveDaysBeforeTarget = new Date(targetDate);
      // 计算前五天的日期
      fiveDaysBeforeTarget.setDate(targetDate.getDate() - 5);
      // 比较时需要确保比较的是完整的日期时间，包含时分秒
      if (today > fiveDaysBeforeTarget) {
        return 'red-row';
      }
      return '';
    },
        refresh() {
            this.queryParams = {};
            this.page.current = 1;

 src/views/CNAS/resourceDemand/device/index.vue

@@ -12,7 +12,9 @@
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <el-row style="width: 100%;">
            <el-col :span="24">
              <p class="single-line-ellipsis" style="width: 100%">
              <p class="single-line-ellipsis" style="width: 100%" :style="{
              color: isLeafNode(data) && shouldHighlight(data) ? 'red' : ''
            }">
                <i :class="`node_i ${data.children != undefined
                  ? data.code === '[1]'
                    ? 'el-icon-folder-opened'
@@ -22,7 +24,9 @@
                  "></i>
                {{ data.label }}
              </p>
              <p>
              <p :style="{
              color: isLeafNode(data) && shouldHighlight(data) ? 'red' : ''
            }">
                {{ data.managementNumber === undefined ? '' : data.managementNumber }}
              </p>
            </el-col>
@@ -198,9 +202,25 @@
      treeDevice().then(res => {
        let data = res.data;
        this.list = data;
        console.log('this.list--', this.list)
        this.loading = false
      });
    },
    // 判断是否是叶子节点
    isLeafNode(data) {
      return !data.children || data.children.length === 0;
    },
    // 判断是否需要标红
    shouldHighlight(data) {
      if (!data.activationDate) return false;
      const today = new Date();
      const targetDate = new Date(data.activationDate);
      const fiveDaysBeforeTarget = new Date(targetDate);
      // 计算前五天的日期
      fiveDaysBeforeTarget.setDate(targetDate.getDate() - 5);

      return today > fiveDaysBeforeTarget;
    },
    handleNodeClick(val, node, el) {
      // 点击临时缓存
      this.clickNodeVal = val;