122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
|
<el-form
|
|
:model="form"
|
|
v-bind="$attrs"
|
|
label-width="auto"
|
|
ref="formInstance"
|
|
class="search-form"
|
|
>
|
|
<el-row>
|
|
<el-col
|
|
v-for="(item, index) in filterConfig"
|
|
:span="5"
|
|
:offset="index == 0 || index / 4 ==1 ? 0 : 1"
|
|
:key="item.prop"
|
|
>
|
|
<el-form-item
|
|
v-bind="item"
|
|
:key="item.prop"
|
|
>
|
|
<template #default>
|
|
<component
|
|
:is="item.component"
|
|
v-bind="item.props || {}"
|
|
v-on="item.on || {}"
|
|
v-model="form[item.prop]"
|
|
>
|
|
</component>
|
|
</template>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- class="btn-col"-->
|
|
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
|
|
<el-form-item>
|
|
<el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
|
|
{{ showMore ? '收起' : '展开' }}
|
|
</el-button>
|
|
<el-button type="primary" @click="getValues" :icon="Search">查询</el-button>
|
|
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {Refresh, Search} from '@element-plus/icons-vue'
|
|
|
|
const props = defineProps({
|
|
searchConfig: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['getInstance', 'search'])
|
|
|
|
const form = ref({})
|
|
const formInstance = ref(null)
|
|
|
|
const showMore = ref(false)
|
|
|
|
const filterConfig = computed(()=>{
|
|
const arr = props.searchConfig.filter(item=>{
|
|
if(item.prop) return true
|
|
})
|
|
return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
|
|
})
|
|
|
|
// 搜索功能表单元素默认值
|
|
// const setDefaultFormValues = () => {
|
|
// filterConfig.value.forEach(item => {
|
|
// form.value[item.prop] = item.props?.defaultValue || null
|
|
// })
|
|
// }
|
|
|
|
watchEffect(() => {
|
|
if (filterConfig.value.length) {
|
|
// setDefaultFormValues()
|
|
}
|
|
})
|
|
|
|
const elChange = () => {
|
|
setTimeout(() => {
|
|
getValues()
|
|
}, 500)
|
|
}
|
|
|
|
const getValues = () => {
|
|
emits('search', form.value)
|
|
return form.value
|
|
}
|
|
|
|
//重置
|
|
const handleReset = () => {
|
|
form.value = {}
|
|
// setDefaultFormValues()
|
|
emits('search', form.value)
|
|
}
|
|
|
|
onMounted(()=>{
|
|
emits('getInstance', Object.assign({}, unref(formInstance),{
|
|
getValues,
|
|
handleReset,
|
|
}))
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-form {
|
|
padding-top: 18px;
|
|
}
|
|
.btn-col {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
:deep(.el-date-editor.el-input){
|
|
width: 100% !important;
|
|
}
|
|
</style>
|