iview implementiert dynamische Formulare und eine benutzerdefinierte Überlappung der Überprüfungszeiträume

<template lang="html">
 <div Klasse="">

    <Formular
      ref="formValidate"
      :model="formValidate"
      :Regeln="RegelnValidieren"
      :Etikettenbreite="100"
      :label-colon="wahr"
    >
   <Formularelement
    v-for="(Element, Index) in formValidate.showTimeDurations"
    :Schlüssel="Index"
    :prop="'showTimeDurations[' + index + '].Wert'"
    :label="'Zeitraum anzeigen' + (Index + 1)"
   >
    <Zeile>
     <Zeitauswahl
      Typ="Zeitbereich"
      v-Modell="Artikel.Wert"
      Platzierung="unten"
      Platzhalter="Wählen Sie einen Zeitraum aus"
      Stil="Breite: 400px;"
      :deaktiviert="isDisEdit"
      ></TimePicker>
     <Button-Form="Kreis" Symbol="md-close" @click="handleRemove(index)" Stil="margin-left: 10px;"></Button>
    </Zeile>
   </FormItem>
   <FormItem style="Breite: 500px;" v-if="formValidate.showTimeDurations.length < 3">
    <Button type="dashed" long @click="handleAddDuration" icon="md-add">Anzeigezeitraum hinzufügen</Button>
   </FormItem>
   </Form>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: 'banner_new',
 Daten() {
  zurückkehren {
   formValidate: {
    showTimeDurations: [{Wert: ['','']}]
   }
  }
 },
 Methoden: {
  handleAddDuration() {
   this.formValidate.showTimeDurations.push({Wert: ['','']})
  },
  handleEntfernen(index) {
   this.formValidate.showTimeDurations.splice(index, 1)
  }
 }
}
</Skript>

<style lang="css" scoped>
</Stil> 

 <FormItem label="Name" prop="Titel" style="Breite: 500px;">
    <Input v-model="formValidate.title" :disabled="isDisEdit" :placeholder="'Bitte geben Sie den Namen der Diashow ein (bis zu 50 Zeichen)'" maxlength="50" show-word-limit></Input>
  </FormItem>
  ...
  <Zeilentyp="flex" justify="start" style="margin-top: 20px;">
    <Button type="primary" style="width: 100px; margin-left: 20px;" v-if="isCanSave" @click="handleSubmit('formValidate')">Speichern</Button>
  </Zeile>

  Methoden: {
    handleSubmit(Formular) {
      // Durch Aufrufen der Validierungsmethode wird die Validierung durchgeführt. this.$refs[form].validate(validate => {
        // validate=true/false, ob die Verifizierung erfolgreich war oder nicht})
    },
  }

RegelnValidate: {
  Titel:
    {
      erforderlich: wahr,
      Meldung: „Bitte geben Sie den Namen der Diashow ein“,
      Auslöser: ‚Unschärfe‘
    },
    {
      Typ: "Zeichenfolge",
      max: 50,
      Nachricht: „Innerhalb von 50 Zeichen, Chinesisch/Buchstaben/Zahlen/allgemeine Zeichen“,
      Auslöser: „ändern“
    }
  ],

Titel: [{{ erforderlich: true, Nachricht: ‚Bitte geben Sie den Bildnamen ein‘, Auslöser: ‚Unschärfe‘}}]

Daten() {
  const durationValitator = (Regel, Wert, Rückruf) => {
    wenn(this.isShowTimePicker && value.toString() === ',') {
      callback(new Error('Bitte wählen Sie den Anzeigezeitraum aus'));
    }sonst wenn(Wert[0] === Wert[1]) {
      callback(new Error('Bitte wählen Sie den richtigen Zeitraum aus'))
    }sonst wenn(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){
      callback(new Error('Zeitraum kann nicht wiederholt werden'))
    }anders {
      Rückruf()
    }
  };
  const DauerValidate = [{ Validator: DauerValitator, Auslöser: 'Unschärfe' }];
  zurückkehren {
    RegelnValidate: {
      'showTimeDurations[0].value': DauerValidieren,
      'showTimeDurations[1].value': DauerValidieren,
      'showTimeDurations[2].value': DauerValidieren,
    }
  }
}

const Richter = (a1,a2) => {
 let result = false
  const start1 = moment(a1[0],"HH:mm:ss").valueOf()
  const end1 = moment(a1[1],"HH:mm:ss").valueOf()
  const start2 = moment(a2[0],"HH:mm:ss").valueOf()
  const end2 = moment(a2[1],"HH:mm:ss").valueOf()

  wenn(start1 == start2) {
    return false
  }sonst wenn(start1 > start2) {
    Ergebnis = Start1 > Ende2
  }anders {
    Ergebnis = Ende1 < Start2
  }
  Ergebnis zurückgeben
}

Moment aus „Moment“ importieren

export const showTimeDurationsJudge = (Dauer) => {
 let judgeResult = true
 if (Dauer && Dauer.Länge > 1) {
  für (lass i = 0; i < Dauer.Länge-1; i++) {
   für(let j=i+1;j < Dauer.Länge; j++) {
       Richterergebnis = Richterergebnis && Richter(Dauer[i].Wert,Dauer[j].Wert)
     }
  }
 }
 Richterergebnis zurückgeben
}

const Richter = (a1,a2) => {
 let result = false
  const start1 = moment(a1[0],"HH:mm:ss").valueOf()
  const end1 = moment(a1[1],"HH:mm:ss").valueOf()
  const start2 = moment(a2[0],"HH:mm:ss").valueOf()
  const end2 = moment(a2[1],"HH:mm:ss").valueOf()

  wenn(start1 == start2) {
    return false
  }sonst wenn(start1 > start2) {
    Ergebnis = Start1 > Ende2
  }anders {
    Ergebnis = Ende1 < Start2
  }
  Ergebnis zurückgeben
}