colmo-admin/src/views/students/schoolTerm/list.vue

<template>
  <div class="body">
    <el-card class="box-card" shadow="never">
      学期名称：
      <el-input v-model="name" style="width: 200px; margin-right: 20px" />
      <div style="float:right">
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建学期</el-button>
      </div>
    </el-card>
    <el-table stripe :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="学期" />
      <el-table-column prop="state" label="状态" width="100">
        <template slot-scope="scope">
          {{ scope.row.state === 1 ? '发布' : '未发布' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100" width="280">
        <template slot-scope="scope">
          <el-button style="margin-right:1em" type="text" @click="toggleState(scope.row)">{{ scope.row.state === 1 ? '取消发布' : '发布' }}</el-button>
          <el-link :underline="false" style="margin-right:1em" type="primary">
            <router-link
              :to="{path:'schoolTerm/Edit',query: { termId: scope.row.termId }}"
            >编辑</router-link>
          </el-link>
          <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            title="确定要删除该学期吗？"
            @onConfirm="handleDelete(scope.row)"
          >
            <el-link slot="reference" :underline="false" type="danger">删除</el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="Total!==0"
      style="float:right; margin:20px 0"
      :total="Total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[pageSize, 20, 35,40,50,80,100]"
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { getSchoolTermList, deleteSchoolTerm, UpdateSchoolTerm } from '@/api/schoolTerm'
export default {
  data() {
    return {
      name: undefined,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      Total: 0 // 条目总数
    }
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    // 改变每页显示条数
    handleSizeChange(val) {
      this.pageSize = val
      this.changePagination()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.changePagination()
    },
    // 改变分页组件重新查询数据
    changePagination() {
      getSchoolTermList({
        name: this.name,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
      })
    },
    onSearch() {
      getSchoolTermList({
        name: this.name,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
        this.Total = res.data.total
      })
    },
    onReset() {
      this.name = undefined
      this.onSearch()
    },
    handleAdd() {
      this.$router.push({ path: 'schoolTerm/edit' })
    },
    toggleState(val) {
      if (val.state === 1) {
        this.$confirm('是否将本学期取消发布，取消后移动端将不再显示相关信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UpdateSchoolTerm({ ...val, state: 0 }, val.termId).then(() => {
            this.$message({
              type: 'success',
              message: '已取消发布!'
            })
            this.onSearch()
          })
        }).catch(() => {})
      } else {
        this.$confirm('是否将本学期发布，发布后移动端将显示相关信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UpdateSchoolTerm({ ...val, state: 1 }, val.termId).then(() => {
            this.$message({
              type: 'success',
              message: '发布成功!'
            })
            this.onSearch()
          })
        }).catch(() => {})
      }
    },
    handleDelete(row) {
      deleteSchoolTerm(row.termId).then(() => {
        this.onSearch()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>