yfadmin_web/src/views/classes/Index.vue

<style lang="scss">
    .apply{
       .filter{
            background: #fff;
            padding: 20px 20px 10px; 
            border:1px solid #EDEDED;
            border-radius:2px;
            margin-bottom: 10px;
            margin-top: 10px;
            .el-form-item{
                margin-bottom: 10px;
            }
            .el-input,.el-select{
                width: 150px;
            }
    
       }
       thead{
           th{
               background: #eee;
           }
       }
    }
    .table{
        button{
            padding:6px;
        }
    }
    .el-table__fixed-right::before, .el-table__fixed::before{
        background: none;
    }
</style>
<template>
    <section class="apply">
        <p>培训计划  >  班级管理</p>
        <div class="filter">
            <el-form label-width="80px" :inline="true" size="small">
                <el-form-item label="班级名称">
                        <el-input clearable placeholder="班级名称" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="类别">
                    <Subject @subChange='subChange'/>
                </el-form-item>
             
                <el-form-item>
                       <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button>
                       <el-button @click="$router.push({path:'/classes/add'})"  type="primary">新增</el-button>
                </el-form-item>
            </el-form>
        </div>


        <el-table
                class="table"
                :data="list" height="450px"
                border  v-loading="loading"
                style="width: 100%">
                <!-- <el-table-column
                type="selection" fixed="left"
                width="55">
                </el-table-column> -->
                <el-table-column
                prop="name"  width="200"
                label="班级名称">
                </el-table-column>
                <el-table-column
                prop="subject_item" width="300"
                label="培训项目">
                </el-table-column>
                <el-table-column
                prop="signup_limit" width="80"
                label="计划人数">
                </el-table-column>
                <el-table-column
                prop="signuped_count" width="100"
                label="已报名人数">
                </el-table-column>
                <el-table-column
                prop="remark"
                label="备注">
                </el-table-column>
                <el-table-column
                prop="ctime"  width="200"
                label="创建时间">
                </el-table-column>
                <el-table-column fixed="right"
                prop="zip"  width="200"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="download(scope.row.id)" size="mini"  type="success">导出学员</el-button>
                    <el-button @click="$router.push({path:'/classes/add',query:{id:scope.row.id}})" size="mini" type="warning">编辑</el-button>
                    <el-button @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
                </template>
                </el-table-column>
        </el-table>
        <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
    </section>
</template>
<script>
import Page from '../../components/Page';
import Subject from '../../components/Subject';
export default {
  components:{
        Page,Subject
    },
  data(){
    return{
      form:{name:'',page:1,page_size:20},
      activeName:"1",
      total:1,
      list:[],
      loading:false
    }
  },
  methods:{
      gopage(size){
          if(size){
              this.form.page_size=size
          }
            this.form.page=this.$refs.pageButton.page
            this.getData()
      },
      getData(){
          var parm=this.form;
          this.loading=true
          this.$api.getClass(parm).then(res=>{
              this.list=res.data.data.list
              this.total=res.data.data.total
              this.loading=false
          })
      },
      subChange(data){
          this.form.subject_item=data.join('|')
      },
      del(id){
            this.$confirm('确定删除吗', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.deleteClass({id:id}).then((res)=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getData()
                })
            })
      },
      download(id){
          this.$api.downloadClassUser({id:id}).then(res=>{
                        var elink = document.createElement('a');
                        let blob=new Blob([res.data], {type: 'application/xls'});
                        let objUrl=URL.createObjectURL(blob);
                        let file_name=res.headers['content-disposition'].split('=')[1];
                        elink.download = file_name;
                        elink.style.display = 'none';                
                        elink.href = objUrl;
                        document.body.appendChild(elink);
                        elink.click();
                        document.body.removeChild(elink);     
          })
      }
  },
  created(){
      this.getData()
  }
}
</script>