admin/src/pages/system/courseManager/courseList/index.vue

<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click="addCourse">新增课程</el-button>
        </div>
        <ul>
          <li>
            <!-- <span>选择案场：</span> -->
            <el-select v-model="postData.caseid" placeholder="请选择案场">
              <el-option
                key=""
                label=""
                value=""
              >
              </el-option>
              <el-option
                v-for="item in cases"
                :key="item.CaseId"
                :label="item.CaseName"
                :value="item.CaseId">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-select v-model="postData.typeid" placeholder="课程分类">
              <el-option
                key=""
                label=""
                value=""
              >
              </el-option>
              <el-option
                v-for="item in location"
                :key="item.LocationId"
                :label="item.LocationName"
                :value="item.LocationId">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-input
              placeholder="请输入课程名称"
              v-model="postData.name"
            >
            </el-input>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary" @click="search">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table
        :data="courses.list"
        stripe
        style="width: 100%">
        <el-table-column
          prop="CourseName"
          label="发布状态"
          width="150">
          <template slot-scope="scope">
            <label>{{scope.row.Status===1?'已发布':'未发布'}}</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="CourseName"
          label="课程名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="Price"
          label="课程价格"
          width="150">
        </el-table-column>
        <el-table-column
          label="课程类别"
          width="150">
          <template slot-scope="scope">
            <label>{{getLocationName(scope.row.LocationId)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          label="所在案场"
          width="150">
          <template slot-scope="scope">
            <label>{{getCaseName(scope.row.CaseId)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="BeginDate"
          label="课程开始时间"
          width="150">
          <template slot-scope="scope">
            <label>{{FormatDate(scope.row.BeginDate)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="EndDate"
          label="课程结束时间"
          width="150">
          <template slot-scope="scope">
            <label>{{FormatDate(scope.row.EndDate)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="600">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success">添加课程详情</el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.Status===0"
              >排课</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleCopy(scope.row)"
              >复制课程</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handlePublic(scope.row)"
              v-if="scope.row.Status===0"
              >发布</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleUnPublic(scope.row)"
              v-if="scope.row.Status===1"
              >取消发布</el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.Status===0"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              v-if="scope.row.Status===0"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="courses.page"
      :page-size="courses.pagesize"
      layout="prev, pager, next, jumper"
      :total="courses.pagenum">
    </el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapCourseState, mapActions: mapCourseActions } = createNamespacedHelpers('course')
const { mapState: mapLocationState, mapActions: mapLocationActions } = createNamespacedHelpers('cms')

export default {
  name: '',
  data () {
    return {
      total: 0,
      postData: { // 表格搜索条件
        caseid: '', // 案场id
        page: 1, // 当前页码
        pagesize: 10, // 请求数据量
        typeid: '', // 课程类型
        name: '', // 课程名称
      },
      courseTypeList: [],
    }
  },
  mounted () {
    this.updateLocationInfo({ pagesize: 100 })
    this.$nextTick(function () {
      this.getList()
    })
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    ...mapCourseState({
      courses: x => x.courseList,
    }),
    ...mapLocationState({
      location: x => x.location
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  methods: {
    ...mapCourseActions([
      'GetCourseList',
      'Public',
      'UnPublic',
      'DelCourse',
      'SetNull',
      'GetCourseByID'
    ]),
    ...mapLocationActions([
      'updateLocationInfo',
    ]),
    getLocationName (id) {
      return (this.location.filter(x => x.LocationId === id)[0] || {}).LocationName
    },
    getCaseName (id) {
      return (this.cases.filter(x => x.CaseId === id)[0] || {}).CaseName
    },
    FormatDate (date) {
      return this.toolClass.dateFormat(date, 'yyyy-mm-dd')
    },
    search () { // 搜索
      this.postData.page = 1
      this.currentList = []
      this.getList()
    },
    getList () { // 获取列表
      this.GetCourseList(this.postData)
    },
    handleCurrentChange (val) { // 跳转到分页
      this.getList()
    },
    handleEdit (index, row) { // 编辑
      this.$router.push({ name: 'addCourse', query: { id: row.CourseId } })
    },
    handleDelete (index, row) { // 删除
      this.$confirm('确认删除此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.DelCourse({id: row.CourseId, callback: this.delCallBack})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    actionCallBack () {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.getList()
    },
    delCallBack () {
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.getList()
    },
    addCourse () {
      this.SetNull()
      this.$router.push({ name: 'addCourse' })
    },
    handlePublic (row) {
      this.$confirm('确认发布此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.Public({ id: row.CourseId, callback: this.actionCallBack })
        })
    },
    handleUnPublic (row) {
      this.$confirm('确认取消发布此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.UnPublic({ id: row.CourseId, callback: this.actionCallBack })
        })
    },
    handleCopy (row) {
      this.GetCourseByID({ id: row.CourseId })
      this.$router.push({ name: 'addCourse' })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>