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

yubo

2026-04-11 40f5cf2a8c324bf08fd5f0aec2e9da00e5f59f76

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

- 将在职员工导出的字段选择修改成公用字段选择对话框

- 将主界面的样式提取成文件放到共用样式文件中

 src/components/ExportEmpBase.vue

@@ -39,6 +39,7 @@
  { label: '姓名', value: 'empName' },
  { label: '性别', value: 'sexName' },
  { label: '身份证号码', value: 'certificateNumb' },
  { label: '身份证有效期', value: 'certificateValidity' },
  { label: '出生日期', value: 'birthdate' },
  { label: '年龄', value: 'age' },
  { label: '民族', value: 'nationName' },
@@ -50,6 +51,8 @@
  { label: '部门 (护卫点)', value: 'allDeptName' },
  { label: '岗位', value: 'jobName' },
  { label: '员工类别', value: 'empTypeName' },
  { label: '员工状态', value: 'empStatusName' },
  { label: '入职类型', value: 'entryTypeName' },
  { label: '联系电话', value: 'telePhone' },
  { label: '现住址', value: 'currentAddress' },
  { label: '户籍地址', value: 'censusAddress' },
@@ -59,7 +62,9 @@
  { label: '银行名称', value: 'bankName' },
  { label: '银行账号', value: 'bankNumb' },
  { label: '保安员证号', value: 'guardNumb' },
  { label: '保安员回执', value: 'returnReceipt' },
  { label: '档案状态', value: 'archivesStatusName' },
  { label: '招聘介绍人', value: 'introducer' },
  { label: '合同状态', value: 'contractStatusName' },
  { label: '转正日期', value: 'probationDate' },
  { label: '转正状态', value: 'probationStatusName' },
@@ -69,6 +74,8 @@
  { label: '家庭成员及关系 1', value: 'family' },
  { label: '家庭成员及关系 2', value: 'urgencyPhone' },
  { label: '入司工龄', value: 'seniority' },
  { label: '离职日期', value: 'dimissionDate' },
  { label: '离职类型', value: 'dimissionTypeName' },
  { label: '年假天数', value: 'annualLeave' },
  { label: '备注', value: 'remark' }
]

 src/styles/inemployees-global.scss

New file
@@ -0,0 +1,17 @@
// 全局样式（非scoped）
.zzyg-table {
  .el-table th, .el-table td {
    padding: 7px 0;
  }
}

.fj-checkbox {
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #a32c30;
    background: #a32c30;
  }

  .el-checkbox__label {
    color: #000 !important;
  }
}

 src/styles/inemployees-scoped.scss

New file
@@ -0,0 +1,206 @@
.el-main {
  height: 600px;
}

.searchTable {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-bottom: 1px dashed #d9dadb;
  }

  .td {
    width: 90px;
    text-align: right;
  }

  .td-group {
    padding-left: 20px;
  }
}

.searchTable td,
.searchTable th {
  color: #000;
  height: 50px;
  background-color: #fff;
}

#ygxq table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  margin-top: 20px;
}

#ygxq table td,
#ygxq table th {
  border: 1px solid #DDDCDC;
  color: #666;
  height: 30px;
}

#ygxq table thead th {
  background-color: #CCE8EB;
  width: 100px;
}

#ygxq table tr:nth-child(odd) {
  background: #fff;
}

#ygxq table tr:nth-child(even) {
  background: #F5FAFA;
}

