<el-form ref="form-filter" label-width="auto" size="medium" class="el-form-filter" v-bind:model="filter" v-bind:show-message="false" v-on:validate="onValidate">
    <el-row v-bind:gutter="10">
        <el-col v-if="filter.listFilterControl && filter.listFilterControl.length" v-bind:span="item.colSpan || 24" v-bind:class="{'auto-width': item.colSpan == null || item.colSpan == 'auto'}" v-for="(item,index) in filter.listFilterControl" v-bind:key="index">
            <el-form-item v-if="item.type"
                          v-bind:label="item.name"
                          v-bind:prop="'listFilterControl.' + index + '.value'"
                          v-bind:rules="item.rules || (item.required ? { required: true, message: item.message || ('请输入' + item.name)} : null)">
                <el-form-control v-bind:item="item" v-model="item.value" v-bind:form="filter" v-on:change="onChange(item,$event)"></el-form-control>
            </el-form-item>
        </el-col>
        <el-col class="el-form-button">
            <el-form-control v-if="filter.isShowSearchButton" v-bind:item="{type: 'button',name:'查询',buttonType:'primary',icon:'el-icon-search'}" v-on:click="onSearch"></el-form-control>
            <el-form-control v-if="filter.isShowResetButton" v-bind:item="{type: 'button',name:'重置',icon:'el-icon-refresh-right'}" v-on:click="onReset"></el-form-control>
            <el-form-control v-if="filter.isShowExportButton" v-bind:item="{type: 'button',name:'导出',buttonType:'success',icon:'el-icon-download'}" v-on:click="onExport"></el-form-control>
            <el-form-control v-if="filter.isShowOfflineExportButton" v-bind:item="{type: 'button',name:'离线导出',buttonType:'success',icon:'el-icon-download'}" v-on:click="onOfflineExport"></el-form-control>
            <el-form-control v-if="filter.isShowImportButton" v-show="!filter.file || !filter.file.name" ref="file" v-bind:item="{type: 'file',name:'导入',action:filter.importApi,buttonType:'warning',icon:'el-icon-upload2',accept:'.xls,.xlsx'}" v-model="filter.file" v-on:import="onImport"></el-form-control>
            <el-form-control v-if="filter.isShowImportButton && filter.file && filter.file.name" class="el-upload-input" v-bind:item="{type: 'input',readonly:true}" v-model="filter.file.name"></el-form-control>
            <el-form-control v-if="filter.isShowImportButton && filter.file && filter.file.name" v-bind:item="{type: 'button',name:'上传',buttonType:'warning',icon:'el-icon-upload2'}" v-on:click="$refs.file.upLoad"></el-form-control>
            <el-form-control v-if="filter.isShowImportButton && filter.file && filter.file.name" v-bind:item="{type: 'button',name:'取消',buttonType:'warning',icon:'el-icon-refresh-right'}" v-on:click="$refs.file.clearFiles"></el-form-control>
            <template v-if="filter.operateControlsPosition == 2">
                <el-form-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index" v-on:click="onClick(item.click)"></el-form-control>
            </template>
        </el-col>
    </el-row>
    <el-row class="h40" v-if="(filter.operateControlsPosition == null || filter.operateControlsPosition == 1) && (filter.listOperateControl && filter.listOperateControl.length > 0)">
        <el-form-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index" v-on:click="onClick(item.click)"></el-form-control>
    </el-row>
</el-form>
 </script>
<script type="text/x-template" id="elFormControl">
    @Html.PartialAsync("~/Areas/Component/Views/Form/Control.cshtml").Result
</script>
<script src="@Url.Content("~/js/component/el-form-filter.js")" type="text/javascript"></script>
