qimall/backend/modules/mall/views/statistics/com-search.php

<style>
    .com-search {
        padding: 15px;
    }

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

    .com-search .clean {
        color: #92959B;
        margin-left: 20px;
        cursor: pointer;
        font-size: 15px;
    }

    .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;
    }
</style>


<template id="com-search">
    <div class="com-search" flex="cross:center">
<!--        <div v-if="isShowPayType">-->
<!--            <el-select style="width: 150px;" size="small" v-model="search.pay_type" @change='getList'>-->
<!--                <el-option key="all" label="全部支付方式" value=""></el-option>-->
<!--                <el-option key="1" label="微信" value="wechat"></el-option>-->
<!--                <el-option key="3" label="余额" value="balance"></el-option>-->
<!--            </el-select>-->
<!--        </div>-->
        <slot name="select"></slot>
        <!-- 时间选择框 -->
        <template v-if="isShowPicker">
            <div>
                <el-date-picker
                        size="small"
                        @change="changeTime"
                        style="width: 350px"
                        v-model="search.time"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div>
                <el-tabs v-model="activeName" @tab-click="tabTotal">
                    <el-tab-pane label="7日" name="week"></el-tab-pane>
                    <el-tab-pane label="30日" name="month"></el-tab-pane>
                </el-tabs>
            </div>
        </template>
        <div v-if="isShowKeyword" class="input-item">
            <el-input
                    @keyup.enter.native="getList"
                    @clear="getList"
                    clearable
                    size="small"
                    :placeholder="placeholder"
                    v-model="search.name">
                <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
            </el-input>
        </div>
        <div>
            <el-button type="primary" class=" el-button el-button--mini" @click="primary">搜索</el-button>
            <button class="el-button el-button--mini" @click="clean">清空筛选</button>
        </div>
    </div>
</template>

<script>
    Vue.component('com-search', {
        template: '#com-search',
        props: {
            newSearch: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            dayData: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            isShowPlatform: {
                type: Boolean,
                default: true
            },
            isShowPayType: {
                type: Boolean,
                default: false
            },
            isShowKeyword: {
                type: Boolean,
                default: true
            },
            isShowPicker: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '请输入搜索内容'
            }
        },
        data() {
            return {
                search: {},
                // 日期选中状态
                activeName: '',
                // 店铺列表
                mch_list: [],
                // 今天
                today: '',
                // 七天前
                weekDay: '',
                // 30天前
                monthDay: '',
                plugins_list: [],
                var1:false
            }
        },
        watch: {
//             isShowPayType: {
//                 deep:true,
//                 immediate: true,
//                 handler(val) {
//                     this.var1 = val
//                 }
//             }
        },
        methods: {
            // 清空筛选
            clean() {
                this.search = {
                    time: null,
                    date_start: null,
                    date_end: null,
                    platform: '',
                    pay_type: '',
                    name: '',
                };
                this.activeName = null;
                this.getList();
            },
            primary(){
                this.getList();
            },
            // 选择时间区间
            tabTotal() {
                console.log(this.activeName);
                if (this.activeName == 'week') {
                    this.search.time = [this.weekDay, this.today];
                }
                if (this.activeName == 'month') {
                    this.search.time = [this.monthDay, this.today];
                }
                this.search.date_start = this.search.time[0];
                this.search.date_end = this.search.time[1];
                //this.getList()
            },
            // 自定义时间
            changeTime() {
                this.activeName = null;
                if (this.search.time) {
                    this.search.date_start = this.search.time[0];
                    this.search.date_end = this.search.time[1];
                } else {
                    this.search.date_start = null;
                    this.search.date_end = null;
                }
                //this.getList();
            },
            getList() {
                this.$emit('search', this.search)
            },
            // 废弃
            toSearch() {
                this.$emit('to-search', this.search)
            }
        },
        created() {
            this.search = this.newSearch;
            this.today = this.dayData.today;
            this.weekDay = this.dayData.weekDay;
            this.monthDay = this.dayData.monthDay;
        }
    })
</script>