Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

{
Bedingung: 'UND',
Regeln: [],
}

{
     Bezeichnung: 'einschließen',
          Wert: '⊂',
},

<Vorlage>
    <div Klasse="Regeln-Gruppen-Container">
        <div Klasse="Regeln-Gruppen-Header">
            <el-radio-group v-model="Daten.Zustand" Größe="mini">
                <el-radio-button label="UND"></el-radio-button>
                <el-radio-button label="ODER"></el-radio-button>
            </el-radio-gruppe>
            <div>
                <el-button size="mini" @click="addRule(data)">Regel hinzufügen</el-button>
                <el-button size="mini" @click="addGroup(data)">Gruppe hinzufügen</el-button>
                <el-button v-if="parent" size="mini" @click="delGroup(data, parent)">Löschen</el-button>
            </div>
        </div>
        <div Klasse="Regeln-Gruppen-Body">
            <div Klasse="Regelliste">
                <template v-for="(Regel, Index) in Daten.Regeln">
                    <div :key="index" v-if="!regel.bedingung" class="regel-container">                        
                        <!-- Felder -->
                        <wt-Dropdown
                            Klasse="Regelelement"
                            v-model="Regel.FilterFeld"
                            :data="getFieldList(Regel.FilterTable)"
                            @change="handleFieldChange(Regel)"
                        ></wt-dropdown>
                        <!-- Operator -->
                        <wt-Dropdown
                            Klasse="Regelelement"
                            v-model="Regel.Operator"
                            :deaktiviert="EingabeStatus && Regel.FilterField === 'CommunityId'"
                            :data="getRule(regel.FilterTable, regel.FilterField)"
                        ></wt-dropdown>
                        <!-- Wert -->
                        <wt-multi-dropdown
                            Klasse = "Regel-Element lang"
                            v-if="Regel.Typ === 'Dropdown'"
                            :deaktiviert="EingabeStatus && Regel.FilterField === 'CommunityId'"
                            v-Modell="Regel.Filterwert"
                            :data="getData(Regel.Filtertabelle, Regel.Filterfeld)"
                        ></wt-multi-dropdown>
                        <wt-Nummer
                            Klasse = "Regel-Element lang"
                            :deaktiviert="EingabeStatus && Regel.FilterField === 'CommunityId'"
                            v-else-if="['Datum/Uhrzeit', 'Zahl', 'Dezimalzahl'].includes(rule.type)"
                            v-Modell="Regel.Filterwert"
                        ></wt-Nummer>
                        <wt-text class="rule-item-long" v-else v-model="rule.FilterValue" :disabled="inputStatus && rule.FilterField === 'CommunityId'"></wt-text>
                        <el-button size="mini" @click="delRule(index)">Löschen</el-button>
                    </div>
                    <Regel erstellen
                        :Schlüssel="Index"
                        v-sonst
                        :data="Regel"
                        :parent="Daten"
                        :FeldListe="FeldListe"
                        :operatorList="Operatorliste"
                    ></RegelErstellen>
                </Vorlage>
            </div>
        </div>
    </div>
</Vorlage>

const Regeln = {
    Zeichenfolge: [
        {
            Wert: '==',
            Bezeichnung: 'gleich',
        },
        {
            Wert: '<>',
            Bezeichnung: 'ungleich',
        },
        {
            Wert: '⊂',
            Bezeichnung: 'einschließen',
        },
        {
            Wert: '⊄',
            Bezeichnung: 'enthält nicht',
        },
        {
            Wert: 'in',
            Beschriftung: 'Einer von ihnen',
        },
        {
            Wert: 'ni',
            Etikett: 'Keiner von ihnen',
        },
        {
            Wert: 'mc',
            Bezeichnung: „Mehrere Einschlüsse“,
        },
    ],
    Nummer: [
        {
            Wert: '==',
            Bezeichnung: 'gleich',
        },
        {
            Wert: '<>',
            Bezeichnung: 'ungleich',
        },
        {
            Wert: '≥',
            Bezeichnung: 'größer als oder gleich',
        },
        {
            Wert: '≤',
            Bezeichnung: 'kleiner als oder gleich',
        },
    ],
    diktieren: [
        {
            Wert: 'in',
            Beschriftung: 'Einer von ihnen',
        },
        {
            Wert: 'ni',
            Etikett: 'Keiner von ihnen',
        },
    ],
    Datum: [
        {
            Wert: 'sdiff',
            Beschriftung: 'Vor ein paar Tagen',
        },
        {
            Wert: 'ediff',
            Beschriftung: 'Ein paar Tage später',
        },
    ],
}

getRule(Tabelle, Feld) {
            let data = (Regeln && Regeln.Zeichenfolge) || []
            let theField = this.getCurrentField(Tabelle, Feld)
            if (dasFeld && dasFeld.SteuerelementTyp) {
                wenn (['Dropdown'].includes(theField.ControlType)) {
                    Rückgaberegeln.dict
                } sonst wenn (['Datum/Uhrzeit'].includes(theField.ControlType)) {
                    Rückgaberegeln.Datum
                } sonst wenn (['Zahl', 'Dezimal'].includes(theField.ControlType)) {
                    Rückgaberegeln.Nummer
                } anders {
                    Rückgaberegeln.Zeichenfolge
                }
            }
            Rückgabedaten
        },
        // Regeln hinzufügen addRule(data) {
            lass Regel = {
                Typ: 'Text',
                Filtertabelle: diese.ersteTabelle,
                Filterfeld: dieses.erstesFeld,
                Operator: '==',
                Filterwert: '',
            }
            data.rules.push(Regel)
        },
        // Regel löschen delRule(index) {
            diese.Daten.Regeln.splice(Index, 1)
        },
        // Gruppe hinzufügen addGroup(data) {
            lass Gruppe = {
                Bedingung: „ODER“,
                Regeln:
                    {
                        Typ: 'Text',
                        Filtertabelle: diese.ersteTabelle,
                        Filterfeld: '',
                        Betreiber: '',
                        Filterwert: '',
                    },
                ],
            }
            data.rules.push(Gruppe)
        },
        // Gruppe löschen delGroup(data, parent) {
            let index = parent.rules.findIndex((Element) => Element === Daten)
            übergeordnete Regeln.splice(Index, 1)
        },

Standard exportieren {
    Name: "CreateRule",
    Requisiten: {
        übergeordnetes Element: {
            Typ: Objekt,
        },
        Daten: {
            Typ: Objekt,
        },
        Feldliste: {
            Typ: Array,
            Standard() {
                zurückkehren []
            },
        },
        Operatorliste: {
            Typ: Array,
            Standard() {
                zurückkehren []
            },
        },
    },
  }

importiere CreateRule aus „./CreateRule“
Standard exportieren {
    Name: 'NewRuleForm',
    Komponenten:
        Regel erstellen,
    },
}

<Vorlage>
    <div Klasse="neue-Regel-Form">
        <Regel erstellen
            v-if="!wird geladen"
            :data="Daten"
            :fieldList="Filtertabelle"
            :operatorList="Operatorliste"
        ></RegelErstellen>
        <div v-if="!loading" class="discription-wrap" v-html="discription"></div>
    </div>
</Vorlage>