index.vue 7.23 KB
<template>
  <div class="periods">
    <div class="form-block">
      <el-form label-width="90px" inline>
        <el-form-item label="期数标题">
          <el-input v-model="title" placeholder="请输入内容" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-select v-model="goodsId" placeholder="请选择" 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" placeholder="请选择" 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>
          <el-button @click="onSearch" type="primary">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right;" v-if="!$store.state.readonly">
          <el-button @click="onAdd" type="primary">添加期数</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="periodList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="期数ID">
      </el-table-column>
      <el-table-column
        prop="title"
        label="期数标题">
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        label="商品价格">
        <template slot-scope="scope">
          {{scope.row.goods_price / 100 }}
        </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>
          续看课包数: {{scope.row.duration_num}}<br>  已续看课包数:{{scope.row.has_duration_num}}
        </template>
      </el-table-column>
      <el-table-column
        label="周几不上课"
        min-width="120">
        <template slot-scope="scope">
          {{scope.row.rest_week_day | dayFilter}}
        </template>
      </el-table-column>
      <el-table-column
        prop="start_at"
        label="期数开始时间">
      </el-table-column>
      <el-table-column
        label="操作"
      width="148" v-if="!$store.state.readonly">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="onEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total"/>
    <new-dialog v-if="newDialog.show" :dialogObj="newDialog" @reflash="onSave"></new-dialog>
  </div>
</template>

<script>
  import goodDialog from './dialog'
  import newDialog from './newDialog'
  import page from '../framework/page'
  import {getPeriodsApi,delPeriodApi,getGoodsListApi,getLessonApi} from "../../service/api";
  import {WEEKDAY} from '../../util/wordbook';
  export default {
    name: "index",
    data(){
      return {
        nowPage: 1,
        total: 0,
        title: '',
        goodsId: null,
        lessonId: null,
        periodList: [],
        newDialog: {
          form: {
            id: 0,
            title: '',
            start_num: 0,
            start_at: '',
            rest_week_day: [],
            goods_id:''
          },
          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){
        return val.name + '[' +val.current_price / 100 + '元]'
      }
    },
    components:{
      goodDialog,
      newDialog,
      page
    },
    methods: {
      onSearch(){
        let json={
        }
        if(this.title){
            json.title = this.title;
        }
        if(this.goodsId){
          json.goods_id = this.goodsId;
        }
        if(this.lessonId){
          json.course_id = this.lessonId;
        }
        getPeriodsApi(json).then(res=>{
          this.periodList = res.list;
          this.total = res.total
        });
      },
      onAdd(){
        this.newDialog.form.id = '';
        this.newDialog.start_num = '';
        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.title = '添加期数';
        this.newDialog.show = true;
      },
      onEdit(row){
        this.newDialog.form.id = row.id;
        this.newDialog.form.start_num = row.start_num;
        this.newDialog.form.start_at = row.start_at;
        this.newDialog.form.title = row.title;
        this.newDialog.form.goods_id = row.goods_id;
        console.log('row', row)
        let weekList = [];
        if(row.rest_week_day){
          row.rest_week_day.split(',').forEach((val)=>{
            weekList.push(parseInt(val));
          })
        }
        this.newDialog.form.rest_week_day = weekList;
        let teacherList = [];
        if(row.teacher_ids){
          row.teacher_ids.split(',').forEach((val)=>{
            teacherList.push(parseInt(val));
          })
        }
        this.newDialog.form.teacher_ids = teacherList;
        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
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
        })
      },
      getLessonOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getLessonApi(json).then(res=>{
          this.lessonList = res.list;
        })
      }
    },
    mounted(){
      this.onSearch();
      this.getGoodsOption();
      this.getLessonOption();
    }
  }
</script>

<style scoped>
  .periods {
    padding: 20px 0;
  }
</style>