KM-PC-Front-Milestone2/src/views/modules/knowledge/warehouse/contentData.vue

<template>
  <div class="contentDataMain">
    <div class="userTop">
      <div class="userHead">
        <img :src="imgUrl"/>
      </div>
      <div class="userMidle">
        <p class="userMidleName">Hi.</p>
        <p class="userMidleName">{{user.fullName}}，祝你开心每一天！</p>
        <p class="userMidleNum">上传文件数量<span>{{myuploadNum}}</span></p>
      </div>
      <div class="userEnd">
        <a-cascader
          :options="options"
          :show-search="{ filter }"
          change-on-select
          :default-value="defaultCascader"
          placeholder="请选择分类"
          @change="onChange"
          @popupVisibleChange="popupVisibleChange"
          class="cascaderBox"
          
        />
      </div>
    </div>
    <div class="searchBoxTop">
      <search typeStr="content" searchWidth="auto" @searchResult="searchResult"></search>
    </div>
    <div class="tabBoxContent">
      <div v-if="index==0||(index==1&&number1Bas!=0)||(index==2&&number2Bas!=0)" v-for="(item, index) in tapArr" :key="index" @click="changeAction(index)">
        <span>{{index==0?categoryName:item}}({{index==0?number0:index==1?number1:number2}})</span>
        <img v-if="tapAction==index" src="../../../../image/tabAction.png"/>
      </div>
      <div class="btnAddData" @click="addData">新增知识</div>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==0)">
      <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 :showJurisdiction="true" :item="item" type="list0" v-if="type==3||type==4"></pageList>
            <pageList :showJurisdiction="true" v-else :item="item" :type="type!=null||categoryName=='全部分类'?'list1':'list0'"></pageList>
            <a-divider class="bottomBorder" v-if="(index!=dataList.length-1)"/>
          </div>
        </div>
        <pageBar ref="pageBarref0" @pageChange="pageChange0" :total="total" :pageSize="pageSize" class="pageBar"></pageBar>
      </div>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==1)">
      <div class="noDataBox" v-if="dataList1.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 dataList1" :key="index">
            <pageList :item="item" type="list1" :approval="true" @delRefresh="delRefresh"></pageList>
            <a-divider class="bottomBorder" v-if="(index!=dataList1.length-1)"/>
          </div>
        </div>
        <pageBar ref="pageBarref1" @pageChange="pageChange1" :total="total" :pageSize="pageSize" class="pageBar"></pageBar>
      </div>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==2)">
      <div class="noDataBox" v-if="dataList2.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 dataList2" :key="index">
            <pageList :item="item" type="list1"></pageList>
            <a-divider class="bottomBorder" v-if="(index!=dataList2.length-1)"/>
          </div>
        </div>
        <pageBar ref="pageBarref2" @pageChange="pageChange2" :total="total" :pageSize="pageSize" class="pageBar"></pageBar>
      </div>
    </div>
  </div>
</template>

