Avue-CRUD-Implementierungsbeispiel für einen komplexen dynamischen Header auf mehreren Ebenen

Spalte: [{
            Bezeichnung: 'Name',
            Requisite: "Name",
            Breite: 140,
          }, {
            Bezeichnung: ‚Geschlecht 1‘,
            Requisite: "Geschlecht",
          },
          {
            Bezeichnung: „Benutzerdefiniertes Symbol“,
            Requisite: "Symbol",
            Typ: "Symbol",
            Symbolliste: [{
              Bezeichnung: „Basisdiagramm“,
              Liste: ['el-icon-Zeit', 'el-icon-Glocke', 'el-icon-Stern-an']
            }]
          }, {
            Bezeichnung: „Komplexe Kopfzeile“,
            Kinder: [{
              Bezeichnung: 'Informationen',
              Kinder: [{
                Bezeichnung: "Alter",
                Requisite: „Alter“
              }, {
                Bezeichnung: 'Mobiltelefonnummer',
                Requisite: "Telefon",
              }]
            }, {
              Bezeichnung: "Region",
              Requisite: "Adresse",
              Typ: "Auswählen",
              Requisiten: {
                  Bezeichnung: "Name",
                  Wert: „Code“
              },
              dicUrl:'https://cli.avuejs.com/api/area/getProvince'
            }]
          }, {
            Bezeichnung: "Test",
            Stütze: "Test",
          },
          {
            Beschriftung: 'Mobiltelefon-Informationen 1',
            Stütze: "Telefon1"
          }],
        },
        Daten: [{
          Name: 'Zhang San',
          Alter: 14,
          Adresse: '110000',
          Telefon1: '17547400800',
          Telefon: '17547400800',
          Symbol: „el-icon-time“,
          Prüfung: 1,
          Geschlecht: 'männlich'
        }, {
          Name: 'Wang Wu',
          Alter: 10,
          Adresse: '120000',
          Prüfung: 1,
          Geschlecht: 'weiblich',
          Symbol: „el-icon-star-on“,
          Telefon1: '17547400800',
          Telefon: '17547400800'
        }]

@GetMapping("/getTableHeader")
	öffentliche R getTableHeaderJson(){
		Map<String,Objekt> map = neue HashMap<>();
		StringBuilder sb = neuer StringBuilder();
		sb.append("{label: 'Prozess',children: [");
		Liste<Fabrikprozess> Prozessliste = Fabrikprozessdienst.Liste();
		für (int i = 0; i < processList.size(); i++) {
			Zeichenfolge pid = processList.get(i).getProcessId();
			sb.append("{label:'" + processList.get(i).getProcessName() + "',prop:'" + pid + "',");
			sb.append("children:[{label: 'Stückpreis',prop: 'Preis' + pid + "'}, " +
				"{label: 'Gesamt', prop: 'Summe" + pid + "'},{label: 'Abgeschlossene Menge', prop: 'completeNum" + pid + "'}, " +
				"{label: 'Qualifizierungsprüfung qualifizierte Nummer', prop: 'qualifiedNum" + pid + "'}," +
				" {label: 'Anzahl der unqualifizierten Qualitätsprüfungen', prop: 'unqualifiedNum" + pid + "'}, " +
				"{label: 'Schrottmenge',prop: 'scrapNum" + pid + "'}]").append("},");
		};
		sb.anhängen("]}");

		map.put("Spalten",sb.toString());

		gib R.data(map) zurück;
	}

// Laden erstellt(){
      dies.getHeaderList();
 },
//Die auf der Ladeseite angezeigten Informationen finden Sie in der Methode methods: {
      getHeaderList(){
        getHeaderFun().then(res => {
          diese.Option.Spalte.push(
                 {
                   Bezeichnung: „Produktname“,
                   Requisite: "Produktname",
                   Farbe: '#eef1f6'
                 },
                 {
                   Bezeichnung: „Produktcode“,
                   Requisite: "Produktcode",
                 },
                 {
                   Bezeichnung: "Material",
                   Eigenschaft: "productMaterialStr",
                 },
                 {
                   Bezeichnung: "Menge",
                   Eigenschaft: "sumNum",
                 },
                 {
                   Bezeichnung: „Anzahl der Ausgliederungen“,
                   Eigenschaft: "outNum",
                 },
                 {
                   Bezeichnung: „Outsourcing-Abschlussbetrag“,
                   Eigenschaft: „outCompleteNum“
                 },
                 {
                   Bezeichnung: „Gesamt abgeschlossener Betrag“,
                   Eigenschaft: "totalCompleteNum"
                 }
          )
          // Holen Sie sich die Hintergrund-Spleißeninformationen let objs = eval("("+res.data.data.cols+")");
          diese.Option.Spalte.Push(Objekte);
          dies.beimLaden(diese.Seite);
        })
      }, 
 }

// Die Anzeige der Seitendaten muss dem Prop-Attribut der Hintergrundanfrage entsprechen onLoad(page, params = {}) {
        dies.laden = wahr;
        findProjectFormList(Seite.aktuelleSeite, Seite.Seitengröße, Objekt.zuweisen(Params, diese.Abfrage)).dann(res => {
          Konstante Daten = res.Daten.Daten;
          diese.Seite.Gesamt = Daten.Gesamt;
          //diese.Daten = Daten.Datensätze;

          let records = Daten.Datensätze;
          Lassen Sie Datenliste = [];
          Lassen Sie processList = this.option.column[7].children;
          für(lass i = 0; i < Datensätze.Länge; i++ ) {
            lass obj = {
              'Produktname': Datensätze[i].Produktname,
              'Produktcode': Datensätze[i].Produktcode,
              'productMaterialStr' : Datensätze[i].productMaterialStr,
              'sumNum' : Datensätze[i].sumNum,
              'outNum': Datensätze[i].outNum,
              'outCompleteNum' : Datensätze[i].outCompleteNum,
              'totalCompleteNum': Datensätze[i].totalCompleteNum,
            }
            let processNumList = Datensätze[i].processNumList;
            für(let j = 0; j < processNumList.length; j++) {
              für (let k = 0; k < processList.length; k++) {
                if (Prozessliste[k].prop === Prozessnummernliste[j].Prozesscode) {
                // $set weist den Wert der entsprechenden Eigenschaft prop this.$set(obj, 'price'+processNumList[j].processCode, processNumList[j].processPrice) zu;
                  dies.$set(obj, 'Summe'+ProzessNummernliste[j].ProzessCode, ProzessNummernliste[j].ProzessTotal);
                  dies.$set(obj, 'completeNum'+processNumList[j].processCode, processNumList[j].completeNum);
                  dies.$set(obj, 'qualifizierteNummer'+ProzessNummernliste[j].ProzessCode, ProzessNummernliste[j].qualifizierteNummer);
                  dies.$set(obj, 'unqualifiedNum'+processNumList[j].processCode, processNumList[j].unqualifiedNum);
                  dies.$set(obj, 'scrapNum'+processNumList[j].processCode, processNumList[j].scrapNum);
                  dies.$set(obj, 'shift'+processNumList[j].processCode, processNumList[j].shiftName);
                }
              }
            }
            Datenliste.push(obj);
          }
          diese.daten = Datenliste;

          dies.laden = falsch;
          diese.AuswahlLöschen();

        })
      },