feat(web-admin): use fuzzy text input in column header filter.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-09-06 07:50:50 +08:00
1 parent e492cedab9
commit 1604ffceb1
1 file changed
+30 -6
@@ -27,8 +27,23 @@
</div>
<div class="panel-bd">
<!-- 文本 / 枚举 -->
<template v-if="type === 'text' || type === 'enum'">
<!-- 文本:整库模糊 -->
<template v-if="type === 'text'">
<div class="field">
<label>模糊检索</label>
<el-input
v-model="draftText"
clearable
placeholder="输入关键字,包含即匹配"
size="small"
@keyup.enter="confirm"
/>
</div>
<p class="field-tip">整库模糊匹配本列</p>
</template>
<!-- 枚举:固定选项勾选 -->
<template v-else-if="type === 'enum'">
<div class="field">
<label>搜索可选值</label>
<el-input
@@ -39,7 +54,7 @@
/>
</div>
<div class="select-all-row">
<span>本页可选值</span>
<span>可选值</span>
<span>
<el-button link type="primary" size="small" @click="selectAllVisible">全选</el-button>
<el-button link type="primary" size="small" @click="selectNoneVisible"
@@ -186,6 +201,7 @@
}>()
const visible = ref(false)
const draftText = ref('')
const draftKeyword = ref('')
const draftSelected = ref<string[]>([])
const draftOp = ref<NumberFilterOp>('between')
@@ -199,7 +215,7 @@
let holdPopoverTimer: ReturnType<typeof setTimeout> | undefined
const typeHint = computed(() => {
if (props.type === 'text') return '文本:搜索并勾选本页出现的值'
if (props.type === 'text') return '文本:输入关键字模糊匹配(整库)'
if (props.type === 'enum') return '枚举:勾选固定选项'
if (props.type === 'number') return '数字:运算符 + 单值或区间'
return '时间:按日期闭区间过滤'
@@ -216,7 +232,12 @@
function resetDraftFromModel() {
const m = props.modelValue
if (props.type === 'text' || props.type === 'enum') {
if (props.type === 'text') {
const s = (m || { text: '' }) as TextColumnFilterState
draftText.value = s.text || ''
return
}
if (props.type === 'enum') {
const s = (m || { text: '', selected: [], keyword: '' }) as TextColumnFilterState
draftSelected.value = [...(s.selected || [])]
draftKeyword.value = s.keyword || ''
@@ -289,7 +310,10 @@
}
function buildState(): ColumnFilterState {
if (props.type === 'text' || props.type === 'enum') {
if (props.type === 'text') {
return { text: draftText.value.trim() }
}
if (props.type === 'enum') {
return {
text: '',
selected: [...draftSelected.value],