safetyEducationExamination/src/views/safetyEducationExaminationNew/safetyEducation/knowledgeLearning/index.vue

<!-- 知识学习 -->
<template>
  <div class="app-container knowledgeLearning">
    <div class="page-container knowledgeLearningPage">
      <p class="pageTitle" v-if="!examName">知识学习</p>
      <p class="pageTitle" v-if="examName"><span style="font-weight:700;margin-right:40px;">{{examName}}学时任务</span><span style="font-size:14px;color:#0183fa;">当前学时完成进度  {{completedStudyHours}} / {{studyHoursRequirement}} 学时</span></p>
      <div class="max-big-box">
        <div class="left-box scrollbar-box">
          <p @click="leftCheckButton(index)"
            v-for="(item,index) in letDataList" :key="index"
            class="left-for-p" :class="index==leftDataIndex?'leftCheck':''">
            {{item.knowledgePointName}}
          </p>
        </div>
        <div class="right-box">
          <div class="page-form-title-box">
            <el-form :model="queryParams" class="form-box" ref="queryForm"
                     :inline="true" style="width:100%;">
              <div class="table-top-button-box-2">
                <div>
                  <p :class="topButtonIndex == 1?'check-table-button':''" @click="topCheckButton(1)">视频资源</p>
                  <p :class="topButtonIndex == 2?'check-table-button':''" @click="topCheckButton(2)">文档文章</p>
                </div>
              </div>
              <div class="table-top-button-box">
                <div>
                  <p :class="learnStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
                  <p :class="learnStatus === 0?'check-table-button':''" @click="tableTypeButton(0)">未学习</p>
                  <p :class="learnStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">学习中</p>
                  <p :class="learnStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">已学完</p>
                </div>
              </div>
              <el-form-item label="" prop="knowledgePointId" v-if="!this.knowledgePointIds[0]">
                <el-cascader
                  v-model="queryParams.knowledgePointId"
                  :options="optionListB"
                  :props="{
                emitPath:false,
                checkStrictly: true,
                value: 'id',
                label: 'knowledgePointName',
                children: 'children',
              }"
                  style="width: 180px"
                  :show-all-levels="false"
                  filterable
                  placeholder="知识点"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="" prop="disciplineTypeId">
                <el-select v-model="queryParams.disciplineTypeId" placeholder="知识分类" style="width: 200px">
                  <el-option
                    v-for="dict in disciplineOptionList"
                    :key="dict.id"
                    :label="dict.disciplineName"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="coursewareName">
                <el-input
                  maxLength="30"
                  v-model="queryParams.coursewareName"
                  placeholder="搜索名称"
                  style="width: 200px"
                />
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
              <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            </el-form>
          </div>
          <div class="page-content-box">
            <div class="for-max-big-box scrollbar-box">
              <p class="null-text-p" v-if="!dataList[0]">暂无数据</p>
              <div class="for-big-box" v-for="(item,index) in dataList" :key="index" @click="tableButton(item)">
                <img v-if="item.materialType == 1&&item.exampleImg" :src="item.exampleImg">
                <img v-else src="@/assets/ZDimages/basicsModules/image_986222064626770.png">
                <div class="bottom-big-box">
                  <p class="name-p">{{item.coursewareName}}</p>
                  <p class="time-p">{{secondsToMinutes(item.minLearningDuration)}}分钟 丨 {{item.creditHours}}学时 丨 {{item.points}}积分</p>
                </div>
                <p class="type-p" :class="item.learnStatus=='0'?'type-p-1':(item.learnStatus=='1'?'type-p-2':(item.learnStatus=='2'?'type-p-3':''))">{{item.learnStatus=='0'?'未学习':(item.learnStatus=='1'?'学习中':(item.learnStatus=='2'?'已学完':''))}}</p>
              </div>
            </div>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { Encrypt,Decrypt} from '@/utils/secret'
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  import {
    examUserCoursewareLearningList,examElKnowledgePointTreeList,
    examUserCoursewareLearningRestart,examElDisciplineTypeList,
  } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'index',
    //components: {
    //  addPage
    //},
    data() {
      return {
        letDataList:[],
        leftDataIndex:0,
        topButtonIndex:1,
        //下拉列表数据
        optionListB: [],
        disciplineOptionList:[],
        //查询条件
        learnStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          knowledgePointId: '',
          disciplineTypeId: '',
          coursewareName: null
        },
        //列表数据
        dataList: [],
        //数据数量
        total: 0,
        //跳转逻辑数据
        examName:'',
        knowledgePointIds:[],
        completedStudyHours:0,
        studyHoursRequirement:0,
      }
    },
    created() {

    },
    mounted() {
      if(this.$route.query.skipType){
        this.$set(this,'topButtonIndex',this.$route.query.skipType);
        this.$set(this.queryParams,'disciplineTypeId',this.$route.query.disciplineId);
      }
      if(this.$route.query.text){
        let obj = JSON.parse(Decrypt(this.$route.query.text));
        this.$set(this,'examName',obj.examName);
        this.$set(this,'knowledgePointIds',obj.knowledgePointIds);
        this.$set(this,'completedStudyHours',obj.completedStudyHours);
        this.$set(this,'studyHoursRequirement',obj.studyHoursRequirement);
      }
      if(sessionStorage.getItem('skipQueryParamsData')){
        let skipQueryParamsData = JSON.parse(sessionStorage.getItem('skipQueryParamsData'))
        this.$set(this,'queryParams',skipQueryParamsData.queryParams);
        this.$set(this,'leftDataIndex',skipQueryParamsData.leftDataIndex);
        this.$set(this,'topButtonIndex',skipQueryParamsData.topButtonIndex);
        this.$set(this,'learnStatus',skipQueryParamsData.learnStatus);
        sessionStorage.removeItem('skipQueryParamsData');
      }
      this.examElKnowledgePointTreeList();
      this.examElDisciplineTypeList();
    },
    methods: {
      //左侧列表切换
      leftCheckButton(index){
        if(this.leftDataIndex != index){
          this.$set(this,'leftDataIndex',index);
          this.$set(this.queryParams, 'knowledgePointId', null);
          this.$set(this, 'optionListB', this.letDataList[index].children?this.letDataList[index].children:[]);
          this.handleQuery();
        }
      },
      //顶部切换
      topCheckButton(index){
        if(this.topButtonIndex != index){
          this.$set(this,'topButtonIndex',index);
          this.handleQuery();
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.learnStatus !== val){
          this.$set(this,'learnStatus',val);
          this.handleQuery();
        }
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this,'learnStatus','');
        this.$set(this,'topButtonIndex',1);
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          knowledgePointId: '',
          disciplineTypeId: '',
          coursewareName: null
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(!this.queryParams.knowledgePointId){
          obj.knowledgePointId = this.letDataList[this.leftDataIndex].id
        }
        obj.materialType = this.topButtonIndex;
        obj.learnStatus = this.learnStatus;
        examUserCoursewareLearningList(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(item) {
        let self = this;
        if(item.learnStatus == 2){
          this.$confirm('该课件已学完,是否重置进度重新学习?', "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            examUserCoursewareLearningRestart({coursewareId:item.coursewareId}).then(response => {
              self.$router.push({
                path: '/learningMaterials',
                query: {
                  coursewareId: item.coursewareId,
                }
              })
            });
          }).catch(() => {});
        }else{
          this.$router.push({
            path: '/learningMaterials',
            query: {
              coursewareId: item.coursewareId,
            }
          })
        }
      },
      examElKnowledgePointTreeList(){
        let obj = {
          knowledgePointIds : this.knowledgePointIds,
          dataScope:1,
        };
        examElKnowledgePointTreeList(obj).then(response => {
          const list = response.data || [];
          this.formatTreeData(list);
          if(this.knowledgePointIds[0]){
            this.$set(this, 'letDataList', list);
            this.$set(this, 'optionListB', list[0].children?list[0].children:[]);
          }else{
            this.$set(this, 'letDataList', [{knowledgePointName:'全部',id:''},...list]);
          }
          this.getList();
        });
      },
      //查询全部专业类别
      examElDisciplineTypeList(){
        examElDisciplineTypeList({}).then(response => {
          this.$set(this,'disciplineOptionList',response.data);
        });
      },
      //换算分钟
      secondsToMinutes(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return 1;
        }
        return Math.ceil(totalSeconds / 60);
      },
    },
    beforeRouteLeave(to, from, next) {
      if (to.name === 'learningMaterials') {
        const skipQueryParamsData = {
          queryParams: this.queryParams,
          leftDataIndex: this.leftDataIndex,
          topButtonIndex: this.topButtonIndex,
          learnStatus: this.learnStatus,
        };
        sessionStorage.setItem('skipQueryParamsData', JSON.stringify(skipQueryParamsData));
      } else {
        sessionStorage.removeItem('skipQueryParamsData');
      }
      next(); // 必须调用 next() 放行路由
    },
  }
