劳动关系细节

zhangxiaoxu123456

2022-04-24 525f25e83879046bd119d38363f6c0572a99f97e

 src/pages/show/laborRelations/LaborRelations.vue

@@ -1,15 +1,381 @@
<template>
<div class="loborRelations">
  劳动关系
</div>
  <div class="laborRelations">
    <div class="laborRelations__warp">
      <h1 class="title"> 农民工就业和欠薪追缴情况统计表</h1>
      <div class="laborRelations__table">
        <el-table :max-height="tableHeight" style="width:100%" :data="tableUpData" :span-method="mergeColumnTableCell" border stripe
                   :cell-style="updataCellStyle">
          <el-table-column label="序号" prop="xuhao" min-width="35">
          </el-table-column>
          <el-table-column label="项目" prop="xiangmu" min-width="170">
          </el-table-column>
          <el-table-column label="2017年" prop="serveteen" min-width="80">
          </el-table-column>
          <el-table-column label="2018年" prop="eighteen" min-width="80">
          </el-table-column>
          <el-table-column label="2019年" prop="nineteen" min-width="80">
          </el-table-column>
          <el-table-column label="2020年" prop="twenty" min-width="80">
          </el-table-column>
          <el-table-column label="2021年" prop="twentyOne" min-width="80">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import nowSize from "../../../libs/nowSize";
export default {
  name: "LoborRelations"
  name: "LaborRelations",
  data() {
    return {
      tableUpData: [
        {
          xuhao: '1',
          xiangmu: '全市农民工'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '2',
          xiangmu: '根治农民欠薪'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
        {
          xuhao: '1',
          xiangmu: '总计',
          serveteen: '134.3',
          eighteen: '134.3',
          nineteen: '134.4',
          twenty: '134.3',
          twentyOne: '134.3'
        },
      ],
        tableHeight: window.innerHeight - nowSize(250)
    }
  },
  methods: {
    //合并行和列
    mergeColumnTableCell({rowIndex, columnIndex}) {
      // 合并列
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 6,
            colspan: 1
          };
        } else if (rowIndex === 6) {
          return {
            rowspan: 17,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      // 合并行
      if (rowIndex === 0) { //指定行号
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 6
          }
        } else {
          return {
            rowIndex: 0,
            colIndex: 0
          }
        }
      } else if (rowIndex === 6) { //指定行号
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 6
          }
        }
      }
    },
    // 修改单个单元格样式
    updataCellStyle({ rowIndex, columnIndex}){
      if(rowIndex===0&&columnIndex===0){
        return {background:'#51D2FF'}
      }else if(rowIndex===6&&columnIndex===0){
        return{background:'#51D2FF'}
      }else if(rowIndex===0&&columnIndex===1){
        return{background:'#51D2FF',paddingLeft:'32px',textAlign:'left'}
      }else if(rowIndex===6&&columnIndex===1){
        return{background:'#51D2FF',paddingLeft:'32px',textAlign:'left'}
      }
    },
    getHeight() {
        this.tableHeight = window.innerHeight - nowSize(250)
    }

  },
   created() {
      window.addEventListener('resize', this.getHeight)
   },
   destroy() {
       window.addEventListener('resize', this.getHeight)
   }
}
</script>
<style lang="scss">
@import "../../../assets/css/base";
.laborRelations__table {
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
    background: transparent;
  }
  .el-table tr {
    background-color: #CEF2FF;
  }

<style scoped>
  .el-table th.el-table__cell { // 表格头部样式
    background-color: #51D2FF;
    padding:0;
    text-align: center;
  }

  .el-table__fixed, .el-table__fixed-right, .el-table__fixed-right::before, .el-table__fixed::before {
    background-color: #51D2FF;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: #A8E9FF;
  }

  .el-table thead {
    color: #111111;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1Px solid #8E8E8E;
  }

  .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right: 1Px solid #8E8E8E;
  }

  .el-table .el-table__cell {
    padding: 0.0859375rem /* 22/256 */
    0;
  }

  .el-table__body tr.hover-row.current-row > td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell, .el-table__body tr.hover-row > td.el-table__cell {
    background: transparent;
  }

  .el-table .cell {
    font-size: $fontSize-28;
    color: $color-darkGrey;
    font-weight: 300;
    line-height: 0.203125rem;
  }

  .el-table--enable-row-transition .el-table__body td.el-table__cell {
    padding: 0;
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
@import '../../../assets/css/base';

.laborRelations__warp {
  text-align: center;

  h1 {
    font-size: $fontSize-30;
    font-weight: 400;
    color: #ffffff;
    margin-top: 0.2421875rem;
  }
}

.laborRelations__table {
  width: 9.625rem;
  margin: 0.125rem auto 0.5078125rem;
}
</style>