customList.vue

<template>
  <d2-container class="companyNews">
    <headerLayout active="0"></headerLayout>
    <div class="news-wrapper">
      <div class="news-title d-flex jc-between">
        <label>重要客户</label>
        <span @click="goBack">&lt; 返回</span>
      </div>
      <div class="news-content">
        <el-table stripe :data="tableData" style="width: 100%">
          <el-table-column prop="name"></el-table-column>
          <el-table-column align="right" prop="createAt"></el-table-column>
        </el-table>
        <Pagination
          v-show="pageObj.total > 0"
          :total="pageObj.total"
          layout="->,total, prev, pager, next"
          :page.sync="pageObj.pageNo"
          :limit.sync="pageObj.pageSize"
          @pagination="pageChange"
        />
      </div>
    </div>
  </d2-container>
</template>

<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import Pagination from '@/components/Pagination'
import * as API_CLIENT from '@/api/con.client.js'
export default {
  components: { headerLayout, Pagination },
  data () {
    return {
      pageObj: {
        pageNo: 1,
        total: 1,
        pageSize: 10
      },
      tableData: []
    }
  },
  mounted () {
    this.type = this.$route.query.type
    console.log(this.type)
    if (this.type === 1) {
      this.getCustomList()
    } else {
      this.getPartner()
    }
  },
  methods: {
    getPartner () {
      API_CLIENT.getPartner({ _index: this.pageObj.pageNo, _size: this.pageObj.pageSize }).then(res => {
        this.tableData = res.data.records
        this.pageObj.total = Number(res.data.total)
      })
    },
    // 查询概况页面数据
    getCustomList () {
      API_CLIENT.getCustomPageList({ _index: this.pageObj.pageNo, _size: this.pageObj.pageSize }).then(res => {
        this.tableData = res.data.records.map(item => {
          return {
            name: item.customerName,
            createAt: item.createTime
          }
        })
        this.pageObj.total = Number(res.data.total)
      })
    },
    goBack () {
      this.$router.back(-1)
    },
    // 翻页
    pageChange (page) {
      this.pageObj.pageSize = page.limit
      this.pageObj.pageNo = page.page
      if (this.type === 1) {
        this.getCustomList()
      } else {
        this.getPartner()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.companyNews {
  .news-wrapper {
    padding: .5rem 1rem;
  }
  .news-title {
    width: 100%;
    height: .54rem;
    font-size: .24rem;
    line-height: 1.5;
    color: $color-primary;
    border-bottom: .02rem solid $color-primary;
    margin-bottom: .5rem;
    span {
      cursor: pointer;
    }
  }
  .news-content {
    ::v-deep .el-table {
      font-size: .16rem;
      color: #fff;
      margin-bottom: .24rem;
      background-color: rgba(47, 219, 243, 0.05);
      &::before {
        height: 0;
      }
      .el-table__header-wrapper {
        display: none;
      }
      td {
        border-bottom: none;
      }
      .el-table__row--striped td {
        background-color: $color-bg;
      }
      tr {
        background-color: $color-bg;
        cursor: pointer;
        &.is-leaf {
          border-bottom: none;
        }
      }
      .el-table__body tr:hover>td {
        background-color: rgba(47, 219, 243, 0.15);
      }
    }
    ::v-deep .el-pagination.is-background {
      .el-pager li:not(.disabled):hover {
        color: $color-primary;
      }
      .el-pager li:not(.disabled).active {
        background-color:$color-primary;
        color: #fff;
      }

    }
  }
}
</style>