Antd + vue realisiert die Idee der dynamischen Überprüfung kreisförmiger Attributformen

			<a-form :form="formular" @keyup.enter.native='Suchanfrage'>
				<div Klasse="dynamischer Wrap">
					<div v-for="(item,index) in formList" :key="index">
						<a-row :gutter="24">
							<a-col :span="6">
								<a-form-item label="Name" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
									<a-select placeholder='Bitte wählen Sie einen Namen aus'
									          v-decorator="[`equipment[${index}]`,{ initialValue: formList[index] ? formList[index].equipment : '', rules: [{ required: true, message: 'Bitte wählen Sie eine Ausrüstung aus!' }]}]"
									          @change="(e)=>Ausstattungsänderung(e,index)">
										<a-select-option v-for='Optionen in Formliste[index].eqpList' :Schlüssel='Optionen.name' :Wert='Optionen.name'>
											{{ Optionen.name }}
										</a-Auswahloption>
									</a-auswählen>
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="Vergleichsartikel" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
									<a-Auswahl
										Platzhalter="Bitte wählen Sie einen Vergleichsartikel aus"
										v-decorator="[`dataCode[${index}]`,{initialValue: formList[index] ? formList[index].dataCode : '',rules: [{ required: true, message: 'Bitte wählen Sie das Vergleichselement aus!' }]}]">
										<a-select-option v-for='Option in Formularliste[index].dataTypeList' :Schlüssel='Option.name' :Wert='Option.name'>
											{{ option.name }}
										</a-Auswahloption>
									</a-auswählen>
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="Bemerkungen" :labelCol="{span: 6}" :wrapperCol="{span: 18}">
									<a-input v-decorator="[`remark[${index}]`]" placeholder="Bitte Anmerkungen eingeben"></a-input>
								</a-form-item>
							</a-col>
							<a-col: span="2" style="padding-left: 0px">
								<a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
									<template v-if="formList.length > 1">
										<a-icon Typ="Löschen" @click="removeRow(index)"/>
									</Vorlage>
								</a-form-item>
							</a-col>
						</a-row>
					</div>
				</div>
			</a-form>
 
			<a-form :form="dateForm" inline @keyup.enter.native='Suchabfrage'>
				<a-form-item label='Abfragedatum' :labelCol="{span: 8}" :wrapperCol="{span: 16}"
				             Stil="Anzeige: Inline-Block;Breite: 300px;">
					<a-Datumsauswahl
						Stil="Breite: 200px;"
						Klasse = "Abfragegruppe-Kunden"
						v-decorator="['startTime', { rules: [{ required: true, message: 'Bitte wählen Sie eine Startzeit!' }] }]"
						:disabled-date='deaktiviertesStartdatum'
						Format = "JJJJ-MM-TT"
						Platzhalter='Bitte wählen Sie eine Startzeit aus'
						@change='handleStart($ereignis)'
						@openChange='handleStartOpenChange'></a-date-picker>
				</a-form-item>
				<span :style="{ Anzeige: 'inline-block', Breite: '24px', Textausrichtung: 'Mitte' }">-</span>
				<a-form-item style="Anzeige: Inline-Block;Breite: 200px;">
					<a-Datumsauswahl
						Stil="Breite: 200px;"
						Klasse = "Abfragegruppe-Kunden"
						v-decorator="['endTime', { rules: [{ required: true, message: 'Bitte wählen Sie eine Endzeit!' }] }]"
						:deaktiviertes Datum = 'deaktiviertes Enddatum'
						Format = "JJJJ-MM-TT"
						Platzhalter='Bitte Endzeit auswählen'
						@change='handleEnd($ereignis)'
						:öffnen='EndeÖffnen'
						@openChange='handleEndOpenChange'></a-date-picker>
				</a-form-item>
				<span style="margin-left: 10px">
				        <a-button type='primary' :disabled='loading' @click='searchQuery' icon='search'>Suchen</a-button>
				        <a-button type='primary' @click='searchReset' icon='search' style='margin-left:10px'>Zurücksetzen</a-button>
				        <a-button type="primary" icon="plus" @click="addRow" style='margin-left:10px'>Abfragebedingungen hinzufügen</a-button>
			        </span>
			</a-form>
			<p>Die Abfragebedingung ist: {{searchData}}</p>

