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

<template>
  <el-dialog class="trainingCourseInfoDialog" :title='dialogTitle'
             :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
             :visible.sync="dialogType" v-if="dialogType" width="1161px">
    <div class="info-max-big-box" v-if="infoType == 1">
      <div class="info-big-box">
        <div>
          <p>课程名称：</p>
          <p>{{infoData.courseName}}</p>
        </div>
        <div>
          <p>是否开课：</p>
          <p>{{infoData.isStart==1?'已开课':'未开课'}}</p>
        </div>
      </div>
      <div class="info-big-box">
        <div>
          <p>主讲老师：</p>
          <p>{{infoData.lecturerName}}</p>
        </div>
        <div>
          <p>辅导老师：</p>
          <p>{{infoData.tutorName}}</p>
        </div>
      </div>
      <div class="info-big-box">
        <div>
          <p>上课人员：</p>
          <p class="color-p cursor-p" @click="pageTypeClick(2)">已选择学生 ({{infoData.userIds?infoData.userIds.length:0}}人)</p>
        </div>
        <div>
          <p>上课场所：</p>
          <p>{{infoData.place}}</p>
        </div>
      </div>
      <div class="info-big-box">
        <div>
          <p>上课日期：</p>
          <p>{{infoData.courseDate}}</p>
        </div>
        <div>
          <p>上课时间：</p>
          <p>{{infoData.courseTime}}</p>
        </div>
      </div>
      <div class="info-big-box-one">
        <p>课程内容：</p>
        <p>{{infoData.content?infoData.content:'无'}}</p>
      </div>
      <p class="info-big-box-title" v-if="infoData.isStart==1">课后总结</p>
      <div class="info-big-box-user" v-if="infoData.isStart==1">
        <p>签到人员：</p>
        <p @click="pageTypeClick(3)">
          <span>实际签到人数（{{infoData.actualCount}}人）</span>
          <span>、有{{infoData.notHaveCount}}人未签到</span>
          <span>、非计划内签到{{infoData.outPlanCount}}人</span>
        </p>
      </div>
      <div class="info-big-box-img" v-if="infoData.isStart==1" :class="!infoData.courseImg[0]?'info-big-box-img-margin-bottom':''">
        <p>上传照片：</p>
        <div>
          <p v-if="!infoData.courseImg[0]">无</p>
          <img v-for="(item,index) in infoData.courseImg" :key="index"
               @click="pageTypeClick(4,item,index)" :src="item">
        </div>
      </div>
      <div class="info-big-box-one" v-if="infoData.isStart==1">
        <p>课程总结：</p>
        <p>{{infoData.courseSm?infoData.courseSm:'无'}}</p>
      </div>
    </div>
    <div class="user-max-big-box" v-if="infoType == 2 || infoType == 3">
      <el-form class="form-box" :model="userQueryParams" ref="examineForm" :inline="true">
        <el-form-item label="" prop="nickName">
          <el-input
            style="width:150px;"
            maxlength="10"
            v-model="userQueryParams.nickName"
            placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="userQueryParams.isSing"
                     style="width:150px;"
                     placeholder="请选择启动条件">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.key"
              :label="dict.value"
              :value="dict.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否计划内" v-if="infoType == 3">
          <el-select v-model="userQueryParams.singType"
                     style="width:150px;"
                     placeholder="请选择启动条件">
            <el-option
              v-for="dict in projectOptions"
              :key="dict.key"
              :label="dict.value"
              :value="dict.key"
            ></el-option>
          </el-select>
        </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>
      <p class="sign-in-num">
        <span>签到人数：{{infoData.actualCount}}</span>
        <span>、未签到人数：{{infoData.notHaveCount}}</span>
        <span v-if="infoType == 3">、计划外签到人数：{{infoData.outPlanCount}}</span>
      </p>
      <el-table border :data="tableData" ref="multipleTable">
        <el-table-column label="序号"  width="50" align="center"  type="index"/>
        <el-table-column label="姓名" prop="nickName" show-overflow-tooltip/>
        <el-table-column label="导师" prop="tutorName" width="150" show-overflow-tooltip/>
        <el-table-column label="班级" prop="className" width="150" show-overflow-tooltip/>
        <el-table-column label="所在部门" prop="deptName" width="300" show-overflow-tooltip v-if="infoType == 2"/>
        <el-table-column label="所在部门" prop="deptName" width="150" show-overflow-tooltip v-if="infoType == 3"/>
        <el-table-column label="是否计划内" prop="singType" width="150" show-overflow-tooltip v-if="infoType == 3">
          <template slot-scope="scope">
            {{scope.row.singType == 1?'否':'是'}}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="isSing" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.isSing == 1?'已签到':'未签到'}}
          </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="userQueryParams.pageNum" :limit.sync="userQueryParams.pageSize"
                  @pagination="getList"/>
    </div>
    <div class="img-max-big-box" v-if="infoType == 4">
      <div class="look-img-box scrollbar-box">
        <img class="look-img" :src="lookUrl">
      </div>
    </div>
    <p class="position-off-button el-icon-close" @click="dialogClose"></p>
    <div slot="footer" class="img-button-box" v-if="infoType == 4">
      <p class="img-null-p"></p>
      <div class="img-button-min-box">
        <img v-for="(item,index) in infoData.courseImg" :key="index"
             :class="index==lookIndex?'lookImg':''"
             @click="lockImgButton(item,index)" :src="item">
      </div>
      <p class="img-null-p"></p>
    </div>
  </el-dialog>
