@ctzy-web-client/plugin-component-vue 1.0.30 → 1.0.32

package/src/pct-filter-panel/pct-compents/pct-multiple-menu-condition.vue

@@ -18,8 +18,9 @@
             ref="advanceSelectRef"
         >
             <template #reference-content="{ selected }">
-                <div :class="ns.e('content')" v-if="multiple">
-                    <div v-if="selected && selected.length > 0">
+                <!-- 多选模式 -->
+                <div v-if="multiple" :class="ns.e('content')" @click="handleContentClick">
+                    <div v-if="selected && selected.length > 0" style="display: flex; align-items: center; flex-wrap: wrap; gap: 4px;">
                         <ElTooltip :content="selected[0].label" placement="top" effect="light" append-to=".bwa-application">
                             <el-tag :class="ns.e('tag')" closable  @close="handleClose(selected[0])" type="info">{{selected[0].label}}
                             </el-tag>
@@ -38,13 +39,47 @@
                                         </el-tag>
                                     </template>
                                 </div>
-
                             </template>
                             <el-tag :class="ns.e('tag')" type="info" v-if="selected.length > 1">+{{selected.length - 1}}</el-tag>
                         </ElTooltip>
-
+                        <!-- 搜索输入区域 -->
+                        <div v-if="props.showSearch && !column.componentProps?.options" style="flex: 1; min-width: 80px; position: relative;">
+                            <span v-if="!isSearchActive && !search" style="color: #999; cursor: text;">{{searchPlaceholderStr || '搜索'}}</span>
+                            <span v-else style="color: #333;">{{search}}</span>
+                            <!-- 闪烁光标 -->
+                            <span v-if="isSearchActive" class="cursor-blink"></span>
+                            <!-- 隐藏的输入框 -->
+                            <input
+                                v-if="props.showSearch && !column.componentProps?.options"
+                                ref="inputRef"
+                                v-model="search"
+                                type="text"
+                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: text;"
+                                @focus="handleInputFocus"
+                                @blur="handleInputBlur"
+                                @click.stop
+                            />
+                        </div>
+                    </div>
+                    <div v-else style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+                        <div style="flex: 1; position: relative; cursor: text;" @click="handleContentClick">
+                            <span v-if="!isSearchActive && !search" :class="ns.e('contentBox_placeholder')">{{placeholderStr}}</span>
+                            <span v-else style="color: #333;">{{search}}</span>
+                            <!-- 闪烁光标 -->
+                            <span v-if="isSearchActive" class="cursor-blink"></span>
+                            <!-- 隐藏的输入框 -->
+                            <input
+                                v-if="props.showSearch && !column.componentProps?.options"
+                                ref="inputRef"
+                                v-model="search"
+                                type="text"
+                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: text;"
+                                @focus="handleInputFocus"
+                                @blur="handleInputBlur"
+                                @click.stop
+                            />
+                        </div>
                     </div>
-                    <div v-else :class="ns.e('contentBox_placeholder')">{{placeholderStr}}</div>
                     <ElIcon
                       @mouseenter="isHoverIcon = true"
                      @mouseleave="isHoverIcon = false"
@@ -59,11 +94,30 @@
                         <ArrowDown v-else />
                     </ElIcon>
                 </div>
