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

<template>
  <div class="treeBox">
    <treeComp :treeData="options" @handleClick="handleClick"></treeComp>
  </div>
</template>
<script>
export default {
  props: {
    options: {
      default: {}
    },
    categoryValue: {
      type: Array,
      default: []
    },
  },
  name: 'classMenu',
  data () {
    return {
      checkArr:[],
      checkId:null
    }
  },
  created(){
    this.init()
  },
  mounted(){
    this.checkArr=this.categoryValue
    if(this.categoryValue.length!=0){
      this.checkId=this.categoryValue[(this.categoryValue.length-1)]
    }
    this.checkArr.push('000')
    //this.init()
  },
  methods:{
    init(){
      let that=this
      Vue.component('treeComp', {
        functional: true,
        props: {treeData: Object},
        render(h, {props: {treeData = {}}}) {
          const creatNode = (node,num,pId)=>{
            node.pId=pId
            if(num==1){
              node.parent='000'
            }
            if(node.children && node.children.length > 0){
              let hArr = node.children.map(item=>{
                let nowPid = pId+','+item.pkId
                return creatNode(item,num+1,nowPid)
              })
              if(num==0){
                return h('div', {class:{'demoShow':true}}, 
                [h('div',{class:{'demoText':true,'demoTextSelect':that.checkId==node.pkId},style:'padding-Left:'+(2+num*0.5)+'vw',
                on:{click:function (event){
                  event.stopPropagation();
                  event.preventDefault();
                  that.handleClick(node,this);
                  } }},[
                  h('div',{class:{'classifyRightAction':that.checkArr.indexOf(node.pkId)>-1,'classifyRight':true},
                    on:{click:function (event){
                    event.stopPropagation();
                    event.preventDefault();
                    that.handleOpenClick(node);
                    } }},['']),
                  node.name]), hArr])
              }else{
                return h('div', {class:{'demo':!(that.checkArr.indexOf(node.parent)>-1),'demoShow':(that.checkArr.indexOf(node.parent)>-1)}}, [h('div',{class:{'demoText':true,'demoTextSelect':that.checkId==node.pkId},style:'padding-Left:'+(2+num*0.5)+'vw',
                on:{click:function (event){
                event.stopPropagation();
                event.preventDefault();
                that.handleClick(node,this);
                } }},[
                  h('div',{class:{'classifyRightAction':that.checkArr.indexOf(node.pkId)>-1,'classifyRight':true},
                    on:{click:function (event){
                    event.stopPropagation();
                    event.preventDefault();
                    that.handleOpenClick(node);
                    } }},['']),
                  node.name]), hArr])
              }
            }else{
              return h('div', {class:{'demo':!(that.checkArr.indexOf(node.parent)>-1),'demoShow':(that.checkArr.indexOf(node.parent)>-1)}}, [h('div',{class:{'demoText':true,'demoTextSelect':that.checkId==node.pkId},style:'padding-Left:'+(3.2+num*0.5)+'vw',
              on:{click: function(event){
                event.stopPropagation();
                event.preventDefault();
                that.handleClick(node,this);
              }}},[
                node.name])])
            }          
          }
          return creatNode(treeData,0,'')
        }
      })
    },
    handleOpenClick(node){
      //console.log(node)
      //node.openData=!node.openData
      let indexNum=this.checkArr.indexOf(node.pkId)
      if(indexNum>-1){
        this.checkArr.splice(indexNum, 1)
      }else{
        this.checkArr.push(node.pkId)
      }
      console.log(this.checkArr)
    },
    handleClick(node,ele){
      console.log(node)
      this.checkId = node.pkId;
      let dataArr=node.pId.split(",")
      dataArr.shift()
      
      let data={
        categoryId:node.pkId,
        categoryName:node.name,
        categoryValue:dataArr
      }
      this.$emit('changeClass',data);
    }
  }
}
</script>
<style lang="less" scoped>
  .demoShow{
    min-width: 11.71875vw;
    width: max-content;
    text-align: left;
    font-size:0.9375vw;
    display: flex;
    flex-direction: column;
    color: #202124;
    &:before{
      content:'  ';
      display: inline-block;
    }
  }
  .demo{
    min-width: 11.71875vw;
    width: max-content;
    display: none;
    text-align: left;
    font-size:0.9375vw;
    flex-direction: column;
    color: #202124;
    &:before{
      content:'  ';
      display: inline-block;
    }
  }
  .demoText{
    padding-right:2vw;
    font-weight: 500;
    min-width: 11.71875vw;
    height: 2.91vw;
    display: inline-block;
    line-height: 2.91vw;
    cursor: pointer;
    color: #202124;
  }
  .demoTextSelect{
    background: #ECF3FF;
  }
  .classifyRight{
    background: url('../../../../image/rightIcon.png');
    background-size: 100% 100%;
    width:0.6vw;
    height: 0.6vw;
    color: #CBCCCC;
    display: inline-block;
    margin-left: auto;
    transform-origin: 150% 60%;
    margin-right: 0.6vw;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
  }
  .classifyRightAction{
    transform: rotate(90deg);
    transform-origin: 75% 50%;
  }
  .treeBox{
    overflow-x: scroll;
    height: calc(100% - 3.5vw);
  }
  .treeBox::-webkit-scrollbar{
    width:16px;
    height:16px;
    background-color:#fff;
    display:block;
  }
</style>