天津-阳光彩印 1.员工合同编辑页面自动带出员工关联基础信息 2.合同到期提前45 天系统弹窗提醒，到期预警天数固定 45 天

gaoluyang

4 天以前 350b540485669e9f5e5a91c1be8bb4a37ef98841

天津-阳光彩印
1.员工合同编辑页面自动带出员工关联基础信息
2.合同到期提前45 天系统弹窗提醒，到期预警天数固定 45 天

 src/views/personnelManagement/contractManagement/components/formDia.vue

@@ -6,12 +6,24 @@
        width="70%"
        @close="closeDia"
    >
      <el-descriptions title="基本信息" :column="3" border style="margin-bottom: 16px;">
        <el-descriptions-item label="姓名">{{ currentRow.staffName }}</el-descriptions-item>
        <el-descriptions-item label="员工编号">{{ currentRow.staffNo }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentRow.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ currentRow.age }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentRow.phone }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ formatStaffState(currentRow.staffState) }}</el-descriptions-item>
        <el-descriptions-item label="户籍住址" :span="2">{{ currentRow.nativePlace }}</el-descriptions-item>
        <el-descriptions-item label="紧急联系人">{{ currentRow.emergencyContact }}</el-descriptions-item>
        <el-descriptions-item label="紧急联系人电话">{{ currentRow.emergencyContactPhone }}</el-descriptions-item>
        <el-descriptions-item label="合同结束日期">{{ currentRow.contractExpireTime }}</el-descriptions-item>
      </el-descriptions>
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="600"
          height="360"
      ></PIMTable>
      <template #footer>
        <div class="dialog-footer">