-                <div v-else :class="ns.e('content')">
-                    <ElTooltip :disabled="!selected.label" :content="selected.label" placement="top" effect="light" append-to=".bwa-application">
-                        <div :class="[ns.e('contentBox'), ns.e('contentBox_label')]" v-if="selected.label">{{selected.label || placeholderStr}}</div>
-                        <div :class="[ns.e('contentBox'), ns.e('contentBox_placeholder')]" v-else>{{placeholderStr}}</div>
-                    </ElTooltip>
+                <!-- 单选模式 -->
+                <div v-else :class="ns.e('content')" @click="handleContentClick">
+                    <div style="flex: 1; position: relative; cursor: text;">
+                        <ElTooltip :disabled="!selected.label" :content="selected.label" placement="top" effect="light" append-to=".bwa-application">
+                            <div v-if="selected.label" :class="[ns.e('contentBox'), ns.e('contentBox_label')]">{{selected.label || placeholderStr}}</div>
+                            <div v-else style="display: flex; align-items: center; width: 100%;">
+                                <span v-if="!isSearchActive && !search" :class="ns.e('contentBox_placeholder')">{{placeholderStr}}</span>
+                                <span v-else style="color: #333;">{{search}}</span>
+                                <!-- 闪烁光标 -->
+                                <span v-if="isSearchActive" class="cursor-blink"></span>
+                            </div>
+                        </ElTooltip>
+                        <!-- 隐藏的输入框 -->
+                        <input
+                            v-if="props.showSearch && !column.componentProps?.options"
+                            ref="inputRef"
+                            v-model="search"
+                            type="text"
+                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: text;"
+                            @focus="handleInputFocus"
+                            @blur="handleInputBlur"
+                            @click.stop
+                        />
+                    </div>
                     <ElIcon
                         :class="ns.be('option', 'selected')"
                     >
@@ -72,19 +126,6 @@
                     </ElIcon>
                 </div>
             </template>
-
-            <template #contentTop>
-                <div :class="ns.e('contentTop')" v-if="showSearch && !column.componentProps?.options">
-                    <ElInput
-                        v-model="search"
-                        :class="ns.e('select')"
-                        :placeholder="searchPlaceholderStr"
-                        type="text"
-                        prefix-icon="Search"
-                        clearable
-                    />
-                </div>
-            </template>
             <slot>
                 <BwaAdvanceOption
                     v-for="item in data"
@@ -192,6 +233,8 @@ onMounted(() => {
 const ns = useNamespace('pctfilterpanel-item');
 const isShowPopper = ref(false)
 const isHoverIcon = ref(false)
+const isSearchActive = ref(false)
+const inputRef = ref(null)
 
 const attrs = useAttrs();
 const showTitle = computed(() => attrs.showTitle)
@@ -244,6 +287,44 @@ modelValue.value = currentModelValue.filter(item =>
       // 原有逻辑：切换下拉显隐
       isShowPopper.value = !isShowPopper.value;
     };
+
+// 处理选择框点击事件
+const handleContentClick = (event) => {
+    event.stopPropagation();
+    // 显示下拉菜单
+    isShowPopper.value = true;
+    // 如果支持搜索，聚焦输入框
+    if (props.showSearch && !column.value?.componentProps?.options) {
+        nextTick(() => {
+            if (inputRef.value) {
+                inputRef.value.focus();
+                isSearchActive.value = true;
+            }
+        });
+    }
+};
+
+// 处理输入框聚焦事件
+const handleInputFocus = () => {
+    isSearchActive.value = true;
+    // 确保下拉菜单显示
+    isShowPopper.value = true;
+};
+
+// 处理输入框失焦事件
+const handleInputBlur = (event) => {
+    // 检查是否点击了下拉菜单内部
+    const target = event.relatedTarget;
+    if (target && target.closest('.bwa-advance-select__popper')) {
+        // 点击了下拉菜单内部，保持搜索状态
+        return;
+    }
+    // 延迟处理，以便点击标签等操作能够正常执行
+    setTimeout(() => {
+        isSearchActive.value = false;
+        // 不清空搜索内容，保持用户输入
+    }, 200);
+};
 const getData = async (query) => {
     loading.value = true
     const { itfInfo, searchAttr } = column.value.componentProps
@@ -278,8 +359,22 @@ const handleFieldSearch = (query) => {
 }
 
 const search = ref('')
+let searchTimeout = null
 watch(() => search.value, val => {
     handleFieldSearch(val)
+    // 清除之前的定时器
+    if (searchTimeout) {
+        clearTimeout(searchTimeout)
+    }
+    // 设置新的定时器，0.5秒后唤起下拉菜单并获取数据
+    searchTimeout = setTimeout(() => {
+        if (val && props.showSearch && !column.value?.componentProps?.options) {
+            isShowPopper.value = true
+            if (column.value.componentProps) {
+                getData(val)
+            }
+        }
+    }, 500)
 })
 
 const modelValue = computed({