marketEnrollmentConversionList.vue

<template>
  <div style="padding-top: 20px;">
    <el-form ref="searchFrom" class="searchFrom" :model="searchFrom" label-width="100px" inline>
      <!--<el-form-item label="更新时间">
        {{updateTime ? updateTime : '-'}}
      </el-form-item>-->
      <el-form-item label="进量日期">
        <el-date-picker
          v-model="searchFrom.payTime"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
          :default-time="['00:00:00','23:59:59']"
          @change="getList"></el-date-picker>
      </el-form-item>
      <el-form-item label="商品课时数">
        <el-select
          v-model="searchFrom.watch_num"
          filterable
          placeholder="请选择"
          style="width: 150px"
          clearable
          @change="selectChange">
          <el-option
            v-for="(data,index) in watchList"
            :key="index"
            :label="data.title"
            :value="data.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道code">
        <el-input v-model="searchFrom.invite_type" style="width: 110px"></el-input>
      </el-form-item>
      <el-form-item label="期数名称" prop="periods_title">
        <el-select
          :popper-class="'refresh-select-multi width-480'"
          style="width: 480px"
          placeholder="请选择"
          v-model="searchFrom.periods_id"
          @change="onPeriodChange"
          multiple
          clearable
          filterable>
          <el-option v-for="item in periodList" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="flexRow">
          <el-button type="primary" plain @click="getList">搜索</el-button>
          <!-- <el-button type="primary" plain @click="exportDataTable" v-if="false">导出</el-button> -->
        </div>
      </el-form-item>
    </el-form>

    <div class="update-time">最近更新时间：{{updateTime ? updateTime : '-'}}</div>
    <el-table
      border
      align="center"
      :header-cell-style="{background:'#5f5f5f',color:'#fff'}"
      :data="list"
      size="mini"
      :row-class-name="tableRowClassName"
      :span-method="arraySpanMethod">
      <!--height="calc(100vh - 210px)"-->
      <!--<el-table-column prop="periods_title" align="center" min-width="80" fixed label="期数名称"></el-table-column>-->
      <el-table-column align="center" fixed label="期数名称" width="120px">
        <template slot-scope="scope">
          <div v-html="periodName(scope.row)"></div>
          <!--{{periodName(scope.row)}}-->
        </template>
      </el-table-column>
      <el-table-column prop="is_other" min-width="160" align="left" fixed label="渠道信息">
        <template slot-scope="scope">
        来源：{{scope.row.is_other==0?"内部":"外部"}}<br>
        类别：{{scope.row.invite_type_name}}<br>
        名称：{{scope.row.invite_name}}<br>
        类型：{{scope.row.invite_type}}
      </template>
      </el-table-column>
      <!-- <el-table-column prop="invite_type_name" min-width="60" align="center"  label="渠道类别"></el-table-column>
      <el-table-column prop="invite_name" align="center" min-width="60" label="渠道名称"></el-table-column>
      <el-table-column prop="invite_type" align="center" min-width="60" label="渠道类型"></el-table-column> -->
      <el-table-column  v-for="(data,index) in dateList" align="center" :key="index" :label="data">
        <el-table-column align="center" min-width="60px" prop="wait_join_num" label="班级人数">
          <template slot-scope="scope">{{scope.row.date[index].sum_class_num}}</template>
        </el-table-column>
        <el-table-column align="center" min-width="60px" label="好友数">
          <template slot-scope="scope">{{scope.row.date[index].sum_friend_num}}</template>
        </el-table-column>
        <el-table-column align="center" min-width="60px" prop="wait_join_num" label="好友率">
          <template slot-scope="scope">{{scope.row.date[index].friend_num_except_class_num}}%</template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMarketEnrollmentConversionListApi,getPeriodsOtherListApi,getUpdateTimeApi } from "../../service/api";
