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="addDialogOpen">+  新增课程</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(1,scope.row)">详情</p>
              <p class="table-button-p" @click="controlsButton(2,scope.row)">编辑</p>
              <p class="table-button-p" @click="controlsButton(3,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>

    <el-dialog :title='dialogTitle' @close="dialogClose" :visible.sync="dialogType" v-if="dialogType" width="1373px">
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="80px">
        <el-form-item label="预案名称" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入预案名称" maxLength="15"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button style="width:100px;" type="primary" @click="dialogSubmit">配置规则</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'trainingCourse',
    data(){
      return{
        // 遮罩层
        loading: false,
        queryParams:{
          type:1,
          searchValue:"",
          page:1,
          pageSize:20,
        },
        tableData: [{}],
        total:10,
        dialogType:false,
        dialogTitle:"",
        dialogForm:{
          data1:"",
          data2:"",
          data3:"",
          data4:"",
          data5:"",
          data6:"",
          data7:"",
          data8:"",
          data9:"",
          data10:"",
          data11:"",
          data12:"",
        },
        rules:{}
      }
    },
    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;
        // });
      },
      //新增按钮
      addDialogOpen(){
        this.$set(this,'dialogTitle','添加');
        this.$set(this,'dialogType',true);
      },
      dialogSubmit(){

      },
      dialogClose(){
        this.$set(this,'dialogType',false);
      },
      //操作按钮
      controlsButton(type,row){
        if(type == 1){
          //查看详情
        }else if(type == 2){
          //编辑
          this.$set(this,'dialogTitle','编辑');
          this.$set(this,'dialogType',true);
        }else if(type == 3){
          //删除
        }
      }
    }
  }
</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>