learning-system-portal/src/views/user/MyAssess.vue

<template>
    <!-- <Remark>
      1.测评界面实例图<br/>
    </Remark> -->
    <div style="padding:10px 0px 12px 22px">
    <el-row>
      <el-col :span="24">
        <span class="uc-center-page" style="margin-right:90px">我的测评</span>
        <el-input clearable placeholder="搜索名称" class="uc-input" v-model="keyword"></el-input>
        <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getData()">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" class="search-btn" @click="reset">重置</el-button>
      </el-col>
      <el-col  :span="8" v-for="(item,index) in testList" :key="index">
         <!-- @click="textdetail(item)" -->
        <div>
           <!-- @click="jumpRouter(item)" -->
          <section>
            <!-- <div @click="hasPermission(item)">
       
            </div> -->
            <a :href="hasPermission(item)" target="_blank"> 
                <img :src="getItem(item)" />
                <h5 class="ceping-tit one-line-ellipsis" v-html="$keywordActiveShow(item.title,keyword)"></h5>
                <span class="ceping-conent">完成时间：{{item.date}}</span>
            </a> 
          </section>

        </div>
      </el-col>

    </el-row>
      <div v-if="testList.length > 0 " style="height:150px;  text-align: center;   margin-top: 10px; " >
          <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[9, 18, 27, 36]"
          :current-page="page"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
          </el-pagination>
       </div>
       <div v-else>
          <div v-if="testList.length == 0" class="home-no-list">
            <img class="img" style="width:360px;height:226px" src="/images/homeWu/no-madel.png" alt="" srcset="">
            <p class="text" style="color: #333333;margin-top:50px;font-size: 14px">暂无课程，请优先学习其它课程吧～</p>
          </div>
       </div>
  </div>
</template>
<script>
  import apiBoeCourse from '@/api/boe/course.js';
  import { getToken } from '@/utils/token';

  export default {
    data(){
      return {
        isSearh:false,
        keyword:'',
        testList:'',
        total:0,
        chaturl:'',
        size:9,
        page:1,
      }
    },
    mounted() {
      this.findList();
    },

   computed:{

   },
    methods:{
      hasPermission(item) {
      if(item.hasPermission == '1') {
        // window.open(item.url,'_blank') ;
        return item.url;
      } else {
        return false;
        // this.$message.warning('没有查看报告权限，如需查看请联系相关老师或HRBP')
      }
      },
      jumpRouter(item) {
        window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=quizsummary`)
      },
      getData() {
        this.isSearh = true;
        this.page=1;
        this.findList();
      },
      findList(){
        let params={
          keyword:this.keyword,
          page:this.page,
          size:this.size,
          agent:'pc'
        }
        apiBoeCourse.reportList(params).then(rs=>{
          this.testList = rs.result.reportList
          this.total = rs.result.count

        })
      },
       textdetail(item){
        //  console.log(item.targetUrl)
        // window.open(item.targetUrl +'?id=' + item.cmtask_id)
        // window.open(`/course/boeframe?id=${item.cmtask_id}&targetUrl=${item.targetUrl}`)
        // /course/boeframe
     },
     handleSizeChange(val) {
         this.size = val
         this.findList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.findList()
      },
      reset(){
        this.keyword = '';
        this.page=1;
        this.findList();
      },
      getItem(item){
        if(item.cover[0].url){
          return item.cover[0].url
        }
        return item.cover[0]
      }
    }
  }
</script>

<style lang="scss" scoped>
.one-line-ellipsis {
  display: -webkit-box;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}

.ceping-tit{
  color: #333;
  font-size: 17px;
  line-height: 40px;
}
.ceping-conent{
  font-size: #666;
  font-size: 13px;

}
.fenye{
  z-index: 999;
  color: #fff;
  position: absolute;
  top: 75%;
  left: 40%;
}
  .el-row{
    .el-col:first-of-type{
      .el-input{
        width: 20%;
        margin: 0 20px;
      }
      .el-button{
        height: 36px;


      }
    }
    .el-col:nth-of-type(){

    }
    .el-col:not(:first-child){
      position: relative;
      padding: 20px;
      padding-left: 40px;
      border-radius: 4px;
      >div{
        // width: 85%;
        padding-bottom:100%;
		cursor: pointer;
        position: relative;
        // box-shadow: 2px 2px 2px #888888;
        // box-shadow:0px 0px 2px #888888;
        border-radius: 4px;
        section{
          border-radius: 4px;
          position: absolute;
          left: 40%;
          top: 50%;
          // width: 96%;
          // height: 78%;
          transform: translate(-50%,-50%);
          // background: #f1f5fc;
          // marin:0 auto;
          // padding: 10px;
          border-box: box-sizing;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          img{
            width: 194px;
            height: 109px;
          }
          span{
            // color:#303133;
            // font-size: 12px;
          }
          h5{
            margin: 0;
          }
        }
      }
    }
  }
</style>