kd-aiot-frontend/src/views/material/manage/components/CategoryDialog.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="treeVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="40%"
  >
    <div class="ele-border-lighter sys-organization-list">
      <el-tree
        ref="tree"
        :data="treeData"
        highlight-current
        node-key="id"
        :props="{ label: 'name' }"
        :expand-on-click-node="false"
        :default-expand-all="true"
        @node-click="onNodeClick"
      />
    </div>
    <template v-slot:footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="selected">选择</el-button>
    </template>
  </ele-modal>
</template>

<script>
 import { getTreeByPid } from '@/api/material/manage.js'
export default {
  data () {
    return {
      treeVisible: false,
      treeData: [],
      current:null,
      title:'选择分类',
      pathList:[]
    }
  },

  watch: {

  },
  methods: {
    open(pid,title){
      this.treeVisible = true
      this.title = title
      // if(title=='选择产品分类'){
      //   if(this.remarkform.productCategoryLevelId) this.$refs.tree.setCurrentKey(this.remarkform.productCategoryLevelId)
      // }else{
      //   if(this.remarkform.categoryLevelId) this.$refs.tree.setCurrentKey(this.remarkform.categoryLevelId)
      // }
      this.getTree(pid)
    },
    handleClose () {
      this.treeVisible = false
      this.current = null
    },
    getTree(pid){
      getTreeByPid(pid).then(res=>{
         this.treeData = res
      })
    },
    onNodeClick(node){
       this.current = node
    },
    selected(){
       if(!this.current){
         return this.$message.warning(`请${this.title}`)
       }
       this.pathList = this.findParent([],this.current,this.treeData)
       this.pathList.unshift(this.current)
       const PathInfo = {
         categoryLevelPath:'',
         categoryLevelPathId:[]
       }
       const pathName = []
       this.pathList.map(item=>{
          pathName.unshift(item.name)
          PathInfo.categoryLevelPathId.unshift(item.id)
       })
       PathInfo.categoryLevelPath = pathName.join('-')
       PathInfo.categoryLevelPathId = PathInfo.categoryLevelPathId.join(',')
       this.$emit('chooseCategory',this.current,this.title,PathInfo)
       this.handleClose()
    },

    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据
    findParent (parents, childNode, treeData) {
      for (let i = 0; i < treeData.length; i++) {
        // 父节点查询条件
        if (treeData[i].id === childNode.parentId) {
          // 如果找到结果,保存当前节点
          parents.push(treeData[i])
          // 用当前节点再去原数据查找当前节点的父节点
          this.findParent(parents, treeData[i],this.treeData)
          break
        } else {
          if (treeData[i].children instanceof Array) {
            //	没找到，遍历该节点的子节点
            this.findParent(parents, childNode, treeData[i].children)
          }
        }
      }
      return parents
    }

  }
}
</script>

<style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>