feat(user): 新增员工档案管理视图组件

yubo

2026-04-06 6448ec15bfe0b65fb822a662105bceddc23b58d8

 src/views/user/outemployess.vue

@@ -7,7 +7,7 @@
            <h3 class="bu-tian-jia-title">离职员工</h3>
          </el-col>
          <el-col :span="9" style="margin-top: 15px;">
            <el-input v-model="queryParams.vague" placeholder="请输入内容" style="width:300px" />
            <el-input v-model="queryParams.baseKey" placeholder="请输入内容" style="width:300px" />
            <span class="search-btn" @click="vagueSearch">查询</span>
            <span class="sup-search-btn" @click="advancedQueryShowMethods">高级查询</span>
          </el-col>
@@ -143,7 +143,7 @@
                    </td>
                  </tr>
                  <tr>
                    <td class="td">保险类型：</td>
                    <td class="td">社保档位：</td>
                    <td class="td-group">
                      <el-checkbox-group v-model="queryParams.insuranceType" class="fj-checkbox">
                        <el-checkbox label="" @change="selectAllInsuranceType">全部</el-checkbox>
@@ -177,16 +177,28 @@
                    <td class="td-group">
                      <el-checkbox-group v-model="queryParams.dimissionType" class="fj-checkbox">
                        <el-checkbox label="" @change="selectAllDimissionType">全部</el-checkbox>
                        <el-checkbox :label="1">正常离职</el-checkbox>
                        <el-checkbox :label="2">自动离职</el-checkbox>
                        <el-checkbox :label="6">正常离职</el-checkbox>
                        <el-checkbox :label="4">自动离职</el-checkbox>
                        <el-checkbox :label="2">公司劝退</el-checkbox>
                        <el-checkbox :label="1">合同期满</el-checkbox>
                        <el-checkbox :label="3">公司辞退</el-checkbox>
                        <!--                        <el-checkbox-->
                        <!--                          v-for="data in dimissionTypeOptions"-->
                        <!--                          :key="data.dicItemName"-->
                        <!--                          :label="data.dicItemCode"-->
                        <!--                        >-->
                        <!--                          {{ data.dicItemName }}-->
                        <!--                        </el-checkbox>-->
                        <el-checkbox :label="5">试用期内</el-checkbox>
                        <el-checkbox :label="7">到龄退休</el-checkbox>
                      </el-checkbox-group>
                    </td>
                  </tr>
                  <tr>
                    <td class="td">相关证件：</td>
                    <td class="td-group">
                      <el-checkbox-group v-model="queryParams.certificateList" class="fj-checkbox">
                        <el-checkbox label="" @change="selectAllCertificateList">全部</el-checkbox>
                        <el-checkbox
                          v-for="data in certificateListOptions"
                          :key="data.dicItemName"
                          :label="data.dicItemCode"
                        >
                          {{ data.dicItemName }}
                        </el-checkbox>
                      </el-checkbox-group>
                    </td>
                  </tr>
@@ -226,6 +238,7 @@
          :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
          :cell-style="{padding:'7px 0','text-align':'center'}"
          style="width: 100%;color: #000;"
          @sort-change="changeSort"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="操作" width="70">
