style(user): 调整员工编号列宽度

yubo

2026-04-11 11ab4edc4f3c59643ffbd73ef2bf05bbb3e793aa

 src/views/dashboard/HtUser.vue

@@ -1,7 +1,8 @@
<template>
  <el-dialog
    :title="title"
    top="50px"
    top="80px"
    width="80%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
@@ -16,28 +17,32 @@
        <el-button class="filter-item" type="success" @click="reset">
          {{ $t('table.reset') }}
        </el-button>
        <el-button v-if="isExpireContract" class="filter-item" type="warning" @click="handleExport">
          导出
        </el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        row-key="prop1"
        width="50%"
        stripe
        border
        :cell-style="{padding:'7px 0','text-align':'center'}"
        :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
        style="width: 100%;"
      >
        <el-table-column prop="deptName" label="护卫点" width="100" />
        <el-table-column prop="jobName" label="岗位" width="100" />
        <el-table-column prop="empNumb" label="员工编号" width="100" />
        <el-table-column prop="empName" label="姓名" width="100" />
        <el-table-column prop="certificateNumb" label="身份证号码" width="180" />
        <el-table-column prop="contractStatus" label="合同状态" width="180">
          <template slot-scope="{row}">
            {{ transContractStatus(row.contractStatus,row.endDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="signingDate" label="合同签订日期" width="100" />
        <el-table-column prop="beginDate" label="开始日期" width="100" />
        <el-table-column prop="endDate" label="结束日期" width="100" />
        <el-table-column prop="contractPeriod" label="合同期限(年)" width="100" />
        <el-table-column prop="transactor" label="办理人" width="50" />
        <el-table-column show-overflow-tooltip type="index" width="55" label="序号" />
        <el-table-column show-overflow-tooltip prop="empNumb" label="编号" width="80" />
        <el-table-column show-overflow-tooltip prop="allDeptName" label="部门(护卫点)" width="300" />
        <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="80" />
        <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="100" />
        <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="140" />
        <el-table-column show-overflow-tooltip prop="contractStatus" label="合同状态" width="100" />
        <el-table-column show-overflow-tooltip prop="signingDate" label="合同签订日期" min-width="120" />
        <el-table-column show-overflow-tooltip prop="beginDate" label="开始日期" min-width="80" />
        <el-table-column show-overflow-tooltip prop="endDate" label="结束日期" min-width="80" />
        <el-table-column show-overflow-tooltip prop="contractPeriod" label="合同期限(年)" width="120" />
        <el-table-column show-overflow-tooltip prop="transactor" label="办理人" width="80" />
      </el-table>
      <pagination
        v-show="total>0"
@@ -53,10 +58,13 @@
<script>
// 引用翻页组件
import Pagination from '@/components/Pagination'
import dictMixin from '../../utils/dictMixin'

export default {
  components: {
    Pagination
  },
  mixins: [dictMixin],
  props: {
    dialogVisible: {
      type: Boolean,
@@ -84,17 +92,37 @@
        btime: null,
        etime: null,
        index: null,
        number: null
        number: null,
        timeRange: null
      }, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 5,
        size: 15,
        num: 1
      },

      list: [], // 给table显示的数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 导出配置
      exportConfig: {
        selectedFields: [
          'empNumb', // 编号
          'allDeptName', // 部门(护卫点)
          'jobName', // 岗位
          'empName', // 姓名
          'certificateNumb', // 身份证号码
          'contractStatus', // 合同状态
          'signingDate', // 合同签订日期
          'beginDate', // 开始日期
          'endDate', // 结束日期
          'contractPeriod', // 合同期限(年)
          'transactor' // 办理人
        ],
        exportUrl: 'hr/empBaseInfo/export/expireHt',
        fileName: '到期合同列表.xls'
      }
    }
  },
@@ -103,9 +131,22 @@
      get() {
        return this.dialogVisible
      }
    }
    },
    // 是否为到期合同（number=12）
    isExpireContract() {
      return this.queryParams.number === '12' || this.queryParams.number === 12
    },
    // 字典选项计算属性
    contractStatusOptions() { return this.getDictOptions('CONTRACTSTATUS') }
  },
  mounted() {
    // 字典数据已在登录时预加载，直接从 Vuex 获取
    this.initDictTypes(['CONTRACTSTATUS'])
  },
  methods: {
    contractStatusFormat(row, column) {
      return this.selectDictLabel(this.contractStatusOptions, row.contractStatus)
    },
    transContractStatus(contractStatus, time) {
      var strtime = time.replace('/-/g', '/')// 时间转换
      // 时间
@@ -146,12 +187,18 @@
      this.queryParams.index = index
      this.queryParams.number = number
      this.queryParams.name = null
      this.queryParams.timeRange = index
      this.selectIndex = index !== null ? index : 0 // 保存传入的 index
      this.search()
    },
    fetch(params = {}) {
      var that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      // 添加 index 参数
      if (params.timeRange === undefined || params.timeRange === null) {
        params.timeRange = this.selectIndex
      }
      this.$get('hr/statistics/empBaseInfoHtList', {
        ...params
      }).then((r) => {
@@ -162,6 +209,26 @@
    },
    cancleChoose() {
      this.$emit('cancleChooseUser')
    },
    // 导出方法 - 只导出到期合同（number=12）
    handleExport() {
      const params = {
        ...this.queryParams,
        number: 12, // 固定为12，只导出到期合同
        timeRange: this.selectIndex, // 使用当前查询的 index
        exportField: this.exportConfig.selectedFields.join(',')
      }
      console.log('params', params)
      this.$download(
        this.exportConfig.exportUrl,
        params,
        this.exportConfig.fileName
      ).then(() => {
        this.$message({
          message: '下载成功!',
          type: 'success'
        })
      })
    }
  }
}