删除列表页工具栏的冗余的过滤字段

This commit is contained in:
jingrow 2025-11-01 19:03:54 +08:00
parent e042093af4
commit cb9543448f

View File

@ -33,21 +33,6 @@
<div class="filters">
<n-input v-model:value="searchQuery" :placeholder="t('Search')" clearable style="width: 200px" />
</div>
<!-- 活跃过滤条件标签 -->
<div v-if="activeFilterTags.length > 0" class="active-filters">
<div class="filter-tags">
<span v-for="tag in activeFilterTags" :key="tag.field" class="filter-tag">
<span class="tag-content">
<span class="tag-label">{{ tag.label }}</span>
<span class="tag-separator">:</span>
<span class="tag-value">{{ tag.value }}</span>
</span>
<button @click="removeFilter(tag.field)" class="remove-filter-btn">
<i class="fa fa-times"></i>
</button>
</span>
</div>
</div>
<div class="view-toggle">
<button
class="toggle-btn"
@ -363,40 +348,6 @@ const viewMode = ref<'card' | 'list'>(
//
const filters = ref<Record<string, any>>({})
//
const activeFilterTags = computed(() => {
const tags: Array<{field: string, label: string, value: string}> = []
Object.entries(filters.value).forEach(([fieldName, value]) => {
if (value !== null && value !== undefined && value !== '' &&
!(Array.isArray(value) && value.length === 0)) {
const field = metaFields.value.find(f => f.fieldname === fieldName)
const label = field?.label || fieldName
let displayValue = value
if (Array.isArray(value)) {
displayValue = value.join(', ')
} else if (field?.fieldtype === 'Check') {
displayValue = value === 1 ? t('是') : t('否')
} else if (field?.options) {
//
const options = field.options.split('\n').filter((s: string) => s.trim() !== '')
if (options.includes(value)) {
displayValue = t(value)
}
}
tags.push({ field: fieldName, label, value: displayValue })
}
})
return tags
})
//
function removeFilter(fieldName: string) {
filters.value[fieldName] = null
onFilterChange()
}
//
function onFilterChange() {
page.value = 1 //
@ -1804,74 +1755,6 @@ function formatDisplayValue(value: any, fieldName: string) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 简洁的活跃过滤条件标签样式 */
.active-filters {
margin-right: 12px;
}
.filter-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.filter-tag {
display: inline-flex;
align-items: center;
background: #3b82f6;
color: white;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
overflow: hidden;
transition: all 0.2s ease;
}
.filter-tag:hover {
background: #2563eb;
}
.tag-content {
display: flex;
align-items: center;
padding: 2px 6px;
}
.tag-label {
font-weight: 600;
}
.tag-separator {
margin: 0 2px;
opacity: 0.8;
}
.tag-value {
opacity: 0.9;
}
.remove-filter-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
cursor: pointer;
padding: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 3px 3px 0;
transition: all 0.2s ease;
}
.remove-filter-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.remove-filter-btn i {
font-size: 7px;
}
</style>