项目表格样式调整

楚江漓i

2021-03-10 2558bbd5004cbc938762eb40991adf4e7e106aaa

 src/views/dashboard/HtUser.vue

@@ -1,10 +1,12 @@
<template>
  <el-dialog
    :title="title"
    top="50px"
    top="80px"
    width="80%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
    :before-close="beforeClose"
  >
    <div class="app-container">
      <div class="filter-container" style="margin-left: -340px;">
@@ -20,19 +22,23 @@
        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 type="selection" :reserve-selection="false" width="55" />
        <el-table-column prop="empNumb" label="员工编号" width="100" />
        <el-table-column prop="empName" label="姓名" width="100" />
        <el-table-column prop="deptName" label="护卫点" width="100" />
        <el-table-column prop="beginDate" label="开始日期" width="100" />
        <el-table-column prop="endDate" label="结束日期" width="100" />
        <el-table-column prop="contractStatus" label="合同状态" width="100" />
        <el-table-column prop="contractPeriod" label="合同期限(年)" width="100" />
        <el-table-column prop="transactor" label="合同办理人" width="50" />
        <el-table-column prop="signingDate" label="合同签订日期" width="100" />
        <el-table-column prop="certificateNumb" label="身份证号码" width="180" />
        <el-table-column show-overflow-tooltip prop="deptName" label="护卫点" width="150" />
        <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="100" />
        <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="100" />
        <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="100" />
        <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" />
        <el-table-column show-overflow-tooltip prop="contractStatus" label="合同状态" width="100" />
        <el-table-column show-overflow-tooltip prop="signingDate" label="合同签订日期" />
        <el-table-column show-overflow-tooltip prop="beginDate" label="开始日期" />
        <el-table-column show-overflow-tooltip prop="endDate" label="结束日期" />
        <el-table-column show-overflow-tooltip prop="contractPeriod" label="合同期限(年)" width="120" />
        <el-table-column show-overflow-tooltip prop="transactor" label="办理人" width="100" />
      </el-table>
      <pagination
        v-show="total>0"
@@ -86,6 +92,7 @@
        size: 5,
        num: 1
      },
      contractStatusOptions: [],
      list: [], // 给table显示的数据
      defaultProps: {
        children: 'children',
@@ -100,7 +107,40 @@
      }
    }
  },
  mounted() {
    this.getDicts('CONTRACTSTATUS').then(response => {
      this.contractStatusOptions = response.data
    })
  },
  methods: {
    contractStatusFormat(row, column) {
      return this.selectDictLabel(this.contractStatusOptions, row.contractStatus)
    },
    transContractStatus(contractStatus, time) {
      debugger
      var strtime = time.replace('/-/g', '/')// 时间转换
      // 时间
      var date1 = new Date(strtime)
      // 现在时间
      var date2 = new Date()
      if (date1 <= date2) {
        return '到期'
      } else {
        switch (contractStatus) {
          case '1':
            return '有效'
          case '2':
            return '到期'
          case '3':
            return '续签'
          case '4':
            return '存档'
        }
      }
    },
    beforeClose(done) {
      this.$emit('cancleChooseUser')
    },
    search() {
      this.fetch({
        ...this.queryParams