@@ -249,37 +262,44 @@
              >编辑</span> -->
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip="true" prop="empNumb" label="编号" width="100" />
          <el-table-column show-overflow-tooltip="true" prop="deptName" label="部门（护卫点）" />
          <el-table-column show-overflow-tooltip="true" prop="jobName" label="岗位" width="100" />
          <el-table-column show-overflow-tooltip="true" prop="empName" label="姓名" width="100" />
          <el-table-column show-overflow-tooltip="true" prop="certificateNumb" label="身份证号码" />
          <el-table-column show-overflow-tooltip="true" prop="sex" label="性别" width="60" :formatter="sexFormat" />
          <el-table-column show-overflow-tooltip="true" prop="age" label="年龄" width="60" />
          <el-table-column show-overflow-tooltip prop="empNumb" label="编号" width="80" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="80" />
          <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="80" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column show-overflow-tooltip prop="sex" label="性别" width="50" :formatter="sexFormat" />
          <el-table-column show-overflow-tooltip prop="age" label="年龄" width="80" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column
            show-overflow-tooltip="true"
            show-overflow-tooltip
            prop="education"
            label="学历"
            width="60"
            :formatter="educationFormat"
            ortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
          <el-table-column show-overflow-tooltip="true" prop="nativePlaceName" label="籍贯" width="70" />
          <el-table-column show-overflow-tooltip prop="nativePlaceName" label="籍贯" width="70" />
          <el-table-column show-overflow-tooltip prop="telePhone" label="联系电话" width="110" />
          <el-table-column
            show-overflow-tooltip="true"
            show-overflow-tooltip
            prop="empType"
            label="员工类型"
            width="80"
            :formatter="empTypeFormat"
          />
          <el-table-column show-overflow-tooltip="true" prop="telePhone" label="联系电话" width="120" />
          <el-table-column show-overflow-tooltip="true" prop="entryDate" label="入职日期" width="130" />
          <el-table-column show-overflow-tooltip="true" prop="dimissionDate" label="离职日期" width="130" />
          <el-table-column show-overflow-tooltip="true" prop="empStatus" label="员工状态" width="80">
          <el-table-column show-overflow-tooltip prop="entryDate" label="入职日期" width="110" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column show-overflow-tooltip prop="dimissionDate" label="离职日期" width="110" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column show-overflow-tooltip prop="empStatus" label="员工状态" width="80">
            <template slot-scope="{row}">
              {{ transEmpStatus(row.empStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="dimissionTypeName" label="离职类型" width="80" />
          <el-table-column prop="dimissionType" label="离职类型" width="120" sortable="custom" :sort-orders="['ascending', 'descending']">
            <template slot-scope="{row}">
              {{ transEntryType(row.dimissionType) }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="annualLeave" label="年假天数" width="110" />
        </el-table>
        <pagination
          v-show="total>0"
@@ -406,7 +426,7 @@
              <tr>
                <td>入职日期</td>
                <td>2020-01-02</td>
                <td>保险类型</td>
                <td>社保档位</td>
                <td>深户（五险一档）</td>
                <td>社保电脑号</td>
                <td />
@@ -420,9 +440,9 @@
                <td>已发</td>
              </tr>
              <tr>
                <td>家庭成员及关系</td>
                <td>家庭成员及关系1</td>
                <td />
                <td>紧急联系电话</td>
                <td>家庭成员及关系2</td>
                <td />
                <td>员工手册</td>
                <td>已发</td>
@@ -885,8 +905,8 @@
            </table>
            <table>
              <tr>
                <td colspan="8" class="tdTitle">劳资案件</td>
                <td class="link_button">新增劳资案件</td>
                <td colspan="8" class="tdTitle">仲裁案件</td>
                <td class="link_button">新增仲裁案件</td>
                <td class="del_button">删除</td>
              </tr>
              <tr>
@@ -981,8 +1001,8 @@
          <el-col span="24">
            <el-form-item label="打开类型" prop="region">
              <el-radio-group v-model="baseicInformationForm.openType">
                <el-radio :label="2">重新入职</el-radio>
                <el-radio :label="3">返聘</el-radio>
                <el-radio :label="21">重新入职</el-radio>
                <el-radio :label="22">返聘</el-radio>
              </el-radio-group>
              （主要对已退休员工返聘）
            </el-form-item>
@@ -992,6 +1012,17 @@
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择打开日期"
              />
            </el-form-item>
            <el-form-item label="部门(护卫点)" required message="请选择部门(护卫点)" prop="allDeptName">
              <treeselect
                v-model="baseicInformationForm.deptId"
                :multiple="false"
                :options="depts"
                :clear-value-text="$t('common.clear')"
                placeholder="请选择部门(护卫点)"
                style="width:100%"
                @select="DeptNameSelect"
              />
            </el-form-item>
            <el-form-item label="备注说明">
@@ -1038,7 +1069,7 @@
          <tr>
            <td>部门(护卫点)</td>
            <td>
              <el-checkbox label="deptName"><span /></el-checkbox>
              <el-checkbox label="allDeptName"><span /></el-checkbox>
            </td>
            <td>所属岗位</td>
            <td>
@@ -1134,7 +1165,7 @@
            </td>
          </tr>
          <tr>
            <td>家庭成员及关系</td>
            <td>家庭成员及关系1</td>
            <td>
              <el-checkbox label="family"><span /></el-checkbox>
            </td>
@@ -1152,7 +1183,7 @@
            <td>
              <el-checkbox label="entryDate"><span /></el-checkbox>
            </td>
            <td>保险类型</td>
            <td>社保档位</td>
            <td>
              <el-checkbox label="insuranceTypeName"><span /></el-checkbox>
            </td>
@@ -1178,9 +1209,9 @@
          <tr>
            <td>相关证件</td>
            <td>
              <el-checkbox label="certificateList"><span /></el-checkbox>
              <el-checkbox label="certificateListName"><span /></el-checkbox>
            </td>
            <td>紧急联系电话</td>
            <td>家庭成员及关系2</td>
            <td>
              <el-checkbox label="urgencyPhone"><span /></el-checkbox>
            </td>
@@ -1188,6 +1219,30 @@
            <td>
              <el-checkbox label="handbookStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>入职类型</td>
            <td>
              <el-checkbox label="entryTypeName"><span /></el-checkbox>
            </td>
            <td>离职类型</td>
            <td>
              <el-checkbox label="dimissionTypeName"><span /></el-checkbox>
            </td>
            <td>编号</td>
            <td>
              <el-checkbox label="empNumb"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>年假天数</td>
            <td>
              <el-checkbox label="annualLeave"><span /></el-checkbox>
            </td>
            <td />
            <td />
            <td />
            <td />
          </tr>
        </el-checkbox-group>
      </table>
@@ -1208,12 +1263,16 @@
<script>
import Pagination from '@/components/Pagination'
import ArchivesChange from './archivesChange'
import Treeselect from '@riophae/vue-treeselect'
import dictMixin from '../../utils/dictMixin'

export default {
  components: {
    Treeselect,
    ArchivesChange,
    Pagination
  },
  mixins: [dictMixin],
  data() {
    return {
      dialog: {
@@ -1234,13 +1293,15 @@
        insuranceType: [],
        empStatus: [],
        dimissionType: [],
        empType: []
        empType: [],
        certificateList: []
      }, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 15,
        num: 1
      },
      depts: [],
      headerHeight: '30px',
      advancedQueryShow: false,
      dialogTableVisible: false,
@@ -1257,42 +1318,45 @@
      baseicInformationForm: {
        openDate: new Date()
      },
      educationOptions: [],
      statusOptions: [],
      ageStrOptions: [],
      insuranceTypeOptions: [],
      archivesStatusOptions: [],
      sexOptions: [],
      empTypeOptions: [],
      cityOptions: ['archivesNumb', 'deptName', 'jobName', 'empName', 'certificateNumb', 'certificateValidity', 'sexName', 'nationName', 'age', 'marriageName', 'stature', 'birthdate', 'politicsName', 'empTypeName', 'educationName', 'nativePlaceName', 'censusAddress', 'currentAddress', 'guardNumb', 'returnReceipt', 'archivesStatusName', 'bankName', 'bankNumb', 'telePhone', 'entryDate', 'insuranceTypeName', 'socialNumb', 'introducer', 'seniority', 'empCardStatus', 'certificateList', 'urgencyPhone', 'handbookStatusName', 'family', 'empTypeName', 'empStatusName', 'dimissionDate'],
      cityOptions: ['archivesNumb', 'allDeptName', 'jobName', 'empName', 'certificateNumb', 'certificateValidity', 'sexName', 'nationName', 'age', 'marriageName', 'stature', 'birthdate', 'politicsName', 'empTypeName', 'educationName', 'nativePlaceName', 'censusAddress', 'currentAddress', 'guardNumb', 'returnReceipt', 'archivesStatusName', 'bankName', 'bankNumb', 'telePhone', 'entryDate', 'insuranceTypeName', 'socialNumb', 'introducer', 'seniority', 'empCardStatusName', 'certificateListName', 'urgencyPhone', 'handbookStatusName', 'family', 'empStatusName', 'dimissionDate', 'entryTypeName', 'dimissionTypeName', 'empNumb', 'annualLeave'],
      checkedCities: []
    }
  },
  computed: {
    // 字典选项计算属性
    educationOptions() { return this.getDictOptions('EDUCATION') },
    statusOptions() { return this.getDictOptions('PLITICAL') },
    ageStrOptions() { return this.getDictOptions('ageStr') },
    insuranceTypeOptions() { return this.getDictOptions('INSURANCETYPE') },
    archivesStatusOptions() { return this.getDictOptions('archivesStatus') },
    sexOptions() { return this.getDictOptions('sex') },
    empTypeOptions() { return this.getDictOptions('EMPTYPE') },
    certificateListOptions() { return this.getDictOptions('certificateList') }
  },
  mounted() {
    this.fetch()
    this.getDicts('INSURANCETYPE').then(response => {
      this.insuranceTypeOptions = response.data
    })
    this.getDicts('archivesStatus').then(response => {
      this.archivesStatusOptions = response.data
    })
    this.getDicts('EDUCATION').then(response => {
      this.educationOptions = response.data
    })
    this.getDicts('sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDicts('PLITICAL').then(response => {
      this.statusOptions = response.data
    })
    this.getDicts('ageStr').then(response => {
      this.ageStrOptions = response.data
    })
    this.getDicts('EMPTYPE').then(response => {
      this.empTypeOptions = response.data
    })
    // 字典数据已在登录时预加载，直接从 Vuex 获取
    this.initDictTypes(['INSURANCETYPE', 'archivesStatus', 'EDUCATION', 'sex', 'PLITICAL', 'ageStr', 'EMPTYPE', 'certificateList'])
    this.initDept()
  },
  methods: {
    initDept() {
      this.$get('system/dept').then((r) => {
        this.depts = r.data.data.rows
        this.deptTree = this.depts
      }).catch((error) => {
        console.error(error)
        this.$message({
          message: this.$t('tips.getDataFail'),
          type: 'error'
        })
      })
    },
    DeptNameSelect(val) {
      this.baseicInformationForm.deptId = val.deptId
      this.baseicInformationForm.deptName = val.label
      this.baseicInformationForm.allDeptName = val.allDeptName
    },
    exportExcel() {
      this.queryParams.baseKey = this.queryParams.vague
      var params = this.queryParams
@@ -1357,7 +1421,7 @@
    },
    // 翻页方法
    search() {
      this.queryParams.vague = ''
      this.queryParams.baseKey = ''
      this.fetch({
        ...this.queryParams,
        ...this.sort
@@ -1379,7 +1443,7 @@
    },
    vagueSearch() {
      this.fetch({
        baseKey: this.queryParams.vague
        baseKey: this.queryParams.baseKey
      })
    },
    transEmpStatus(empStatus) {
@@ -1392,6 +1456,24 @@
          return '退休'
      }
    },
    transEntryType(entryType) {
      switch (entryType) {
        case '1':
          return '合同期满'
        case '2':
          return '公司劝退'
        case '3':
          return '公司辞退'
        case '4':
          return '自动离职'
        case '5':
          return '试用期内'
        case '6':
          return '正常离职'
        case '7':
          return '到龄退休'
      }
    },
    transDimissionType(dimissionType) {
      switch (dimissionType) {
        case '1':
@@ -1399,11 +1481,11 @@
        case '2':
          return '自动离职'
        case '3':
          return '公司劝退'
        case '4':
          return '公司辞退'
        case '5':
          return '试用期内'
        // case '4':
        //   return '公司辞退'
        // case '5':
        //   return '试用期内'
      }
    },
    advancedQueryShowMethods() {
@@ -1459,6 +1541,9 @@
            var id = selection[0].empId
            var name = selection[0].empName
            var number = selection[0].certificateNumb
            var deptName = selection[0].deptName
            var deptId = selection[0].deptId
            var allDeptName = selection[0].allDeptName
            const nowDate = new Date()
            const year = nowDate.getFullYear()
            const month = nowDate.getMonth() + 1
@@ -1467,9 +1552,12 @@
              empId: id,
              empName: name,
              certificateNumb: number,
              openType: 2,
              openType: 21,
              openDate: year + '-' + month + '-' + day,
              remark: ''
              remark: '',
              deptId: deptId,
              deptName: deptName,
              allDeptName: allDeptName
            }
            this.dialogShowDkda = true
          } else {
@@ -1531,65 +1619,67 @@
      alert('已选择部门' + names)
      console.log(users)
    },
    // dic列表转为数组
    dicListToArr(dicList) {
      var arr = []
      for (var i = 0; i < dicList.length; i++) {
        var dic = dicList[i]
        arr.push(dic.dicItemCode)
      }
      return arr
    },
    selectAllSex(val) {
      if (val) {
        this.queryParams.sex = ['1', '2']
        this.queryParams.sex = this.dicListToArr(this.sexOptions)
      } else {
        this.queryParams.sex = []
      }
    },
    selectAllEducation(val) {
      if (val) {
        this.queryParams.education = ['91', '81', '71', '61', '42', '41', '31', '21', '11', '10']
        this.queryParams.education = this.dicListToArr(this.educationOptions)
      } else {
        this.queryParams.education = []
      }
    },
    selectAllPolitics(val) {
      if (val) {
        this.queryParams.politics = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
        this.queryParams.politics = this.dicListToArr(this.statusOptions)
      } else {
        this.queryParams.politics = []
      }
    },
    selectAllAgeStr(val) {
      if (val) {
        this.queryParams.ageStr = ['18-29', '30-39', '40-49', '50-59', '60-69', '69-999']
        this.queryParams.ageStr = this.dicListToArr(this.ageStrOptions)
      } else {
        this.queryParams.ageStr = []
      }
    },
    selectAllArchivesStatus(val) {
      if (val) {
        this.queryParams.archivesStatus = ['0', '1']
        this.queryParams.archivesStatus = this.dicListToArr(this.archivesStatusOptions)
      } else {
        this.queryParams.archivesStatus = []
      }
    },
    selectAllInsuranceType(val) {
      if (val) {
        this.queryParams.insuranceType = ['1', '2', '3', '4', '5']
        this.queryParams.insuranceType = this.dicListToArr(this.insuranceTypeOptions)
      } else {
        this.queryParams.insuranceType = []
      }
    },
    selectAllEmpStatus(val) {
      if (val) {
        this.queryParams.empStatus = ['0', '1', '2', '3']
      } else {
        this.queryParams.empStatus = []
      }
    },
    selectAllEmpType(val) {
      if (val) {
        this.queryParams.empType = ['01', '02']
        this.queryParams.empType = this.dicListToArr(this.empTypeOptions)
      } else {
        this.queryParams.empType = []
      }
    },
    selectAllDimissionType(val) {
      if (val) {
        this.queryParams.dimissionType = [1, 2, 3]
        this.queryParams.dimissionType = [1, 2, 3, 4, 5, 6]
      } else {
        this.queryParams.dimissionType = []
      }
@@ -1602,6 +1692,13 @@
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
    },
    selectAllCertificateList(val) {
      if (val) {
        this.queryParams.certificateList = this.dicListToArr(this.certificateListOptions)
      } else {
        this.queryParams.certificateList = []
      }
    },
    showDcyg(operate) {
      switch (operate) {
@@ -1623,6 +1720,11 @@
          })
          break
      }
    },
    changeSort(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.search()
    }
  }
}