讲师的分页、条件查询、删除与添加

1.实现分页

上面成功展示了数据，但是还没有实现分页，下面来实现分页的过程。 有了element-ui，分页简直是太简单了。直接复用它的分页代码即可。在</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>

@current-change就是v-on:current-change,将页面切换功能与getList方法绑定起来，这样点击上一页、下一页是可以获得更新的数据。

如果想要根据页数获得数据，还要将getList()方法也要进行下改造，下面代码将传入page进行查询，page默认值为1.

 getList(page = 1) {
      this.page = page
      ...
 }

2.条件查询

在element-ui中也可以找到对应的组件。条件查询的组件放在el-table上。

    <!--多条件查询表单-->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin-left: 20px; margin-top: 12px;"
    >
      <el-form-item label="名称">
        <el-input
          v-model="teacherQuery.name"
          placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="级别">
        <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="特级讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-time-picker
          placeholder="选择开始时间"
          v-model="teacherQuery.begin"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          type="datetime"
        ></el-time-picker>
      </el-form-item>
      <el-form-item>
        <el-time-picker
          placeholder="选择截止时间"
          v-model="teacherQuery.end"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          type="datetime"
        ></el-time-picker>
      </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>

inline表示数据在一行显示。v-model是双向绑定数据。

来吧，展示。

那么怎么清空搜索的条件呢？这个业务其实有两件事要做：清空搜素框、查询全部数据。

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

4.讲师删除功能的前端实现

(1) ui实现

ui上的我们之前已经实现了，现在拿出来瞅一眼。其实就是写个button,绑定一个事件removeDataById,根据id获得这一行的数据.

<el-button type="danger"
           si***i"
           icon="el-icon-delete"
           @click="removeDataById(scope.row.id)">
           删除
</el-button>

在scipt中添加这个方法。

 // 删除
  removeDataById(id) {
    
  }

(2)接口定义

在teacher.js中开放前端的接口。

  removeTeacher(id) {
    return request({
      url: `/eduservice/edu-teacher/removeTeacher/${id}`,
      method: 'delete'
    })
  }

(3)调用接口

之前已经把teacher.js依赖引入了，现在直接进行调用就可以了。

  // 删除
  removeDataById(id) {
    teacher.removeTeacher(id)
    .then(
      response => {
        // 提示删除成功

        // 回到列表页面
        this.getList()
      })
    .catch(
      error => {
        
      })
  }

不过，您现在试下效果，就会发现点下删除数据就没了，嗖的一下很快啊，那要是不小心误点了咋办。完善下。

 removeDataById(id) {
        this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          teacher.removeTeacher(id)
          .then(() => { this.getList()})
          this.$message({
            type: 'success',
            message: '删除成功!'
          }) 
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })         
        })
 }

6.讲师添加

(1)teacher.js实现接口

 addTeacher(teacher) {
      return request({
        url: `/eduservice/edu-teacher/addTeacher`,
        method: 'post',
        data: teacher
      })
  }

(2)save.vue调用接口展示数据

<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="讲师名称">
                <el-input v-model="teacher.name" />
            </el-form-item>
            <el-form-item label="讲师排序">
                <el-input-number
                                 v-model="teacher.sort"
                                 controls-position="right"
                                 min="0"
                                 />
            </el-form-item>
            <el-form-item label="讲师头衔">
                <el-select v-model="teacher.level" clearable placeholder="选择讲师头衔">
                    <!--
                      数据类型一定要和取出的json中的一致，否则没法回填
                      因此，这里value使用动态绑定的值，保证其数据类型是number
                    -->
                    <el-option :value="1" label="高级讲师" />
                    <el-option :value="2" label="首席讲师" />
                </el-select>
            </el-form-item>
            <el-form-item label="讲师资历">
                <el-input v-model="teacher.career" />
            </el-form-item>
            <el-form-item label="讲师简介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea" />
            </el-form-item>
            <!-- 讲师头像：TODO -->
            <el-form-item>
                <el-button
                           :disabled="saveBtnDisabled"
                           type="primary"
                           @click="saveOrUpdate"
                           >保存</el-button
                    >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 调用teacher.js
import teacher from '@/api/edu/teacher'
export default {
  data() { // 定义变量及初始化数据
    return {
      teacher:{
        name:"",
        sort:0,
        level:1,
        career:"",
        intro:""
      },
      saveBtnDisabled: false //save的button是否禁用，避免重复保存
    }
  },
  created() {

  },
  methods: {
  saveOrUpdate(){
    this.saveBtnDisabled = true,
    this.addTeacher()
  },
   addTeacher(){
     teacher.addTeacher(this.teacher)
     .then(
       () => {
         this.$message({
            type: 'success',
            message: '添加讲师成功!'
            }) 
         this.$router.push({ path:'/teacher/table' }) // 页面路由
       })
   }
  }
}
</script>

不过新增加的数据不一定在第一行，可能还要翻页，这不友好。在后端接口中pageTeacherCondition()新增排序功能。

//  排序
wrapper.orderByAsc("gmt_create");