vue 展开收起查询列表

<template>
  <div :class="['h-container', { 'h-container-open': isOpen }]">
    <a-form>
      <a-row gutter="20">
        <slot />
        <span :class="['h-btn', { 'h-btn-open': isOpen }]">
          <a-space>
            <a-button type="primary" icon="search" @click="onSearch">搜索</a-button>
            <a-button type="default" icon="reload" @click="onReset">重置</a-button>
            <span @click="isOpen = !isOpen" v-if="useCollapse" class="span">
              <a-icon :type="isOpen ? 'down' : 'up'" />
              {{ isOpen ? '收起' : '展开' }}
            </span>
          </a-space>
        </span>
      </a-row>
    </a-form>
  </div>
</template>

<script>
export default {
  props: {
    useCollapse: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  mounted() {},
  methods: {
    onChage(value) {
      console.log(value)
    },
    onReset() {
      this.$emit('reset')
    },
    onSearch() {
      this.$emit('search')
    }
  }
}
</script>

<style lang="less">
@base-line-height: 32px;
@base-width: 240px;
@base-height: 40px;
@base-margin-bottom: 10px;
.h-container {
  position: relative;
  height: @base-height + @base-margin-bottom;
  padding-right: @base-width;
  border-bottom: 1px solid #e8e8e8;
  overflow: hidden;
  .ant-form-item {
    display: flex;
    margin-bottom: @base-margin-bottom;
    .ant-form-item-control-wrapper {
      flex: 1;
      line-height: @base-line-height;
    }
  }
  .h-btn {
    display: inline-block;
    line-height: @base-line-height;
    cursor: pointer;
    width: @base-width;
    position: absolute;
    top: 3px;
    right: -@base-width;
    .span {
      color: #1890ff;
    }
  }
}
.h-container-open {
  height: auto;
  padding-right: 0;
}
.h-btn-open {
  position: relative !important;
  right: 0 !important;
}
</style>

 <BaseSearchForm>
      <a-col :span="6">
        <a-form-item label="调度单号">
          <a-input allowClear placeholder="请输入" v-model="query.templateName" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="调度单类型">
          <a-select v-model="query.noticeMode" placeholder="全部" allowClear>
            <a-select-option
              v-for="dict in $getDict('message_template_notice_mode')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="调度单状态">
          <a-select v-model="query.noticeMode" placeholder="全部" allowClear>
            <a-select-option
              v-for="dict in $getDict('message_template_notice_mode')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="承运商">
          <a-input allowClear v-model="query.title" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="车牌号">
          <a-input allowClear v-model="query.title" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="司机">
          <a-input allowClear v-model="query.title" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="司机手机号">
          <a-input allowClear v-model="query.title" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="完成日期">
          <a-range-picker v-model="query.finishDate" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="创建日期">
          <a-range-picker v-model="query.createDate" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="创建日期">
          <a-range-picker v-model="query.createDate" />
        </a-form-item>
      </a-col>
    </BaseSearchForm>