filter-mode.vue

<template>
    <el-select size="small" class="filter-mode" :placeholder="$t('components.filterMode.placeholder')" v-model="curVal" @change="onChange">
        <el-option
            v-for="mode in fieldFilterMode"
            :key="mode.value"
            :label="getLabel(mode)"
            :value="mode.value"
            >
        </el-option>
    </el-select>
</template>

<script lang="ts">
import { Vue, Component, Model, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class FilterMode extends Vue {

    /**
     * 值属性
     *
     * @type {*}
     * @memberof FilterMode
     */    
    @Model('change') readonly value: any;

    /**
     * 自定义逻辑集合
     *
     * @type {*}
     * @memberof FilterMode
     */    
    @Prop() modes!: any[];
 
    @Watch('modes')
    onModesChange(newVal: any) {
        this.setDefValue();
    }

    get curVal() {
        return this.value;
    }

    set curVal(val: any) {
        const type: string = this.$util.typeOf(val);
        val = Object.is(type, 'null') || Object.is(type, 'undefined') ? undefined : val;
        this.$emit('change', val);
    }

    get fieldFilterMode() {
        if(this.modes && this.modes.length > 0) {
            let index: number = this.modes.findIndex((mode: any) => Object.is(mode.mode, 'all'));
            if(index < 0) {
                let items: any[] = [];
                this.modes.forEach((mode: any) => {
                    let item: any = this.filterMode.find((filter: any) => Object.is(filter['en-US'], mode.mode));
                    items.push(item);
                })
                return items;
            }
        }
        return this.filterMode;
    }

    /**
     * 过滤模式
     *
     * @type {*}
     * @memberof FilterMode
     */
    public filterMode: any[] = [
        // { name: 'AND', value: '$and' },
        // { name: 'OR', value: '$or' },
        { 'zh-CN': '等于(=)', 'en-US': 'EQ', value: '$eq' },
        { 'zh-CN': '不等于(<>)', 'en-US': 'NOTEQ', value: '$ne' },
        { 'zh-CN': '大于(>)', 'en-US': 'GT', value: '$gt' },
        { 'zh-CN': '大于等于(>=)', 'en-US': 'GTANDEQ', value: '$gte' },
        { 'zh-CN': '小于(<)', 'en-US': 'LT', value: '$lt' },
        { 'zh-CN': '小于等于(<=)', 'en-US': 'LTANDEQ', value: '$lte' },
        { 'zh-CN': '值为空(Nil)', 'en-US': 'ISNULL', value: '$null' },
        { 'zh-CN': '值不为空(NotNil)', 'en-US': 'ISNOTNULL', value: '$notNull' },
        { 'zh-CN': '值在范围中(In)', 'en-US': 'IN', value: '$in' },
        { 'zh-CN': '值不在范围中(NotIn)', 'en-US': 'NOTIN', value: '$notIn' },
        { 'zh-CN': '文本包含(%)', 'en-US': 'LIKE', value: '$like' },
        { 'zh-CN': '文本左包含(%#)', 'en-US': 'LIFTLIKE', value: '$startsWith' },
        { 'zh-CN': '文本右包含(#%)', 'en-US': 'RIGHTLIKE', value: '$endsWith' },
        // { 'zh-CN': '', en: 'EXISTS', value: '$exists' },
        // { 'zh-CN': '', en: 'NOTEXISTS', value: '$notExists' }
    ];

    /**
     * 生命周期
     *
     * @return {void}
     * @memberof FilterMode
     */
    public mounted() {
        this.setDefValue()
    }

    /**
     * 设置默认值
     *
     * @return {void}
     * @memberof FilterMode
     */
    public setDefValue() {
        if(this.fieldFilterMode.length > 0) {
            this.curVal = this.fieldFilterMode[0].value;
            this.onChange();

        }
    }

    /**
     * 获取语言文本
     *
     * @return {string}
     * @memberof FilterMode
     */
    public getLabel(mode: any): string {
        if(this.$i18n.locale) {
            return mode[this.$i18n.locale];
        }
        return mode['zh-CN'];
    }

    /**
     * 值改变
     *
     * @memberof FilterMode
     */
    public onChange() {
        this.$nextTick(() => {
            let item: any = this.filterMode.find((filter: any) => Object.is(filter.value, this.curVal));
            if(this.modes && this.modes.length > 0) {
                let mode: any = this.modes.find((mode: any) => Object.is(mode.mode, item['en-US']));
                if(!mode) {
                    mode = this.modes.find((mode: any) => Object.is(mode.mode, 'all'));
                }
                this.$emit('on-change', mode);
            }
        })
    }

}
</script>