<template> <div class=''> <el-dialog :visible.sync="periodsDialogParams.show" width="90%" append-to-body> <div class="secTitle" >选择期数</div> <div class="form-block"> <el-form label-width="85px" inline size="small"> <el-form-item label="期数标题"> <el-input v-model="periodTitle" placeholder="请输入内容" style="width: 150px" clearable></el-input> </el-form-item> <el-form-item label="商品名称"> <el-select v-model="goodsId" placeholder="请选择" style="width: 150px" @change="onPeriodsSearch" 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="请选择" style="width: 150px" @change="onPeriodsSearch" 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="periodStartTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00','23:59:59']" @change="onPeriodsSearch"> </el-date-picker> </el-form-item> <el-form-item> <el-button @click="onPeriodsSearch" type="primary">查询</el-button> </el-form-item> </el-form> </div> <div class="tableBox" > <div class="item" > <p>筛选列表</p> <el-tabs v-model="course_type" type="card" style="background: white;padding-top: 10px" @tab-click="onPeriodsSearch"> <el-tab-pane label="日课" name="1"/> <el-tab-pane label="月课" name="0"/> <el-tab-pane label="全部" name="-1"/> </el-tabs> <el-table size="mini" :data="periodList" @select="periodsSelectionChange" @select-all="periodSelectionAll" style="width: 100%" fixed> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="期数标题"> <template slot-scope="scope"> <router-link :to="{name:'class', query: { goods_id: scope.row.goods_id, periods_id: scope.row.id}}" > {{scope.row.title}} </router-link> </template> </el-table-column> <el-table-column prop="goods_name" label="商品名称"> </el-table-column> <el-table-column prop="start_at" label="起止时间" sortable> <template slot-scope="scope"> {{scope.row.start_at}} <br> {{scope.row.over_at ? scope.row.over_at : ''}} </template> </el-table-column> <el-table-column prop="created_at" label="创建时间" sortable> </el-table-column> </el-table> </div> <div class="item" > <p>选中列表</p> <el-table size="mini" :data="secPeriods" style="width: 100%" fixed> <el-table-column label="期数标题"> <template slot-scope="scope"> <router-link :to="{name:'class', query: { goods_id: scope.row.goods_id, periods_id: scope.row.id}}" > {{scope.row.title}} </router-link> </template> </el-table-column> <el-table-column label="操作" width="148" v-if="!$store.state.readonly" fixed="right"> <template slot-scope="scope"> <el-button size="mini" type="danger" plain @click="perioddel(scope.row)"> 删除 </el-button> </template> </el-table-column> </el-table> </div> </div> <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPeriodsPageChange" @sizeChange="onPeriodsSizeChange"/> <span slot="footer" class="dialog-footer"> <el-button @click="periodsDialogParams.show = false">取 消</el-button> <el-button type="primary" @click="onPeriodsConfirm">确 定</el-button> </span> </el-dialog> </div> </template> <script> import tinymce from 'tinymce/tinymce' import page from "../framework/page"; import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook"; import { getLessonApi, getPeriodsApi, getGoodsListApi, } from "../../service/api"; export default { name: 'tinymce1', props:[ 'lookData1' ], data () { return { periodsDialogParams:{ show:false, }, secPeriods:[], goodsId:null, lessonId:null, lessonList:[], goodList:[], periodList:[], periodStartTime:null, periodTitle:null, course_type:'1', nowPage: 1, total: 0, limit: 10, } }, created:function(){ }, components: {page}, filters: { filterGoods(val){ return '['+val.id+'][' + GOODSTYPE[val.goods_type] + ']' + '【' +val.current_price / 100 + '元】' + val.name }, isOrNot(value){ return ISORNOT[value] }, goodsType(value){ return GOODSTYPE[value] }, lessonType(value){ return LESSONTYPE[value] }, goodsStatus(value){ return GOODSSTATUS[value] }, typeFilter(val) { if (!val) return; if (val === "text") return "文本"; if (val === "image") return "图片"; if (val === "video") return "视频"; if (val === "news") return "图文"; }, typeListFilter(val) { if (!val) return ""; if (val === 1) return "48时内关注但未购课用户"; if (val === 2) return "有体验课但没有正式课用户"; if (val === 3) return "未试听用户"; if (val === 4) return "指定用户手机号"; } }, methods:{ getLessonOption(){ let json = { page: 1, limit: 100 }; getLessonApi(json).then(res=>{ this.lessonList = res.list; }) }, getGoods(){ let json = { limit: "100", page: this.nowPage }; console.log(613) getGoodsListApi(json).then(res=>{ res.list.forEach(i=>{ if(i.conflict_goods_ids === ''){ i.conflict_goods_ids=[] }else{ i.conflict_goods_ids=i.conflict_goods_ids.split(',') } }); this.goodList = res.list; // this.total = res.total }) }, onPeriodsPageChange(val){ this.nowPage = val this.onPeriodsSearch() }, onPeriodsSizeChange(val){ this.limit = val this.nowPage = 1; this.onPeriodsSearch() }, onPeriodsSearch(){ let json={ limit: this.limit, page: this.nowPage }; if (this.course_type !== '-1'){ json.course_type = this.course_type } if(this.periodTitle){ json.title = this.periodTitle; } if(this.goodsId){ json.goods_id = this.goodsId; } if(this.lessonId){ json.course_id = this.lessonId; } if(this.periodStartTime && this.periodStartTime.length > 0){ json.start_start_at = CommonJs.dateFmt(this.periodStartTime[0],"yyyy-MM-dd") json.start_end_at = CommonJs.dateFmt(this.periodStartTime[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 }); }, periodsSelectionChange(val,el){ this.multipleSelection = val; for(let i=0;i<this.secPeriods.length;i++){ if(el.id==this.secPeriods[i].id){ return } } this.secPeriods.push(el) }, periodSelectionAll(val){ if(this.secPeriods.length==0){ this.secPeriods = [...val] }else{ let length = this.secPeriods.length for(let j=0;j<val.length;j++){ for(let i=0;i<=length;i++){ if(val[j].id==this.secPeriods[i].id){ break }else{ if(i==length-1){ this.secPeriods.push(val[j]) break } } } } } }, perioddel(el){ for(let i=0;i<this.secPeriods.length;i++){ if(el.id==this.secPeriods[i].id){ this.secPeriods.splice(i,1) } } console.log(this.secPeriods) // perioddel }, onSelectPeriods() { this.getLessonOption() this.onPeriodsSearch() this.getGoods() this.periodsDialogParams.show = true; }, onPeriodsConfirm() { this.$emit('periodConfirm',this.secPeriods) console.log(this.secPeriods) }, } } </script> <style scoped lang="less"> .tableBox{display: flex;} .tableBox .item{flex: 1;} </style>