.tdTitle {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.link_button {
  color: #169BD5;
}

.del_button {
  color: #D9001B;
}

.search-btn {
  display: inline-block;
  width: 3.64vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  background-color: #a00515;
  color: #fff;
  margin-left: 1vw;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

.sup-search-btn {
  display: inline-block;
  width: 5.2vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  margin-left: 1vw;
  color: #a00515;
  border: 1px solid #a00515;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

// 头像包装器
.avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;

  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 4px;
    cursor: pointer;
    object-fit: cover;
    border: 1px dashed #d9d9d9;

    &:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-placeholder {
    width: 150px;
    height: 150px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #fafafa;

    &:hover {
      border-color: #409eff;
      background-color: #f0f9ff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      line-height: 1;
      margin-bottom: 8px;
    }

    .upload-tip {
      font-size: 12px;
      color: #8c939d;
    }
  }
}

// 上传方式选择容器
.upload-choice-container {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;

  .upload-choice-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      border-color: #409eff;
      background-color: #f5f7fa;
    }

    i {
      font-size: 40px;
      color: #409eff;
      margin-bottom: 10px;
    }

    span {
      font-size: 14px;
      color: #606266;
    }
  }
}

// 摄像头容器
.camera-container {
  text-align: center;

  .camera-video {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 4px;
    background: #000;
  }

  .captured-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 4px;
  }
}

 src/views/user/components/AdvancedQuery.vue

New file
@@ -0,0 +1,213 @@
<template>
  <div>
    <el-row>
      <el-col :span="3">员工编号：
        <el-input v-model="localParams.empNumb" size="small" maxlength="20" style="width:85px" />
      </el-col>
      <el-col :span="3">姓名：
        <el-input v-model="localParams.empName" size="small" maxlength="10" style="width:110px" />
      </el-col>
      <el-col :span="4">身份证号：
        <el-input v-model="localParams.certificateNumb" size="small" maxlength="18" style="width:140px" />
      </el-col>
      <el-col :span="4">部门（护卫点）：
        <el-input v-model="localParams.deptName" size="small" maxlength="20" style="width:100px" />
      </el-col>
      <el-col :span="7">入职日期：
        <el-date-picker
          v-model="localParams.entryDateStr"
          size="small"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="~"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 300px;"
        />
      </el-col>
      <el-col :span="3">
        <el-button size="mini" class="hr-but-all" type="primary" @click="handleSearch">查询</el-button>
        <el-button size="mini" class="hr-but" type="danger" @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <table class="searchTable">
          <tr v-for="field in dictFilterFields" :key="field.paramKey">
            <td class="td">{{ field.label }}：</td>
            <td class="td-group">
              <el-checkbox-group v-model="localParams[field.paramKey]" class="fj-checkbox">
                <el-checkbox label="" @change="(val) => handleSelectAll(field, val)">全部</el-checkbox>
                <el-checkbox
                  v-for="data in getDictOptions(field.dictType)"
                  :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="localParams.entryType" class="fj-checkbox">
                <el-checkbox label="" @change="handleSelectAllEntryType">全部</el-checkbox>
                <el-checkbox
                  v-for="item in entryTypeOptions"
                  :key="item.dicItemCode"
                  :label="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </el-checkbox>
              </el-checkbox-group>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dictMixin from '@/utils/dictMixin'

