Tree树形封装

环境要求Element ui

前端

              <div style="border:2px solid #b9cde6;width: 297.8px;height: 500px;" class="mytree">
                <el-input
                  v-model="filterText"
                  placeholder="输入关键字进行过滤"
                />
                <el-tree
                  ref="tree"
                  :data="data"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  node-key="code"
                  :default-expanded-keys="treeData"
                  @node-click="selectTreeClick"
                />
              </div>

初始化数据 

前端方法 

样式

.mytree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree>.el-tree-node {
    display: inline-block;
    min-width: 100%;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
      display: none;
    }

  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    //height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}

 

 效果展示

 

 后端方法

Controller层

 @PostMapping("/getTree")
    public ListResult<Object> getTree(@RequestBody Pm0101VO pm0101VO) {
        List<Tpmop02> tree = ps02Service.getTree(pm0101VO.getProduceNo());
        return ResultBuilder.buildListSuccess(tree);
    }

Service层

    /**
     * 我这里是根据工单查询出某一颗树
     * @param produceNo 工号
     * @return
     */
    List<Tpmop02> getTree(String produceNo);

ServiceImpl层

 @Override
    public List<Tpmop02> getTree(String produceNo) {
        List<Tpmop02> list = tpmop02Mapper.getList();
        List<Tpmop02> collect = list.stream().filter(item -> item.getMrcode().equals(produceNo))
                .map((menu) -> {
                    menu.setChildren(getChildrens(menu, list));
                    return menu;
                }).collect(Collectors.toList());
        return collect;
    }



        private List<Tpmop02> getChildrens(Tpmop02 root, List<Tpmop02> all) {
        List<Tpmop02> children = all.stream().filter(CappTechnologyBom -> {
            //getMrcode主节点  getProductCode子节点
            return CappTechnologyBom.getMrcode().equals(root.getProductCode());
        }).map(CappTechnologyBom -> {
            String routeCodes = "";
            if (CappTechnologyBom.getRouteCode().equals("JJG")) {
                routeCodes = "机加工";
            } else if (CappTechnologyBom.getRouteCode().equals("HJ")) {
                routeCodes = "焊接";
            } else if (CappTechnologyBom.getRouteCode().equals("ZP")) {
                routeCodes = "装配";
            } else if (CappTechnologyBom.getRouteCode().equals("RCL")) {
                routeCodes = "热处理";
            }
            // 封装前端展示名称
            String Name = CappTechnologyBom.getProductName() + " -- " + routeCodes;
            CappTechnologyBom.setProductName(Name);
            if (CappTechnologyBom.getRouteCode() != null && CappTechnologyBom.getRouteCode().equals("ZP")) {
                CappTechnologyBom.setChildren(getChildrens(CappTechnologyBom, all));
            }
            return CappTechnologyBom;
        }).collect(Collectors.toList());

        return children;
    }


 //根据getLabel去重   .filter(distinctByKey(e -> e.getLabel())).collect(Collectors.toList());
    public <T> Predicate<T> distinctByKey(Function<? super T, ?> keyExtractor) {
        Map<Object, Boolean> seen = new ConcurrentHashMap<>();
        return t -> seen.putIfAbsent(keyExtractor.apply(t), Boolean.TRUE) == null;
    }

mapper层

List<Tpmop02> getList();

mybatis层

    <select id="getList" resultMap="BaseResultMap">
<!--        select * from TPMOP02  这里查询全部就好，我是业务需求-->
        select * from TPMOP02 where WO_TYPE!='外购件'  ORDER BY ROUTE_SEQ
    </select>

数据库主子节点