React antd realisiert dynamische Vergrößerung und Verkleinerung der Form

importiere React, {Komponente} von „react“;
Stile aus „./index.less“ importieren;
importieren {
  Tisch,
  Taste,
  Wählen,
  Popbestätigung,
  Modal,
  Bilden,
  Eingang,
  Radio,
  Reihe,
  Spalte, Tooltip,
  Symbol,
  Nachricht,
  Paginierung, Eingabenummer,
} von „antd“;

const Option = Auswählen.Option;
const FormItem = Form.Item;

sei id = 0;

@Form.erstellen()
Klasse Index erweitert Komponente {
  MarktID = 0;
  Zustand = {
    Typ auswählen: '',
    orderType: 1, //Artikel 1 Karte 2
    Typ wird geladen: false,
    istEdit: false,
    lookVisible: falsch,
    sichtbar: falsch,
    Seitengröße: 10,
    Seitennummer: 1,
    Schlüsselwort: '',
    Reihe: {},
    Typliste: {},
    verspotten: {},
    Kartentyp: [{
      'Feldname': 'Name',
      'isImg': 0,
      'Bestellung': 0,
      'Bemerkungen': 'Name',
    }, {
      'Feldname': 'Bezeichnung',
      'isImg': 0,
      'Bestellung': 0,
      'Bemerkungen': 'Beschriftungen',
    }, {
      'Feldname': 'lon',
      'isImg': 0,
      'Bestellung': 0,
      'Bemerkungen': 'Längengrad',
    }, {
      'Feldname': 'lat',
      'isImg': 0,
      'Bestellung': 0,
      'Bemerkungen': 'Breitengrad',
    }],
    Artikeltyp: [{
      'Feldname': 'Name',
      'isImg': 0,
      'Bestellung': 0,
      'Bemerkungen': 'Name',
    }, {
      'Feldname': 'Bezeichnung',
      'isImg': 0,
      'Bestellung': 0,
      'Bemerkungen': 'Beschriftungen',
    }],
  };
/**
   * Generieren Sie das erforderliche Datenformat für den dynamischen Tabellenwert * @param-Werte
   * @returns {[]}
   */
  createValues ​​​​= (Werte) => {
    const { Zeile } = dieser.Zustand;
    const Daten = [];
    const newValues ​​​​= { // Verwenden Sie ein neues Objekt, um die übermittelten Daten zu übertragen ... Werte,
    };
    const fieldNameData = []; // fieldName-Wert speichern const remarksData = []; // Bemerkungswert speichern const isImgData = []; // isImg-Wert speichern const orderData = []; // orderData-Wert speichern const fieldName = RegExp(/fieldName/);
    const Bemerkungen = RegExp(/Bemerkungen/);
    const isImg = RegExp(/isImg/);
    für (const key in newValues) {
      if (Feldname.test(Schlüssel)) {
        fieldNameData.push(neueWerte[Schlüssel]);
      }
    }
    für (const key in newValues) {
      wenn (Bemerkungen.Test(Schlüssel)) {
        commentsData.push(neueWerte[Schlüssel]);
      }
    }
    für (const key in newValues) {
      wenn (isImg.test(Schlüssel)) {
        isImgData.push(neueWerte[Schlüssel]);
      }
    }
    für (const key in newValues) {
      wenn (isImg.test(Schlüssel)) {
        orderData.push(neueWerte[Schlüssel]);
      }
    }
    FeldNameData.fürJeden((Element, Index) => {
      Daten.push({
        Feldname: Artikel,
        Bemerkungen: Bemerkungsdaten[index],
        isImg: isImgData[index],
        Bestellung: Bestelldaten[Index],
        ID: Zeile.Datentyp ? Zeile.Datentyp.ID: '',
      });
    });
    Daten zurückgeben;
  };

  handleOk = e => {
    this.props.form.validateFields((err, values) => {
      wenn (!err) {
        const { Zeile, istBearbeiten } = dieser.Zustand;
        Konstante Parameter = {
          Datentyp: {
            Name: Werte.Name,
            Typ: Werte.Typ,
            ID: Zeile.Datentyp ? Zeile.Datentyp.ID: '',
          },
          Typfelder: [],
        };
        params.typeFields = this.createValues(Werte);
        if (istBearbeiten) {
          editType(params).then(res => {
            wenn (res.code === 0) {
              message.info('Änderung erfolgreich');
              dies.setState({
                sichtbar: falsch,
                istEdit: false,
              });
              dies.fetchTypeList();
              this.props.form.resetFields();
            }
          });
        } anders {
          addType(params).then(res => {
            wenn (res.code === 0) {
              message.info('Erfolgreich hinzugefügt');
              dies.setState({
                sichtbar: falsch,
                istEdit: false,
              });
              dies.fetchTypeList();
              diese.props.form.resetFields();
            }
          });
        }
      }
    });
  };

  lookOrEditTypeModal = (Flagge, Datensatz) => {
    const { Artikeltyp, Kartentyp } = dieser.Status;
    if (flag === 'add') { //Standardartikelvorlage hinzufügen this.marketId = articleType.length + 1; //Länge des dynamischen Schlüsseltags festlegen this.setState({
        sichtbar: wahr,
        Zeile: { Typfelder: Artikeltyp },
      });
    } sonst wenn (Flag === 'bearbeiten') {
      dies.setState({
        sichtbar: wahr,
      });
      getType({ dataTypeId: Datensatz.id }).then(res => {
        wenn (res.code === 0) {
          this.marketId = res.data.typeFields.length + 1; //Länge des dynamischen Schlüssel-Tags festlegen this.setState({
            Zeile: res.data,
            isEdit: flag === 'bearbeiten',
          });
        }
      });
    } anders {
      dies.setState({
        lookVisible: wahr,
      });
      getType({ dataTypeId: Datensatz.id }).then(res => {
        wenn (res.code === 0) {
          dies.setState({
            Zeile: res.data,
          });
        }
      });
    }
  };


  onChangeType = (Wert) => {
    const { form } = diese.props;
    const { Bestelltyp, Zeile, Artikeltyp, Kartentyp } = dieser.Status;
    diese.props.form.resetFields();

    const-Parameter = {};
    if (value === 1) { //Artikeltyp params['typeFields'] = articleType;
      this.marketId = Artikeltyp.Länge + 1;
    } anders {
      Parameter['Typfelder'] = Kartentyp;
      diese.MarktId = Kartentyp.Länge + 1;
    }
    dies.setState({
      Zeile: Parameter,
      Bestelltyp: Wert,
    });
  };
