v3-lab-web/src/views/safetyEducationExam/trainingCourse/index.vue

<template>
  <div class="app-container trainingCourse">
    <div class="page-container">
      <div class="page-form-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(null)" :class="queryParams.isStart == null?'check-p':''">全部</p>
              <p @click="queryTypeClick(0)" :class="queryParams.isStart == 0?'check-p':''">待开课</p>
              <p @click="queryTypeClick(1)" :class="queryParams.isStart == 1?'check-p':''">已开课</p>
            </div>
          </el-form-item>
          <el-form-item label="" prop="deptId" label-width="50px">
            <el-select style="width:200px;" v-model="queryParams.deptId" placeholder="请选择学院" clearable>
              <el-option
                v-for="dict in deptList"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </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="page-inquire-common-style-button" @click="onSearch">查询</p>
            <p class="page-reset-common-style-button" @click="resetForm">重置</p>
          </el-form-item>
          <p class="page-submit-common-style-button" style="float: right;" @click="controlsButton(1)"
             v-hasPermiRouter="['exam:security:add']">新增课程</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" border :data="tableData" ref="multipleTable">
          <el-table-column label="序号"  width="50" align="center"  type="index"/>
          <el-table-column label="课程名称" prop="courseName" show-overflow-tooltip/>
          <el-table-column label="学院" prop="place" width="180" show-overflow-tooltip/>
          <el-table-column label="上课地点" prop="position" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{(scope.row.subId && scope.row.subId !=-1)?scope.row.subName+'-'+scope.row.subRoom:scope.row.position}}
            </template>
          </el-table-column>
          <el-table-column label="主讲老师" prop="lecturerName" width="100" show-overflow-tooltip/>
          <el-table-column label="辅导老师" prop="tutorName" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.tutorName | tutorNameFilters}}</span>
            </template>
          </el-table-column>
          <el-table-column label="人数" prop="peopleCount" width="80" show-overflow-tooltip/>
          <el-table-column label="上课时间" prop="coStartDate" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.coStartTime}} - {{scope.row.coEndTime}}
            </template>
          </el-table-column>
          <el-table-column label="上课日期" prop="coStartDate" width="200" show-overflow-tooltip/>
          <el-table-column label="状态" prop="mainPoint" width="112" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.isStart == 1?'已开课':'待开课'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="200" show-overflow-tooltip v-if="tableButtonType">
            <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)"
                   v-hasPermiRouter="['exam:security:detail']"
                >详情</p>
                <p class="table-button-p"
                   @click="controlsButton(2,scope.row)"
                   v-hasPermiRouter="['exam:security:detail','exam:security:edit']"
                >编辑</p>
                <p class="table-button-p"
                   @click="controlsButton(4,scope.row)"
                   v-hasPermiRouter="['exam:security:del']"
                >删除</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>
    </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'
  import {
    examSecuritycourseDel,
    examSecuritycourseList,
    securitycourseDel,
    securitycourseInfo
  } from "@/api/safetyEducationExam/index";
  import { getDeptDropList } from "@/api/commonality/permission";
  export default {
    name: 'trainingCourse',

    filters: {
      tutorNameFilters(params){
          let list=params.split(',');
          let tutorNameList=[];
          let secondaryTeacherList = [];
          list.forEach(function(item){
            tutorNameList.push(item.split('@')[1])
          })
          return  tutorNameList.join(',')
      }
    },
    components: {
      addDialog,
      infoDialog
    },
    data(){
      return{
        tableButtonType:this.hasPermiDom(['exam:security:add','exam:security:detail','exam:security:edit','exam:security:del']),
        // 遮罩层
        loading: false,
        //查询数据
        queryParams:{
          isStart:null,
          searchValue:"",
          deptId:"",
          page:1,
          pageSize:20,
        },
        //列表数据
        tableData: [],
        total:0,
        //新增弹窗数据
        addDialogType:false,
        addDialogData:{},
        //详情弹窗数据
        infoDialogType:false,
        infoDialogData:{},
        //学院数据
        deptList:[],
      }
    },
    created(){

    },
    mounted(){
      this.getList();
      this.filterDept();
    },
    methods:{
      //列表状态切换
      queryTypeClick(type){
        if(this.queryParams.isStart != type){
          this.$set(this.queryParams,'isStart',type);
          this.getList();
        }
      },
      //获取学院
      filterDept(){
        getDeptDropList({deptType:1}).then(response => {
          this.deptList = response.data;
        });
      },
      //列表搜索
      onSearch(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //列表重置
      resetForm(){
        this.$set(this,'queryParams',{
          isStart:null,
          searchValue:"",
          page:1,
          pageSize:20,
        });
        this.onSearch();
      },
      // 查询数据列表
      getList() {
        this.loading = true;
        examSecuritycourseList(this.queryParams).then( response => {
          this.$set(this,'tableData',response.data.records);
          this.$set(this,'total',response.data.total);
          this.loading = false;
        });
      },
      //操作按钮
      controlsButton(type,row){
        if(type == 1){
          //新增
          this.$set(this,'addDialogData',{});
          this.$set(this,'addDialogType',true);
        }else if(type == 2){
          //编辑
          securitycourseInfo(row.id).then( response => {
            this.$set(this,'addDialogData',response.data);
            this.$set(this,'addDialogType',true);
          });
        }else if(type == 3){
          //详情
          securitycourseInfo(row.id).then( response => {
            this.$set(this,'infoDialogData',response.data);
            this.$set(this,'infoDialogType',true);
          });
        }else if(type == 4){
          //删除
          let self = this;
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            let ids=[row.id];
            examSecuritycourseDel({ids:ids}).then(response => {
              self.msgSuccess(response.message)
              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{
    .query-type-box{
      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;
      }
    }
  }
</style>