update

src/components/filter-tree/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 filterMode"
+            v-for="mode in fieldFilterMode"
             :key="mode.value"
             :label="getLabel(mode)"
             :value="mode.value"
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Model } from "vue-property-decorator";
+import { Vue, Component, Model, Prop, Watch } from "vue-property-decorator";
 
 @Component({})
 export default class FilterMode extends Vue {
@@ -24,6 +24,19 @@ export default class FilterMode extends Vue {
      */    
     @Model('change') readonly value: any;
 
+    /**
+     * 自定义逻辑集合
+     *
+     * @type {*}
+     * @memberof FilterMode
+     */    
+    @Prop() modes!: any[];
+ 
+    @Watch('modes')
+    onModesChange(newVal: any) {
+        this.setDefValue();
+    }
+
     get curVal() {
         return this.value;
     }
@@ -34,6 +47,21 @@ export default class FilterMode extends Vue {
         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;
+    }
+
     /**
      * 过滤模式
      *
@@ -60,13 +88,37 @@ export default class FilterMode extends Vue {
         // { '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
      */
-    getLabel(mode: any): string {
+    public getLabel(mode: any): string {
         if(this.$i18n.locale) {
             return mode[this.$i18n.locale];
         }
@@ -79,7 +131,16 @@ export default class FilterMode extends Vue {
      * @memberof FilterMode
      */
     public onChange() {
-        this.$emit('mode-change', this.value);
+        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);
+            }
+        })
     }
 
 }

src/components/filter-tree/filter-tree.vue

@@ -15,17 +15,17 @@
             </template>
             <template v-else>
                 <div class="filter-tree-item">
-                    <el-select size="small" class="filter-item-field" v-model="data.field" clearable :placeholder="$t('components.filterTree.placeholder')" @change="onFieldChange(data)">
+                    <el-select size="small" class="filter-item-field" v-model="data.field" clearable :placeholder="$t('components.filterTree.placeholder')">
                         <el-option
-                            v-for="item in fields"
-                            :key="item.prop"
+                            v-for="item in fieldItems"
+                            :key="item.value"
                             :label="item.label"
-                            :value="item.name">
+                            :value="item.value">
                         </el-option>
                     </el-select>
-                    <filter-mode class="filter-item-mode" v-model="data.mode"></filter-mode>
+                    <filter-mode class="filter-item-mode" v-model="data.mode" :modes="getModes(data.field)" @on-change="onModeChange($event, data)"></filter-mode>
                     <div class="filter-item-value">
-                        <i-input v-if="!data.field"></i-input>
+                        <i-input v-if="!data.editor"></i-input>
                         <slot v-else :data="data"></slot>
                     </div>
                     <div class="filter-tree-action">
@@ -64,6 +64,14 @@ export default class FilterTree extends Vue {
      */
     @Prop() fields: any;
 
+    /**
+     * 属性项集合
+     *
+     * @type {*}
+     * @memberof FilterTree
+     */
+    protected fieldItems: any[] = [];
+
     /**
      * 组条件集合
      *
@@ -93,29 +101,77 @@ export default class FilterTree extends Vue {
         return [root];
     }
 
+
     /**
-     * 获取语言文本
+     * 生命周期
      *
-     * @return {string}
+     * @return {void}
      * @memberof FilterTree
      */
-    getLabel(mode: any): string {
-        if(this.$i18n.locale) {
-            return mode[this.$i18n.locale];
+    public created() {
+        if(!this.fields) {
+            return;
         }
-        return mode['zh-CN'];
+        this.fields.forEach((field: any) => {
+            let index: number = this.fieldItems.findIndex((item: any) => Object.is(item.value, field.prop));
+            if(index < 0) {
+                this.fieldItems.push({
+                    label: field.label,
+                    value: field.prop,
+                    modes: this.getFieldModes(field.prop)
+                })
+            } 
+        });
     }
 
     /**
-     * 属性变化
+     * 获取逻辑模式集合
      *
-     * @return {*}
+     * @return {void}
+     * @memberof FilterTree
+     */
+    public getModes(field: string) {
+        if(this.fieldItems.length > 0) {
+            let item: any = this.fieldItems.find((item: any) => Object.is(item.value, field));
+            if(item) {
+                return item.modes;
+            }
+        }
+        return [];
+    }
+
+    /**
+     * 获取属性逻辑模式集合
+     *
+     * @return {void}
      * @memberof FilterTree
      */
-    public onFieldChange(data: any) {
-        if(!data.mode) {
-            data.mode = '$eq';
+    public getFieldModes(name: string) {
+        let modes: any[] = [];
+        for(let i = 0; i < this.fields.length; i++) {
+            let field: any = this.fields[i];
+            if(!Object.is(field.prop, name)) {
+                continue;
+            }
+            modes.push({
+                name: field.name,
+                mode: field.mode ? field.mode : 'all'
+            })
+        }
+        return modes;
+    }
+
+    /**
+     * 获取语言文本
+     *
+     * @return {string}
+     * @memberof FilterTree
+     */
+    getLabel(mode: any): string {
+        if(this.$i18n.locale) {
+            return mode[this.$i18n.locale];
         }
+        return mode['zh-CN'];
     }
 
     /**
@@ -128,7 +184,8 @@ export default class FilterTree extends Vue {
         if(data && data.children) {
             data.children.push({
                 field: null,
-                mode: null
+                mode: null,
+                editor: null
             });
         }
     }
@@ -162,6 +219,18 @@ export default class FilterTree extends Vue {
             }
         }
     }
+
+    /**
+     * 条件逻辑变化
+     *
+     * @return {*}
+     * @memberof FilterTree
+     */
+    public onModeChange(mode: any, data: any) {
+        if(mode && data) {
+            data.editor = mode.name;
+        } 
+    }
 }
 </script>