index.vue

<template>
  <div class="periods">
    <div class="form-block">
      <el-form label-width="85px" inline size="small">
        <el-form-item label="期数名称">
          <el-input v-model="title" placeholder="请输入内容" style="width: 150px" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-select
            :popper-class="'refresh-select-multi width-400'" style="width: 400px"
            v-model="goodsId" filterable placeholder="请选择" @change="onSearch" clearable>
            <el-option
              v-for="(data,index) in goodList"
              :key="index"
              :label="data | filterGoods"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-select v-model="lessonId" filterable placeholder="请选择" style="width: 150px"  @change="onSearch" clearable>
            <el-option
              v-for="(data,index) in lessonList"
              :key="index"
              :label="data.title"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="startTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
            @change="onSearch">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSearch" type="primary">查询</el-button>
          <el-button @click="onAdd" type="success" size="small" v-if="!$store.state.readonly">添加期数</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="course_type" type="card" style="background: white;padding-top: 10px" @tab-click="onSearch">
      <el-tab-pane label="日课" name="1"/>
      <el-tab-pane label="月课" name="0"/>
      <el-tab-pane label="全部" name="-1"/>
    </el-tabs>
    <el-table
      @expand-change="changeRow"
      size="mini"
      :data="periodList"
      style="width: 100%"  fixed>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            :data="[scope.row]"
            style="width: 100%">
            <el-table-column
              label="到课率" :render-header="rendertip">
              <template slot-scope="scope2">
                <span>{{ scope2.row.arrive_course_rate  | percent}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="看课率" :render-header="rendertip">
              <template slot-scope="scope2">
                <span>{{ scope2.row.watch_course_rate  | percent}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="完课率" :render-header="rendertip">
              <template slot-scope="scope2">
                <span>{{ scope2.row.over_course_rate  | percent}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="打卡率" :render-header="rendertip">
              <template slot-scope="scope2">
                <span>{{ scope2.row.clock_rate  | percent}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="全勤打卡率" :render-header="rendertip">
              <template slot-scope="scope2">
                <span>{{ scope2.row.over_clock_rate  | percent}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="转化率" :render-header="rendertip">
              <template slot-scope="scope2">
                <span>{{ scope2.row.transform_rate  | percent}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="期数名称" width="150px">
        <template slot-scope="scope">
          <router-link :to="{name:'class', query: { goods_id: scope.row.goods_id, periods_id: scope.row.id}}" >
            <div v-html="periodName(scope.row)"></div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称">
        <template slot-scope="scope">
         【{{scope.row.goods_price/ 100 }}元】{{scope.row.goods_name}}
        </template>
      </el-table-column>
      <el-table-column prop="course_title" label="课程名称"></el-table-column>
      <el-table-column
        prop="start_name"
        label="开始主题/歌">
      </el-table-column>
      <el-table-column
        prop="current_category_name"
        label="当前歌曲">
      </el-table-column>
      <el-table-column
        label="看课情况"
        min-width="150">
        <template slot-scope="scope">
          可看课包数: {{scope.row.watch_num}}<br>  已看课包数:{{scope.row.has_watch_num}} <br>
          <span v-if="scope.row.duration_num !== 9999">续看课包数: {{scope.row.duration_num}}<br>  已续看课包数:{{scope.row.has_duration_num}}</span>
          <span v-if="scope.row.duration_num === 9999" style="color: #00af00">永久观看</span>
        </template>
      </el-table-column>
      <el-table-column
        label="不上课日期"
        min-width="90">
        <template slot-scope="scope">
          {{scope.row.rest_week_day | dayFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="总学员数"
        width="90">
        <template slot-scope="scope">
          {{scope.row.total_user_num ? scope.row.total_user_num : ''}}
        </template>
      </el-table-column>
      <el-table-column
        prop="watch_total_user_num"
        label="可看课学员数"
        width="90">
      </el-table-column>
       <el-table-column
        prop="duration_over_at"
        label="开课看课时间"
        width="190"
        >
        <template slot-scope="scope">
          第一天推课：{{scope.row.start_at}}
          <br>
          最后一天推课：{{scope.row.over_at}}
          <br>
          最后一天上课：{{scope.row.duration_over_at}}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间" sortable>
      </el-table-column>
      <el-table-column
        label="操作"
      width="148" v-if="!$store.state.readonly"  fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="onEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" v-if="$store.state.deletePermission" plain @click="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <new-dialog :dialogObj="newDialog" @reflash="onSave" @changeShow="changeShow"></new-dialog>
  </div>
</template>

<script>
  import goodDialog from './dialog'
  import newDialog from './newDialog'
  import page from '../framework/page'
  import {getPeriodsApi,delPeriodApi,getGoodsListApi,getLessonApi,getPeriodsStatisticsApi} from "../../service/api";
  import {WEEKDAY,GOODSTYPE} from '../../util/wordbook';
  import CommonJs from '../../util/common';
  import { tipArr } from "../../util/tipArr";
  export default {
    name: "index",
    data(){
      return {
        nowPage: 1,
        total: 0,
        limit: 10,
        course_type:'1',
        title: '',
        goodsId: null,
        lessonId: null,
        startAt: '',
        periodList: [],
        startTime: [],
        newDialog: {
          form: {
          },
          show: false,
          title: ''
        },
        goodList: [],
        lessonList: []
      }
    },
    filters: {
      dayFilter: function (value) {
        let list = value ? value.split(',') : [];
        list = list.map((day) => {
            return WEEKDAY[day];
        });
        return list.join(',')
      },
      filterGoods(val){
        // console.log(val,229)
        return '['+val.id+']['  + GOODSTYPE[val.goods_type] + ']' + '【' +val.current_price / 100 + '元】' + val.name
      },
      percent(val){
        return (val * 100).toFixed(2)+'%'
      }
    },
    components:{
      goodDialog,
      newDialog,
      page
    },
    methods: {
      periodName(val) {
        let str = '';
        if (!val.title) {
          str = '-'
        } else {
          if (val.goods_id) {
            str += `【${val.goods_id}】`
          }
          if (val.title) {
            str += `${val.title}<br>`
          }
          if (val.watch_num) {
            str += `${val.watch_num}课时`
          }
          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
      },
      rendertip(h, { column }) {
      // common.tipFilter(h,column,tipArr2)
      return h("span", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",
              content: tipArr[column.label],
              placement: "top"
            }
          },
          [
            h("i", {
              class: "el-icon-question",
              style: "color:#409eff;display:block;"
            })
          ]
        )
      ]);
    },
      changeRow(data,b){
        if(b.indexOf(data)>-1){
          getPeriodsStatisticsApi(data.id).then(res=>{
            data.arrive_course_rate = res.arrive_course_rate;
            data.watch_course_rate = res.watch_course_rate;
            data.over_course_rate = res.over_course_rate;
            data.work_rate = res.work_rate;
            data.over_work_rate = res.over_work_rate;
            data.clock_rate = res.clock_rate;
            data.over_clock_rate = res.over_clock_rate;
            data.transform_rate = res.transform_rate;
          })
        }
      },
      dateCompare(val){
          let nowDate =  CommonJs.dateFmt(new Date(),"yyyy-MM-dd");
        return ((new Date(nowDate.replace(/-/g,"\/"))) > (new Date(val.replace(/-/g,"\/"))));
      },
      onPageChange(val){
        this.nowPage = val
        this.onSearch()
      },
      onSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.onSearch()
      },
      onSearch(){
        let json={
          limit: this.limit,
          page: this.nowPage
        };
        if (this.course_type !== '-1'){
          json.course_type = this.course_type
        }
        if(this.title){
            json.title = this.title;
        }
        if(this.goodsId){
          json.goods_id = this.goodsId;
        }
        if(this.lessonId){
          json.course_id = this.lessonId;
        }
        if(this.startTime && this.startTime.length > 0){
          json.start_start_at = CommonJs.dateFmt(this.startTime[0],"yyyy-MM-dd")
          json.start_end_at = CommonJs.dateFmt(this.startTime[1],"yyyy-MM-dd")
        }
        if(this.startAt){
          json.start_at = this.startAt;
        }
        getPeriodsApi(json).then(res=>{
          res.list.forEach(data=>{
            data.arrive_course_rate = 0;
            data.watch_course_rate = 0;
            data.over_course_rate = 0;
            data.work_rate = 0;
            data.over_work_rate = 0;
            data.clock_rate = 0;
            data.over_clock_rate = 0;
            data.transform_rate = 0
          });
          this.periodList = res.list;
          this.total = res.total
        });
      },
      changeShow(data){
        this.newDialog.show=data
      },
      onAdd(){
        this.newDialog.form.id = '';
        this.newDialog.form.startNum = '';
        this.newDialog.form.goods_id = '';
        this.newDialog.form.title = '';
        this.newDialog.form.start_at = '';
        this.newDialog.form.rest_week_day = [];
        this.newDialog.form.teacher_ids = [];
        this.newDialog.form.teacherList = [];
        this.newDialog.form.viewTeacher = '';
        this.newDialog.title = '添加期数';
        this.newDialog.show = true;
      },
      onEdit(row){
        if (this.dateCompare(row.start_at)) {
          this.$message({
            type: 'error',
            message: '期数已开始，不能编辑!'
          });
          return;
        }
        let weekList = [];
        if(row.rest_week_day){
          row.rest_week_day.split(',').forEach((val)=>{
            weekList.push(parseInt(val));
          })
        }
        let teacherList = [];
        if(row.teacher_ids){
          row.teacher_ids.split(',').forEach((val)=>{
            teacherList.push(parseInt(val));
          })
        }
        this.newDialog.form = {
          id: row.id,
          startNum: row.start_num,
          start_at: row.start_at,
          title: row.title,
          goods_id: row.goods_id,
          rest_week_day: weekList,
          teacher_ids: teacherList,
          course_id: row.course_id
        }
        this.newDialog.title = '编辑期数';
        this.newDialog.show = true;
      },
      onSave(val){
        this.newDialog.show = false;
        this.onSearch();
      },
      del(row){
        this.$confirm('此操作将删除该期数?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delPeriodApi(row.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onSearch()
          });
        });
      },
      getGoodsOption(){
        let json = {
          page: 1,
          limit: 100,
          goods_type:'1,2'
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
        })
      },
      getLessonOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getLessonApi(json).then(res=>{
          this.lessonList = res.list;
        })
      },
    },
    mounted(){
      let _query = this.$route.query;
      if (_query && _query.goods_id) {
          this.goodsId = parseInt(_query.goods_id);
      }else if(_query && _query.id){
         this.lessonId=parseInt(_query.id);
      }
      this.onSearch();
      this.getGoodsOption();
      this.getLessonOption();
    }
  }
</script>

<style lang="less">
  @import "../../util/public";
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .periods {
    padding: 20px 0;
  }
</style>