plus-ui/src/components/SearchPanel/index.vue

<template>
  <div v-if="isCard" style="height: 100%">
    <search-form
      ref="search"
      :configs="configs"
      :model="model"
      :is-reset="isReset"
      :is-search="isSearch"
      @search="search"
      @reset="reset"
      @toggle="toggle"
      @resize="toggle"
    >
      <slot name="button" />
    </search-form>
    <div ref="wrap">
      <slot />
    </div>
  </div>
  <div v-else style="height: 100%">
    <search-form
      ref="search"
      :configs="configs"
      :model="model"
      :is-reset="isReset"
      :is-search="isSearch"
      @search="search"
      @reset="reset"
      @toggle="toggle"
      @resize="toggle"
    />
    <div ref="wrap">
      <slot />
    </div>
  </div>
</template>

<script>
  import SearchForm from '@/components/SearchForm/index.vue'
  export default {
    name: 'search-panel',
    components: {
      'search-form': SearchForm
    },
    props: {
      //表单值
      model: {
        type: Object,
        default: () => {}
      },
      //表单显示配置
      configs: {
        type: Array,
        default: () => []
      },
      //是否显示重置按钮
      isReset: {
        type: Boolean,
        default: true
      },
      //是否显示搜索按钮
      isSearch: {
        type: Boolean,
        default: true
      },
      //是否卡片展示
      isCard: {
        type: Boolean,
        default: true
      }
    },
    mounted() {
      this.toggle()
    },
    methods: {
      search() {
        this.$emit('search')
      },
      reset() {
        this.$emit('reset')
      },
      toggle() {
        if (this.$refs.search) {
          this.$nextTick(() => {
            const elem = this.$refs.search.$el
            const offsetHeight = elem.offsetHeight
            this.$refs.wrap.style.height = `calc(100% - ${offsetHeight}px)`
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>