export default {
  name: 'AdvancedQuery',
  mixins: [dictMixin],
  props: {
    queryParams: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 字典筛选配置
      dictFilterFields: [
        { label: '性别', paramKey: 'sex', dictType: 'sex' },
        { label: '学历', paramKey: 'education', dictType: 'EDUCATION' },
        { label: '政治面貌', paramKey: 'politics', dictType: 'PLITICAL' },
        { label: '年龄', paramKey: 'ageStr', dictType: 'ageStr' },
        { label: '档案情况', paramKey: 'archivesStatus', dictType: 'archivesStatus' },
        { label: '社保档位', paramKey: 'insuranceType', dictType: 'INSURANCETYPE' },
        { label: '工作证', paramKey: 'empCardStatus', dictType: 'empCardStatus' },
        { label: '员工手册', paramKey: 'handbookStatus', dictType: 'handbookStatus' },
        { label: '员工类型', paramKey: 'empType', dictType: 'EMPTYPE' },
        { label: '相关证件', paramKey: 'certificateList', dictType: 'certificateList' }
      ],
      // 入职类型特殊选项（硬编码）
      entryTypeOptions: [
        { dicItemCode: 20, dicItemName: '新入职' },
        { dicItemCode: 21, dicItemName: '重新入职' },
        { dicItemCode: 22, dicItemName: '返聘入职' }
      ],
      // 本地查询参数（从 props 复制，避免直接修改）
      localParams: {},
      // 防止 watch 循环更新标志
      isUpdating: false
    }
  },
  watch: {
    queryParams: {
      handler(val) {
        if (!this.isUpdating) {
          this.localParams = { ...val }
        }
      },
      immediate: true,
      deep: true
    },
    localParams: {
      handler(val) {
        this.isUpdating = true
        this.$emit('update:queryParams', val)
        this.$nextTick(() => {
          this.isUpdating = false
        })
      },
      deep: true
    }
  },
  mounted() {
    this.initDictTypes([
      'sex', 'EDUCATION', 'PLITICAL', 'ageStr', 'archivesStatus',
      'INSURANCETYPE', 'empCardStatus', 'handbookStatus', 'EMPTYPE', 'certificateList'
    ])
  },
  methods: {
    // 通用全选/取消全选
    handleSelectAll(field, val) {
      if (val) {
        const options = this.getDictOptions(field.dictType)
        this.$set(this.localParams, field.paramKey, options.map(item => item.dicItemCode))
      } else {
        this.$set(this.localParams, field.paramKey, [])
      }
    },
    // 入职类型全选/取消全选
    handleSelectAllEntryType(val) {
      if (val) {
        this.$set(this.localParams, 'entryType', [20, 21, 22])
      } else {
        this.$set(this.localParams, 'entryType', [])
      }
    },
    // 查询
    handleSearch() {
      this.$emit('search')
    },
    // 重置
    handleReset() {
      this.localParams = {
        empNumb: '',
        vague: '',
        sex: [],
        education: [],
        politics: [],
        ageStr: [],
        archivesStatus: [],
        insuranceType: [],
        empStatus: [],
        empCardStatus: [],
        handbookStatus: [],
        baseKey: '',
        empType: [],
        entryType: [],
        certificateList: []
      }
      this.$emit('reset')
    }
  }
}
</script>

<style lang="scss" scoped>
.searchTable {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-bottom: 1px dashed #d9dadb;
  }

  .td {
    width: 90px;
    text-align: right;
  }

  .td-group {
    padding-left: 20px;
  }
}

.searchTable td,
.searchTable th {
  color: #000;
  height: 50px;
  background-color: #fff;
}
</style>

 src/views/user/components/JobChangeDialog.vue

New file
@@ -0,0 +1,285 @@
<template>
  <el-dialog
    title="员工调岗"
    :visible.sync="dialogVisible"
    width="50%"
    @close="handleClose"
  >
    <el-form
      ref="ygdgForm"
      :model="formData"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-row>
        <el-col span="24">
          <el-form-item label="调岗人员">
            <input v-model="formData.empIds" type="hidden">
            <el-input
              v-model="formData.empNames"
              type="textarea"
              :rows="2"
              readonly
            />
          </el-form-item>
          <el-form-item label="现部门(护卫点)" prop="deptId">
            <treeselect
              v-model="formData.deptId"
              :multiple="false"
              :options="depts"
              :clear-value-text="$t('common.clear')"
              placeholder="请选择部门(护卫点)"
              style="width:100%"
              @select="handleDeptSelect"
            />
          </el-form-item>
          <el-form-item label="现岗位" prop="jobId">
            <el-select
              v-model="formData.jobId"
              placeholder="请选择岗位"
              filterable
              clearable
              style="width: 100%"
              @change="handleJobSelect"
            >
              <el-option
                v-for="item in jobOptions"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="调岗类型" prop="changeType">
            <el-select
              v-model="formData.changeType"
              placeholder="请选择调岗类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in changeTypeOptions"
                :key="dict.dicItemCode"
                :label="dict.dicItemName"
                :value="dict.dicItemCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="调岗日期" prop="changeDate">
            <el-date-picker
              v-model="formData.changeDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="理由描述" prop="changeReason">
            <el-input
              v-model="formData.changeReason"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getDicJob } from '@/api/position'

