1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
<el-select size="small" class="app-searchbar-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>