Vue Shuttle-Box ermöglicht Auf- und Abbewegung

// setLeftAgency: Gekapselter Anforderungsschnittstellenname setLeftAgency(params).then((res) => { // Wenn der zurückgegebene Code == 0 ist, bedeutet dies Erfolg, if (res.data.code == 0) {
 lass { Daten } = res.data;
 data.forEach((item) => { //Die zurückgegebenen Daten durchlaufen. Wenn dieser Parameter „Item“ ist, fügen Sie den aktuellen Daten nocheck=true hinzu, damit das Kontrollkästchen nicht angezeigt wird.
 wenn(Artikel.Typ!=='Artikel'){
  item.nocheck=true
 }
 // item.children löschen;
 });
 this.parentNodes = data; // Setze die geänderten Daten in das Array ein und render es erneut}

<div class="leftTree"> // Die onCreated-Grenze ist hier die Initialisierungsfunktion des linken Baums, und parentNodes speichert alle Daten des linken Baums<ztree :setting="setting" @onCreated = 'onCreated' :parentNodes="parentNodes"></ztree>
</div>
<div Klasse="centerBtn">
 <el-button type="danger" plain icon="el-icon-arrow-right" @click="Table verschieben"></el-button>
 <el-button type="danger" plain icon="el-icon-d-arrow-left" @click="moveTreeAll"></el-button>
 <el-button type="danger" plain icon="el-icon-arrow-left" @click="moveTree"></el-button>
 <el-button type="danger" plain @click="moveUp(index)">Nach oben verschieben</el-button>
 <el-button type="danger" plain @click="moveDown(index)">Nach unten verschieben</el-button>
</div>

<div Klasse="rechteTabelle">
 <table :data.sync="tableData" // Von der Tabellenschnittstelle zurückgegebene Daten ref="personListSettingPage"
  :wird geladen='vxeWird geladen'
  v-model="selectGroups" // Binden Sie das Array der ausgewählten Elemente in der Tabelle rechts id="personListSettingPage"
  :showPagination='false'
  :Höhe-Vollbild = "falsch"
  @sort-change="SortierungÄndern"
  @checkbox-change="selectChange" // Einzelauswahlereignis für das ausgewählte Element auf der rechten Seite @checkbox-all="selectAll" // All-Select-Ereignis für das ausgewählte Element auf der rechten Seite @data-refresh="getTableData()"> // Funktion zum Abrufen der Tabellendaten auf der rechten Seite <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
  <table-column field="text" show-overflow="title" title="Ausgewählte Indikatoren" filterType='' >
  </Tabellenspalte>
 </Tabelle>
 </div>

moveDownId:"", // Beim Herunterbewegen gespeicherte DatenmoveUpId:"", // Beim Hochbewegen in der Tabelle rechts gespeicherte DatenselectGroups:[], // Wird verwendet, um die ausgewählten Daten rechts zu speicherntableData:[], // Wenn die Anforderung zurückkommt, werden alle Daten links in diesem Array gespeichertparentNodes:[], // Alle Daten des Baums linkstreeObj:"",

// Ztree initialisieren
 beimErstellt(treeObj){
 dies.treeObj = treeObj
 : Lassen Sie Knoten = this.treeObj.getCheckedNodes(true); 
},
 //Checkbox-Ereignis selectChange({ aktiviert, Datensätze}) {
 this.selectGroups = records // Speichere die ausgewählten Daten im Array},
 //Kontrollkästchen für alle ausgewählten Ereignisse selectAll({ aktiviert, Datensätze }) {
 this.selectGroups = Datensätze
 },