</script>
<style scoped lang="scss">
  .knowledgeLearning {
    .knowledgeLearningPage {
      .pageTitle{
        height:60px;
        line-height:60px;
        padding:0 20px;
        border-bottom:1px solid #dedede;
      }
      .max-big-box{
        flex:1;
        display: flex;
        overflow: hidden;
        .left-box{
          width:200px;
          border-right:1px solid #dedede;
          padding:20px 0 ;
          .left-for-p{
            margin:5px 0;
            padding:0 20px;
            text-align: center;
            border-left:6px solid #ffffff;
            cursor: pointer;
            font-weight:700;
            font-size:16px;
            line-height:40px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          .left-for-p:hover{
            background-color: #0183fa;
            color: #ffffff;
          }
          .leftCheck{
            color: #fff;
            background-color: #0183fa;
            /*border-right:4px solid #0183fa;*/
          }
        }
        .right-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .top-max-button-box{
            display: flex;
            margin:20px 0 0 20px;
            p{
              width:120px;
              line-height:40px;
              border-radius:4px;
              color:#333;
              border:1px solid #333;
              text-align: center;
              margin-right:20px;
              cursor: pointer;
            }
            .top-check-button{
              border:1px solid #0183fa;
              background-color: #0183fa;
              color:#fff;
            }
          }
          .table-top-button-box-2{
            display: inline-block;
            vertical-align: top;
            margin-right:10px;
            div{
              display: flex;
              p{
                border:1px solid #DCDFE6;
                width:100px;
                text-align: center;
                height:40px;
                line-height:40px;
                cursor: pointer;
                font-size:14px;
              }
              p:nth-child(1){
                border-top-left-radius:4px;
                border-bottom-left-radius:4px;
                border-right:none;
              }
              p:nth-child(2){
                border-left:none;
                border-top-right-radius:4px;
                border-bottom-right-radius:4px;
              }
              .check-table-button{
                border:1px solid #0183fa;
                background-color: #0183fa;
                color:#fff;
              }
            }
          }
          .table-top-button-box{
            display: inline-block;
            vertical-align: top;
            margin-right:10px;
            div{
              display: flex;
              p{
                border:1px solid #DCDFE6;
                width:80px;
                text-align: center;
                height:40px;
                line-height:40px;
                cursor: pointer;
                font-size:14px;
              }
              p:nth-child(1){
                border-top-left-radius:4px;
                border-bottom-left-radius:4px;
              }
              p:nth-child(2){
                border-left:none;
              }
              p:nth-child(3){
                border-left:none;
                border-right:none;
              }
              p:nth-child(4){
                border-top-right-radius:4px;
                border-bottom-right-radius:4px;
              }
              .check-table-button{
                border:1px solid #0183fa;
                background-color: #0183fa;
                color:#fff;
              }
            }
          }
          .page-content-box{
            padding: 0 0 10px 0;
          }
          .for-max-big-box{
            flex:1;
            .null-text-p{
              line-height:200px;
              text-align: center;
              color:#999;
              font-size:14px;
            }
            .for-big-box{
              cursor: pointer;
              display: inline-block;
              width:320px;
              margin:20px 0 0 20px;
              border-radius:6px;
              overflow: hidden;
              box-shadow: 0 2px 8px rgba(37, 50, 74, 0.12);
              position: relative;
              img{
                display: inline-block;
                width:320px;
                height:180px;
              }
              .bottom-big-box{
                padding:10px 0 10px 10px;
                .name-p{
                  line-height:30px;
                  font-size:16px;
                  font-weight:700;
                  display:block;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
                .time{
                  line-height:30px;
                  font-size:14px;
                }
              }
              .type-p{
                position: absolute;
                right:5px;
                bottom:5px;
                padding:2px 8px;
                border-radius:4px;
                font-size:14px;
              }
              .type-p-1{
                color:#fff;
                background-color: #999;
              }
              .type-p-2{
                color:#fff;
                background-color: #7CCD7C;
              }
              .type-p-3{
                color:#fff;
                background-color: #0183fa;
              }
            }
          }
        }
      }
    }
  }
</style>