export default {
  name: 'JobChangeDialog',
  components: {
    Treeselect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    employees: {
      type: Array,
      default: () => []
    },
    depts: {
      type: Array,
      default: () => []
    },
    changeTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {
        empIds: '',
        empNames: '',
        oldDeptNames: '',
        oldJobNames: '',
        changeType: '',
        changeDate: '',
        changeReason: '',
        jobId: '',
        newJobName: '',
        deptId: '',
        newDeptName: '',
        allDeptName: ''
      },
      rules: {
        changeType: [
          { required: true, message: '请选择调岗类型', trigger: 'change' }
        ],
        changeDate: [
          { required: true, message: '请选择调岗日期', trigger: 'change' }
        ],
        jobId: [
          { required: true, message: '请选择现岗位', trigger: 'change' }
        ],
        deptId: [
          { required: true, message: '请选择现部门', trigger: 'change' }
        ],
        changeReason: [
          { max: 500, message: '长度不超过500个字符', trigger: 'blur' }
        ]
      },
      jobOptions: []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    employees: {
      handler(val) {
        if (val && val.length > 0) {
          this.initFormData(val)
        }
      },
      immediate: false
    }
  },
  mounted() {
    this.loadJobOptions()
  },
  methods: {
    // 加载岗位选项
    loadJobOptions() {
      getDicJob().then((r) => {
        this.jobOptions = r.data || []
      }).catch((error) => {
        console.error('获取岗位列表失败:', error)
        this.$message.error('获取岗位列表失败')
      })
    },

    // 初始化表单数据
    initFormData(employees) {
      const ids = []
      const names = []
      const deptNames = []
      const jobNames = []

      employees.forEach(emp => {
        ids.push(emp.empId)
        names.push(emp.empName)
        deptNames.push(emp.allDeptName)
        jobNames.push(emp.jobName)
      })

      // 默认调岗日期为当天
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const today = year + '-' + month + '-' + day

      // 默认部门为根部门
      const rootDept = this.depts && this.depts.length > 0 ? this.depts[0] : null
      const defaultDeptId = rootDept ? rootDept.deptId : ''
      const defaultDeptName = rootDept ? rootDept.label : ''
      const defaultAllDeptName = rootDept ? rootDept.allDeptName : ''

      this.formData = {
        empIds: ids.join(','),
        empNames: names.join(','),
        oldDeptNames: deptNames.join(','),
        oldJobNames: jobNames.join(','),
        changeType: '',
        changeDate: today,
        changeReason: '',
        jobId: '',
        newJobName: '',
        deptId: defaultDeptId,
        newDeptName: defaultDeptName,
        allDeptName: defaultAllDeptName
      }
    },

    // 部门选择
    handleDeptSelect(node) {
      this.formData.deptId = node.deptId
      this.formData.newDeptName = node.label
      this.formData.allDeptName = node.allDeptName
    },

    // 岗位选择
    handleJobSelect(val) {
      const selected = this.jobOptions.find(item => item.code === val)
      if (selected) {
        this.formData.newJobName = selected.value
        this.formData.jobId = selected.code
      }
    },

    // 确认提交
    handleConfirm() {
      this.$refs.ygdgForm.validate((valid) => {
        if (valid) {
          this.$post('hr/empBaseInfo/jobChange', { ...this.formData }).then(() => {
            this.$message({
              message: '员工调岗成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.$emit('success')
          })
        }
      })
    },

    // 取消
    handleCancel() {
      this.dialogVisible = false
      this.$emit('close')
    },

    // 关闭对话框
    handleClose() {
      if (this.$refs.ygdgForm) {
        this.$refs.ygdgForm.resetFields()
      }
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
</style>

 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) {