</template>

<script>
  import { singList } from '@/api/trainingCourse/index'
  export default {
    name: 'trainingCourseInfoDialog',
    props:{
      infoDialogData:{},
    },
    data(){
      return{
        dialogTitle:"",
        dialogType:true,
        dialogUserType:false,
        //页面状态 1.详情 2.人员 3.照片
        infoType:1,
        //详情数据
        infoData:{},
        // 查看图片url
        lookUrl:null,
        // 查看图片index
        lookIndex:null,
        //人员查询相关
        userQueryParams:{
          pageNum:1,
          pageSize:20,
          nickName:"",
          isSing:'',
          singType:'',
        },
        typeOptions:[{key:'',value:"全部"},{key:"1",value:"已签到"},{key:"0",value:"未签到"}],
        projectOptions:[{key:'',value:"全部"},{key:"0",value:"是"},{key:"1",value:"否"}],
        tableData:[],
        total:0,
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      //初始化
      initialize(){
        this.$set(this,'dialogTitle','详情');
        let obj = {
          courseName:this.infoDialogData.courseName,
          isStart:this.infoDialogData.isStart,
          lecturerName:this.infoDialogData.lecturerName,
          tutorName:this.infoDialogData.tutorName,
          userIds:this.infoDialogData.userIds,
          place:(this.infoDialogData.subId && this.infoDialogData.subId!=-1)?this.infoDialogData.place+' , '+this.infoDialogData.subName:this.infoDialogData.place+' , '+this.infoDialogData.position,
          courseDate:this.infoDialogData.coStartDate,
          courseTime:this.infoDialogData.coStartTime+'至'+this.infoDialogData.coEndTime,
          content:this.infoDialogData.content,
          actualCount:this.infoDialogData.actualCount,
          notHaveCount:this.infoDialogData.notHaveCount,
          outPlanCount:this.infoDialogData.outPlanCount,
          courseImg:this.infoDialogData.courseImg?this.infoDialogData.courseImg.split(','):[],
          courseSm:this.infoDialogData.courseSm,
        }
        this.$set(this,'infoData',obj);
      },
      //页面状态切换
      pageTypeClick(type,item,index){
        if(this.infoType != type){
          this.$set(this,'dialogTitle',type == 2?'上课人员':(type == 3?'签到人员':(type == 4?'照片':'')));
          this.$set(this,'infoType',type);
          if(type == 2 || type == 3){
            this.resetForm();
          }else if(type == 4){
            this.$set(this,'lookUrl',item);
            this.$set(this,'lookIndex',index);
          }
        }
      },
      //查看图片切换
      lockImgButton(item,index){
        if(index != this.lookIndex){
          this.$set(this,'lookUrl',item);
          this.$set(this,'lookIndex',index);
        }
      },
      //页面取消按钮
      dialogClose(){
        if(this.infoType == 1){
          this.$parent.controlsButton(7)
        }else{
          this.$set(this,'dialogTitle','详情')
          this.$set(this,'infoType',1);
        }
      },
      //人员列表查询
      onSearch(){
        this.$set(this.userQueryParams,'pageNum',1);
        this.getList();
      },
      //人员列表重置
      resetForm(){
        let obj = {
          pageNum:1,
          pageSize:20,
          nickName:"",
          isSing:'',
          singType:'',
        }
        this.$set(this,'userQueryParams',obj);
        this.getList();
      },
      //获取人员列表
      getList(){
        let obj = {
          courseId:this.infoDialogData.id,
          pageNum:this.userQueryParams.pageNum,
          pageSize:this.userQueryParams.pageSize,
          nickName:this.userQueryParams.nickName,
          isSing:this.userQueryParams.isSing,
        }
        if(this.infoType == 3){
          obj.singType = this.userQueryParams.singType;
        }
        singList(obj).then( response => {
          this.$set(this,'tableData',response.rows);
          this.$set(this,'total',response.total);
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .trainingCourseInfoDialog{
    .info-max-big-box{
      height: 600px;
      .info-big-box:nth-child(1){
        margin-top:0;
      }
      .info-big-box{
        display: flex;
        margin:26px 79px 0;
        div{
          display: flex;
          p{
            font-size:16px;
            line-height:20px;
            color:#333;
          }
          p:nth-child(1){
            width:90px;
          }
          p:nth-child(2){
            flex:1;
          }
        }
        div:nth-child(1){
          width:486px;
          margin-right:79px;
        }
        div:nth-child(2){
          width:438px;
        }
      }
      .info-big-box-one{
        display: flex;
        margin:26px 79px 20px;
        p{
          font-size:16px;
          line-height:20px;
          color:#333;
        }
        p:nth-child(1){
          width:90px;
        }
        p:nth-child(2){
          flex:1;
        }
      }
      .info-big-box-title{
        padding:0 30px;
        font-size:18px;
        color:#333;
        line-height: 40px;
        background: #F5F5F5;
      }
      .info-big-box-user{
        display: flex;
        margin:26px 79px 0;
        p{
          font-size:16px;
          line-height:20px;
        }
        p:nth-child(1){
          width:90px;
        }
        p:nth-child(2){
          color:#0183fa;
          cursor: pointer;
        }
      }
      .info-big-box-img{
        display: flex;
        margin:26px 79px 0;
        p{
          font-size:16px;
          line-height:20px;
          width:90px;
        }
        div{
          img{
            width:160px;
            height:90px;
            margin-right:10px;
            border-radius:4px;
            cursor: pointer;
          }
        }
      }
      .cursor-p{
        cursor: pointer;
      }
      .color-p{
        color:#0183fa!important;
      }
    }
    .user-max-big-box{
      height: 600px;
      display: flex;
      flex-direction: column;
      padding:0 30px;
      .sign-in-num{
        background: rgba(1,131,250,0.2);
        color:#0183FA;
        line-height:40px;
        margin-bottom:20px;
        padding:0 14px;
      }
    }
    .img-max-big-box{
      height: 470px;
      .look-img-box{
        height:470px;
        overflow-x: hidden;
        img{
          width: 836px;
          margin:0 137px;
        }
      }
    }
    .position-off-button{
      position: absolute;
      right:20px;
      top:20px;
      cursor: pointer;
      font-size:20px;
    }

    .img-button-box{
      display: flex;
      .img-null-p{
        flex:1;
      }
      .img-button-min-box{
        display: flex;
        img{
          border:4px solid #fff;
          width:160px;
          height:90px;
          margin-right:10px;
          border-radius:4px;
          cursor: pointer;
        }
        .lookImg{
          border:4px solid #0183fa!important;
        }
      }
    }
  }
</style>