KM-PC-Front-Milestone2/src/views/modules/knowledge/map/list.vue

<template>
  <div class="contentDataMain">
    <div class="userTop">
      <div class="userMidle">
        <p class="userMidleName">{{ dataDetail.title }}</p>
        <p class="userMidleNum"><span>上传文件数量</span><span>{{ dataDetail.contentTotal }}</span></p>
      </div>
    </div>
    <div class="tabBoxContent" style="display: none;">
      <div v-for="(item, index) in dataDetail.routes" :key="index" @click="changeAction(index)">
        <span>{{item.name.length>5?item.name.substr(0,5)+'...':item.name}}{{ item.state==0?'(未完成)':'(已完成)' }}</span>
        <img v-if="tapAction==index" src="../../../../image/tabAction.png"/>
      </div>
    </div>
    <a-tabs default-active-key="1" @change="changeAction" class="tabBoxContent">
      <a-tab-pane :key="index" :tab="item.state==0?item.name+'(未完成)':item.name+'(已完成)'" v-for="(item, index) in dataDetail.routes"></a-tab-pane>
    </a-tabs>
    <div class="searchBoxContent">
      <div class="noDataBox" v-if="dataList.length==0">
        <img src="../../../../image/noDataNew.png" class="noData"/>
        <p class="noDataText">暂无搜索结果</p>
      </div>
      <div v-else class="DataBoxContent">
        <div class="listBox">
          <div class="listBoxItemContent listItemClass" v-for="(item, index) in dataList" :key="index">
            <pageList :item="item" type="list0" :showHeader="true" @refresh="refresh"></pageList>
            <a-divider class="bottomBorder" v-if="(index!=dataList.length-1)"/>
          </div>
        </div>
        <pageBar ref="pageBarref" @pageChange="pageChange" :total="total" :pageSize="pageSize" class="pageBar"></pageBar>
      </div>
    </div>
  </div>
</template>

