147 lines
4.3 KiB
Vue
147 lines
4.3 KiB
Vue
<template>
|
|
<el-drawer class="shrimp-drawer" :model-value="visible" @update:model-value="$emit('update:visible', $event)"
|
|
:title="title" size="400px">
|
|
<el-form :model="localFilterData">
|
|
<template v-for="field in filterableFields" :key="field.key">
|
|
<el-form-item :label="vueAdmin.t(field.label)">
|
|
<div class="filter-field-row">
|
|
<div class="filter-field-control">
|
|
<slot :name="`filter-${field.key}`" :field="field" :data="localFilterData">
|
|
<component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)"
|
|
:field="field" :model-value="localFilterData[field.key]"
|
|
@update:model-value="onFieldChange(field.key, $event)" mode="filter" />
|
|
</slot>
|
|
</div>
|
|
<!-- 单独清空该字段:常驻、无值时禁用(不 v-if,避免按钮显隐导致布局闪动) -->
|
|
<el-button link :icon="CircleClose" class="filter-clear"
|
|
:disabled="!hasValue(field.key)" @click="clearField(field.key)" />
|
|
</div>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleReset">{{ $t('base.reset') }}</el-button>
|
|
<el-button type="primary" @click="handleConfirm">{{ $t('base.confirm') }}</el-button>
|
|
</template>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue'
|
|
import { CircleClose } from '@element-plus/icons-vue'
|
|
import { IFieldConfig } from '../IShrimpType'
|
|
import { vueAdmin } from '../VueAdmin'
|
|
|
|
interface Props {
|
|
visible: boolean
|
|
title: string
|
|
moduleKey: string
|
|
filterableFields: IFieldConfig[]
|
|
filterData: Record<string, any>
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:visible': [value: boolean]
|
|
confirm: [value: Record<string, any>]
|
|
reset: []
|
|
}>()
|
|
|
|
const localFilterData = ref<Record<string, any>>({})
|
|
const closedByReset = ref(false)
|
|
|
|
function hasChanged(): boolean {
|
|
return JSON.stringify(localFilterData.value) !== JSON.stringify(props.filterData)
|
|
}
|
|
|
|
watch(() => props.visible, (val, oldVal) => {
|
|
if (oldVal === false && val === true) {
|
|
closedByReset.value = false
|
|
localFilterData.value = { ...props.filterData }
|
|
}
|
|
if (oldVal === true && val === false) {
|
|
if (closedByReset.value) {
|
|
closedByReset.value = false
|
|
emit('reset')
|
|
return
|
|
}
|
|
if (hasChanged()) {
|
|
emit('confirm', { ...localFilterData.value })
|
|
}
|
|
}
|
|
})
|
|
|
|
function onFieldChange(key: string, value: any) {
|
|
localFilterData.value = { ...localFilterData.value, [key]: value }
|
|
}
|
|
|
|
// 该字段当前是否有筛选值(决定单独清空按钮是否出现);范围 {gte,lte}/数组按内容判空
|
|
function hasValue(key: string): boolean {
|
|
const v = localFilterData.value[key]
|
|
if (v == null || v === '') return false
|
|
if (Array.isArray(v)) return v.length > 0
|
|
if (typeof v === 'object') return Object.keys(v).length > 0
|
|
return true
|
|
}
|
|
|
|
// 单独清空某个字段:只摘掉这一个 key,其余筛选条件不动
|
|
function clearField(key: string) {
|
|
const { [key]: _, ...rest } = localFilterData.value
|
|
localFilterData.value = rest
|
|
}
|
|
|
|
function handleReset() {
|
|
closedByReset.value = true
|
|
localFilterData.value = {}
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
function handleConfirm() {
|
|
emit('update:visible', false)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.shrimp-drawer .el-drawer__header {
|
|
margin-bottom: 0;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
}
|
|
|
|
.shrimp-drawer .el-drawer__body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.shrimp-drawer .el-drawer__footer {
|
|
padding: 12px 20px;
|
|
border-top: 1px solid var(--el-border-color-lighter);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.shrimp-drawer .el-drawer__body .el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.filter-field-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-field-control {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filter-clear {
|
|
flex: none;
|
|
padding: 0;
|
|
font-size: 16px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
</style>
|