树状组件（一）

示例

库表结构

前端

引用此组件

    <data-classify-tree @loadHJsj="loadHJsj" :style="{height: 'calc(100vh - 110px)'}" />

此组件

<template>
  <div class="ware-tree">
    <div class="ware-tree-title">
      {{ treeTitle }}
    </div>
    <el-divider></el-divider>
    <div
      style="overflow-y: auto;color: #2F5DD8;margin: 10px;height:calc(100% - 60px);"
      :style="style"
    >
      <el-tree
        ref="treeDataTree"
        size="big"
        node-key="name"
        :data="treeData"
        highlight-current
        default-expand-all
        :props="treeProp"
        :default-checked-keys="defaultCheckedKeys"
        :render-content="renderContent"
        @node-click="bindUIEvent"
      ></el-tree>
    </div>
  </div>
</template>

<script>
import { HJSJ } from "@/utils/statusMg"
import { getResourceCatalogTree } from "@/api/hjda/manage/dataResourceCatalogConfig"
export default {
  name: 'DataClassifyTree',
  props: {
    treeTitle: {
      type: String,
      default: '数据资源目录'
    },
    fSjzyml:{
      type: String,
      default: ''
    },
    treeUrl: {
      type: String,
      default: null
    },
    style: {
      type: String,
      default: ''
    },
    //样式类型
    renderContentType: {
      type: Number,
      default: 0
    },
    //是否显示隐藏目录
    showHiden: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      treeData: [], //HJSJ.SJZY_CATALOG,
      defaultCheckedKeys:[],
      expands: [],
      treeProp: {
        label: 'name',
        children: "children",
        id: 'id',
        pid: 'pid',
      },
    };
  },
  mounted() {
    this.loadData();
    this.defaultCheckedKeys.push(this.fSjzyml)
  },
  methods: {
    //加载数据
    loadData() {
      let params = {
        visibleAll: this.showHiden,
      }
      getResourceCatalogTree(params).then(res => {
        if (res.code === 0) {
          this.treeData = res.data;
        }
      });
    },
    //点击
    bindUIEvent(item) {
      if (!item.childList) {
        this.$emit('loadHJsj', item);
      }
    },
    renderContent(h, { node, data, store }) {
      //定制样式
      if (this.renderContentType === 1) {
        //数据资源目录管理
        return (
          <h2 class="single-list second-btn">
            <a href="javascript:void(0);" style="padding-left:unset !important">
              <span >
                <img src={require('@/assets/images/hjda/文件夹.png')}
                  style="vertical-align: middle; margin-right: 10px; width:20px;height:20px" />
                {data.name}
              </span>
            </a>
          </h2>
        );
      }
      //默认
      if (data.level === 3) {
        return (
          <h2 class="single-list second-btn">
            <a href="javascript:void(0);" style="padding-left:unset !important">
              <span>{data.name}</span>
            </a>
          </h2>
        );
      } else {
        return (
          <h2 class="single-list second-btn">
            <a href="javascript:void(0);" style="padding-left:unset !important">
              <span>{data.name}</span>
            </a>
          </h2>
        );
      }
    }
  },
};
</script>

<style lang="scss">
/*树结构样式*/
.ware-tree {
  width: 100%;
  bottom: 20px;
  height: 100%;
  border: solid 2px #d7e7ed;
  overflow: hidden;

  .ware-tree-title {
    background-position: -10px -10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    font-size: 18px;
  }
  .list-box {
    width: 100%;
    position: absolute;
    top: 60px;
    bottom: 0;
    overflow: auto;
    .active {
      a {
        color: #2f5dd8;
      }
    }
    .second-btn a:hover {
      color: #2f5dd8;
    }
    .second-list-bar li:hover {
      color: #2f5dd8;
    }
  }
  .second-btn {
    display: block;
    width: 260px;
    height: 50px;
    margin: 0 10px;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    top: 0;
    .upload-demo {
      display: none;
    }
    a {
      display: block;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      font-weight: normal;
      padding-left: 20px;
      i.ticon {
        float: left;
        width: 7px;
        height: 14px;
        margin: 17px 10px 0 10px;
        background-position: -112px -64px;
        transition: all 0.3s;
      }
      span {
        float: left;
      }
    }
  }
  .open i.ticon {
    transform: rotate(90deg);
  }

  .el-tree .el-tree-node__content {
    margin-bottom: 16px !important;
  }
  .el-tree .el-tree-node__expand-icon {
    font-size: 16px !important;
  }
}
</style>

请求api

//查询树
export function getResourceCatalogTree(data) {
    return request({
        url: '/dataResourceCatalog/getTree',
        method: 'get',
        params: data
    })
}

请求地址：http://119.3.184.9:8096/server/dataResourceCatalog/getTree?visibleAll=false

后端

controller

@Operation(summary = "查询树")
@GetMapping("/getTree")
@Parameter(name = "visibleAll", description = "是否显示全部数据,默认不会查出隐藏的目录", required = false)
public CommonResult<List<Tree<String>>> getTree(boolean visibleAll){
    return CommonResult.success(dataResourceCatalogService.getTree(visibleAll));
}

service

List<Tree<String>> getTree(boolean visibleAll);
实现类
@Override
public List<Tree<String>> getTree(boolean visibleAll){
    List<DataResourceCatalog> catalogs = baseMapper.selectList(Wrappers.lambdaQuery(DataResourceCatalog.class)
            .eq(!Boolean.TRUE.equals(visibleAll)
                    ,DataResourceCatalog::getVisible, CommonStatusEnum.ENABLE.getStatus()));
// 调用了hutool工具包的TreeUtil.build方法，将查询结果转换为树形结构，并设置每个节点的权重、ID、父ID和额外属性
    return TreeUtil.build(catalogs, "-1",(node, tree) -> {
        tree.setWeight(node.getSort());
        tree.setId(String.valueOf(node.getId()));
        tree.setParentId(String.valueOf(node.getPid()));
        tree.putExtra("name",node.getName());
    });
}

返回的结果示例