FE-V2-PC/src/views/safetyEducationExam/trainingCourse/index.vue

<template>
  <div class="app-container trainingCourse">
    <div class="title-box">
      <el-form class="form-box" :model="queryParams" ref="examineForm" :inline="true" label-width="65px">
        <el-form-item label="" prop="name">
          <div class="query-type-box">
            <p @click="queryTypeClick(1)" :class="queryParams.type == 1?'check-p':''">全部</p>
            <p @click="queryTypeClick(2)" :class="queryParams.type == 2?'check-p':''">待开课</p>
            <p @click="queryTypeClick(3)" :class="queryParams.type == 3?'check-p':''">已开课</p>
          </div>
        </el-form-item>
        <el-form-item label="关键字" prop="name">
          <el-input
            maxlength="10"
            v-model="queryParams.searchValue"
            placeholder="课程名称/主讲老师"
            clearable
            size="small"/>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="onSearch">查询</p>
          <p class="reset-button-one" @click="resetForm">重置</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <p class="inquire-button-one" style="width:100px;" @click="controlsButton(1)">+  新增课程</p>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-box">
      <el-table border :data="tableData" ref="multipleTable">
        <el-table-column label="序号" prop="code" width="50"/>
        <el-table-column label="课程名称" prop="name" show-overflow-tooltip/>
        <el-table-column label="学院" prop="mainPoint" width="180" show-overflow-tooltip/>
        <el-table-column label="主讲老师" prop="mainPoint" width="100" show-overflow-tooltip/>
        <el-table-column label="辅导老师" prop="mainPoint" width="100" show-overflow-tooltip/>
        <el-table-column label="辅导老师" prop="mainPoint" width="100" show-overflow-tooltip/>
        <el-table-column label="人数" prop="mainPoint" width="80" show-overflow-tooltip/>
        <el-table-column label="上课时间" prop="mainPoint" width="150" show-overflow-tooltip/>
        <el-table-column label="上课日期" prop="mainPoint" width="200" show-overflow-tooltip/>
        <el-table-column label="状态" prop="mainPoint" width="112" show-overflow-tooltip/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p" @click="controlsButton(3,scope.row)">详情</p>
              <p class="table-button-p" @click="controlsButton(2,scope.row)">编辑</p>
              <p class="table-button-p" @click="controlsButton(4,scope.row)">删除</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]" v-show="total>0" :total="total"
                  layout="total, prev, pager, next, sizes, jumper"
                  :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>
    <!--添加/编辑弹窗-->
    <add-dialog v-if="addDialogType" :addDialogData="addDialogData"></add-dialog>
    <info-dialog v-if="infoDialogType" :infoDialogData="infoDialogData"></info-dialog>
  </div>
</template>

<script>
  import addDialog from './addDialog.vue'
  import infoDialog from './infoDialog.vue'
  export default {
    name: 'trainingCourse',
    components: {
      addDialog,
      infoDialog
    },
    data(){
      return{
        // 遮罩层
        loading: false,
        //查询数据
        queryParams:{
          type:1,
          searchValue:"",
          page:1,
          pageSize:20,
        },
        //列表数据
        tableData: [{ id:"123", }],
        total:10,
        //新增弹窗数据
        addDialogType:false,
        addDialogData:{},
        //详情弹窗数据
        infoDialogType:false,
        infoDialogData:{},
      }
    },
    created(){

    },
    mounted(){
      this.getList();
    },
    methods:{
      //列表状态切换
      queryTypeClick(type){
        if(this.queryParams.type != type){
          this.$set(this.queryParams,'type',type);
          this.getList();
        }
      },
      //列表搜索
      onSearch(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //列表重置
      resetForm(){
        this.$set(this,'queryParams',{
          type:1,
          searchValue:'',
          page:1,
          pageSize:20,
        });
        this.onSearch();
      },
      // 查询数据列表
      getList() {
        this.loading = true;
        // checkOptionList(this.queryParams).then( response => {
        //
        //   this.loading = false;
        // });
      },
      //操作按钮
      controlsButton(type,row){
        if(type == 1){
          //新增
          this.$set(this,'addDialogData',{});
          this.$set(this,'addDialogType',true);
        }else if(type == 2){
          //编辑
          this.$set(this,'addDialogData',row);
          this.$set(this,'addDialogType',true);
        }else if(type == 3){
          //详情
          this.$set(this,'infoDialogType',true);
          this.$set(this,'infoDialogData',row);
        }else if(type == 4){
          //删除
          let self = this;
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            // checkPlanDelete({id:row.id}).then(response => {
            //   self.msgSuccess(response.msg)
            //   self.getList();
            // })
          }).then(() => {
          }).catch(() => {});
        }else if(type == 5){
          //关闭新增&编辑窗口
          this.$set(this,'addDialogType',false);
          this.$set(this,'addDialogData',{});
        }else if(type == 6){
          //关闭新增&编辑窗口 并刷新页面
          this.$set(this,'addDialogType',false);
          this.$set(this,'addDialogData',{});
          this.resetForm();
        }else if(type == 7){
          //关闭详情窗口
          this.$set(this,'infoDialogType',false);
          this.$set(this,'infoDialogData',{});
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .trainingCourse{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    font-weight: 500;
    .title-box{
      padding-top:20px;
      .form-box{
        border-bottom:1px solid #E0E0E0;
        .query-type-box{
          margin-left:20px;
          display: flex;
          p{
            line-height:40px;
            font-size:14px;
            color:#333;
            width:80px;
            text-align: center;
            cursor: pointer;
          }
          p:nth-child(1){
            border:1px solid #E0E0E0;
            border-radius: 4px 0 0 4px
          }
          p:nth-child(2){
            border-top:1px solid #E0E0E0;
            border-bottom:1px solid #E0E0E0;
          }
          p:nth-child(3){
            border:1px solid #E0E0E0;
            border-radius: 0 4px 4px 0
          }
          .check-p{
            color:#fff;
            background: #0045AF;
            border-color:#0045AF!important;
          }
        }
      }
    }
    .content-box{
      flex:1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding:20px;
    }
  }
</style>