75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
queryParams: {
|
||
|
|
type: Object,
|
||
|
|
},
|
||
|
|
queryRef: {
|
||
|
|
type: String,
|
||
|
|
default: 'queryRef'
|
||
|
|
},
|
||
|
|
inline: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
showSearch: {
|
||
|
|
type: Boolean,
|
||
|
|
},
|
||
|
|
labelWidth: {
|
||
|
|
type: String,
|
||
|
|
default: '68px'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const emits = defineEmits(['search','refresh'])
|
||
|
|
const {proxy} = getCurrentInstance()
|
||
|
|
const formData = reactive({
|
||
|
|
search: false
|
||
|
|
});
|
||
|
|
const handleQuery = () => {
|
||
|
|
emits('search')
|
||
|
|
}
|
||
|
|
const resetQuery = () => {
|
||
|
|
proxy.resetForm(props.queryRef)
|
||
|
|
emits('refresh')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<el-form
|
||
|
|
:model="queryParams"
|
||
|
|
:ref="queryRef"
|
||
|
|
:inline="inline"
|
||
|
|
v-show="showSearch"
|
||
|
|
:label-width="labelWidth"
|
||
|
|
>
|
||
|
|
<el-row :gutter="16">
|
||
|
|
<slot name="one"></slot>
|
||
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" :xxl="6" style="padding-bottom: 10px;">
|
||
|
|
<el-space>
|
||
|
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
|
|
<el-button type="primary" text @click="formData.search = !formData.search">
|
||
|
|
<template #icon>
|
||
|
|
<ArrowUp v-if="formData.search"/>
|
||
|
|
<ArrowDown v-else/>
|
||
|
|
</template>
|
||
|
|
<template #default>{{ formData.search ? "收起" : "展开" }}</template>
|
||
|
|
</el-button>
|
||
|
|
</el-space>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="16">
|
||
|
|
<TransitionGroup name="other-search">
|
||
|
|
<slot name="other" v-if="formData.search"></slot>
|
||
|
|
</TransitionGroup>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
</style>
|