export default {
  name: "index",
  data() {
    return {
      updateTime: '',
      list: [],
      dateList: [],
      propertyList: [
        "title",
        "start_at",
        "total_join_num",
        "total_max_join_num",
        "total_target_join_num",
        "complete_rate",
        "target_diff",
        "wait_join_num",
        "other_wait_join_num"
      ],
      searchFrom: {
        payTime: [],
        start_at: "",
        end_at: "",
        invite_type: "",
        invite_name: "",
        watch_num: "",
        periods_id: "",
        squad: "",
        teacher_id: "",
        periods_title: ""
      },
      periods_id:'',
      periodList: [],
      total: 0,
      today: {
        text: "今天",
        onClick: () => {
          this.searchFrom.payTime = [
            this.formatTime(new Date()) + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      yesterday: {
        text: "昨天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
          );
          this.searchFrom.payTime = [
            preDate + " 00:00:00",
            preDate + " 23:59:59"
          ];
        }
      },
      last30Day: {
        text: "过去30天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)
          );
          this.searchFrom.payTime = [
            preDate + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      last7Day: {
        text: "过去7天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
          );
          this.searchFrom.payTime = [
            preDate + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      watchList: [
        { id: 0, title: 5 },
        { id: 1, title: 6 },
        { id: 2, title: 10 },
        { id: 3, title: 20 }
      ]
    };
  },
  methods: {
    periodName(val) {
      let str = '';
      if (val.goods_id) {
        str += `【${val.goods_id}】`
      }
      if (val.periods_title) {
        str += `${val.periods_title}`
      }
      if (val.watch_num) {
        str += `${val.watch_num}课时<br>`
      } else {
        str += `<br>`
      }
      if (val.start_at) {
        str += `（${val.start_at.slice(5).replace('-', '')}）`
      }
      if (val.has_watch_num || val.has_watch_num == 0) {
        str += `-d${val.has_watch_num}`
      }
      return str
    },
    selectChange(value) {
      this.searchFrom.watch_num = this.watchList[value].title;
      this.getList();
    },
    onPeriodChange(value) {
      let str = "";
      if (value.length > 1) {
        str = value.join(",");
      } else {
        str = value[0];
      }
      this.periods_id = str;
      console.log(str);
    },
    getPeriodsOtherList() {
      let json = { limit: 1000,page:1,max_watch_num:20 };
      getPeriodsOtherListApi(json).then(res => {
        res.list.forEach(val=>{
          val.label = `【${val.goods_id}】${val.title}${val.watch_num}课时（${val.start_at.slice(5).replace('-', '')}）-d${val.has_watch_num}`
        })
        this.periodList = res.list;
      });
    },
    getList() {
      this.list=[]
      this.dateList = []
      let json={}
      if (this.searchFrom.invite_type) {
        json.invite_type = this.searchFrom.invite_type;
      }
      if(this.searchFrom.sort_value){
        json.sort_value = this.searchFrom.sort_value;
        json.sort_key = this.searchFrom.sort_key;
      }
      if (this.searchFrom.squad) {
        json.squad = this.searchFrom.squad;
      }
      if (this.searchFrom.watch_num) {
        json.watch_num = this.searchFrom.watch_num;
      }
      if (this.periods_id) {
        json.periods_ids = this.periods_id;
      }
      if (this.searchFrom.payTime&&this.searchFrom.payTime.length > 0) {
        if (
          this.searchFrom.payTime[0] &&
          this.searchFrom.payTime[0].length > 0
        ) {
          this.searchFrom.start_at = this.searchFrom.payTime[0];
          json.start_at = this.searchFrom.start_at;
        }
        if (
          this.searchFrom.payTime[1] &&
          this.searchFrom.payTime[1].length > 0
        ) {
          this.searchFrom.end_at = this.searchFrom.payTime[1];
          json.end_at = this.searchFrom.end_at;
        }
      }
      // json.periods_ids = '238,229,213,230'
      getMarketEnrollmentConversionListApi(json).then(res => {
        this.list = res;
        if (res[0].date) {
          res[0].date.forEach(i => {
            this.dateList.push(i.cur_date);
          });
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "warning-row";
      }
      return "";
    },
    arraySpanMethod(data) {
      // if (this.propertyList.indexOf(data.column.property) > -1) {
      //   if (
      //     data.rowIndex === 0 ||
      //     data.row.id !== this.list[data.rowIndex - 1].id
      //   ) {
      //     let rowspan = 1;
      //     for (let i = data.rowIndex + 1; i < this.list.length; i++) {
      //       if (data.row.id === this.list[i].id) {
      //         rowspan++;
      //       } else {
      //         break;
      //       }
      //     }
      //     return {
      //       rowspan: rowspan,
      //       colspan: 1
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     };
      //   }
      // } else {
      //   return {
      //     rowspan: 1,
      //     colspan: 1
      //   };
      // }
    },
    getUpdateTime() {
      getUpdateTimeApi().then(res => {
        if (res.time) {
          this.updateTime = res.time
        }
      })
    }
  },
  created() {
    this.getList();
    this.getPeriodsOtherList();
    this.getUpdateTime()
  }
};
</script>

<style scoped lang="less">
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fff;
}
/deep/ .el-table .warning-row {
  background: oldlace;
}
/deep/.el-progress-bar__inner {
  max-width: 100% !important;
}
</style>