KM-PC-Front-Milestone2/src/views/modules/knowledge/components/pageListMap.vue

<template>
  <div>
    <div v-if="item.type==2">
      <div class="listItem">
        <div>
          <img class="listHead" :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+item.authorHead"/>
        </div>
        <span class="listName">{{item.author}}</span>
        <div class="lookBox btnSmall" @click="lookDetail(item)">
          <img src="../../../../image/look.png"/>
          <span>查看</span>
        </div>
        <div class="lookBox btnSmall" @click="download(item)" v-if="item.attachment">
          <img src="../../../../image/download.png"/>
          <span>下载</span>
        </div>
      </div>
      <div class="listItem listTitle">
        {{item.titles}}<div v-if="item.state==0" class="studyType0">未学习</div><div v-else class="studyType1">已学习</div>
      </div>
      <div class="listItem listContent" v-if="item.summary!=null">
        {{item.summary}}
      </div>
      <div class="listItem listBottom1" v-if="item.categoryArr.length!=0">
        <div v-for="(item0, index) in item.categoryArr" :key="index">
          <div>
            {{item0}}
          </div>
          <a-divider style="margin-top: 0.5vw;" v-if="index!=(item.categoryArr.length-1)" class="lineBox" type="vertical" />
        </div>
      </div>
      <div class="listItem listBottom">
        <template>
          <div>
            <img v-if="item.documentType==1" src="../../../../image/fileType1.png"/>
            <img v-else-if="item.documentType==2" src="../../../../image/fileType2.png"/>
            <img v-else-if="item.documentType==3" src="../../../../image/fileType3.png"/>
            <img v-else-if="item.documentType==4" src="../../../../image/fileType4.png"/>
            <img v-else src="../../../../image/fileType0.png"/>
            <span v-if="item.documentType<5">{{typeArr[(item.documentType-1)]}}</span>
            <span v-else>{{typeArr[4]}}</span>
          </div>
          <a-divider class="lineBox" type="vertical" />
        </template>
        <div>
          <img src="../../../../image/lookTime.png"/>
          <span>{{item.viewNum}}</span>
        </div>
        <div class="listTime">{{item.uploadTime}}</div>
      </div>
    </div>
    <div v-else>
      <div class="listItem">
        <span class="listName" style="margin-left:0px">
          <span style="font-weight: 550;">{{item.outerContentName}}</span>
          <div v-if="item.state==0" class="studyType0">未学习</div><div v-else class="studyType1">已学习</div>
        </span>
        <div class="lookBox btnSmall" @click="lookDetail(item)">
          <img src="../../../../image/look.png"/>
          <span>查看</span>
        </div>
      </div>
      <div class="listItem listBottom1" style="margin-top: 0.3vw;">
        位于:{{item.outerSystemName}}
      </div>
    </div>
  </div>
</template>

<script>
import header0 from '../../../../image/header0.png'
import header1 from '../../../../image/header1.png'
import {mapState} from "vuex";
export default {
  props: {
    item: {
      type: Object,
      default: []
    },
    type: {
      type: String,
      default: 'home'
    },
    approval: {
      type:Boolean,
      default: false
    },
    showHeader: {
      type:Boolean,
      default: false
    },
  },
  computed: {
    ...mapState({
        user: (state) => state.appSetting.user,
    })
  },
  data() {
    return {
      delVisible:false,
      header0,
      header1,
      typeArr:['pdf','word','excel','ppt','其他']
    }
  },
  created() {
  
  },
  methods: {
    lookDetail(){
      if(this.item.type==2){
        this.$router.push({
          name: "knowledgeContentInfo",
          query: {
              pkId: this.item.pkId,
              type:1
          }
        })
      }else{
        window.open(this.item.outerAccessUrl)
      }
    },
    download(data){
      window.open('/api/api-system/system/core/sysFile/previewFile?fileId='+data.attachment)
    }
  }
}
</script>

<style lang="less" scoped>
.listHead{
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 2vw;
  float: left;
}
.listName{
  line-height: 2.4vw;
  margin-left: 0.68vw;
  font-size: 0.9375vw;
  color: #030303;
  float: left;
}
.listItem{
  width: 100%;
  display: inline-block;
  text-align: left;
}
.lookBox{
  margin-top: 0.625vw;
  float: right;
  cursor: pointer;
  margin-left: 0.73vw;
}
.lookBox img{
  width: 1.2vw;
  float: left;
  margin-right: 3px;
}
.lookBox span{
  float: left;
  color: #406CC4;
  font-size: 0.83vw;
}
.listTitle{
  font-weight: 600;
  color: #030303;
  font-size: 1.04vw;
  margin-top: 1.0vw;
}
.listContent{
  color: #202124;
  font-size: 0.9375vw;
  margin-top: 0.7vw;
}
.listBottom1{
  margin-top: 0.9375vw;
  font-size: 0.9375vw;
  color: #5E5E5E;
}
.listBottom1 div{
  float: left;
}
.listBottom{
  margin-top: 1.4vw;
  font-size: 0.83vw;
  color: #C0C0C0;
}
.listBottom div{
  float: left;
  display: flex;
}
.listTime{
  margin-left: 1.5625vw!important;
}
.listBottom img{
  width: 1vw;
  margin-top: 0.1vw;
}
.listBottom span{
  margin-left: 0.52vw;
}
.lineBox{
  margin: 0px 0.8333vw;
  margin-top: 0.34vw;
}
.studyType0{
  width: 3.02vw;
  height: 1.25vw;
  background: rgba(255, 144, 13, 0.06);
  line-height: 1.25vw;
  text-align: center;
  color: #FF900D;
  font-size: 0.8333vw;
  display: inline-block;
  margin-left: 0.52vw;
  font-weight: normal;
}
.studyType1{
  width: 3.02vw;
  height: 1.25vw;
  background: rgba(0,200,220,0.06) ;
  line-height: 1.25vw;
  text-align: center;
  color: #00C8DC;
  font-size: 0.8333vw;
  display: inline-block;
  margin-left: 0.52vw;
  font-weight: normal;
}
</style>