efunbox_resources-web/src/pages/course/Course.vue

<template>
  <div class="course">
        <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>课程管理</span>
      </div>
      <el-table
        :data="courseList.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="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      background
      layout="prev, pager, next"
      :total="courseList.totalSize"
      @current-change="changePage">
      </el-pagination>
    </el-card>
    <el-dialog
      title="编辑课程"
      :visible.sync="dialogVisible"
      width="50%"
      center>
      <el-form :model="courseFrom" ref="channelEdit" label-position="left">
        <el-form-item label="名称" label-width="90px" >
          <el-input size="small" v-model="courseFrom.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="短标题" label-width="90px" >
          <el-input size="small" v-model="courseFrom.subTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键字" label-width="90px" >
          <el-input size="small" v-model="courseFrom.keyWords" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="模板" label-width="90px" >
            <el-select v-model="courseFrom.template" placeholder="请选择">
              <el-option
                v-for="item in templateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="播放状态" label-width="90px" >
            <el-select v-model="courseFrom.continuity" placeholder="请选择">
              <el-option
                v-for="item in continuityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setTable('channelEdit')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      dialogVisible: false,
      courseFrom: {
          id: '',
          title: '',
          subTitle: '',
          keyWords: '',
          template: '',
          continuity: '',
          status: "NORMAL"
      },
      templateOptions: [{
          value: 'ICON',
          label: '课件ICON式'
        }, {
          value: 'LIST',
          label: '课件列表式'
      }],
      continuityOptions:[{
          value: 'CONTINUOUS',
          label: '连续播放'
        }, {
          value: 'REPEAT',
          label: '重复播放'
      }],
      page: 1
    }
  },
  computed: {
    ...mapGetters(['courseList'])
  },
  created () {
    this.$store.dispatch('getCourseList', {pageNo: 1, pageSize: 10, key: ''})
  },
  methods: {
    handleEdit (row) {
      this.dialogVisible = true;
      console.log(row.id);
      this.courseFrom = {
          id: row.id,
          title: row.title,
          subTitle: row.subTitle,
          keyWords: row.keyWords,
          template: row.template,
          continuity: row.continuity,
          status: "NORMAL"
      }
    },
    // 分页
    changePage (e) {
      this.page = e;
      this.$store.dispatch('getCourseList', {pageNo: e, pageSize: 10, key: ''})
    },
    // 提交确认
    setTable (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.courseFrom)
          this.$store.dispatch('setCourseList', {
            data: this.courseFrom,
            params: {pageNo: this.page, pageSize: 10}
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      this.dialogVisible = false;
    }
  },
}
</script>
<style lang="less">
  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
  .el-form-item__content {
    width: 50%;
  }
</style>