Modify the list page on the basis of jeecg boot code generation (combined with customized components)

First on the renderings ：

1、 Create an interface on the back end , Get tree nodes . After passing the test .

2、 Create front-end components

Two method All codes of are ：

methods: {
  onLoadData(selectedNode) {
    let that = this

    let pid = 0
    if (selectedNode != null) {
      pid = selectedNode.dataRef.id
    }

    let params = new Object()
    params.pid = pid

    return new Promise(resolve => {
      getAction("/jeecg-product/dict.device_catalog/dictDeviceCatalog/queryByPid", params).then(function(res) {
        res.forEach(function(catalog){

          let node = new Object()

          node.key = catalog.id
          node.title = catalog.deviceCatalog
          node.isLeaf = (catalog.hasChild == 1?false:true);
          node.id = catalog.id
          node.pid = params.pid
          node.icon = "gold"
          node.children=[]
          debugger
          if(selectedNode != null){
            node.path = selectedNode.dataRef.title + "-" + node.title
          }
          else{
            node.path = node.title
          }
          if(selectedNode == null){
            that.treeData.push(node)
          }
          else{
            selectedNode.dataRef.children.push(node)
          }

          // that.allTreeNodes.push(node)
        })
      })
      resolve();
    })


  },
  onSelectNode(nodeId, e){
    let param = new Object();
    param.node = e.node.dataRef
    param.id = e.node.dataRef.key
    param.path = e.node.dataRef.path
    param.title = e.node.dataRef.title
    this.$emit("SelectNode",param)
  }
},

It should be noted that ant-design-vue in , The nodes of the tree control are only key,title,children,isleaf Mandatory （ namely ： Based on these attributes, a tree is generated ）, It can be used through dataRef Get the corresponding self built node object .

Custom component events ：

3、 front end vue call