fix(user): 在职员工界面优化

yubo

2026-04-11 40f5cf2a8c324bf08fd5f0aec2e9da00e5f59f76

 src/views/user/inemployees.vue

@@ -9,217 +9,15 @@
          <el-col :span="9" style="margin-top: 15px;">
            <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>
            <span class="sup-search-btn" @click="advancedQueryShow = !advancedQueryShow">高级查询</span>
          </el-col>
        </el-row>
        <div v-show="advancedQueryShow">
          <el-row>
            <el-col :span="3">员工编号：
              <el-input v-model="queryParams.empNumb" size="small" maxlength="20" style="width:85px" />
            </el-col>
            <el-col :span="3">姓名：
              <el-input v-model="queryParams.empName" size="small" maxlength="10" style="width:110px" />
            </el-col>
            <el-col :span="4">身份证号：
              <el-input v-model="queryParams.certificateNumb" size="small" maxlength="18" style="width:140px" />
            </el-col>
            <el-col :span="4">部门（护卫点）：
              <el-input v-model="queryParams.deptName" size="small" maxlength="20" style="width:100px" />
            </el-col>
            <el-col :span="7">入职日期：
              <el-date-picker
                v-model="queryParams.entryDateStr"
                size="small"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="~"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 300px;"
        <advanced-query
          v-show="advancedQueryShow"
          :query-params.sync="queryParams"
          @search="search"
          @reset="resetSearch"
              />
            </el-col>
            <el-col :span="3">
              <el-button size="mini" class="hr-but-all" type="primary" @click="search">查询</el-button>
              <el-button size="mini" class="hr-but" type="danger" @click="resetSearch">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <table class="searchTable">
                <tr>
                  <td class="td">性别：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.sex" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllSex">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in sexOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">学历：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.education" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllEducation">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in educationOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">政治面貌：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.politics" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllPolitics">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in statusOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">年龄：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.ageStr" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllAgeStr">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in ageStrOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">档案情况：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.archivesStatus" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllArchivesStatus">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in archivesStatusOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <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>
                      <el-checkbox
                        v-for="data in insuranceTypeOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">工作证：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.empCardStatus" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllEmpCardStatus">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in empCardStatusOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">员工手册：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.handbookStatus" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllHandbookStatus">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in handbookStatusOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">员工类型：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.empType" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllEmpType">全部</el-checkbox>
                      <el-checkbox
                        v-for="data in empTypeOptions"
                        :key="data.dicItemName"
                        :label="data.dicItemCode"
                      >
                        {{ data.dicItemName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">入职类型：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryParams.entryType" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllEntryType">全部</el-checkbox>
                      <el-checkbox :label="20">新入职</el-checkbox>
                      <el-checkbox :label="21">重新入职</el-checkbox>
                      <el-checkbox :label="22">返聘入职</el-checkbox>
                      <!--                      <el-checkbox-->
                      <!--                        v-for="data in dimissionTypeOptions"-->
                      <!--                        :key="data.dicItemName"-->
                      <!--                        :label="data.dicItemCode"-->
                      <!--                      >-->
                      <!--                        {{ data.dicItemName }}-->
                      <!--                      </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>
              </table>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main style="height: 85%;">
        <el-row style="margin: 10px 0 10px 0;">
@@ -228,7 +26,7 @@
            <el-button type="primary" style="background-color: #409EFF" @click="delEmp">删除员工</el-button>
            <el-button type="danger" class="hr-but-all" @click="showYgdg(0)">员工调岗</el-button>
            <!-- <el-button type="danger" class="hr-but-all" @click="showDryg(0)">导入员工</el-button> -->
            <el-button type="danger" class="hr-but-all" @click="showDcyg(0)">导出EXCEL</el-button>
            <el-button type="danger" class="hr-but-all" @click="dialogShowDcyg = true">导出EXCEL</el-button>
            <el-button type="primary" style="background-color: #409EFF" @click="showGbda(0)">关闭档案</el-button>
          </el-col>
        </el-row>
@@ -398,217 +196,10 @@
      @success="handleCloseArchivesSuccess"
      @close="handleCloseArchivesClose"
    />
    <el-dialog title="导出员工" :visible.sync="dialogShowDcyg" width="40%">
      <div style="font-size: 16px;font-weight: 400;height: 35px;margin-top: -30px;color: #409EFF;">
        请勾选需要导出的字段
      </div>
      <table id="dcygTable" width="100%">
        <tr>
          <td colspan="6" style="text-align: left;">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" />
            全部字段
          </td>
        </tr>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <tr>
            <td>档案号</td>
            <td>
              <el-checkbox label="archivesNumb"><span /></el-checkbox>
            </td>
            <td>姓名</td>
            <td>
              <el-checkbox label="empName"><span /></el-checkbox>
            </td>
            <td>性别</td>
            <td>
              <el-checkbox label="sexName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>部门(护卫点)</td>
            <td>
              <el-checkbox label="allDeptName"><span /></el-checkbox>
            </td>
            <td>所属岗位</td>
            <td>
              <el-checkbox label="jobName"><span /></el-checkbox>
            </td>
            <td>员工类别</td>
            <td>
              <el-checkbox label="empTypeName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>民族</td>
            <td>
              <el-checkbox label="nationName"><span /></el-checkbox>
            </td>
            <td>身份证号码</td>
            <td>
              <el-checkbox label="certificateNumb"><span /></el-checkbox>
            </td>
            <td>年龄</td>
            <td>
              <el-checkbox label="age"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>婚姻状况</td>
            <td>
              <el-checkbox label="marriageName"><span /></el-checkbox>
            </td>
            <td>身份证有效期</td>
            <td>
              <el-checkbox label="certificateValidity"><span /></el-checkbox>
            </td>
            <td>身高</td>
            <td>
              <el-checkbox label="stature"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td>
              <el-checkbox label="politicsName"><span /></el-checkbox>
            </td>
            <td>出生日期</td>
            <td>
              <el-checkbox label="birthdate"><span /></el-checkbox>
            </td>
            <td>学历</td>
            <td>
              <el-checkbox label="educationName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>籍贯</td>
            <td>
              <el-checkbox label="nativePlaceName"><span /></el-checkbox>
            </td>
            <td>户籍地址</td>
            <td>
              <el-checkbox label="censusAddress"><span /></el-checkbox>
            </td>
            <td>现住址</td>
            <td>
              <el-checkbox label="currentAddress"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>保安员证号</td>
            <td>
              <el-checkbox label="guardNumb"><span /></el-checkbox>
            </td>
            <td>保安员回执</td>
            <td>
              <el-checkbox label="returnReceipt"><span /></el-checkbox>
            </td>
            <td>档案情况</td>
            <td>
              <el-checkbox label="archivesStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>银行名称</td>
            <td>
              <el-checkbox label="bankName"><span /></el-checkbox>
            </td>
            <td>银行账号</td>
            <td>
              <el-checkbox label="bankNumb"><span /></el-checkbox>
            </td>
            <td>电话号码</td>
            <td>
              <el-checkbox label="telePhone"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>家庭成员及关系1</td>
            <td>
              <el-checkbox label="family"><span /></el-checkbox>
            </td>
            <td>员工状态</td>
            <td>
              <el-checkbox label="empStatusName"><span /></el-checkbox>
            </td>
            <td>离职日期</td>
            <td>
              <el-checkbox label="dimissionDate"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>入职日期</td>
            <td>
              <el-checkbox label="entryDate"><span /></el-checkbox>
            </td>
            <td>社保档位</td>
            <td>
              <el-checkbox label="insuranceTypeName"><span /></el-checkbox>
            </td>
            <td>社保电脑号</td>
            <td>
              <el-checkbox label="socialNumb"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>招聘介绍人</td>
            <td>
              <el-checkbox label="introducer"><span /></el-checkbox>
            </td>
            <td>入司工龄</td>
            <td>
              <el-checkbox label="seniority"><span /></el-checkbox>
            </td>
            <td>工作证</td>
            <td>
              <el-checkbox label="empCardStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>相关证件</td>
            <td>
              <el-checkbox label="certificateListName"><span /></el-checkbox>
            </td>
            <td>家庭成员及关系2</td>
            <td>
              <el-checkbox label="urgencyPhone"><span /></el-checkbox>
            </td>
            <td>员工手册</td>
            <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>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDcyg(1)">取 消</el-button>
        <el-button type="primary" @click="showDcyg(2)">确 定</el-button>
      </div>
    </el-dialog>
    <export-dialog
      :visible.sync="dialogShowDcyg"
      @confirm="handleExportConfirm"
    />
    <archives-edit
      ref="article"
      :dialog-visible="dialog.isVisible"
@@ -738,6 +329,8 @@
import EmpBaseEdit from './components/EmpBaseEdit'
import JobChangeDialog from './components/JobChangeDialog.vue'
import CloseArchivesDialog from './components/CloseArchivesDialog.vue'
import AdvancedQuery from './components/AdvancedQuery.vue'
import ExportDialog from '@/components/ExportEmpBase.vue'
import dictMixin from '../../utils/dictMixin'

export default {
@@ -747,7 +340,9 @@
    Pagination,
    Treeselect,
    JobChangeDialog,
    CloseArchivesDialog
    CloseArchivesDialog,
    AdvancedQuery,
    ExportDialog
  },
  mixins: [dictMixin],
  data() {
@@ -797,11 +392,6 @@
      dialogShowDryg: false,
      dialogShowGbda: false,
      dialogShowDkda: false,
      exportUrl: '',
      checkAll: false,
      isIndeterminate: false,
      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: [],
      tableData: [],
      inTypeOptions: [],
      openArchivesForm: {}
@@ -812,9 +402,7 @@
    statusOptions() {
      return this.getDictOptions('PLITICAL')
    },
    empTypeOptions() {
      return this.getDictOptions('EMPTYPE')
    },

    nationOptions() {
      return this.getDictOptions('NATION')
    },
@@ -827,21 +415,11 @@
    nativePlaceOptions() {
      return this.getDictOptions('NATIVEPLACE')
    },
    archivesStatusOptions() {
      return this.getDictOptions('archivesStatus')
    },

    insuranceTypeOptions() {
      return this.getDictOptions('INSURANCETYPE')
    },
    empCardStatusOptions() {
      return this.getDictOptions('empCardStatus')
    },
    handbookStatusOptions() {
      return this.getDictOptions('handbookStatus')
    },
    certificateListOptions() {
      return this.getDictOptions('certificateList')
    },

    physicalExamTypeOptions() {
      return this.getDictOptions('PHYSICALEXAMTYPE')
    },
@@ -878,18 +456,20 @@
    dimissionTypeOptions() {
      return this.getDictOptions('LZTYPE')
    },
    ageStrOptions() {
      return this.getDictOptions('ageStr')
    },
    sexOptions() {
      return this.getDictOptions('sex')
    }
  },
  watch: {
    advancedQueryShow(val) {
      this.headerHeight = val ? 'auto' : '30px'
    }
  },
  mounted() {
    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(['PLITICAL', 'sex', 'NATION', 'MARRIAGE', 'EDUCATION', 'NATIVEPLACE', 'INSURANCETYPE', 'PHYSICALEXAMTYPE', 'ECG', 'CONTRACTSTATUS', 'LEAVETYPE', 'applayStatus', 'reportStatus', 'hospitalizatioFlag', 'settleStatus', 'ZCTYPE', 'changeType', 'LZTYPE'])
    this.initJob()
  },
  methods: {
@@ -1057,15 +637,7 @@
        })
      })
    },
    advancedQueryShowMethods() {
      if (this.advancedQueryShow) {
        this.headerHeight = '30px'
        this.advancedQueryShow = false
      } else {
        this.headerHeight = 'auto'
        this.advancedQueryShow = true
      }
    },

    editEmpBase(row) {
      console.log(row)
      this.isAdd = false
@@ -1151,35 +723,16 @@
        this.dialogShowDkda = true
      })
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cityOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length
    },
    showDcyg(operate) {
      switch (operate) {
        case 0:
          this.dialogShowDcyg = true
          break
        case 1:
          this.dialogShowDcyg = false
          break
        case 2:
          var params = this.queryParams
    handleExportConfirm(selectedFields) {
      var params = { ...this.queryParams }
          params.empStatus = '0'
          params.exportField = this.checkedCities.join(',')
      params.exportField = selectedFields.join(',')
          this.$download('hr/empBaseInfo/exportWithField', { ...params }, '在职员工列表.xls').then(() => {
            this.$message({
              message: '下载成功!',
              type: 'success'
            })
          })
          break
      }
    },
    editSuccess() {
      this.search()
@@ -1261,92 +814,7 @@
        })
      })
    },
    // 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 = this.dicListToArr(this.sexOptions)
      } else {
        this.queryParams.sex = []
      }
    },
    selectAllEducation(val) {
      if (val) {
        this.queryParams.education = this.dicListToArr(this.educationOptions)
      } else {
        this.queryParams.education = []
      }
    },
    selectAllPolitics(val) {
      if (val) {
        this.queryParams.politics = this.dicListToArr(this.statusOptions)
      } else {
        this.queryParams.politics = []
      }
    },
    selectAllAgeStr(val) {
      if (val) {
        this.queryParams.ageStr = this.dicListToArr(this.ageStrOptions)
      } else {
        this.queryParams.ageStr = []
      }
    },
    selectAllArchivesStatus(val) {
      if (val) {
        this.queryParams.archivesStatus = this.dicListToArr(this.archivesStatusOptions)
      } else {
        this.queryParams.archivesStatus = []
      }
    },
    selectAllInsuranceType(val) {
      if (val) {
        this.queryParams.insuranceType = this.dicListToArr(this.insuranceTypeOptions)
      } else {
        this.queryParams.insuranceType = []
      }
    },
    selectAllEmpCardStatus(val) {
      if (val) {
        this.queryParams.empCardStatus = this.dicListToArr(this.empCardStatusOptions)
      } else {
        this.queryParams.empCardStatus = []
      }
    },
    selectAllHandbookStatus(val) {
      if (val) {
        this.queryParams.handbookStatus = this.dicListToArr(this.handbookStatusOptions)
      } else {
        this.queryParams.handbookStatus = []
      }
    },
    selectAllEmpType(val) {
      if (val) {
        this.queryParams.empType = this.dicListToArr(this.empTypeOptions)
      } else {
        this.queryParams.empType = []
      }
    },
    selectAllEntryType(val) {
      if (val) {
        this.queryParams.entryType = [20, 21, 22]
      } else {
        this.queryParams.entryType = []
      }
    },
    selectAllCertificateList(val) {
      if (val) {
        this.queryParams.certificateList = this.dicListToArr(this.certificateListOptions)
      } else {
        this.queryParams.certificateList = []
      }
    },

    headers() {
      const token = getToken()
      if (token) {