删除列表页工具栏的冗余的过滤字段
This commit is contained in:
parent
e042093af4
commit
cb9543448f
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user