el-tree 树 前后端 表结构 记录

 参数定义

treeData: [
  // {
  //   label: '报表分组',
  //   children: [],
  //   leaf: false,
  //   show: false
  // }
],
defaultProps: {
  children: 'children',
  label: 'label',
  isLeaf: 'leaf',
},
expandList:[],

el-tree

<el-tree :data="treeData"
         :props="defaultProps"
         node-key="label"
         :default-expanded-keys="expandList"
         :expand-on-click-node="false"
         @node-click="handleTreeClick">
  <template #default="{node, data}">
    <div style="width: 100%" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
      <img style="display:inline-block" :src='node.level > 1 ? this.folder : this.folder' title="文件夹"><span  class="treeSpan"> {{ node.label}}</span>
      <el-dropdown type="primary" class="treeStyle" v-show="data.show">
        <span class="hover-dropdown" >
          <img src="../images/更多.svg" title="更多">
        </span>
        <template #dropdown>
          <el-dropdown-menu >
            <el-dropdown-item @mouseenter="mouseenter2(data)" @mouseleave="mouseleave2(data)" @click="handleInsertClick(node)"><img src="../images/新增.svg" title="新增">&nbsp;新增</el-dropdown-item>
            <el-dropdown-item @mouseenter="mouseenter2(data)" @mouseleave="mouseleave2(data)" @click="handleUpdateClick(node)"><img src="../images/修改.svg" title="修改">&nbsp;修改</el-dropdown-item>
            <el-dropdown-item @mouseenter="mouseenter2(data)" @mouseleave="mouseleave2(data)" @click="handleDeleteClick(node)"><img src="../images/删除.svg" title="删除">&nbsp;删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </template>
</el-tree>

前端js

handleTreeClick(obj,node) {
  document.documentElement.style.setProperty('--tree-white', '#57CFFF');
  this.pageCurrent = 1;
  this.layerNum = 1;
  this.reportGroup = node.data.idPath;
  this.getTableData();
},
// 树节点鼠标移入移出
mouseenter(data){
  // console.log('mouseenter node:', node)
  // console.log('mouseenter data:', data)
  if(data.leaf != true) {
    data.show = true;
  }
},
mouseleave(data){
  // data.show = false;
  this.timeNum = setTimeout(function () {
    data.show = false;
  }, 100);
},
mouseenter2(data){
  // console.log('mouseenter node:', node)
  clearTimeout(this.timeNum);
},
mouseleave2(data){
  // data.show = false;
  this.timeNum = setTimeout(function () {
    data.show = false;
  }, 100);
},

后端树节点信息处理（递归）

package com.baosight.eplat.be.dr.service;

