搜索 组件
<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 )