Vue ElementUI implementiert einen asynchronen Ladebaum

Liste aus '@/components/list.vue' importieren
importiere Add aus '@/components/add.vue'
Importiere Tree aus '@/components/tree.vue'
importiere AsynTree aus '@/components/asyntree.vue'

Standard exportieren{
    Routen:[
        {Pfad:"/Liste",Komponente:Liste},
        {Pfad:"/Hinzufügen",Komponente:Hinzufügen},
        {Pfad:"/add/:id",Komponente:Hinzufügen},
        {Pfad:"/Baum",Komponente:Baum},
        {Pfad:"/asyntree",Komponente:AsynTree}
    ]

}

<Vorlage>
  <div id="app">
    <router-link to="/add">Hinzufügen</router-link>&nbsp;&nbsp;
    <router-link to="/list">Liste</router-link>&nbsp;&nbsp;
    <router-link to="/tree">Baumstruktur</router-link>&nbsp;&nbsp;
    <router-link to="/asyntree">Asynchrone Baumstruktur</router-link>&nbsp;&nbsp;
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>
Liste aus „./components/list.vue“ importieren

Standard exportieren {
  Name: "App",
  Komponenten:
    Liste
  }
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

<Vorlage>


<el-container>
  <el-aside Breite="200px">
    <el-tree ref="Baum"
    :data="Daten"
    faul
    Kontrollkästchen anzeigen
    Knotenschlüssel="id"
    streng prüfen
    :load="Ladeknoten"
    :props="StandardProps"
    @node-click="nodeclick">
    </el-Baum>
  </el-beiseite>
  <el-main>

    <el-form :model="Typinfo" Klasse="Demo-Formular-Inline">
    <el-form-item label="Ich würde">
        <el-input v-model="typeinfo.id" schreibgeschützt></el-input>
    </el-form-item>
    <el-form-item label="Kategoriename">
        <el-input v-model="typeinfo.label" placeholder="Kategoriename"></el-input>
    </el-form-item>
    <el-form-item label="Seriennummer">
        <el-input v-model="typeinfo.seqno" placeholder="Seriennummer"></el-input>
    </el-form-item>
   <el-form-item label="Übergeordnete ID">
        <el-input v-model="typeinfo.pid" schreibgeschützt></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="dosave">Speichern</el-button>
        <el-button type="primary" @click="dochildsave">Knoten hinzufügen</el-button>
    </el-form-item>
    </el-form>

  </el-main>
</el-container>

</Vorlage>

<Skript>
Axios von „Axios“ importieren