nach oben verschieben(Index){
 if(this.selectGroups.length>0){ // Prüfen, ob rechts ein ausgewähltes Element vorhanden ist let goOrnot = true
 this.selectGroups.find((seItem)=>{ //Durchsuche die auf der Registerkarte rechts ausgewählten Elemente und finde die entsprechende ID
  wenn(seItem.id==this.moveUpId.id){
  this.$message.warning(this.moveUpId.text+"Es ist kein Platz vorhanden, um sich in dieser Zeile nach oben zu bewegen.")
  goOrnot = false
  }
 })
 if(goOdernicht){
  this.tableData.forEach((item,index)=>{ // Alle Daten in der Tabelle rechts durchlaufen,
  this.$set(item,'rowIndex',index) //Aufgrund der Einschränkungen von JavaScript kann vue.js das Hinzufügen und Löschen von Objekteigenschaften nicht überwachen. Daher müssen Sie $set oder Object.assign(target, sources) verwenden, damit die Ansicht aktualisiert wird.})
  let-Flag = true
  dies.selectGroups.forEach((val,index2)=>{
  diese.tableData.find((itm,ind)=>{
   wenn(val.id==itm.id){
   if(itm.rowIndex==0){ // Durchlaufe die ausgewählten Daten auf der rechten Seite und vergleiche sie mit allen Daten. Wenn die ID gleich ist, bestimme den Wert des gerade hinzugefügten rowIndex-Attributs this.$message.warning(itm.text+"There is no space to move up this row")
    this.moveUpId = itm // Aktuelle Daten speichern flag = false
    zurückkehren
   }anders{
    if(flag){ // Jetzt können Sie mehrere Datenelemente verschieben let changeItem = JSON.parse(JSON.stringify(this.tableData[itm.rowIndex-1]))
    dies.tableData.splice(itm.rowIndex-1,1);
    dies.tableData.splice(itm.rowIndex,0,changeItem)
    }
   }
   }
  })
  })
 }
 }anders{
 this.$message.warning('Bitte wählen Sie die zu verschiebenden Daten aus.')
 }
},

nach unten verschieben(index){
 wenn(diese.selectGroups.length>0){
 loslassenOdernicht = true
 diese.selectGroups.find((seItem)=>{
  wenn(seItem.id==this.moveDownId.id){
  this.$message.warning(this.moveDownId.text+"In dieser Zeile ist kein Platz, um sich nach unten zu bewegen.")
  goOrnot = false
  }anders{
  this.moveFlag = wahr
  }
 })
 if(goOdernicht){
  dies.tableData.forEach((item,index)=>{
  dies.$set(item,'rowIndex',index)
  })
  let selectData = JSON.parse(JSON.stringify(this.tableData))
  lass a = [...diese.selectGroups]
  a.reverse().fürJeden((Wert,Index2)=>{
  selectData.find((itm,ind)=>{
   wenn(val.id==itm.id){
   wenn(itm.rowIndex==selectData.length-1){
    this.$message.warning(itm.text+"In dieser Zeile ist kein Platz mehr, um sich nach unten zu bewegen")
    this.moveDownId = itm
    this.moveFlag = falsch
   }anders{
    wenn(diese.moveFlag){
    let changeItem = itm
    let delIndex=selectData.findIndex(i=>i.id == changeItem.id)
    dies.tableData.splice(delIndex,1);
    dies.tableData.splice(delIndex+1,0,changeItem)
    this.$refs.personListSettingPage.$refs.Table.setCheckboxRow(this.tableData[itm.rowIndex+1],true) // Füge der Tabelle rechts eine ref=personListSettingPage hinzu
    }
   }
   }
  })
  })
 }
 }anders{
 this.$message.warning('Bitte wählen Sie die zu verschiebenden Daten aus.')
 }
}

/* in den Baum verschieben */
Baum verschieben(){
 wenn(diese.selectGroups.length>0){
 dies.selectGroups.forEach(item=>{
  dies.parentNodes.find(val=>{
  wenn(val.id == item.pid){
   /* Einen Knoten hinzufügen */
   let node = this.treeObj.getNodeByParam("id", val.id, null);
   this.treeObj.addNodes(Knoten,Element)
   /* Den ausgewählten Status des neu hinzugefügten Knotens abbrechen*/
   let cancelNode = this.treeObj.getNodeByParam("id", item.id, null);
   this.treeObj.checkNode(cancelNode,false,true);
  }
  })
  dies.tableData.splice(dies.tableData.findIndex(val => val.id === item.id), 1)
 })
 }anders{
 this.$message.warning('Bitte wählen Sie die zu verschiebenden Daten aus.')
 }
},

/* In Tabelle verschieben */
Tabelle verschieben(){
 lass arr = []
 : Lassen Sie Knoten = this.treeObj.getCheckedNodes(true);
 wenn(Knoten.Länge>0){
 Knoten.fürJeden(Element=>{
  dies.tableData.find(val=>{
  arr.push(gültige ID)
  })
  if(arr.indexOf(item.id)>-1) return this.$message.error("Daten sind dupliziert, bitte nicht erneut hinzufügen")
  this.treeObj.removeNode(Element)
  this.tableData.push(this.filterObj(item,["checked","codeSetId",'id','img','infoItemFlag','isMult','itemType','locked','mult','orgCode','pid','sort','syrs','text'])) // Rufen Sie die folgende Methode auf, um redundante Felder zu entfernen})
 }anders{
 this.$message.warning('Bitte überprüfen Sie die Daten')
 }
},

/* Objektredundante Felder filtern*/
filterObj(obj, arr) {
 const Ergebnis = {}
 Object.keys(obj).filter((Schlüssel) => arr.includes(Schlüssel)).forEach((Schlüssel) => {
 Ergebnis[Schlüssel] = Objekt[Schlüssel]
 })
 Ergebnis zurückgeben
}