根据合同到期时间前45天标记数据颜色 优化通用表格设置单元格宽度问题

张诺

8 小时以前 e7aa4062dad19b45261287bdd26f22e425cb1466

根据合同到期时间前45天标记数据颜色
优化通用表格设置单元格宽度问题

 src/components/PIMTable/PIMTable.vue

@@ -45,6 +45,7 @@
      :sortable="!!item.sortable"
      :type="item.type"
      :width="item.width"
      :minWidth="item.minWidth"
    >
      <template #header="scope">
        <div class="pim-table-header-cell">

 src/views/personnelManagement/employeeRecord/index.vue

@@ -35,6 +35,7 @@
          :tableLoading="tableLoading"
          @pagination="pagination"
          :total="page.total"
          :rowClassName="rowClassName"
      ></PIMTable>
    </div>
    <show-form-dia ref="formDia" @close="handleQuery"></show-form-dia>
@@ -143,6 +144,11 @@
    minWidth: 180,
  },
  {
    label:"合同到期时间",
    prop: "contractExpireTime",
    minWidth: 120,
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
@@ -196,6 +202,33 @@
  }
  getList();
};

const rowClassName = ({ row }) => {
  const dateStr = row.contractExpireTime;

  if (!dateStr) return '';

  const now = new Date();
  const target = new Date(dateStr.replace(/-/g, '/')); // 兼容 Safari

  // 归零时间（关键！）
  now.setHours(0, 0, 0, 0);
  target.setHours(0, 0, 0, 0);

  const days = Math.ceil((target - now) / (1000 * 60 * 60 * 24));

  console.log('剩余天数:', days);

  //  超过45天：正常
  if (days > 45) return '';

  //  0~45天：预警（你可以换颜色）
  if (days >= 0) return 'bg-warning';

  //  已过期
  return 'bg-danger';
};

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
@@ -280,4 +313,12 @@
});
</script>

<style scoped></style>
<style scoped>
:deep(.el-table .bg-warning > td.el-table__cell) {
  background-color: #fdf2e3;
}

:deep(.el-table .bg-danger > td.el-table__cell) {
  background-color: #ffe5e5;
}
</style>