Standard exportieren {
    Daten() {
        zurückkehren {
            data:[], //Datenmodell des Baumobjekts defaultProps: { //Korrespondenz der Eigenschaften des Baumobjekts children: 'children',
                Bezeichnung: „Bezeichnung“
            },
            typeinfo: {//Produktklassifizierungs-Entitätsobjekt-ID:'',
                pid:'',
                Etikett: '',
                Sequenznummer: ''
            }
        }
    },
    Methoden: {
        Knoten laden(Knoten, auflösen){
            //Wenn Sie den Knoten der ersten Ebene erweitern, laden Sie die Knotenliste der ersten Ebene aus dem Hintergrund, wenn (node.level==0)
            {
                dies.loadfirstnode(auflösen);
            }
            //Wenn Sie Knoten anderer Ebenen erweitern, laden Sie die Knotenliste der nächsten Ebene dynamisch aus dem Hintergrund, wenn (node.level>=1)
            {
                dies.loadchildnode(Knoten,auflösen);
            }
        },
        //Lade den Knoten der ersten Ebene loadfirstnode(resolve){
            axios.get('http://localhost:6060/loadtype')
                .dann(Funktion(bzw.){
                    auflösen(bzw.Daten);
                })
        },
        //Baumkomponente aktualisieren refreshtree(){
            var _this = dies;
            axios.get('http://localhost:6060/loadtype')
                .dann(Funktion(bzw.){
                    _diese.Daten = bzw.Daten;
                })
        },
        //Lade die Sammlung untergeordneter Knoten des Knotens loadchildnode(node,resolve){
            axios.get('http://localhost:6060/loadtypechild?pid='+node.data.id)
                .dann(Funktion(bzw.){
                    auflösen(bzw.Daten);
                })
        },
        //Klicken Sie auf das Ereignis, das auf dem Knoten ausgelöst wird. Übergeben Sie drei Parameter. Das Datenobjekt verwendet den ersten Parameter nodeclick(data,dataObj,self).
        {
            //Alarm(Daten.label+",id="+Daten.id);
            dies.typeinfo.id=data.id;
            dies.typeinfo.pid=data.pid;
            dies.typeinfo.label=Datenlabel;
            diese.typeinfo.seqno=Daten.seqno;
        },
        //Klassifizierungsmethode speichern dosave()
        {
            var _this = dies;
             axios.post('http://localhost:6060/savetype',diese.typeinfo)
                .dann(Funktion(bzw.){
                    wenn(bzw.Daten)
                        _this.refreshtree();
                })
        },
        //Unterklassifizierungsmethode speichern dochildsave()
        {
            //Beurteilen, ob im linken Baum ein Knoten ausgewählt ist. componentvar cnt=this.$refs['tree'].getCheckedNodes().length;
            wenn(cnt!=1)
            {
                this.$message('Sie müssen einen eindeutigen übergeordneten Knoten auswählen');
                zurückkehren;
            }
            //Holen Sie sich das Baumobjekt über this.$refs['tree'], wobei tree das Ref-Attribut der Baumkomponente ist var dataObj = this.$refs['tree'].getCheckedNodes()[0];
    
            diese.typeinfo.id='';
            dies.typeinfo.pid=dataObj.id;
            var _this = dies;
            axios.post('http://localhost:6060/savetype',diese.typeinfo)
                .dann(Funktion(bzw.){
                    wenn(bzw.Daten)
                        _this.refreshtree();
                })
        }
    }

}
</Skript>

@RequestMapping("/Ladetyp")
 @AntwortBody
 öffentliche Liste<TypeInfo> getTypeJson()
 {
  Liste<Typinfo> rtn = getFirstNode();
  
  Rückflug rtn;
 }
  
 @RequestMapping("/LadetypKind")
 @AntwortBody
 öffentliche Liste<TypeInfo> getTypeByPid(Integer pid)
 {
  System.out.println("pid==="+pid);
  Liste<Typinfo> rtn = addsrv.getTypeList(pid);
  
  Rückflug rtn;
 }
 
 private Liste<TypeInfo> getFirstNode()
 {
  TypeInfo root = addsrv.getRootType();
  Liste<TypeInfo> ersteListe = addsrv.getTypeList(root.getId());
  für(TypeInfo ti:firstList)
   recurseNode(ti);
  gib die erste Liste zurück;
 }
 
 private void recurseNode(TypeInfo ti)
 {
  Liste<TypeInfo> untergeordnete Elemente = addsrv.getTypeList(ti.getId());
  System.out.println("ti.id"+ti.getId()+",children="+children);
  wenn (Kinder == null || Kinder.Größe() == 0)
   zurückkehren;
  ti.setChildren(Kinder);
  für(TypeInfo chd:children)
  {
   recurseNode(chd);
  }
 }
 
 @RequestMapping("/Speichertyp")
 @AntwortBody
 öffentlicher Boolean-Speichertyp(@RequestBody TypeInfo ti)
 {
  versuchen {
   Integer-ID = ti.getId();
   wenn(id != null)
    addsrv.updateType(ti);
   anders {
    addsrv.saveType(ti);
   }
   gibt true zurück;
  } Fang (Ausnahme e) {
   gibt false zurück;
  }
  
 }