InfSearchGroup.vue

<!-- 
    inf交易查询条件面板
    用法：
        1、提供两个具名slot分别对应持续展示区和可控（展开收起）展示区，根据页面实际情况单选或全选使用
        2、needToggle：接收一个属性，控制‘展开/收起’按钮是否显示，默认为true，显示
        3、handleSearch：查询按钮事件提供回调函数用于控制按钮状态，父组件查询事件中，在适当时机调用即可控制按钮状态
    示例如下：
    <template slot='keepShow'> 持续展示元素 </template>
    <template slot='changeShow'> 可控展示元素 </template>

    父组件查询事件写法
    handleSearch(callback){
        // post请求数据等逻辑处理....
        callback()  // 调用回调函数控制按钮状态
    }

 -->

<template>

    <div class="searchGroup">
        <!-- 保持展示区 -->
        <slot name="keepShow"></slot>
        <!-- 可控展示区 -->
        <slot name="changeShow" v-if="searchToggle"></slot>
        <!-- 通用按钮 -->
        <div class="commonBtn">
            <el-button size="small" @click="handleReset">重置</el-button>
            <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch" :loading="searchLoading">
                查询</el-button>
            <el-button size="small" type="text" @click="handleToggle" v-show="needToggle">
                {{searchToggle?'收起': '展开'}}
                <i :class="searchToggle? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
            </el-button>
        </div>
    </div>

</template>

<script>
    export default {
        props: {
            // 展开收起按钮是否显示
            needToggle: {
                type: Boolean,
                default: true
            }

        },

        data: function () {
            return {
                searchToggle: false,
                searchLoading: false,
            }
        },

        methods: {
            // 查询
            handleSearch() {
                this.searchLoading = true
                this.$emit("handleSearch", () => {
                    this.searchLoading = false
                })
            },
            // 重置
            handleReset() {
                this.$emit("handleReset")
            },
            // 展开收起
            handleToggle() {
                this.searchToggle = !this.searchToggle
            }
        }
    }

</script>

<style scoped>
    .searchGroup {
        padding: 20px 20px 10px 20px;
        border-bottom: 10px solid rgb(232, 232, 232);
    }

    .commonBtn {
        display: flex;
        justify-content: right;
        padding-right: 20px;
        margin-top: 10px;
    }
</style>