gaoluyang
2 天以前 44177e4d6906a1469efdfd64d652bf05bce5b065
src/views/personnelManagement/employeeRecord/index.vue
@@ -21,7 +21,7 @@
      <div>
        <el-button type="primary" @click="openFormNewOrEditFormDia('add')">新增入职</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
        <!-- <el-button type="danger" plain @click="handleDelete">删除</el-button> -->
      </div>
    </div>
    <div class="table_list">
@@ -35,10 +35,17 @@
          :tableLoading="tableLoading"
          @pagination="pagination"
          :total="page.total"
          :rowClassName="rowClassName"
      ></PIMTable>
    </div>
    <show-form-dia ref="formDia" @close="handleQuery"></show-form-dia>
    <new-or-edit-form-dia ref="formDiaNewOrEditFormDia" @close="handleQuery"></new-or-edit-form-dia>
    <renew-contract
        v-if="isShowRenewContractModal"
        v-model:visible="isShowRenewContractModal"
        :id="id"
        @completed="handleQuery"
    />
  </div>
</template>
@@ -48,9 +55,9 @@
import {ElMessageBox} from "element-plus";
import {batchDeleteStaffOnJobs, staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js";
import dayjs from "dayjs";
const NewOrEditFormDia = defineAsyncComponent(() => import("@/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue"));
const ShowFormDia = defineAsyncComponent(() => import( "@/views/personnelManagement/employeeRecord/components/Show.vue"));
const RenewContract = defineAsyncComponent(() => import( "@/views/personnelManagement/employeeRecord/components/RenewContract.vue"));
const data = reactive({
  searchForm: {
@@ -61,6 +68,8 @@
  },
});
const { searchForm } = toRefs(data);
const isShowRenewContractModal = ref(false);
const id = ref(0);
const tableColumn = ref([
  {
    label: "状态",
@@ -94,67 +103,50 @@
    prop: "staffName",
  },
  {
    label: "别名",
    prop: "alias",
  },
  {
    label: "手机",
    prop: "phone",
    width: 150,
  },
  {
    label: "性别",
    prop: "sex",
  },
  {
    label: "户籍住址",
    prop: "nativePlace",
  },
  {
    label: "部门",
    prop: "deptName",
  },
  {
    label: "岗位",
    prop: "postJob",
  },
  {
    label: "现住址",
    prop: "adress",
    width:200
  },
  {
    label: "第一学历",
    prop: "firstStudy",
  },
  {
    label: "专业",
    prop: "profession",
    width:100
    label: "出生日期",
    prop: "birthDate",
    width: 120,
  },
  {
    label: "年龄",
    prop: "age",
  },
  {
    label: "联系电话",
    prop: "phone",
    width:150
    label: "籍贯",
    prop: "nativePlace",
  },
  {
    label: "紧急联系人",
    prop: "emergencyContact",
    width: 120
    label: "民族",
    prop: "nation",
    width: 100,
  },
  {
    label: "紧急联系人电话",
    prop: "emergencyContactPhone",
    width:150
    label: "婚姻状况",
    prop: "maritalStatus",
    width: 100,
  },
  // {
  //   label: "合同年限",
  //   prop: "contractTerm",
  // },
  // {
  //   label: "合同开始日期",
  //   prop: "contractStartTime",
  //   width: 120
  // },
  {
    label: "合同结束日期",
    label: "员工通讯地址",
    prop: "contactAddress",
    minWidth: 180,
  },
  {
    label:"合同到期时间",
    prop: "contractExpireTime",
    width: 120
    minWidth: 120,
  },
  {
    dataType: "action",
@@ -168,6 +160,15 @@
        type: "text",
        clickFun: (row) => {
          openFormNewOrEditFormDia("edit", row);
        },
      },
      {
        name: "续签合同",
        type: "text",
        showHide: row => row.staffState === 1,
        clickFun: (row) => {
          isShowRenewContractModal.value = true;
          id.value = row.id;
        },
      },
      // {
@@ -201,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 = () => {
@@ -285,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>