116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
<template>
|
|
<div class="filter-wrap">
|
|
<div v-if="slots.operate" class="operate-wrap m-b-8px p-b-8px">
|
|
<slot name="operate"></slot>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div class="flex flex-wrap gap-8px">
|
|
<slot />
|
|
<template v-if="btn">
|
|
<div class="kl-filter-btns">
|
|
<el-button :loading="loading" :icon="Search" :class="[{ 'm-l-20px': props.searchBtnMarginLeft }]" type="primary" @click="handleSearch"
|
|
>搜索</el-button
|
|
>
|
|
<el-button v-if="isShowReset" :icon="Refresh" @click="handleReset">重置</el-button>
|
|
<slot name="followBtn"></slot>
|
|
</div>
|
|
</template>
|
|
<el-popover v-if="slots.ext" ref="popoverRef" placement="bottom-end" :width="popoverWidth" trigger="click">
|
|
<template #reference>
|
|
<slot name="more-btn">
|
|
<el-button type="primary" link
|
|
>更多筛选<el-icon><ArrowDown /></el-icon
|
|
></el-button>
|
|
</slot>
|
|
</template>
|
|
<slot name="ext" />
|
|
<el-divider />
|
|
<div class="flex flex-justify-end">
|
|
<el-button v-if="isShowReset" @click="handleReset">重置</el-button>
|
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
<slot name="btn"></slot>
|
|
</div>
|
|
<div v-if="slots.footer" class="filter-footer mt-14px">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
// 注意 在使用 el-select 或 el-date-picker 等组件时，需要在组件上添加 :teleported="false" 属性，
|
|
// 否则会出现弹窗失去焦点关闭的情况
|
|
import { useSlots, ref, getCurrentInstance } from 'vue'
|
|
import { Search, ArrowDown, Refresh } from '@element-plus/icons-vue'
|
|
const slots = useSlots()
|
|
const { proxy } = getCurrentInstance() as any
|
|
const popoverRef = ref()
|
|
const props = defineProps({
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
btn: {
|
|
//是否显示按钮
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isShowReset: {
|
|
//是否显示重置按钮
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
popoverWidth: {
|
|
type: Number,
|
|
default: 350,
|
|
},
|
|
searchBtnMarginLeft: {
|
|
//搜索按钮是否有做边距
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
const emits = defineEmits<{
|
|
(event: 'search'): void
|
|
(event: 'reset'): void
|
|
}>()
|
|
if (!proxy.$parent?.resetFields) {
|
|
console.error('QueryFilters必须嵌套在 ElForm 中才能正常使用')
|
|
}
|
|
const handleReset = () => {
|
|
if (props.loading) return
|
|
proxy.$parent?.resetFields()
|
|
emits('reset')
|
|
popoverRef.value?.hide()
|
|
}
|
|
const handleSearch = () => {
|
|
if (props.loading) return
|
|
emits('search')
|
|
popoverRef.value?.hide()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.filter-wrap {
|
|
background-color: #ffffff;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
padding: 12px;
|
|
.operate-wrap {
|
|
border-bottom: 1px solid #e6e8ed;
|
|
}
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 0 !important;
|
|
align-items: flex-start;
|
|
}
|
|
.kl-filter-btns {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
:deep(.el-divider--horizontal) {
|
|
margin: 12px 0 !important;
|
|
}
|
|
</style>
|