|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <div class="course">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <el-select v-model="channelValue" placeholder="请选择渠道" @change="selectChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in channeList.list"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="add">增加</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="relationList.list"
|
|
|
+ style="width: 100%"
|
|
|
+ height="700">
|
|
|
+ <el-table-column
|
|
|
+ label="课程 CODE"
|
|
|
+ prop="code">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="课程名称"
|
|
|
+ prop="title">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="课程图片"
|
|
|
+ prop="iconImg">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="关键字"
|
|
|
+ prop="keyWords">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="短标题"
|
|
|
+ prop="subTitle">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="播放状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.continuity == 'CONTINUOUS' ? '连续' : '重复'}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="模板"
|
|
|
+ prop="template">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="remove(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ v-if="relationList.totalSize"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="relationList.totalSize"
|
|
|
+ @current-change="changePage">
|
|
|
+ </el-pagination>
|
|
|
+ </el-card>
|
|
|
+ <el-dialog
|
|
|
+ title="增加课程"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="70%"
|
|
|
+ center>
|
|
|
+ <el-form label-position="left">
|
|
|
+ <el-table
|
|
|
+ :data="courseList.list"
|
|
|
+ style="width: 100%"
|
|
|
+ height="500">
|
|
|
+ <el-table-column
|
|
|
+ label="课程 CODE"
|
|
|
+ prop="code">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="课程名称"
|
|
|
+ prop="title">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="课程图片"
|
|
|
+ prop="iconImg">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="关键字"
|
|
|
+ prop="keyWords">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="短标题"
|
|
|
+ prop="subTitle">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="播放状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.continuity == 'CONTINUOUS' ? '连续' : '重复'}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="模板"
|
|
|
+ prop="template">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="addEdit(scope.row, scope.$index)">选择</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="courseList.totalSize"
|
|
|
+ @current-change="changePageEdit">
|
|
|
+ </el-pagination>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ channelValue: '',
|
|
|
+ page: 1,
|
|
|
+ pageEdit: 1,
|
|
|
+ channelId: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ courseList: 'courseList',
|
|
|
+ channeList: 'channeList',
|
|
|
+ relationList: 'relationList'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.$store.dispatch('getChannelList', {pageNo: '', pageSize: '' })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择渠道
|
|
|
+ selectChange(e) {
|
|
|
+ this.channelId = e;
|
|
|
+ this.$store.dispatch('getRelationList', {channelId: e, pageNo: 1, pageSize: 10 })
|
|
|
+ },
|
|
|
+ // 渠道增加课程
|
|
|
+ add () {
|
|
|
+ if (!this.channelId) {
|
|
|
+ this.$message.error('请选择渠道');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.$store.dispatch('getCourseList', {channelId: this.channelId, pageNo: 1, pageSize: 10, key: ''})
|
|
|
+ },
|
|
|
+ // 选择课程
|
|
|
+ addEdit (row, index) {
|
|
|
+ this.$store.dispatch('addRelationList', {
|
|
|
+ data: {channelId: this.channelId, courseIds: [ row.id ]},
|
|
|
+ params: {channelId: this.channelId, pageNo: 1, pageSize: 10 }
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.$store.dispatch('getCourseList', {channelId: this.channelId, pageNo: 1, pageSize: 10, key: ''})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 渠道下课程分页
|
|
|
+ changePage (e) {
|
|
|
+ this.page = e;
|
|
|
+ this.$store.dispatch('getRelationList', {channelId: this.channelId, pageNo: e, pageSize: 10 })
|
|
|
+ },
|
|
|
+ // 添加分页
|
|
|
+ changePageEdit (e) {
|
|
|
+ this.pageEdit = e;
|
|
|
+ this.$store.dispatch('getCourseList', {pageNo: e, pageSize: 10, key: ''})
|
|
|
+ },
|
|
|
+ // 删除课件
|
|
|
+ remove (row) {
|
|
|
+ this.$store.dispatch('removeRelationList', {
|
|
|
+ data: {channelId: this.channelId, courseIds: [ row.id ]},
|
|
|
+ params: {channelId: this.channelId, pageNo: this.page, pageSize: 10 }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+ .el-pagination {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .el-form-item__content {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+</style>
|