搜索组件vue3 ant 封装

搜索 组件

<template>
  <a-card>
    <a-form
      ref="formRef"
      name="advanced_search"
      :model="searchInfo"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      layout="inline"
    >
      <div v-for="(item, index) in searchData" :key="index">
        <a-form-item v-if="item.type == 'input'" :label="item.label" :name="item.value">
          <a-input
            v-model:value="searchInfo[item.value]"
            :placeholder="item.placeholder"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item v-if="item.type == 'select'" :label="item.label" :name="item.value">
          <a-select
            v-model:value="searchInfo[item.value]"
            :placeholder="item.placeholder"
            allowClear
            style="width: 200px">
            <a-select-option v-for="(ele,index) in item.options" :key="index" :value="ele.value">
              {{ele.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="item.type == 'selects'" :label="item.label" :name="item.value">
          <a-select
            v-model:value="searchInfo[item.value]"
            :placeholder="item.placeholder"
            :options="item.options"
            mode="multiple"
            max-tag-count="responsive"
            allowClear
            style="width: 210px"
          ></a-select>
        </a-form-item>
        <a-form-item v-if="item.type === 'picker'" :label="item.label" :name="item.value">
          <a-date-picker
            v-model:value="searchInfo[item.value]"
            show-time
            type="date"
            :placeholder="item.placeholder"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item v-if="item.type === 'pickers'" :label="item.label" :name="item.value">
          <a-range-picker
            v-model:value="searchInfo[item.value]"
            :showTime="showTime"
            :format="format"
            :value-format="valueFormat"
            style="width: 100%"
          />
        </a-form-item>
      </div>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">查 询</a-button>
      </a-form-item>
      <a-form-item>
        <a-button style="margin-left: 10px" @click="() => formRef.resetFields()"
          >重 置</a-button
        >
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import type { FormInstance } from 'ant-design-vue';

const props = defineProps({
  // 数据，必传
  searchInfo: { type: Object, default: Function, },
  // 配置描述，必传
  searchData: { type: Array,  default: Function, },
  // 是否显示时间
  showTime: { type: Boolean,  default: false, },
  // 时间区间 格式 
  format: { type: String, default: "YYYY-MM-DD", },
  valueFormat: {  type: String, default: "YYYY-MM-DD", },
})

const emits = defineEmits(['submit-data' ])

const formRef = ref<FormInstance>();
const searchInfo = reactive(props.searchInfo);
const searchData = reactive(props.searchData);

const onSubmit = () => {
  emits("submit-data", toRaw(searchInfo));
};

</script>
<style scoped lang="less" >
.ant-card-bordered {
  border: none;
  margin: 0px -24px;
}
</style>

调用

<Search class="search-box" :searchData="searchData" @submitData="submit" :searchInfo="info"></Search>

import Search from "@/components/search/index.vue";

// 查询
  searchInfo ={
	  product: '',
	  process: null,
	  pgmVersion: '',
	  owner: '',
	 }
  searchArr = reactive([
    { type: "input", value: "product", label: "Product", placeholder: "请输入内容", },
    { type: "select", value: "process", label: "Process", placeholder: "请选择",
		options: [
			{ label: "RDBI", value: "RDBI" },
			{ label: "FT1", value: "FT1" },
			{ label: "FT2", value: "FT2" },
			{ label: "FT3", value: "FT3" },
			{ label: "FT4", value: "FT4" },
		],
	},
    { type: "input", value: "pgmVersion", label: "PGMVersion", placeholder: "请输入内容", },
    { type: "input", value: "owner", label: "Owner", placeholder: "请输入内容", },
  ])
  searchData = toRaw(this.searchArr);
  info = toRaw(this.searchInfo)
  submit = () => this.onChange(1, this.paginationOpt.pageSize )