boss/pages/main/index/report_business.vue

<template>
  <div>
    <div style="text-align: right;margin-bottom: 10px">
      <el-button @click="exportList" class="export-excel" type="primary">导出报表</el-button>
    </div>
    <div class="table">
      <el-table
        v-if="tableData.length"
        border
        style="width: 100%"
        :data="tableData"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'project_amount'"
              @click="clickProject(scope.row,1)"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'cloud_amount'"
              @click="clickProject(scope.row,2)"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'hire_amount'"
              @click="clickProject(scope.row,3)"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'vip_amount'"
              @click="clickProject(scope.row,4)"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'verify_amount'"
              @click="clickProject(scope.row,5)"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'contact_amount'"
              @click="clickProject(scope.row,6)"
            >{{ scope.row[prop] }}
            </el-button>
            <span v-else>{{ scope.row[prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @current-change="getTableData"
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
      ></el-pagination>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },
      // 列表头显示内容
      tableHeaders: [],
      // 列表头字段
      tableProps: [],
      // 列表数据
      tableData: []
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData() {
      this.tableData = [];
      const res = await this.$post("/api/admin/ReportForm/index", {
        id: 'IncomeData'
      });
      let data = res.data;
      this.tableData = data.list;
      this.pageInfo.total = Number(data.total);
      this.pageInfo.page = data.totalPage;
      this.setTitles(data.titles);
    },
    async exportList() {
      let url = window.location.host + "/api/admin/ReportForm/export?id=IncomeData";
      window.location.href = "http://" + url;
    },
    setTitles(title) {
      for (let i in title) {
        this.tableProps.push(i);
        this.tableHeaders.push(title[i]);
      }
    },
    clickProject(row, type) {
      let product_type = 2;
      let path = "/main/project_form";
      let arr = [11,12,55];
      switch (type) {
        case 1:
          product_type = 2;
          break;
        case 2:
          product_type = 9;
          break;
        case 3:
          product_type = 4;
          break;
        case 4:
          product_type = 11;
          break;
        case 5:
          product_type = 12;
          break;
        case 6:
          product_type = 55;
          break;
      }
      if(arr.includes(product_type)){
        path = "/main/orders"
      }
      //2020-10-1 00:00:00
      let date = row.month;
      if (!date || date.length < 6) {
        this.$message.error('时间格式不正确');
        return;
      }
      let year = date.substring(0, 4);
      let month = date.substring(4, 6);
      let data = {
        product_type: product_type,
        start_time: this.beginTime(year, month),
        end_time: this.lastTime(year, month)
      };
      this.$router.push({path: path, query: data});
    },
    beginTime(year, month) {
      if (month.length <= 1) {
        let month = "0" + month;
      }
      let startTime = year + '-' + month + '-' + "01" + " 00:00:00";
      return startTime;
    },
    lastTime(year, month) {
      if (month.length <= 1) {
        let month = "0" + month;
      }
      let day = new Date(year, month, 0);
      let lastdate = year + '-' + month + '-' + day.getDate();
      let lastTime = lastdate + " 23:59:59";
      return lastTime;
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 80px);
}
</style>