efunbox_resources-web/src/pages/reader/develop2.vue

<template>
  <div>
    <el-card>
      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
        <div class="leftForm-skill">
          <el-form-item class="pruductForm-skill" prop="saleUserId" label="渠道选择"
            :rules="[{ required: true, message: '请选择分销', trigger: 'blur' }]">
            <el-select v-model="skillParams.saleUserId" placeholder="请选择分销" style="width:160px">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class=" dateForm-skill" name="data" label="查询日期" style="display:flex">
            <el-date-picker style="width:140px" v-model="skillParams.startDay" type="date"
              placeholder="起"></el-date-picker>
            <el-date-picker style="width:140px" v-model="skillParams.endDay" type="date"
              placeholder="止"></el-date-picker>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table id="table" ref="table1" :data="tableData" border style="width: 100%" :height="tableHeight">
        <el-table-column label="日期" fixed align="left" header-align="center" min-width="140px">
          <template slot-scope="scope">
            <span>{{changeDate(scope.row.day)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="渠道" fixed align="left" header-align="center" min-width="140px">
          <template slot-scope="scope">
            <span>{{changeDate(scope.row.day)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户数量" header-align="center">
          <el-table-column label="当日新增" prop="dailyAdd" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="当日注销" prop="dailyLogout" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="净增量" prop="dailyNetCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="存量" prop="dailyStock" align="right" header-align="center"
            min-width="100px"></el-table-column>
        </el-table-column>
        <el-table-column label="新增订单数量" header-align="center">
          <el-table-column label="月包" prop="dailyAddMonthCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="年包" prop="dailyAddYearCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="终身" prop="dailyAddLifelongCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="小计" prop="dailyAddCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
        </el-table-column>
        <el-table-column label="新增销售金额" header-align="center">
          <el-table-column label="月包" prop="dailyAddMonthAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="年包" prop="dailyAddYearAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="终身" prop="dailyAddLifelongAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="小计" prop="dailyAddAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
        </el-table-column>
        <el-table-column label="退订订单数量" header-align="center">
          <el-table-column label="月包" prop="dailyRefundMonthCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="年包" prop="dailyRefundYearCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="终身" prop="dailyRefundLifelongCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="小计" prop="dailyRefundCount" align="right" header-align="center"
            min-width="100px"></el-table-column>
        </el-table-column>
        <el-table-column label="退订销售金额" header-align="center">
          <el-table-column label="月包" prop="dailyRefundMonthAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="年包" prop="dailyRefundYearAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="终身" prop="dailyRefundLifelongAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
          <el-table-column label="小计" prop="dailyRefundAmount" align="right" header-align="center"
            min-width="100px"></el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;" @current-change="handleCurrentChange"
        :current-page.sync="pagination.pageNo" :page-size="pagination.pageSize" layout="total, prev, pager, next"
        :total="pagination.totalSize">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import formatDate from "../../utils/formatTime";
import { getSaleUser, getChannelData } from '@/api/develop.js'
export default {
  data() {
    return {
      tableHeight: 500,
      tableData: [],
      skillParams: {
        startDay: "",
        endDay: "",
        saleUserId: [],
      },
      pagination: {
        pageSize: 30,
        pageNo: 1,
        totalSize: 0
      },
      options: []
    };
  },
  async created() {
    this.skillParams.startDay = this.getYesterDay();
    this.skillParams.endDay = this.getYesterDay();
    this.tableHeight = document.documentElement.clientHeight * 0.75;
    let res = await getSaleUser()
    console.log(res.data, 'sss');
    this.options = res.data
  },
  methods: {
    // 搜索
    async submitForm() {
      this.skillParams.startDay = this.skillParams.startDay
        ? formatDate(this.skillParams.startDay, 2)
        : "";
      this.skillParams.endDay = this.skillParams.endDay
        ? formatDate(this.skillParams.endDay, 2)
        : "";
      this.$refs['skillParams'].validate(async valid => {
        if (valid) {
          let res = await getChannelData(Object.assign({
            saleUserId: this.skillParams.saleUserId,
            startDay: this.skillParams.startDay, endDay: this.skillParams.endDay
          }, this.pagination))
          console.log(res.data);
          this.tableData = res.data.list
          this.pagination.totalSize = res.data.totalSize
          this.pagination.pageNo = res.data.pageNo
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getYesterDay() {
      let yesterday = new Date().getTime() - 86400000;
      return formatDate(yesterday, 2);
    },
    channelChange(val) {
    },
    columnZero() {
      return "0";
    },
    columnZeroPercent(row, column, index) {
      if (row.totalPayment && column.property === "yearlyConversion") {
        return "100.00%";
      } else {
        return "0.00%";
      }
      // if(row.)
    },
    changeDate(date) {
      return formatDate(date, 4)
    },
  }
};
</script>
<style lang="less" scoped>
.pruductForm-skill {
  margin-left: 10px;
  display: flex;
}
.topForm {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between;
}
.leftForm-skill {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.dateForm-skill {
  margin-left: 18px;
}
</style>