feat(user): 添加员工档案详情弹窗视图及信息展示功能

yubo

2026-04-06 e250159a9e6441c0474d5599d4197f4f9d847839

feat(user): 添加员工档案详情弹窗视图及信息展示功能

- 新增完整员工档案详情弹窗，包含头像上传及多标签导航
- 实现基本信息编辑区，支持众多员工属性及字段输入与选择
- 集成工作经历、体检信息、合同信息等多项数据表格展示
- 添加调岗记录、请假记录、辞职申请等多种工作动态信息查看
- 实现离职考勤、入离职记录、失业金领取和社保申请等业务模块展示
- 新增意外险案件与工伤案件信息表格，支持数据分页与格式化操作
- 支持导出档案为 PDF，便于资料保存与分享
- 各类表格均实现分页组件和选中事件，提高数据操作便捷性
- 采用 Element UI 组件库构建界面，保障交互体验与响应式布局

 src/views/user/Informationinput.vue

@@ -2648,9 +2648,11 @@
import Pagination from '@/components/Pagination'
import { pages } from '@/settings'
import { getToken } from '@/utils/auth'
import dictMixin from '../../utils/dictMixin'

export default {
  components: { Treeselect, Pagination },
  mixins: [dictMixin],
  data() {
    return {
      downloadEmpExcel: pages.downloadEmpExcel,
@@ -3533,7 +3535,7 @@
  computed: {
    // 字典选项计算属性
    statusOptions() { return this.getDictOptions('PLITICAL') },
    empTypeOptions() { return this.getDictOptions('empType') },
    empTypeOptions() { return this.getDictOptions('EMPTYPE') },
    nationOptions() { return this.getDictOptions('NATION') },
    marriageOptions() { return this.getDictOptions('MARRIAGE') },
    educationOptions() { return this.getDictOptions('EDUCATION') },
@@ -3560,7 +3562,7 @@
  mounted() {
    this.permissions = JSON.parse(localStorage.getItem('PERMISSIONS'))
    // 字典数据已在登录时预加载，直接从 Vuex 获取
    this.initDictTypes(['PLITICAL', 'sex', 'empType', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initDictTypes(['PLITICAL', 'sex', 'EMPTYPE', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initDept()
    this.thisShowIndex = 1
    this.isShow(false, 0)

 src/views/user/archivesChange.vue

@@ -3566,7 +3566,7 @@
  computed: {
    // 字典选项计算属性
    statusOptions() { return this.getDictOptions('PLITICAL') },
    empTypeOptions() { return this.getDictOptions('empType') },
    empTypeOptions() { return this.getDictOptions('EMPTYPE') },
    nationOptions() { return this.getDictOptions('NATION') },
    marriageOptions() { return this.getDictOptions('MARRIAGE') },
    educationOptions() { return this.getDictOptions('EDUCATION') },
@@ -3602,7 +3602,7 @@
  mounted() {
    this.initDept()
    // 字典数据已在登录时预加载，直接从 Vuex 获取
    this.initDictTypes(['PLITICAL', 'sex', 'empType', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initDictTypes(['PLITICAL', 'sex', 'EMPTYPE', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
  },
  methods: {
    typeFormat(row, column) {
@@ -4032,45 +4032,8 @@
      this.physicalExamForm = { ...val }
      this.workExperienceForm = { ...val }
      this.badRecordForm = { ...val }
      // 分批加载数据,避免并发请求过多导致 503 错误
      this.loadDataInBatches()
    },
    // 分批加载档案数据,控制并发请求数量
    async loadDataInBatches() {
      // 第1批:首屏可见数据(4个请求)
      await Promise.all([
        this.initlabel(),
        this.initphysicalExamData(),
        this.initList(),
        this.initjobChangeData()
      ])

      // 延迟 200ms 后加载第2批
      await new Promise(resolve => setTimeout(resolve, 200))
      await Promise.all([
        this.initdimissionLogData(),
        this.initcontractInfoData(),
        this.initleaveInfoData(),
        this.initresignData()
      ])

      // 延迟 200ms 后加载第3批
      await new Promise(resolve => setTimeout(resolve, 200))
      await Promise.all([
        this.initunemploymentData(),
        this.initinsuranceData(),
        this.initremarkInfoData(),
        this.initlaborTroubleData()
      ])

      // 延迟 200ms 后加载第4批
      await new Promise(resolve => setTimeout(resolve, 200))
      await Promise.all([
        this.initoccupationalData(),
        this.initbadRecordData(),
        this.initaccidentCasesData(),
        this.initdimissionAttendData()
      ])
      // 只加载附件数据(基本信息已在val中),其他模块懒加载
      this.initlabel()
    },
    initphysicalExamData(params = {}) {
      params.pageSize = this.pagination.size
@@ -5684,57 +5647,120 @@
    goAnchor: function(type) {
      let item = 1
      this.item = type
      // 根据点击的菜单懒加载对应数据
      switch (type) {
        case 'jbxx':
          item = 0
          // 基本信息 - 已加载
          break
        case 'gzjl':
          item = 1
          // 工作经历 - 懒加载
          if (!this.workExperienceData || this.workExperienceData.length === 0) {
            this.initList()
          }
          break
        case 'tjxx':
          item = 2
          // 体检信息 - 懒加载
          if (!this.physicalExamData || this.physicalExamData.length === 0) {
            this.initphysicalExamData()
          }
          break
        case 'htxx':
          item = 3
          // 合同信息 - 懒加载
          if (!this.contractInfoData || this.contractInfoData.length === 0) {
            this.initcontractInfoData()
          }
          break
        case 'tgjl':
          item = 4
          // 调岗记录 - 懒加载
          if (!this.jobChangeData || this.jobChangeData.length === 0) {
            this.initjobChangeData()
          }
          break
        case 'qjjl':
          item = 5
          // 请假记录 - 懒加载
          if (!this.leaveInfoData || this.leaveInfoData.length === 0) {
            this.initleaveInfoData()
          }
          break
        case 'czsq':
          item = 6
          // 辞职申请 - 懒加载
          if (!this.resignData || this.resignData.length === 0) {
            this.initresignData()
          }
          break
        case 'lzdykq':
          item = 7
          // 离职当月考勤 - 懒加载
          if (!this.dimissionAttendData || this.dimissionAttendData.length === 0) {
            this.initdimissionAttendData()
          }
          break
        case 'rlzjl':
          item = 8
          // 入离职记录 - 懒加载
          if (!this.dimissionLogData || this.dimissionLogData.length === 0) {
            this.initdimissionLogData()
          }
          break
        case 'syjlq':
          item = 9
          // 失业金领取 - 懒加载
          if (!this.unemploymentData || this.unemploymentData.length === 0) {
            this.initunemploymentData()
          }
          break
        case 'sbsq':
          item = 10
          // 社保申请 - 懒加载
          if (!this.insuranceData || this.insuranceData.length === 0) {
            this.initinsuranceData()
          }
          break
        case 'ywxaj':
          item = 11
          // 意外险案件 - 懒加载
          if (!this.accidentCasesData || this.accidentCasesData.length === 0) {
            this.initaccidentCasesData()
          }
          break
        case 'gsaj':
          item = 12
          // 工伤案件 - 懒加载
          if (!this.occupationalData || this.occupationalData.length === 0) {
            this.initoccupationalData()
          }
          break
        case 'lzaj':
          item = 13
          // 仲裁案件 - 懒加载
          if (!this.laborTroubleData || this.laborTroubleData.length === 0) {
            this.initlaborTroubleData()
          }
          break
        case 'bljl':
          item = 14
          // 不良记录 - 懒加载
          if (!this.badRecordData || this.badRecordData.length === 0) {
            this.initbadRecordData()
          }
          break
        case 'bz':
          item = 15
          // 备注 - 懒加载
          if (!this.remarkInfoData || this.remarkInfoData.length === 0) {
            this.initremarkInfoData()
          }
          break
        case 'jljt':
          item = 16
          // 记录截图及相关附件 - 已在initlabel中加载
          break
      }
      this.$nextTick(() => {

 src/views/user/archivesEdit.vue

@@ -3868,7 +3868,7 @@
    },
    // 字典选项计算属性
    statusOptions() { return this.getDictOptions('PLITICAL') },
    empTypeOptions() { return this.getDictOptions('empType') },
    empTypeOptions() { return this.getDictOptions('EMPTYPE') },
    nationOptions() { return this.getDictOptions('NATION') },
    marriageOptions() { return this.getDictOptions('MARRIAGE') },
    educationOptions() { return this.getDictOptions('EDUCATION') },
@@ -3895,7 +3895,7 @@
  mounted() {
    this.initDept()
    // 字典数据已在登录时预加载，直接从 Vuex 获取
    this.initDictTypes(['PLITICAL', 'sex', 'empType', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initDictTypes(['PLITICAL', 'sex', 'EMPTYPE', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
  },
  methods: {
    clickImg(node) {
@@ -4472,22 +4472,8 @@
      this.accidentCasesForm.sex = val.sex
      this.$set(this.accidentCasesForm, 'delFlag', 0)

      // 只加载附件数据(基本信息已在val中),其他模块懒加载
      this.initlabel()
      this.initphysicalExamData()
      this.initList() // 工作经历
      this.initjobChangeData() // 调岗记录
      this.initdimissionLogData() // 入离职记录
      this.initcontractInfoData() // 合同信息
      this.initleaveInfoData() // 请假记录
      this.initresignData() // 辞职申请
      this.initunemploymentData() // 失业金领取
      this.initinsuranceData() // 社保申请
      this.initremarkInfoData() // 备注
      this.initlaborTroubleData() // 仲裁案件
      this.initoccupationalData() // 工伤案件
      this.initbadRecordData() // 不良记录
      this.initaccidentCasesData() // 意外险案件
      this.initdimissionAttendData() // 考勤情况
    },
    initphysicalExamData(params = {}) {
      params.pageSize = this.pagination.size
@@ -6104,57 +6090,120 @@
    goAnchor: function(type) {
      let item = 1
      this.item = type
      // 根据点击的菜单懒加载对应数据
      switch (type) {
        case 'jbxx':
          item = 0
          // 基本信息 - 已加载
          break
        case 'gzjl':
          item = 1
          // 工作经历 - 懒加载
          if (!this.workExperienceData || this.workExperienceData.length === 0) {
            this.initList()
          }
          break
        case 'tjxx':
          item = 2
          // 体检信息 - 懒加载
          if (!this.physicalExamData || this.physicalExamData.length === 0) {
            this.initphysicalExamData()
          }
          break
        case 'htxx':
          item = 3
          // 合同信息 - 懒加载
          if (!this.contractInfoData || this.contractInfoData.length === 0) {
            this.initcontractInfoData()
          }
          break
        case 'tgjl':
          item = 4
          // 调岗记录 - 懒加载
          if (!this.jobChangeData || this.jobChangeData.length === 0) {
            this.initjobChangeData()
          }
          break
        case 'qjjl':
          item = 5
          // 请假记录 - 懒加载
          if (!this.leaveInfoData || this.leaveInfoData.length === 0) {
            this.initleaveInfoData()
          }
          break
        case 'czsq':
          item = 6
          // 辞职申请 - 懒加载
          if (!this.resignData || this.resignData.length === 0) {
            this.initresignData()
          }
          break
        case 'lzdykq':
          item = 7
          // 考勤情况 - 懒加载
          if (!this.dimissionAttendData || this.dimissionAttendData.length === 0) {
            this.initdimissionAttendData()
          }
          break
        case 'rlzjl':
          item = 8
          // 入离职记录 - 懒加载
          if (!this.dimissionLogData || this.dimissionLogData.length === 0) {
            this.initdimissionLogData()
          }
          break
        case 'syjlq':
          item = 9
          // 失业金领取 - 懒加载
          if (!this.unemploymentData || this.unemploymentData.length === 0) {
            this.initunemploymentData()
          }
          break
        case 'sbsq':
          item = 10
          // 社保申请 - 懒加载
          if (!this.insuranceData || this.insuranceData.length === 0) {
            this.initinsuranceData()
          }
          break
        case 'ywxaj':
          item = 11
          // 意外险案件 - 懒加载
          if (!this.accidentCasesData || this.accidentCasesData.length === 0) {
            this.initaccidentCasesData()
          }
          break
        case 'gsaj':
          item = 12
          // 工伤案件 - 懒加载
          if (!this.occupationalData || this.occupationalData.length === 0) {
            this.initoccupationalData()
          }
          break
        case 'lzaj':
          item = 13
          // 仲裁案件 - 懒加载
          if (!this.laborTroubleData || this.laborTroubleData.length === 0) {
            this.initlaborTroubleData()
          }
          break
        case 'bljl':
          item = 14
          // 不良记录 - 懒加载
          if (!this.badRecordData || this.badRecordData.length === 0) {
            this.initbadRecordData()
          }
          break
        case 'bz':
          item = 15
          // 备注 - 懒加载
          if (!this.remarkInfoData || this.remarkInfoData.length === 0) {
            this.initremarkInfoData()
          }
          break
        case 'jljt':
          item = 16
          // 奖励津贴 - 懒加载
          break
      }
      this.$nextTick(() => {

 src/views/user/inemployees.vue

@@ -1346,7 +1346,7 @@
  computed: {
    // 字典选项计算属性
    statusOptions() { return this.getDictOptions('PLITICAL') },
    empTypeOptions() { return this.getDictOptions('empType') },
    empTypeOptions() { return this.getDictOptions('EMPTYPE') },
    nationOptions() { return this.getDictOptions('NATION') },
    marriageOptions() { return this.getDictOptions('MARRIAGE') },
    educationOptions() { return this.getDictOptions('EDUCATION') },
@@ -1375,7 +1375,7 @@
    this.fetch()
    this.initDept()
    // 字典数据已在登录时预加载，直接从 Vuex 获取
    this.initDictTypes(['ageStr', 'PLITICAL', 'sex', 'empType', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initDictTypes(['ageStr', 'PLITICAL', 'sex', 'EMPTYPE', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'archivesStatus', 'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'certificateList', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initJob()
  },
  methods: {