<script>
import pageBar from '../components/pageBar'
import pageList from '../components/pageListMap'
import {mapState} from "vuex";
import map from '@/api/knowledge/map'
export default {
  name: 'contentData',
  components: {
    pageBar,
    pageList
  },
  computed: {
    ...mapState({
        user: (state) => state.appSetting.user,
    })
  },
  data() {
    return {
      dataDetail:{},
      tapArr:['','我的审批','我的上传'],
      tapAction:0,
      categoryName:'请选择分类',
      pageNum:1,
      total:10,
      pageSize:10,
      dataList:[
      ],
      detailPkId:''
    }
  },
  mounted() {
    let that = this
    this.detailPkId = this.$route.query.pkId
    let getData={'pkId':this.detailPkId}
    map.info(getData).then((res) => {
      if(res.code == 200) {
        this.dataDetail = res.data
        this.dataDetail.routes[0].contents.forEach(element => {
          if(element.type==2){
            element.viewNum = element.views
            element.uploadTime = element.createTime
            element.categoryArr = element.category.split(' ')
            this.getType(element)
          }
        });
        this.changeAction(0)
      }
    })
  },
  methods: {
   refresh(){
    let getData={'pkId':this.detailPkId}
    map.info(getData).then((res) => {
      if(res.code == 200) {
        this.dataDetail = res.data
      }
    })
   },
   categoryData(data){
    data.forEach(element => {
      element.label=element.name
      element.value=element.pkId
      if(element.children!=null&&element.children.length!=0){
        this.categoryData(element.children)
      }
    })
   },
   getType(item){
      item.documentType = 5
      let typeName = item.attachmentType
      if(typeName==null){
        return false
      }
      if(typeName.indexOf("pdf")>-1){
        item.documentType = 1
      }else if(typeName.indexOf("doc")>-1){
        item.documentType = 2
      }else if(typeName.indexOf("xls")>-1){
        item.documentType = 3
      }else if(typeName.indexOf("ppt")>-1){
        item.documentType = 4
      }else{
        item.documentType = 5
      }
   },
   getCategory(arr,data){
    arr.unshift(data.name)
    if(data.parents!=null){
      this.getCategory(arr,data.parents)
    }
   },
   pageChange(num){
    this.pageNum = num
    this.dataList = this.dataDetail.routes[this.tapAction].contents.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
   },
   changeAction(num){
    let that = this
    this.tapAction = num
    this.dataDetail.routes[this.tapAction].contents.forEach(element => {
      if(element.type==2){
        element.viewNum = element.views
        element.uploadTime = element.createTime
        element.categoryArr = element.category.split(' ')
        this.getType(element)
      }
    });
    this.pageNum = 1
    this.dataList = this.dataDetail.routes[this.tapAction].contents.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
    setTimeout(function(){
      that.$refs.pageBarref.setTotal(that.dataDetail.routes[that.tapAction].contents.length)
    },200)
   }
  }
}
</script>
<style lang="less" scoped>
.contentDataMain{
  position: absolute;
  background: #FAFAFA;
  height: 100%;
  overflow: scroll;
}
.searchHead{
  background: #fff;
  display: inline-grid;
  width: 100%;
}
.searchBoxContent{
  margin: 0px 10.94vw;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.searchBoxTop{
  margin: 0px 10.94vw;
  background: #fff;
  padding: 1.5625vw;
  margin-top: 1.25vw;
  border-radius: 10px;
}
.noDataBox{
  width: 100%;
  text-align: center;
  padding: 1.71875vw 0px 3.91vw 0px;
}
.noData{
  width:35.2vw;
  margin-top: 4.68vw;
}
.DataBoxContent{
  width:100%;

}
.noDataText{
  color:#C0C0C0;
  font-size:1.14vw;
}
.tabBoxContent{
  display: flex;
  width: 78.12vw;
  margin: 0px 10.94vw;
  background: #fff;
  margin-top: 1.25vw;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 4.6875vw;
}
.tabBoxContent /deep/.ant-tabs-nav-wrap{
  height: 4.6875vw;
}
.tabBoxContent /deep/.ant-tabs-tab{
  color: #202124;
  font-size: 0.9375vw;
  padding-top: 1.5625vw;
  padding-bottom: 1.8vw;
  font-weight: 500;
}
.tabBoxContent /deep/.ant-tabs-content{
  display: none;
}
.tabBoxContent /deep/.ant-tabs-tab-prev-icon-target{
  font-size: 1.2vw;
}
.tabBoxContent /deep/.ant-tabs-tab-next-icon-target{
  font-size: 1.2vw;
}
.tabBoxContent /deep/.ant-tabs-tab-active{
  border: none;
}
.tabBoxContent /deep/.ant-tabs-ink-bar{
  background: url(../../../../image/tabAction.png);
  background-size:4.6vw;
  background-repeat: no-repeat;
  height: 0.442vw;
  background-position:center center
}
.tabBoxContent div{
  width: 9.8vw;
  text-align: center;
  float:left;
}
.tabBoxContent span{
  padding-top: 1.5625vw;
  width: 100%;
  color: #202124;
  font-size: 0.9375vw;
  cursor: pointer;
  display: inline-block;
}
.tabBoxContent img{
  margin-top: 0.9375vw;
  width:4.64vw;
}
::-webkit-scrollbar{
  display:none;
}
.btnSmall:hover{
  opacity: 0.73;
}
.listBoxItemContent{
  padding: 1.5625vw;
  padding-bottom: 0px;
}
.listItemClass{
  background: #fff;
}
.pageBar{
  background: #FAFAFA;
  margin-top: 2.76vw;
}
.btnAddData{
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  width: 5.625vw!important;
  height: 2.552vw;
  line-height: 2.552vw;
  text-align: center;
  color: #fff;
  background: #406CC4;
  border-radius: 6px 6px 6px 6px;
  font-size: 0.9375vw;
  margin-left: 0.5738vw;
  margin-top: 0.93vw;
  cursor: pointer;
  float: right!important;
  margin-right: 1.5625vw;
}
.btnAddData:hover{
  background: #385FAD;
}
.bottomBorder{
  background: #EEEEEE;
  margin-bottom: 0px;
}
.userTop{
  margin: 0px 10.94vw;
  background: #fff;
  padding: 1.5625vw;
  margin-top: 1.5104vw;
  display: flex;
  border-radius: 10px;
}
.userHead{
  margin-right: 1.09375vw;
  float: left;
}
.userHead img{
  width: 6vw;
  height: 6vw;
  border-radius: 6vw;
}
.userMidle{
  
}
.userMidleName{
  color: #202124;
  font-size: 1.25vw;
  text-align: left;
  font-weight: 550;
}
.userMidleNum{
  margin-top: 0.7vw;
  color: #C0C0C0;
  font-size: 0.83333vw;
  text-align: left;
}
.userMidleNum span:first-child{
  float: left;
  padding-top:0.22vw;
}
.userMidleNum span:last-child{
  float: left;
  color: #202124;
  font-size: 1.04166vw;
  margin-left: 0.4166vw;
}
.userEnd{
  margin-left: auto;
}
.cascaderBox{
  width: 20.625vw;
  height: 1.875vw;
  margin-top: 2.083vw;
}
.cascaderBox /deep/input{
  height: 1.875vw;
}
.listBox{
  padding-bottom: 1.5625vw;
  background: #fff;
}
</style>