qimall/addons/Mch/backend/views/compoents/goods/com-search.php

<?php
$mchId = Yii::$app->admin->identity->mch_id;
Yii::$app->loadComponentView('goods/com-add-cat');
?>

<style>
    .com-search .search-box {
        margin-bottom: 10px;
    }

    .com-search .div-box {
        margin-right: 10px;
    }

    .com-search .input-item {
        display: inline-block;
        width: 250px;
    }

    .com-search .input-item .el-input__inner {
        border-right: 0;
    }

    .com-search .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .com-search .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .com-search .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .com-search .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .com-search .input-item .el-input-group__append .el-button {
        margin: 0;
    }

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

<template id="com-search">
    <div class="com-search">
        <div class="search-box" flex="dir:left cross-center">
            <div v-if="isShowCat" class="div-box">
<!--                <el-button size="small" @click="$refs.cats.openDialog()">分类筛选</el-button>-->
                <el-button size="small" v-if="search.cats && search.cats.length > 0" type="danger" @click="clearCat">清除分类</el-button>
            </div>
            <div class="div-box" flex="dir:left">
                <div flex="cross:center" style="height: 32px;">添加时间：</div>
                <el-date-picker
                        size="small"
                        @change="changeTime"
                        v-model="datetime"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div v-if="isShowSearch" class="input-item div-box" flex="cross-center">
                <div>
                    <el-input @keyup.enter.native="toSearch" size="small" placeholder="请输入商品ID或名称搜索"
                              v-model="search.keyword" clearable
                              @clear="toSearch">
                        <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
                    </el-input>
                </div>
            </div>
            <div v-if="isShowSearch" class="input-item div-box" flex="cross-center">
                <div>
                    <el-input @keyup.enter.native="toSearch" size="small" placeholder="请输入门店名称搜索"
                              v-model="search.store_name" clearable
                              @clear="toSearch">
                        <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
                    </el-input>
                </div>
            </div>
            <div v-if="isShowClear" @click="clearWhere" class="div-box clear-where" flex="cross:center">清空筛选条件</div>
        </div>
        <com-add-cat ref="cats" :new-cats="newSearch.cats" @select="selectCat" :mch_id="mch_id"></com-add-cat>
    </div>
</template>

<script>
    Vue.component('com-search', {
        template: '#com-search',
        props: {
            newSearch: {
                type: Object,
                default: function () {
                    return {
                        keyword: '',
                        store_name: '',
                        status: '-1',
                        sort_prop: '',
                        sort_type: '',
                        cats: [],
                        date_start: null,
                        date_end: null,
                    }
                }
            },
            isShowCat: {
                type: Boolean,
                default: true
            },
            isShowSearch: {
                type: Boolean,
                default: true
            },
            newActiveName: {
                type: String,
                default: '-1'
            }
        },
        data() {
            return {
                activeName: '-1',
                dialogVisible: false,
                dialogLoading: false,
                options: [],
                cats: [],
                children: [],
                third: [],
                datetime: [],
                mch_id: <?= $mchId ?>,
                isShowClear: false,
            }
        },
        methods: {
            handleClick(res) {
                this.search.status = this.activeName;
                this.getList();
            },
            toSearch() {
                this.dialogVisible = false;
                this.getList();
            },
            clearCat() {
                this.search.cats = [];
                this.getList();
            },
            changeTime() {
                if (this.datetime) {
                    this.search.date_start = this.datetime[0];
                    this.search.date_end = this.datetime[1];
                } else {
                    this.search.date_start = null;
                    this.search.date_end = null;
                }
                this.getList();
            },
            getList() {
                this.$emit('to-search', this.search);
                this.checkClear();
            },
            clearWhere() {
                this.search.cats = [];
                this.search.keyword = '';
                this.search.store_name = '';
                this.search.date_start = null;
                this.search.date_end = null;
                this.datetime = [];
                this.getList();
            },
            checkClear() {
                if (this.search.keyword || this.search.store_name || (this.search.cats && this.search.cats.length > 0)
                    || (this.search.date_start && this.search.date_end)) {
                    this.isShowClear = true;
                } else {
                    this.isShowClear = false;
                }
            },
            selectCat(cats) {
                this.cats = cats;
                let arr = [];
                cats.map(v => {
                    arr.push(v.value);
                });
                this.search.cats = arr;
                this.getList();
            },
        },
        created() {
            this.search = this.newSearch;
            if (this.search.date_start && this.search.date_end) {
                this.datetime = [this.search.date_start, this.search.date_end];
            }
            this.activeName = this.newActiveName;
            this.checkClear();
        }
    })
</script>