<script>
import contentData from '@/api/knowledge/contentData'
import api from '@/api/knowledge/warehouseIndex'
import search from '../components/search'
import pageBar from '../components/pageBar'
import pageList from '../components/pageList'
import {mapState} from "vuex";
export default {
  name: 'contentData',
  components: {
    search,
    pageBar,
    pageList
  },
  computed: {
    ...mapState({
        user: (state) => state.appSetting.user,
    })
  },
  data() {
    return {
      imgUrl: require('@img/avatar2.jpg'),
      delVisible:true,
      searchData:{
        range:0,
        keyword:''
      },
      categoryId:'',
      defaultCascader:[],
      categoryValue:[],
      categoryDataArr:[],
      categoryName:'请选择分类',
      userData:this.user,
      pageNum:1,
      pageNum0:1,
      pageNum1:1,
      pageNum2:1,
      total:2,
      pageSize:10,
      tapArr:['','我的审批','我的上传'],
      number0:0,
      number1:0,
      number2:0,
      number1Bas:0,
      number2Bas:0,
      myuploadNum:0,
      tapAction:0,
      dataList:[
      ],
      dataList1:[
      ],
      dataList2:[
      ],
      options: [],
      type:null,
      typeName:["最新知识","最热知识","文档排行","工作成果","经典案例","维基排行"]
    }
  },
  created() {
    if(this.$route.query.type!=undefined){
      this.type=this.$route.query.type
      this.categoryName=this.typeName[this.type]
      if(this.type==3){
        this.defaultCascader=['40']
        this.categoryValue=['40']
      }
      if(this.type==4){
        this.defaultCascader=['50']
        this.categoryValue=['50']
      }
    }
    if(this.$route.query.categoryId!=undefined){
      this.categoryId=this.$route.query.categoryId
      if(this.$route.query.parentp!=undefined){
        this.defaultCascader=[this.$route.query.parentp,this.$route.query.parent,this.$route.query.categoryId]
        this.categoryValue=[this.$route.query.parentp,this.$route.query.parent,this.$route.query.categoryId]
      }else if(this.$route.query.parent!=0){
        this.defaultCascader=[this.$route.query.parent,this.$route.query.categoryId]
        this.categoryValue=[this.$route.query.parent,this.$route.query.categoryId]
      }else{
        this.defaultCascader.push(this.$route.query.categoryId)
        this.categoryValue.push(this.$route.query.categoryId)
      }
      this.categoryName=this.$route.query.categoryName
    }
    this.getBaseData()
    this.getData(false)
    
    if (this.user.photo && this.user.photo != '') {
      this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId='+this.user.photo
    }
    
  },
  methods: {
    //搜索数据
    searchResult(data){
      this.searchData=data
      this.searchData.keyword=decodeURI(data.keyword)
      this.getData(true)
    },
   //分类修改数据
   onChange(value, selectedOptions) {
    this.categoryValue = value
    this.categoryDataArr = selectedOptions
    this.categoryId = value[value.length-1]
   },
   //分类修改数据
   popupVisibleChange(value){
    if(value==false){
      //if(this.type!=0&&this.type!=1&&this.type!=2&&this.type!=5){
        this.categoryName = this.categoryDataArr[this.categoryDataArr.length-1]['label']
        this.type = null
      //}
      this.getData(true);
    }
   },
   filter(inputValue, path) {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
   },
   // 跳转添加
   addData(){
    this.$router.push({
      name: "knowledgeAddUpdate",
      query: {
        categoryId: this.categoryValue.join(',')
      }
    })
   },
   // 获取数据
   getData(type){
    if(this.tapAction==0||type){
      if(this.type==null){
        let param = {
          "pageNo": this.pageNum,
          "pageSize": 10,
          "sortField": "",
          "sortOrder": "asc",
          params: {
            approvalStatus: 5,
            "categoryId":this.categoryId,
            "keyword":this.searchData.keyword,
          }
        }
        if(this.searchData.range!=0){
          param.params.type=this.searchData.range
        }
        contentData.findAllKnowledge(param).then((res) => {
          res.result.data.forEach(element => {
            element.documentName = element.attachmentName
            element.documentRemark = element.summary
            element.viewNum = element.views
            element.uploadTime = element.createTime
            element.categoryArr = []
            this.getType(element)
            this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
          });
          this.number0 = res.result.totalCount
          this.dataList = res.result.data
          this.$nextTick(()=>{
            this.$refs.pageBarref0.setTotal(Number(res.result.totalCount))
          })
        })
      }else{
        if(this.type==0||this.type==1||this.type==2||this.type==5){
          let paramOne = {
            pageNo: this.pageNum,
            pageSize: 10,
            sortField: 'CREATE_TIME_',
            sortOrder: 'desc',
            params: {
              approvalStatus: 5,
              "categoryId":this.categoryId,
              "keyword":this.searchData.keyword,
            }
          }
          if(this.searchData.range!=0){
            paramOne.params.type=this.searchData.range
          }
          if(this.type==1){
            paramOne.sortField='views'
          }
          if(this.type==2){
            paramOne.sortField='views'
            paramOne.type=1
          }
          if(this.type==5){
            paramOne.sortField='views'
            paramOne.type=2
          }
          contentData.findAllKnowledge({...paramOne}).then(res => { 
            res.result.data.forEach(element => {
              element.documentName = element.attachmentName
              element.documentRemark = element.summary
              element.viewNum = element.views
              element.uploadTime = element.createTime
              element.categoryArr = []
              this.getType(element)
              this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
            });
            this.number0 = res.result.totalCount
            this.dataList = res.result.data
            this.$nextTick(()=>{
              this.$refs.pageBarref0.setTotal(Number(res.result.totalCount))
            })
          })
        }else{
          let paramTwo = {
            pageNo: this.pageNum,
            pageSize: 10,
            sortField: 'views',
            sortOrder: 'desc',
            params: {
              "keyword":this.searchData.keyword,
            }
          }
          if(this.searchData.range!=0){
            paramOne.params.type=this.searchData.range
          }
          if(this.type==3){
            paramTwo.params.keyword='working'
          }
          if(this.type==4){
            paramTwo.params.keyword='experience'
          }
          api.getAllKnowledgeByCategoryId(paramTwo).then(res => { 
            res.result.data.forEach(element => {
              element.documentName = element.attachmentName
              element.documentRemark = element.summary
              element.viewNum = element.views
              element.uploadTime = element.createTime
              element.categoryArr = []
              this.getType(element)
              this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
            });
            this.number0 = res.result.totalCount
            this.dataList = res.result.data
            this.$nextTick(()=>{
              this.$refs.pageBarref0.setTotal(Number(res.result.totalCount))
            }) 
          })
        }
      }
    }
    if(this.tapAction==1||type){
      let param = {
        "pageNo": this.pageNum,
        "pageSize": 10,
        "sortField": "APPROVAL_STATUS",
        "sortOrder": "asc",
        params: {
          "createBy":this.user.userId,
          "keyword":this.searchData.keyword,
          "isNotAudit":5
        }
      }
      if(this.searchData.range!=0){
        param.params.type=this.searchData.range
      }
      contentData.findAllKnowledge(param).then((res) => {
        res.result.data.forEach(element => {
          element.documentName = element.attachmentName
          element.documentRemark = element.summary
          element.viewNum = element.views
          element.uploadTime = element.createTime
          element.categoryArr = []
          this.getType(element)
          this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
        });
        this.number1 = res.result.totalCount
        this.dataList1 = res.result.data
        this.$nextTick(()=>{
          if(Number(res.result.totalCount)!=0){
            this.$refs.pageBarref1.setTotal(Number(res.result.totalCount))
          }
        })
      })
    }
    if(this.tapAction==2||type){
      let param0 = {
        "pageNo": this.pageNum,
        "pageSize": 10,
        "sortField": "CREATE_TIME_",
        "sortOrder": "desc",
        params: {
          "approvalStatus":5,
          "createBy":this.user.userId,
          "keyword":this.searchData.keyword
        }
      }
      if(this.searchData.range!=0){
        param0.params.type=this.searchData.range
      }
      contentData.findAllKnowledge(param0).then((res) => {
        res.result.data.forEach(element => {
          element.documentName = element.attachmentName
          element.documentRemark = element.summary
          element.viewNum = element.views
          element.uploadTime = element.createTime
          element.categoryArr = []
          this.getType(element)
          this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
        });
        this.number2 = res.result.totalCount
        this.dataList2 = res.result.data
        this.$nextTick(()=>{
          if(Number(res.result.totalCount)!=0){
            this.$refs.pageBarref2.setTotal(Number(res.result.totalCount))
          }
        })
      })
    }
   },
   // 删除刷新页面
   delRefresh(){
    let param = {
      "pageNo": this.pageNum,
      "pageSize": 10,
      "sortField": "APPROVAL_STATUS",
      "sortOrder": "asc",
      params: {
        "createBy":this.user.userId,
        "keyword":this.searchData.keyword,
        "isNotAudit":5
      }
    }
    contentData.findAllKnowledge(param).then((res) => {
      res.result.data.forEach(element => {
        element.documentName = element.attachmentName
        element.documentRemark = element.summary
        element.viewNum = element.views
        element.uploadTime = element.createTime
        element.categoryArr = []
        this.getType(element)
        this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
      });
      this.number1 = res.result.totalCount
      this.number1Bas = res.result.totalCount
      this.dataList1 = res.result.data
      this.$nextTick(()=>{
        if(Number(res.result.totalCount)!=0){
          this.$refs.pageBarref1.setTotal(Number(res.result.totalCount))
        }
      })
    })
   },
   // 处理分类数据展示
   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)
      }
    })
   },
   // 获取分类数据
   getBaseData(){
    contentData.getAllKnowledgeCategory().then((res) =>{
      this.categoryData(res.data)
      console.log(res.data)
      let allposition={
        children: [],
        isSys: 0,
        label: "全部分类",
        level: 1,
        name: "全部分类",
        operatorName: null,
        parent: "0",
        parents: null,
        pkId: "",
        sort: 2,
        updateBy: "1",
        updateTime: "2022-12-27 17:00:30",
        value: ""
      }
      res.data.unshift(allposition)
      this.options=res.data
    })
    this.delRefresh()
    let param1 = {
      "pageNo": 1,
      "pageSize": 10,
      "sortField": "CREATE_TIME_",
      "sortOrder": "desc",
      params: {
        "approvalStatus":5,
        "createBy":this.user.userId
      }
    }
    contentData.findAllKnowledge(param1).then((res) => {
      res.result.data.forEach(element => {
        element.documentName = element.attachmentName
        element.documentRemark = element.summary
        element.viewNum = element.views
        element.uploadTime = element.createTime
        element.categoryArr = []
        this.getType(element)
        this.getCategory(element.categoryArr,element.knowledgeCategoryAdminVo)
      });
      this.number2 = res.result.totalCount
      this.number2Bas = res.result.totalCount
      this.myuploadNum = res.result.totalCount
      this.dataList2 = res.result.data
      this.$nextTick(()=>{
        if(Number(res.result.totalCount)!=0){
          this.$refs.pageBarref2.setTotal(Number(res.result.totalCount))
        }
      })
    })
   },
   // 获取文件分类名
   getType(item){
    item.documentType = 5
    if(item.documentName!=null){
      let typeName = item.documentName.split('.')[(item.documentName.split('.').length-1)]
      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)
    }
   },
   // 修改tap页面
   changeAction(num){
    this.tapAction = num
    if(this.tapAction==0){
      this.pageNum = this.pageNum0
    }
    if(this.tapAction==1){
      this.pageNum = this.pageNum1
    }
    if(this.tapAction==2){
      this.pageNum = this.pageNum2
    }
   },
   // 页码处理
   pageChange0(num){
    this.pageNum = num
    this.pageNum0 = num
    this.getData(false)
   },
   // 页码处理
   pageChange1(num){
    this.pageNum = num
    this.pageNum1 = num
    this.getData(false)
   },
   // 页码处理
   pageChange2(num){
    this.pageNum = num
    this.pageNum2 = num
    this.getData(false)
   }
  }
}
</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: flow-root;
  width: 78.12vw;
  margin: 0px 10.94vw;
  background: #fff;
  margin-top: 1.25vw;
  border-bottom: 1px solid #EEEEEE;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.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;
}
.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{
  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>