<template> <div class="user"> <el-form ref="searchFrom" :model="searchFrom" label-width="100px" inline="" class="search-form"> <el-form-item label="课程标题"> <el-input v-model="searchFrom.title"></el-input> </el-form-item> <el-form-item label=""> <div class="search-btn-block"> <el-button type="primary" plain @click="getUser" icon="el-icon-search">搜索</el-button> <el-button type="success" plain @click="add" v-if="!$store.state.readonly" icon="el-icon-plus">新增课程</el-button> </div> </el-form-item> </el-form> <el-tabs v-model="searchFrom.type" type="card" style="background: white;padding-top: 10px" @tab-click="getUser"> <el-tab-pane label="全部" name="-1"></el-tab-pane> <el-tab-pane label="日课" name="1"></el-tab-pane> <el-tab-pane label="月课" name="0"></el-tab-pane> </el-tabs> <el-table :data="userList" style="width: 100%"> <el-table-column prop="title" label="课程名"> <template slot-scope="scope"> <router-link :to="{name:'periods', query: { id: scope.row.id}}" > {{scope.row.title}} </router-link> </template> </el-table-column> <el-table-column label="课程类型"> <template slot-scope="scope"> {{scope.row.type | lessonType}} </template> </el-table-column> <el-table-column prop="theme_num" label="主题数"> </el-table-column> <el-table-column prop="sing_num" label="歌曲数"> </el-table-column> <el-table-column prop="item_num" label="实体包数量"> </el-table-column> <el-table-column width="250" label="操作"> <template slot-scope="scope"> <el-button size="mini" plain type="primary" @click="detail(scope.row)"> 查看详情 </el-button> <el-button size="mini" plain type="warning" @click="edit(scope.row)" v-if="!$store.state.readonly"> 编辑 </el-button> <el-button size="mini" plain type="danger" @click="delTeacher(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly"> 删除 </el-button> </template> </el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getUser"/> </div> </template> <script> import {getLessonApi,deleteLessonAPI} from "../../service/api"; import page from '../framework/page' import dialogCom from './dialog' import {LESSONTYPE} from "../../util/wordbook"; export default { name: "index", data(){ return { searchFrom:{ title:'', type:'-1' }, userList:[], total:0, nowPage:1, limit: 10, dialogObj:{ type:0, show:false, id:'' }, } }, components:{ page, dialogCom }, filters:{ lessonType(value){ return LESSONTYPE[value] } }, mounted(){ this.getUser() }, methods:{ onPageChange(val){ this.nowPage = val this.getUser() }, onSizeChange(val){ this.limit = val this.nowPage = 1 this.getUser() }, getUser(){ this.searchFrom.page = this.nowPage; let json = { limit: this.limit, page: this.nowPage } if (this.searchFrom.title) { json.title = this.searchFrom.title } if (this.searchFrom.type && this.searchFrom.type !== '-1') { json.type = this.searchFrom.type } getLessonApi(json).then(res=>{ this.userList = res.list; this.total = res.total }) }, edit(data){ this.dialogObj = { type:1, show:true, id:data.id, title:'编辑课程' }; }, add(){ this.dialogObj = { type:0, show:true, id:'', title:'新增课程' } }, detail(data){ this.dialogObj.id = data.id; this.dialogObj.type = 1; this.dialogObj.show = true; this.dialogObj.read = true; }, delTeacher(data){ this.$confirm('此操作将删除该课程?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteLessonAPI(data.id).then(res=>{ this.$message({ type: 'success', message: '删除成功!' }); this.getUser() }); }); }, changeShow(data){ this.dialogObj.show=data }, } } </script> <style scoped lang="less"> @import "../../util/public"; .el-form-item{ margin: 0; } .user{ height: 100%; overflow: auto; padding: 20px 0; .btn-content{ text-align: center; } } </style>