update

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

+<template>
+    <el-select size="small" class="filter-mode" placeholder="条件逻辑" clearable v-model="curVal" @change="onChange">
+        <el-option
+            v-for="mode in filterMode"
+            :key="mode.value"
+            :label="mode.en"
+            :value="mode.value"
+            >
+        </el-option>
+    </el-select>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Model } from "vue-property-decorator";
+
+@Component({})
+export default class FilterMode extends Vue {
+
+    /**
+     * 值属性
+     *
+     * @type {*}
+     * @memberof FilterMode
+     */    
+    @Model('change') readonly value: any;
+
+    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);
+    }
+
+    /**
+     * 过滤模式
+     *
+     * @type {*}
+     * @memberof FilterMode
+     */
+    public filterMode: any[] = [
+        // { name: 'AND', value: '$and' },
+        // { name: 'OR', value: '$or' },
+        { zh: '等于(=)', en: 'EQ', value: '$eq' },
+        { zh: '', en: 'NE', value: '$ne' },
+        { zh: '', en: 'GT', value: '$gt' },
+        { zh: '', en: 'GE', value: '$gte' },
+        { zh: '', en: 'LT', value: '$lt' },
+        { zh: '', en: 'LE', value: '$lte' },
+        { zh: '', en: 'IS_NULL', value: '$null' },
+        { zh: '', en: 'IS_NOT_NULL', value: '$notNull' },
+        { zh: '', en: 'IN', value: '$in' },
+        { zh: '', en: 'NOTIN', value: '$notIn' },
+        { zh: '', en: 'LIKE', value: '$like' },
+        { zh: '', en: 'LIFTLIKE', value: '$startsWith' },
+        { zh: '', en: 'RIGHTLIKE', value: '$endsWith' },
+        { zh: '', en: 'EXISTS', value: '$exists' },
+        { zh: '', en: 'NOTEXISTS', value: '$notExists' }
+    ];
+
+    /**
+     * 值改变
+     *
+     * @memberof FilterMode
+     */
+    public onChange() {
+        this.$emit('mode-change', this.value);
+    }
+
+}
+</script>
\ No newline at end of file

src/components/filter-tree/filter-tree.less

+.filter-item {
+    display: flex;
+    // margin-top: 10px;
+    .fa-trash-o {
+        color: red;
+    }
+    .filter-item-group {
+        width: 100px;
+        margin-left: 5px;
+    }
+    .filter-item-field {
+        width: 200px;
+        margin-left: 5px;
+    }
+    .filter-item-mode {
+        width: 200px;
+        margin-left: 5px;
+    }
+    .filter-item-value {
+        margin-left: 5px;
+        flex-grow: 1;
+    }
+}
+.filter-tree {
+    .el-tree-node__content {
+        height: 40px;
+        .filter-tree-item {
+            display: flex;
+            >div {
+                margin-right: 10px;
+            }
+            >div:nth-last-child(1) {
+                margin-right: 0;
+            }
+            .filter-tree-action {
+                margin-left: 20px;
+                .ivu-btn {
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

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

+<template>
+    <el-tree class="filter-tree" :data="treeItems" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
+        <template slot-scope="{ node, data }">
+            <template v-if="Object.is(data.name, '$and') || Object.is(data.name, '$or')">
+                <div class="filter-tree-item">
+                    <el-select size="small" v-model="data.name">
+                        <el-option v-for="mode in relationModes" :key="mode.value" :label="mode.zh" :value="mode.value"></el-option>
+                    </el-select>
+                    <div class="filter-tree-action">
+                        <i-button title="添加条件" @click="onAddItem(data)"><i class="fa fa-plus" aria-hidden="true"></i> 添加条件</i-button>
+                        <i-button title="添加组" @click="onAddGroup(data)"><i class="fa fa-plus" aria-hidden="true"></i> 添加组</i-button>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class="filter-tree-item">
+                    <el-select size="small" class="filter-item-field" v-model="data.field" clearable placeholder="属性" @change="onFieldChange(data)">
+                        <el-option
+                            v-for="item in fields"
+                            :key="item.prop"
+                            :label="item.label"
+                            :value="item.name">
+                        </el-option>
+                    </el-select>
+                    <filter-mode class="filter-item-mode" v-model="data.mode"></filter-mode>
+                    <div class="filter-item-value">
+                        <i-input v-if="!data.field"></i-input>
+                        <slot v-else :data="data"></slot>
+                    </div>
+                    <div class="filter-tree-action">
+                        <i-button @click="onRemoveItem(node, data)" title="删除"><i class="fa fa-trash-o" aria-hidden="true"></i></i-button>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </el-tree>
+</template>
+
+<script lang="ts"> 
+import {Vue, Component, Prop} from 'vue-property-decorator';
+import FilterMode from './filter-mode.vue';
+
+@Component({
+    components: {
+        FilterMode
+    }
+})
+export default class FilterTree extends Vue {
+
+    @Prop() datas: any;
+
+    @Prop() fields: any;
+
+    protected defaultProps: any = {
+        children: 'items',
+        label: 'name'
+    };
+
+    protected relationModes: any[] = [
+        { zh: '并且', en: 'AND', value: '$and' },
+        { zh: '或', en: 'OR', value: '$or' }
+    ];
+
+    get treeItems() {
+        let root: any = {
+            name: '$and',
+            items: this.datas
+        };
+        if(this.datas.length == 0) {
+            this.onAddItem(root);
+            this.onAddItem(root);
+        }
+        return [root];
+    }
+
+    public onFieldChange(data: any) {
+        if(!data.mode) {
+            data.mode = '$eq';
+        }
+    }
+
+    public onAddItem(data: any) {
+        if(data && data.items) {
+            data.items.push({
+                field: null,
+                mode: null
+            });
+        }
+    }
+
+    public onAddGroup(data: any) {
+        if(data && data.items) {
+            data.items.push({
+                name: '$and',
+                items: []
+            })
+        }
+    }
+
+    public onRemoveItem(node: any, data: any) {
+        if(node && node.parent) {
+            let pData: any = node.parent.data;
+            if(pData.items.indexOf(data) >= 0) {
+                pData.items.splice(pData.items.indexOf(data), 1)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import './filter-tree.less';
+</style>
\ No newline at end of file

src/engine/view/md-view-engine.ts

@@ -395,6 +395,9 @@ export default class MDViewEngine extends ViewEngine {
         if (this.getSearchForm() && this.view.isExpandSearchForm) {
             Object.assign(arg, this.getSearchForm().getData());
         }
+        if (this.view && this.view.searchbar) {
+            Object.assign(arg, this.view.searchbar.getData());
+        }
         if (this.view && !this.view.isExpandSearchForm) {
             Object.assign(arg, { query: this.view.query });
         }