qimall/addons/Mch/backend/views/compoents/store-search.php

<style>
    .store-search .tabs {
        margin-top: 20px;
    }

    .store-search .label {
        margin-right: 10px;
    }

    .store-search .item-box {
        margin-bottom: 10px;
        margin-right: 15px;
    }

    .store-search .clear-where {
        color: #419EFB;
        cursor: pointer;
    }
</style>

<template id="store-search">
    <div class="store-search">
        <div flex="wrap:wrap cross:center">
            <div style="height: 32px;">查询条件：</div>
            <div class="item-box" class="label">
                <el-input style="width: 350px" size="small" v-model="search.keyword" placeholder="请输入搜索内容" clearable>
                    <el-select style="width: 120px" slot="prepend" v-model="search.type">
                        <el-option v-for="item in typeList" :key="item.value"
                                   :label="item.name"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-input>
            </div>

            <div class="item-box" flex="dir:left cross:center">
                <div class="label">门店分类</div>
                <el-select size="small" style="width: 120px" v-model="search.categoryId" placeholder="门店分类">
                    <el-option v-for="item in categoryList" :key="item.value" :label="item.name"
                               :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="item-box" flex="dir:left cross:center">
                <div class="label">入驻状态</div>
                <el-select size="small" style="width: 120px" v-model="search.status" placeholder="入驻状态">
                    <el-option v-for="item in storeStatus" :key="item.value" :label="item.name"
                               :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <el-button
                    style="float: right; margin-left: 5px; margin-top: -10px"
                    @click="toSearch"
                    type="primary"
                    size="small">查询
            </el-button>
            <el-button
                    style="float: right; margin-left: 5px; margin-top: -10px"
                    @click="clearWhere"
                    type="primary"
                    size="small">清空
            </el-button>

        </div>
    </div>
</template>

<script>
    Vue.component('store-search', {
        template: '#store-search',
        props: {
            typeList: {
                type: Array,
                default: function () {
                    return [
                        {value: '1', name: '门店ID'},
                        {value: '2', name: '门店名称'},
                        {value: '3', name: '店长姓名'},
                        {value: '4', name: '联系电话'},
                    ]
                }
            },
            categoryList: {
                type: Array,
                default: function () {
                    return [
                        {value: '0', name: '全部'},
                    ];
                }
            },
            storeStatus: {
                type: Array,
                default: function () {
                    return [
                        {value: '1', name: '入驻中'},
                        {value: '-2', name: '已过期'},
                    ];
                }
            },
            newSearch: {
                type: Object,
                default: function () {
                    return {
                        type: '',
                        keyword: '',
                        categoryId: '',
                        status: '',
                    }
                }
            },
        },
        methods: {
            toSearch() {
                this.search.page = 1;
                this.$emit('search', this.search);
            },
            clearWhere() {
                this.search.type = '';
                this.search.keyword = '';
                this.search.categoryId = '';
                this.search.status = '';
                this.toSearch();
            },
        },
        created() {
            this.search = this.newSearch;
            this.newActiveName = this.activeName;
        }
    })
</script>