initForm() {
				// Zuerst die Geräteliste anfordern und in eqpList speichern // Das Formular this.formList.push({ initialisieren
					Ausrüstung: '',
					Datencode: '',
					Bemerkung: '',
					eqpList: diese.eqpList,
					Datentypliste: []
				})
			},
			// Eine Zeile löschen handleRemove(index) {
				wenn (diese.formList.length === 1) {
					zurückkehren
				}
				diese.formList.splice(index, 1)
			},
			// Füge eine neue Zeile hinzu handleAdd() {
				diese.formList.push({
					Ausrüstung: '',
					Datencode: '',
					Bemerkung: '',
					eqpList: this.eqpList, // Kann dynamisch entsprechend der Schnittstelle abgerufen werden. Hier ist es einfach zu demonstrieren und direkt zuzuweisen dataTypeList: [], // Kann dynamisch entsprechend der Schnittstelle abgerufen und entsprechend dem Gerät zugeordnet werden })
			},
			equipChange(Wert, Index) {
				// Wert ändern this.formList[index].equipment = Wert;
				//Aktualisiere synchron die Vergleichselementliste, die dem aktuell ausgewählten Gerät entspricht this.handleEqpIdentity(value, index)
			},
			// Abfrage der entsprechenden Vergleichselementliste entsprechend dem Gerät handleEqpIdentity(value, index) {
				this.dataTypeList = []; // dataTypeList löschen
				this.formList[index].dataTypeList = []; // Lösche die dataTypeList der aktuellen Zeile
				//Holen Sie sich die entsprechende Vergleichselementliste entsprechend dem neuen Gerätenamen getAction(this.url.getDataTypeList, {equipment: value})
					.then((res) => {
						wenn (res.erfolg) {
							diese.dataTypeList = res.result;
							diese.formList[index].dataTypeList = diese.dataTypeList;
							// this.formList[index].dataCode = ''; Die direkte Zuweisung eines Nullwertes ist ungültig //Sie müssen getFieldValue, setFieldsValue verwenden
							let dataCode1Arr = this.form.getFieldValue('dataCode');
							wenn (dataCode1Arr.length !== 0) {
								dataCode1Arr[index] = ''
							}
							this.form.setFieldsValue({dataCode: dataCode1Arr})
						} anders {
							dies.$message.warning(res.message)
						}
					})
					.fangen(() => {
						this.$message.error('Abruf fehlgeschlagen, bitte versuchen Sie es erneut!')
					})
			},
// Klickabfrage searchQuery() {
				// Validiere zuerst die Schleifenform const {form: {validateFields}} = this
				validateFields((Fehler, Werte) => {
					wenn (!Fehler) {
						this.dateForm.validateFields((dateErr, dateValues) => {
							//Das Datumssuchformular erneut validieren dateValues.startTime = moment(dateValues.startTime).format('JJJJ-MM-TT')
							dateValues.endTime = Moment(dateValues.endTime).format('JJJJ-MM-TT')
							wenn (!dateErr) {
								dies.laden = wahr;
								let formData = Object.assign({}, dateValues);
								//In die vom Hintergrund benötigte Datenstruktur organisieren // Schleifenform let searchArr = [];
								(Werte[`Ausrüstung`]).fürJedes((Artikel, Index) => {
									const obj = {
										Ausrüstung: Gegenstand,
										Bemerkung: Werte[`Bemerkung`][Index],
										Datencode: Werte[`Datencode`][Index]
									}
									SucheArr.push(obj);
 
								})
								// Datumsform if (!dateValues.startTime) {
									formData.startTime = Moment (neues Datum ()).format ('JJJJ-MM-TT')
								}
								formData.eqpInfoParamVoList = Sucharr;
								diese.Suchdaten = JSON.parse(Formulardaten)
							  // Schnittstelle anfordern }
						})
					}
				})
			},