创建搜索组件
<script lang="ts" setup>
import { reactive } from 'vue'
import searchTable from 'hooks/searchTable'
import type { FormInstance } from 'element-plus'
// 拿到父组件传过来的数据
const props = defineProps<Iprops>()
const emits = defineEmits(['queryClick', 'resetClick'])
const { isHighSearch, switchSeachFn } = searchTable()
// 定义自定义属性接受到的属性接口
interface Iprops {
searchConfig: { formItem: any[] }
}
const searchForm = reactive({})
const formRef = ref<FormInstance>()
function queryClick() {
emits('queryClick', '查询')
}
function resetClick() {
emits('resetClick', '重置')
}
</script>
<template>
<div class="search">
<!-- 1.输入关键字的表单 -->
<div class="serach_form serach_form_high_fold" :class="{ high_search: isHighSearch }">
<el-form ref="formRef" label-width="120px" class="form_grid" :model="searchForm">
<!-- 将父组件传输过来的数据动态挂载 -->
<template v-for="item in searchConfig.formItem" :key="item.prop">
<el-form-item :label="item.label" prop="item.name">
<!-- //条件渲染表单项目类型 -->
<template v-if="item.type === 'input'">
<el-input
v-model="searchForm[item
.prop]" :placeholder="item.placeholder"
/>
</template>
<template v-if="item.type === 'datePicker'">
<el-date-picker
v-model="searchForm[item
.prop]"
type="date"
style="width: 100%;"
:placeholder="item.placeholder"
/>
</template>
<template v-if="item.type === 'select'">
<el-select
v-model="searchForm[item
.prop]" :placeholder="item.placeholder" style="width: 100%;"
>
<el-option v-for="i in item.optionList" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</template>
<template v-if="item.type === 'daterange'">
<el-date-picker
v-model="searchForm[item
.prop]" type="daterange" range-separator="-" start-placeholder="开始时间" end-pl aceholder="结束时间"
/>
</template>
</el-form-item>
</template>
</el-form>
</div>
<div class="serach_btn">
<el-link class="margin_right" type="primary" :underline="false" @click="switchSeachFn">
高级
<el-icon>
<svg-icon :name="isHighSearch ? 'ep:arrow-up' : 'ep:arrow-down'" />
</el-icon>
</el-link>
<!-- 2.重置和搜索的按钮 -->
<el-button type="primary" @click="queryClick">
查询
</el-button>
<el-button @click="resetClick">
重置
</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.search {
background-color: white;
padding: 20px;
border-radius: 10px 10px 0 0;
}
</style>
<style lang="scss" scoped>
.search {
display: flex;
padding-bottom: 2px;
.serach_form {
flex: 1;
margin-right: 20px;
.input_class {
width: 100%;
text-overflow: ellipsis;
overflow-x: hidden;
}
.split_line {
text-align: center;
width: 8%;
}
}
.serach_btn {
width: 220px;
}
}
</style>
使用封装好的组件 search.config.ts
<script lang="ts" setup>
import searchConfig from './search.config'
import PageSearch from '@/components/PageSearch/page-search.vue'
// 引入子组件pageSearch和配置文件
// 引入子组件pageSearch和配置文件
const handleResetClick = (val: any) => {
console.log('1111', val)
}
const handleQueryClick = (val: any) => {
console.log('2222', val)
}
</script>
<template>
<div class="department">
<div class="user">
<div class="search">
<PageSearch
:search-config="searchConfig"
@queryClick="handleQueryClick"
@resetClick="handleResetClick"
/>
</div>
</div>
</div>
</template>
<style>
</style>
自定义JSON
// 配置department的serach区域的数据
const searchConfig = {
formItem: [
{
type: 'input', // 类型
label: '票据号码', // label
placeholder: '请输入票据号码', // 提示信息
prop: 'name', // 绑定数据
},
{
type: 'select',
label: '出票日期',
placeholder: '请选择出票日期',
prop: 'leader',
optionList: [
{
label: '是',
value: 1,
},
{
label: '否',
value: 0,
},
],
},
{
type: 'datePicker',
label: '汇票到期日',
placeholder: '请输入汇票到期日',
prop: 'shouj',
},
{
type: 'daterange',
label: '创建时间',
prop: 'createAt',
},
],
}
export default searchConfig