Forráskód Böngészése

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

Co-authored-by: Cursor <cursoragent@cursor.com>
zlwu 1 hónapja
szülő
commit
1604ffceb1

+ 30 - 6
web-admin/src/components/business/column-header-filter/index.vue

@@ -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],