import com.baosight.eplat.be.dr.domain.ReportTreeBean;
import com.baosight.iplat4j.core.ei.EiConstant;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.service.impl.ServiceBase;
import com.baosight.iplat4j.core.service.soa.XServiceManager;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class ServiceBEDR0301 extends ServiceBase {

    @Override
    public EiInfo initLoad(EiInfo inInfo) {
        return inInfo;
    }

    public EiInfo query(EiInfo inInfo) {
        List<ReportTreeBean> list = getReportTree(null);
        inInfo.set("treeInfo",list);
        List<Map> list2 = getGroups(inInfo);
        inInfo.set("groups",list2);
        List<String> list3 = getEnames();
        inInfo.set("enames",list3);
        return inInfo;
    }

    public EiInfo query06(EiInfo inInfo) {
        List<ReportTreeBean> list = getReportTree06(null);
        inInfo.set("treeInfo",list);
        List<Map> list2 = getGroups(inInfo);
        inInfo.set("groups",list2);
        List<String> list3 = getEnames();
        inInfo.set("enames",list3);
        return inInfo;
    }

    public List<String> getEnames() {
        List<String> enames = new ArrayList<>();
        Map map =new HashMap();
        enames = dao.query("BEDR0301.getEnames",map);

        return enames;
    }

    public List<Map> getGroups(EiInfo inInfo) {
        List<ReportTreeBean> infoList;
        List<Map> groups = new ArrayList<>();
        Map map =new HashMap();
        infoList = dao.query("BEDR0301.getTree",map);
        for(ReportTreeBean reportTreeBean: infoList) {
            Map mapRes =new HashMap();
            String[] idPaths = reportTreeBean.getIdPath().split("/");
            String idPahtlabel = "";
            for(int i = idPaths.length - 1; i >= 0 ; i--) {
                for(ReportTreeBean reportTreeBean2: infoList) {
                    if(idPaths[i].equals(String.valueOf(reportTreeBean2.getId()))) {
                        idPahtlabel = idPahtlabel + "/" +reportTreeBean2.getName();
                        break;
                    }
                }
            }
            idPahtlabel = idPahtlabel.substring(1);
            mapRes.put("label",idPahtlabel);
            mapRes.put("value",reportTreeBean.getIdPath());
            groups.add(mapRes);
        }

        return groups;
    }

    public List<ReportTreeBean> getReportTree(Integer parentId) {
        List<ReportTreeBean> infoList;
        if (parentId == null) {
            Map map =new HashMap();
            infoList = dao.query("BEDR0301.getFirstLevel",map);
        } else {
            Map map =new HashMap();
            map.put("parentId",parentId);
            infoList = dao.query("BEDR0301.getTree",map);
        }
        for (ReportTreeBean bean : infoList) {
            Integer parentId1 = bean.getId();
            List<ReportTreeBean> cityTree = getReportTree(parentId1);
            bean.setChildren(cityTree);
        }
        return infoList;
    }

    public List<ReportTreeBean> getReportTree06(Integer parentId) {
        List<ReportTreeBean> infoList;
        if (parentId == null) {
            Map map =new HashMap();
            infoList = dao.query("BEDR0301.getFirstLevel",map);
        } else {
            Map map =new HashMap();
            map.put("parentId",parentId);
            infoList = dao.query("BEDR0301.getTree",map);
        }
        for (ReportTreeBean bean : infoList) {
            Integer parentId1 = bean.getId();
            String idPath = bean.getIdPath();
            List<ReportTreeBean> cityTree = getReportTree06(parentId1);
            bean.setChildren(cityTree);
            Map map =new HashMap();
            map.put("reportGroup",idPath);
            List list =dao.query("BEDR03.getReportsByGroup",map);
            for(int i = 0; i < list.size(); i++) {
                Map mapRes = (Map) list.get(i);
                String reportName = (String) mapRes.get("reportName");
                String reportCode = (String) mapRes.get("reportCode");
                List<ReportTreeBean> cityTree2 = bean.getChildren();
                ReportTreeBean reportTreeBean = new ReportTreeBean(reportName,reportName,true,reportCode);
                cityTree2.add(reportTreeBean);
            }
        }
        return infoList;
    }

    public EiInfo insertReportTree(EiInfo inInfo) {
        Map m = inInfo.getBlock("result").getAttr();
        dao.insert("BEDR0301.insertReportTree", m);
        List list = dao.query("BEDR0301.getId", m);
        String idPath = (String) m.get("idPath");
        if("".equals(idPath)) {
            idPath = String.valueOf(list.get(0));
        } else {
            idPath = list.get(0) + "/" + idPath;
        }
        m.put("id",list.get(0));
        m.put("idPath",idPath);
        dao.update("BEDR0301.updateInPath", m);
        return inInfo;
    }

    public EiInfo updateReportTree(EiInfo inInfo) {
        Map m = inInfo.getBlock("result").getAttr();
        dao.update("BEDR0301.updateReportTree", m);
        return inInfo;
    }

    public EiInfo deleteReportTree(EiInfo inInfo) {
        Map m = inInfo.getBlock("result").getAttr();
        dao.delete("BEDR0301.deleteReportTree", m);
        List<ReportTreeBean> list = getReportTree((Integer) m.get("id"));
        for(ReportTreeBean reportTreeBean : list) {
            m.put("id",reportTreeBean.getId());
            dao.delete("BEDR0301.deleteReportTree", m);
        }
        return inInfo;
    }

    public EiInfo getAllParamSources(EiInfo inInfo) {
        String codeset_code= "eplat.report.paramSources";
        EiInfo eiInfo = new EiInfo();
        eiInfo.set(EiConstant.serviceId, "S_ED_11");
        eiInfo.set("tableName", "tedcm01");
        eiInfo.set("valueColumnName", "ITEM_CODE");
        eiInfo.set("labelColumnName", "ITEM_CNAME");
        eiInfo.set("condition", "CODESET_CODE = '" + codeset_code + "'");
        eiInfo.set("orderBy", "SORT_ID asc");
        //调用接口
        EiInfo codeInfo = XServiceManager.call(eiInfo);
        List dataType = (List) codeInfo.get("list");
        inInfo.set("AllParamSources",dataType);
        return inInfo;
    }

    public EiInfo getAllCodes(EiInfo inInfo) {
        Map map =new HashMap();
        List infoList = dao.query("BEDR0301.getAllCodes",map);
        inInfo.set("allCodes",infoList);
        return inInfo;
    }

}

树 表结构