ebiz-h5/src/views/ebiz/productionSay/statistics.vue

<template>
  <div class="table">
    <van-list
      v-model="loading"
      :immediate-check="false"
      :finished="finished"
      :finished-text="finishedText"
      error-text="请求失败，点击重新加载"
      :error.sync="error"
      @load="loadMore"
      class="pb45"
    >
      <statisticalTable @goLink="goLink" :theads="theads" :tableData="tableData" :isLink="true"></statisticalTable>
    </van-list>
    <!-- <table cellspacing="0" summary cellpadding="1">
      <thead>
        <tr>
          <th class="th-fixed">机构</th>
          <th>计划场次</th>
          <th>预估人数</th>
          <th>预估保费</th>
          <th>实际场次</th>
          <th>实际人数</th>
          <th>预签保费</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td class="td-fixed">{{ item.convokeOrgCn }}</td>
          <td>{{ item.splan }}</td>
          <td>{{ item.estimatePeople }}</td>
          <td>{{ item.estimatePremium }}</td>
          <td>{{ item.rplan }}</td>
          <td>{{ item.realityPeople }}</td>
          <td>{{ item.estimateGetPremium }}</td>
        </tr>
      </tbody>
    </table> -->
  </div>
</template>

<script>
import { selectAllStatistical } from '@/api/ebiz/productionSay/productionSay.js'
import statisticalTable from '@/components/ebiz/productionSay/statisticsTable'
export default {
  name: 'statistics',
  components: {
    statisticalTable,
  },
  data() {
    return {
      loading: false,
      finished: false,
      total: '', //总页数
      currentPage: 1, //当前页数
      error: false,
      finishedText: '没有更多了',
      pageSize: 10, //每页数据条数
      tableData: [],
      theads: ['机构', '计划场次', '预估人数', '预估保费', '实际场次', '实际人数', '预签保费'],
    }
  },
  created() {
    this.loadMore()
  },
  methods: {
    // 加载列表
    loadMore() {
      console.log('加载表单')
      let pageInfo = {
        pageNum: this.currentPage, //当前页数
        pageSize: this.pageSize, //当前页对应条数
      }
      this.selectAllStatistical(pageInfo)
    },
    selectAllStatistical(data) {
      this.$toast.loading({
        // 持续展示 toast
        duration: 0,
        // 禁用背景点击
        forbidClick: true,
        loadingType: 'spinner',
        message: '加载中……',
      })
      selectAllStatistical(data).then((res) => {
        if (res.result == 0) {
          this.currentPage++
          // this.saleList = this.saleList.concat(res.content.list)
          this.tableData = this.tableData.concat(res.content.list)
          this.loading = false
          this.finished = false
          if (res.content.nextPage == 0) {
            this.finished = true
            this.finishedText = '已经全部加载'
          }
        } else {
          this.loading = false
          this.finished = true
          this.finishedText = '已经全部加载'
        }
      })
    },
    goLink(item) {
      console.log(item)
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/productionSay/statisticsItem?convokeOrganization=' + item.convokeOrganization,
        },
        routerInfo: {
          path: '/productionSay/statisticsItem?convokeOrganization=' + item.convokeOrganization,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  overflow-x: auto;
  margin: 5px;
  box-sizing: border-box;
  background: #fff;
}
.table th {
  width: 100px;
}
table {
  width: 160vw;
}
.table {
  margin-top: 10px;
  table {
    border-collapse: collapse;
  }

  table,
  th,
  td {
    border: 1px solid #999;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    background: #fff;
  }
  thead {
    th {
      height: 40px;
      line-height: 40px;
      background: #e9332e;
      color: #fff;
    }
  }
}
.th-fixed {
  position: sticky;
  left: 0;
  width: 200px;
  padding: 0 5px;
}
.td-fixed {
  position: sticky;
  width: 200px;
  padding: 0 5px;
  left: 0;
  text-decoration: underline;
}
</style>