BoundLink-Plate-UI/src/components/BsUi/Table/component/search/index.vue

<template>
  <div class="SearchWrapper" v-if="!isEmpty(props?.fields)">
    <a-card>
      <a-form ref="formRef">
        <a-row :gutter="[10, 10]">
          <a-col :span="fieldSpan || 3" v-for="(item, index) in props.fields" :key="index" v-show="item.visible">
            <a-form-item :label="item.label" :name="item.field">
              <component
                :is="item?.component"
                v-model:value="props.data[item?.field]"
                v-model:checked="props.data[item?.field]"
                :placeholder="item.placeholder"
                v-bind="item?.componentProps"
              />
            </a-form-item>
          </a-col>
          <a-col :span="btnSpan">
            <div class="search-btn">
              <a-space>
                <a-button type="primary" :icon="h(SearchOutlined)" @click="searchHandler">查询</a-button>
                <a-button :icon="h(ClearOutlined)" @click="resetHandler">重置</a-button>
                <a-space v-if="props.fields.length > 1">
                  <a-button type="dashed" :icon="h(UpOutlined)" @click="toggleHandler" v-if="isZheDie">收起</a-button>
                  <a-button type="dashed" :icon="h(DownOutlined)" @click="toggleHandler" v-if="!isZheDie">展开</a-button>
                </a-space>
              </a-space>

              <div class="search-right">
                <slot name="searchRight"></slot>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>
<script setup>
  import { ref, h, computed } from 'vue';
  import { ClearOutlined, SearchOutlined, UpOutlined, DownOutlined } from '@ant-design/icons-vue';
  import { isEmpty } from 'lodash';
  const props = defineProps(['fields', 'data', 'onSearch', 'onReset', 'onToggle', 'fieldSpan']);
  const emits = defineEmits(['search', 'reset']);

  const formRef = ref(null);
  const isZheDie = ref(false);
  const searchHandler = () => {
    emits('search');
  };

  const resetHandler = () => {
    emits('reset');
  };

  const toggleHandler = () => {
    isZheDie.value = !isZheDie.value;
    props?.onToggle();
  };

  const btnSpan = computed(() => {
    const num = props.fields.filter((item) => item.visible).length;
    const fieldSpanNum = Number(props.fieldSpan || 3);
    const totalFieldSpanNum = num * fieldSpanNum;
    return 24 - totalFieldSpanNum % 24;
  });

</script>

<style lang="scss" scoped>
  .SearchWrapper {
    width: 100%;
    padding-bottom: 10px;
    :deep(.ant-card-body) {
      padding: 20px;
    }
    :deep(.ant-form-item) {
      margin-bottom: 0;
    }

    .search-btn {
      display: flex;
      justify-content:  space-between;
      align-items: center;

      .search-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }



    .field-items {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
      .field-item {
        width: 200px;
      }
      .btn-list {
        display: flex;
        flex: 1;
        justify-content: space-between;
      }
    }
  }
</style>