Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件

更新時間：2021年05月27日 11:31:20 作者：webmote

今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景，本文主要介紹了Vue動態(tài)查詢規(guī)則生成組件，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 動態(tài)查詢規(guī)則

動態(tài)查詢規(guī)則，大致如下圖所示。是可以按照用戶的自定義進(jìn)行組織查詢語句的一種復(fù)雜組件，大致可以實現(xiàn)SQL查詢的where條件，下面是摘自mongodb的某一軟件。

在這里插入圖片描述

2.組件構(gòu)建思路

按照規(guī)則組件的組織形式，可以把其視為一棵樹，有樹干和樹葉，這樣看起來就不難了。

2.1 組件屬性 data：是樹結(jié)構(gòu)的內(nèi)容，我們定義為：

{
condition: 'AND',
rules: [],
}

fieldList: 字段列表數(shù)組,可供選擇的字段集合；

operatorList: 操作列表數(shù)組,可供選擇的操作集合，定義如下：

{
     label: '包含',
          value: '⊂',
},

2.2 組件html

這里采用ElementUI構(gòu)建，因此可以方便的組合各類ui控件來進(jìn)行構(gòu)建需要的界面。
當(dāng)然該組件既然被看作樹，因此其也是個遞歸組件，因此還涉及到自己調(diào)用自己。

<template>
    <div class="rules-group-container">
        <div class="rules-group-header">
            <el-radio-group v-model="data.condition" size="mini">
                <el-radio-button label="AND"></el-radio-button>
                <el-radio-button label="OR"></el-radio-button>
            </el-radio-group>
            <div>
                <el-button size="mini" @click="addRule(data)">添加規(guī)則</el-button>
                <el-button size="mini" @click="addGroup(data)">添加分組</el-button>
                <el-button v-if="parent" size="mini" @click="delGroup(data, parent)">刪除</el-button>
            </div>
        </div>
        <div class="rules-group-body">
            <div class="rules-list">
                <template v-for="(rule, index) in data.rules">
                    <div :key="index" v-if="!rule.condition" class="rule-container">                        
                        <!-- 字段 -->
                        <wt-dropdown
                            class="rule-item"
                            v-model="rule.FilterField"
                            :data="getFieldList(rule.FilterTable)"
                            @change="handleFieldChange(rule)"
                        ></wt-dropdown>
                        <!-- 操作符 -->
                        <wt-dropdown
                            class="rule-item"
                            v-model="rule.Operator"
                            :disabled="inputStatus && rule.FilterField === 'CommunityId'"
                            :data="getRule(rule.FilterTable, rule.FilterField)"
                        ></wt-dropdown>
                        <!-- 值 -->
                        <wt-multi-dropdown
                            class="rule-item-long"
                            v-if="rule.type === 'Dropdown'"
                            :disabled="inputStatus && rule.FilterField === 'CommunityId'"
                            v-model="rule.FilterValue"
                            :data="getData(rule.FilterTable, rule.FilterField)"
                        ></wt-multi-dropdown>
                        <wt-number
                            class="rule-item-long"
                            :disabled="inputStatus && rule.FilterField === 'CommunityId'"
                            v-else-if="['DateTime', 'Number', 'Decimal'].includes(rule.type)"
                            v-model="rule.FilterValue"
                        ></wt-number>
                        <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)">刪除</el-button>
                    </div>
                    <CreateRule
                        :key="index"
                        v-else
                        :data="rule"
                        :parent="data"
                        :fieldList="fieldList"
                        :operatorList="operatorList"
                    ></CreateRule>
                </template>
            </div>
        </div>
    </div>
</template>

2.3 對不同數(shù)據(jù)類型的字段定義不同的條件

const rules = {
    string: [
        {
            value: '==',
            label: '等于',
        },
        {
            value: '<>',
            label: '不等于',
        },
        {
            value: '⊂',
            label: '包含',
        },
        {
            value: '⊄',
            label: '不包含',
        },
        {
            value: 'in',
            label: '其中之一',
        },
        {
            value: 'ni',
            label: '非其中之一',
        },
        {
            value: 'mc',
            label: '多包含',
        },
    ],
    number: [
        {
            value: '==',
            label: '等于',
        },
        {
            value: '<>',
            label: '不等于',
        },
        {
            value: '≥',
            label: '大于等于',
        },
        {
            value: '≤',
            label: '小于等于',
        },
    ],
    dict: [
        {
            value: 'in',
            label: '其中之一',
        },
        {
            value: 'ni',
            label: '非其中之一',
        },
    ],
    date: [
        {
            value: 'sdiff',
            label: '幾天前',
        },
        {
            value: 'ediff',
            label: '幾天后',
        },
    ],
}

2.4 定義方法操作組\規(guī)則

主要的操作涉及到添加\刪除組和規(guī)則。

getRule(table, field) {
            let data = (rules && rules.string) || []
            let theField = this.getCurrentField(table, field)
            if (theField && theField.ControlType) {
                if (['Dropdown'].includes(theField.ControlType)) {
                    return rules.dict
                } else if (['DateTime'].includes(theField.ControlType)) {
                    return rules.date
                } else if (['Number', 'Decimal'].includes(theField.ControlType)) {
                    return rules.number
                } else {
                    return rules.string
                }
            }
            return data
        },
        // 添加規(guī)則
        addRule(data) {
            let rule = {
                type: 'Text',
                FilterTable: this.firstTable,
                FilterField: this.firstField,
                Operator: '==',
                FilterValue: '',
            }
            data.rules.push(rule)
        },
        // 刪除規(guī)則
        delRule(index) {
            this.data.rules.splice(index, 1)
        },
        // 添加分組
        addGroup(data) {
            let group = {
                condition: 'OR',
                rules: [
                    {
                        type: 'Text',
                        FilterTable: this.firstTable,
                        FilterField: '',
                        Operator: '',
                        FilterValue: '',
                    },
                ],
            }
            data.rules.push(group)
        },
        // 刪除分組
        delGroup(data, parent) {
            let index = parent.rules.findIndex((item) => item === data)
            parent.rules.splice(index, 1)
        },

2.5 定義組件名

該組件命名為 CreateRule，定義代碼很簡單了。

export default {
    name: 'CreateRule',
    props: {
        parent: {
            type: Object,
        },
        data: {
            type: Object,
        },
        fieldList: {
            type: Array,
            default() {
                return []
            },
        },
        operatorList: {
            type: Array,
            default() {
                return []
            },
        },
    },
  }

3.使用組件

vue中使用組件只需引用并增加到組件列表中即可。

import CreateRule from './CreateRule'
export default {
    name: 'NewRuleForm',
    components: {
        CreateRule,
    },
}

模板內(nèi)增加引用

<template>
    <div class="new-rule-form">
        <CreateRule
            v-if="!loading"
            :data="data"
            :fieldList="FilterTable"
            :operatorList="operatorList"
        ></CreateRule>
        <div v-if="!loading" class="discription-wrap" v-html="discription"></div>
    </div>
</template>