谷粒学院92——课程列表功能

需求如下图。与之前的讲师列表内容基本是一致的。

先来实现最简单的部分:数据的展示。EduCourseController类。

   // 课程列表
    // Todo 完善成条件查询带分页功能
    @GetMapping("/getCourseList")
    public R getCourseList() {
        List<EduCourse> courseList = eduCourseService.list(null);
        return R.ok().data("list", courseList);
    }

前端接口部分。course.js.

 // 课程列表
  // Todo 
  getCourseList() {
    return request({
      url:"/eduservice/edu-course/getCourseList",
      method: 'get'
  })
  }

咱们拿着讲师列表过来快速改下。

<template>
  <div>
        <!--多条件查询表单-->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin-left: 20px; margin-top: 12px;"
    >
      <el-form-item label="课程标题">
        <el-input
          v-model="courseQuery.title"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-select v-model="courseQuery.status" placeholder="课程状态">
          <el-option label="已发布" :value='Normal'></el-option>
          <el-option label="未发布" :value='Draft'></el-option>
        </el-select>
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()"
          >查询</el-button
        >
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      style="width: 100%"
      border
      fit
      highlight-current-row
      element-loading-text="数据加载中"
      v-loading="listLoading"
    >
      <el-table-column prop="number" label="序号" width="120" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="课程名称" width="280"> </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status === 'Normal' ? "已发布" : "未发布" }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120" />
      <el-table-column prop="gmtCreate" label="添加时间" width="160" />
      <el-table-column prop="lessonNum" label="课时数" width="120" />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/course/edit/' + scope.row.id">
            <el-button type="primary" si***i" icon="el-icon-edit"
              >章节编辑</el-button>
               <el-button type="primary" si***i" icon="el-icon-edit"
              >小节编辑</el-button>
          </router-link>
          <el-button
            type="danger"
            si***i"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)">删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
               background
               layout="prev, pager, next,total,jumper"
               :total="total"
               :page-size="limit"
               style="padding: 30px 0; text-align: center"
               :current-page="page"
               @current-change="getList"
               >
    </el-pagination>

  </div>
</template>

<script>
// 调用course.js
import course from '@/api/edu/course'
export default {
  data() { // 定义变量及初始化数据
    return {
      page:1, //当前页
      limit:10,
      list:null, // 查询返回的记录集
      courseQuery:{}, // 查询的条件
      total:0 //总记录数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 条件查询带分页 
    getList() {
      course.getCourseList()
      .then(
        response => {
          this.list =  response.data.list
      })
      .catch(
        error => {
          console.log(error)
      })
    },

  // 清空搜索条件
  resetData() {
    // 清空搜索框
   this.teacherQuery = {}
   // 显示全部表单数据
   this.getList()
  }

 
  }
}
</script>

看起来凑合着能看。这里暂时实现到这个程度，后续有时间进一步来完善。