//Methode löschen! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  entferneDatei = k => {
    const { form } = diese.props;
    const keys = form.getFieldValue('keys');
    wenn (Schlüssel.Länge === 1) {
      zurückkehren;
    }
    form.setFieldsValue({
      Schlüssel: Schlüssel.Filter(Schlüssel => Schlüssel !== k),
    });
  };
//Methode hinzufügen! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  Datei hinzufügen = () => {
    const { form } = diese.props;
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(this.marketId++);
    form.setFieldsValue({
      Schlüssel: nextKeys,
    });
  };

  judgeIsTemplet = (Daten) => {
    wenn (!data) {
      gibt false zurück;
    }
    wenn ((data.fieldName === 'lat') || (data.fieldName === 'lon') || (data.fieldName === 'label') || (data.fieldName === 'name')) {
      gibt true zurück;
    }
  };
  handleValidator = (Regel, Wert, Rückruf) => {
    wenn (!val) {
      Rückruf();
    }
    Lassen Sie validateResult = /^[5A-Za-z0-9-\_]+$/.test(val);
    wenn (!validateResult) {
      callback('Bitte geben Sie das richtige Tabellenfeld ein');
    }
    Rückruf();
  };

  Spalten = [
    {
      Titel: 'Typname',
      Datenindex: "Name",
      Schlüssel: 'Name',
      Breite: 500,
    },
    {
      Titel: 'Typ',
      Datenindex: "Typ",
      Schlüssel: 'Typ',
      rendern: (Text) => {
        Rückgabetext === 1? „Artikel“: „Karte“;
      },
    },
    {
      Titel: 'Operation',
      dataIndex: 'Adresse',
      Schlüssel: 'Adresse',
      rendern: (Text, Datensatz) => {
        Rückgabewert <div>
          <Button type='link' onClick={() => this.lookOrEditTypeModal('look', record)}>Anzeigen</Button>
          <Button type='link' onClick={() => this.lookOrEditTypeModal('edit', record)}>Bearbeiten</Button>
          <Popconfirm title="Löschen bestätigen?" onConfirm={() => this.deleteTypeClick(record)}>
            <Button type='link'>Löschen</Button>
          </Popconfirm>
        </div>;
      },
    },
  ];

  rendern() {
    const { selectType, Typ wird geladen, Mock, Zeile, ist Bearbeiten, Typliste, Schlüsselwort, sichtbar aussehen } = dieser.Zustand;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    let Typfelder = Zeile.Typfelder || [];
    const initData = [];
    typeFields.forEach((item, index) => {//Legen Sie das Standardschlüssel-Array entsprechend den realen Daten fest initData.push(index);
    });
    getFieldDecorator('keys', { initialValue: initData }); //Fügen Sie dem Formular das Schlüsselfeld hinzu und legen Sie den Standardwert fest. Dadurch wird beim Bearbeiten der Effekt des Bearbeitens und des Nachfüllens erzeugt.
    const keys = getFieldValue('keys');
    const formItems = keys.map((k) => (
      <Zeilenrand={12} Schlüssel={k} Klassenname={styles.form_row}>
        <FormItem label="Feld" key={`fieldName_${k}`}>
          {getFieldDecorator(`fieldName_${k}`, {
            Anfangswert: row.typeFields[k] ? row.typeFields[k].Feldname : '',
            validateTrigger: ['onChange', 'onBlur'], //Überprüfen Sie das Timing der untergeordneten Knotenwerte rules: [{
              erforderlich: wahr,
              Meldung: 'Bitte geben Sie das englische Feld ein!',
            }, {
              Validator: this.handleValidator,
            }],
          })(<Input placeholder="Bitte geben Sie das englische Feld ein" max={30} disabled={this.judgeIsTemplet(row.typeFields[k])}/>)}
        </FormItem>
        <FormItem label="Name" key={`remarks_${k}`}>
          {getFieldDecorator(`remarks_${k}`, {
            Anfangswert: row.typeFields[k] ? row.typeFields[k].remarks : '',
            validateTrigger: ['beiÄnderung', 'beiUnschärfe'],
            Regeln: [{
              erforderlich: wahr,
              Meldung: 'Bitte geben Sie einen chinesischen Namen ein!',
            }],
          })(<Input placeholder="Bitte geben Sie den chinesischen Namen ein" disabled={this.judgeIsTemplet(row.typeFields[k])}/>)}
        </FormItem>
        <FormItem label="Sortieren" key={`order_${k}`}>
          {getFieldDecorator(`order_${k}`, {
            Anfangswert: row.typeFields[k] ? row.typeFields[k].order : 0,
          })(<InputNumber style={{width:75}} placeholder="Sortieren" />)}
        </FormItem>
        <FormItem label="Bild" key={k}>
          {getFieldDecorator(`isImg_${k}`, {
            Anfangswert: row.typeFields[k] ? row.typeFields[k].isImg : 0,
            Regeln: [{
              erforderlich: wahr,
            }],
          })(<Radio.Group deaktiviert={this.judgeIsTemplet(row.typeFields[k])}>
            <Radiowert={0}>Nein</Radio>
            <Radiowert={1}>Ja</Radio>
          </Radio.Gruppe>)}
        </FormItem>
        {!this.judgeIsTemplet(row.typeFields[k]) ? (
          <Icon type="minus-circle" onClick={() => this.removeFile(k)} title='Löschen'/>
        ) : null}
      </Zeile>
    ));


    zurückkehren (
      <div Klassenname={styles.wrap_type}>
        <Modal
          Titel="Typverwaltung"
          sichtbar = {dieser.Zustand.sichtbar}
          beiOk={this.handleOk}
          beiAbbrechen = {this.handleCancel}
          Breite={890}
          // Klassenname = {styles.modal_type}
          maskClosable={false}
        >
          <Formularlayout='inline'>
            <Zeilenstil={{ textAlign: 'center', marginBottom: 14 }}>
              <FormItem label="Typ auswählen">
                {getFieldDecorator('Typ', {
                  Anfangswert: row.dataType ? row.dataType.type : 1,
                  Regeln: [{
                    erforderlich: wahr,
                  }],
                })(<Wählen Sie onChange={this.onChangeType} deaktiviert={isEdit} Stil={{ Breite: 200 }}>
                  <Optionswert={1}>Artikeltyp</Option>
                  <Optionswert={2}>Kartentyp</Option>
                  <Option value={3} disabled={true}>Dateityp</Option>
                </Auswählen>)}
              </FormItem>
              <FormItem label="Typname">
                {getFieldDecorator('name', {
                  Anfangswert: row.dataType ? row.dataType.name : '',
                  Regeln: [{
                    erforderlich: wahr,
                    Meldung: 'Bitte geben Sie den Typnamen ein!',
                  }],
                })(<Input placeholder="Bitte geben Sie den Typnamen ein" style={{ width: 200 }}/>)}
              </FormItem>
            </Zeile>
            {formItems}
            <div Stil = {{ Rand: 'auto', Textausrichtung: 'Center' }}>
              <Button icon="plus" onClick={this.addFile} style={{ marginTop: 10 }}>Neues Feld hinzufügen</Button>
            </div>
          </Form>
        </Modal>
      </div>
    );
  }
}

Standardindex exportieren;