@@ -32,6 +44,7 @@
const filesDia = ref()
const dialogFormVisible = ref(false);
const operationType = ref('')
const currentRow = ref({})
const tableColumn = ref([
  {
    label: "合同年限",
@@ -65,9 +78,17 @@
const tableData = ref([]);
const tableLoading = ref(false);

// 状态格式化
const formatStaffState = (state) => {
  if (state == 0) return "离职";
  if (state == 1) return "在职";
  return "-";
};

// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  currentRow.value = row || {};
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    findStaffContractListPage({staffOnJobId: row.id}).then(res => {

 src/views/personnelManagement/contractManagement/index.vue

@@ -66,6 +66,34 @@
      </template>
    </el-dialog>
    <files-dia ref="filesDia"></files-dia>

    <!-- 合同到期提醒弹窗 -->
    <el-dialog
      v-model="expireWarningVisible"
      title="合同到期提醒"
      width="720px"
      @close="expireWarningVisible = false"
    >
      <div style="margin-bottom: 12px; color: #e6a23c; font-size: 14px;">
        以下员工合同将在 {{ EXPIRE_WARNING_DAYS }} 天内到期，请及时处理：
      </div>
      <el-table :data="expireWarningList" border max-height="400">
        <el-table-column label="姓名" prop="staffName" align="center" />
        <el-table-column label="员工编号" prop="staffNo" align="center" />
        <el-table-column label="联系电话" prop="phone" align="center" />
        <el-table-column label="合同结束日期" prop="contractExpireTime" align="center" width="140" />
        <el-table-column label="剩余天数" align="center" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.expireDays < 0 ? 'danger' : 'warning'">
              {{ formatExpireDays(scope.row.expireDays) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button type="primary" @click="expireWarningVisible = false">知道了</el-button>
      </template>
    </el-dialog>
  </div>
</template>

@@ -207,6 +235,12 @@
const formDia = ref()
const { proxy } = getCurrentInstance()

// 合同到期预警天数（固定 45 天）
const EXPIRE_WARNING_DAYS = 45
// 合同到期提醒弹窗
const expireWarningVisible = ref(false)
const expireWarningList = ref([])

const changeDaterange = (value) => {
  searchForm.value.entryDateStart = undefined;
  searchForm.value.entryDateEnd = undefined;
@@ -239,13 +273,41 @@
  const params = { ...searchForm.value, ...page };
  params.entryDate = undefined
  params.staffState = 1
  staffOnJobListPage(params).then(res => {
  return staffOnJobListPage(params).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
};

// 检查合同到期提醒（45 天内到期）
const checkContractExpireWarning = () => {
  const today = dayjs().startOf('day');
  const list = (tableData.value || [])
    .filter(item => {
      if (!item.contractExpireTime) return false;
      const expireDay = dayjs(item.contractExpireTime);
      if (!expireDay.isValid()) return false;
      const diffDays = expireDay.diff(today, 'day');
      return diffDays <= EXPIRE_WARNING_DAYS;
    })
    .map(item => ({
      ...item,
      expireDays: dayjs(item.contractExpireTime).diff(today, 'day'),
    }));
  if (list.length > 0) {
    expireWarningList.value = list;
    expireWarningVisible.value = true;
  }
};

// 剩余天数格式化
const formatExpireDays = (days) => {
  if (days < 0) return `已过期 ${Math.abs(days)} 天`;
  if (days === 0) return "今天到期";
  return `剩余 ${days} 天`;
};
// 表格选择数据
const handleSelectionChange = (selection) => {
@@ -308,7 +370,7 @@
  getList();
};
onMounted(() => {
  getList();
  getList().then(() => checkContractExpireWarning());
});
</script>


 src/views/personnelManagement/employeeRecord/components/Show.vue

@@ -2,20 +2,131 @@
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="详情"
        width="70%"
        title="员工详情"
        width="80%"
        top="5vh"
        @close="closeDia"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="600"
      ></PIMTable>
      <div v-loading="loading" class="detail-body">
        <!-- 基本信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              基本信息
            </span>
          </template>
          <el-descriptions :column="4" border>
            <el-descriptions-item label="员工编号">{{ detail.staffNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ detail.staffName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="别名">{{ detail.alias || '-' }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ detail.sex || '-' }}</el-descriptions-item>
            <el-descriptions-item label="手机">{{ detail.phone || '-' }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ detail.birthDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ detail.age ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="籍贯">{{ detail.nativePlace || '-' }}</el-descriptions-item>
            <el-descriptions-item label="民族">{{ detail.nation || '-' }}</el-descriptions-item>
            <el-descriptions-item label="婚姻状况">{{ detail.maritalStatus || '-' }}</el-descriptions-item>
            <el-descriptions-item label="政治面貌">{{ detail.politicalStatus || '-' }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ detail.idCardNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="户口类型">{{ detail.hukouType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ detail.email || '-' }}</el-descriptions-item>
            <el-descriptions-item label="现住址" :span="2">{{ detail.currentAddress || '-' }}</el-descriptions-item>
            <el-descriptions-item label="通讯地址" :span="2">{{ detail.contactAddress || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 在职信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              在职信息
            </span>
          </template>
          <el-descriptions :column="4" border>
            <el-descriptions-item label="入职日期">{{ detail.contractStartTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合同结束日期">{{ detail.contractEndTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="试用期（月）">{{ detail.proTerm ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="转正日期">{{ detail.positiveDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ detail.deptName || detail.sysDeptId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ detail.postName || detail.sysPostId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="基本工资">{{ detail.basicSalary ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="员工状态">{{ formatStaffState(detail.staffState) }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 银行卡信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              银行卡信息
            </span>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="开户行">{{ detail.bankName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行卡号">{{ detail.bankCardNo || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 教育经历 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              教育经历
            </span>
          </template>
          <el-table :data="detail.staffEducationList || []" border>
            <el-table-column label="学历" align="center">
              <template #default="{ row }">{{ formatEducation(row.education) }}</template>
            </el-table-column>
            <el-table-column label="毕业院校" prop="schoolName" align="center" />
            <el-table-column label="入学时间" prop="enrollTime" align="center" />
            <el-table-column label="毕业时间" prop="graduateTime" align="center" />
            <el-table-column label="专业" prop="major" align="center" />
            <el-table-column label="学位" prop="degree" align="center" />
          </el-table>
        </el-card>

        <!-- 工作经历 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              工作经历
            </span>
          </template>
          <el-table :data="detail.staffWorkExperienceList || []" border>
            <el-table-column label="前公司" prop="formerCompany" align="center" />
            <el-table-column label="前公司部门" prop="formerDept" align="center" />
            <el-table-column label="前公司职位" prop="formerPosition" align="center" />
            <el-table-column label="开始日期" prop="startDate" align="center" />
            <el-table-column label="结束日期" prop="endDate" align="center" />
            <el-table-column label="工作描述" prop="workDesc" align="center" />
          </el-table>
        </el-card>

        <!-- 紧急联系人 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              紧急联系人
            </span>
          </template>
          <el-table :data="detail.staffEmergencyContactList || []" border>
            <el-table-column label="姓名" prop="contactName" align="center" />
            <el-table-column label="关系" prop="contactRelation" align="center" />
            <el-table-column label="手机" prop="contactPhone" align="center" />
            <el-table-column label="住址" prop="contactAddress" align="center" />
          </el-table>
        </el-card>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
          <el-button @click="closeDia">关闭</el-button>
        </div>
      </template>
    </el-dialog>
@@ -23,51 +134,75 @@
</template>

<script setup>
import {ref} from "vue";
import {staffOnJobInfo} from "@/api/personnelManagement/staffOnJob.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
import { ref } from "vue";
import { staffOnJobInfo } from "@/api/personnelManagement/staffOnJob.js";

const emit = defineEmits(["close"]);

const dialogFormVisible = ref(false);
const operationType = ref('')
const tableColumn = ref([
  // {
  //   label: "合同年限",
  //   prop: "contractTerm",
  // },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
  },
  {
    label: "合同结束日期",
    prop: "contractEndTime",
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const loading = ref(false);
const detail = ref({});

const educationMap = {
  secondary: "中专及以下",
  junior_college: "大专",
  bachelor: "本科",
  master: "硕士",
  doctor: "博士及以上",
};

const formatEducation = (v) => educationMap[v] || v || "-";

const formatStaffState = (v) => {
  if (v == 0) return "离职";
  if (v == 1) return "在职";
  return "-";
};

// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  detail.value = {};
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    staffOnJobInfo({staffNo: row.staffNo}).then(res => {
      tableData.value = res.data
    })
  if (row?.id) {
    loading.value = true;
    staffOnJobInfo(row.id, {})
      .then((res) => {
        detail.value = res.data || {};
      })
      .finally(() => {
        loading.value = false;
      });
  }
}
};

// 关闭弹框
const closeDia = () => {
  dialogFormVisible.value = false;
  emit('close')
  emit("close");
};

defineExpose({
  openDialog,
});
</script>

<style scoped>
.detail-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px;
}

</style>
.detail-card {
  margin-bottom: 16px;
}

.card-title {
  font-weight: 600;
}

.card-title-line {
  color: #f56c6c;
  margin-right: 4px;
}
</style>

 src/views/personnelManagement/employeeRecord/index.vue

@@ -153,8 +153,15 @@
    label: "操作",
    align: "center",
    fixed: 'right',
    width: 180,
    width: 200,
    operation: [
      {
        name: "详情",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
        },
      },
      {
        name: "编辑",
        type: "text",
@@ -171,13 +178,6 @@
          id.value = row.id;
        },
      },
      // {
      //   name: "详情",
      //   type: "text",
      //   clickFun: (row) => {
      //     openForm("edit", row);
      //   },
      // },
    ],
  },
]);