@ctzy-web-client/plugin-component-vue 1.0.31 → 1.0.33

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

@@ -18,9 +18,8 @@
             ref="advanceSelectRef"
         >
             <template #reference-content="{ selected }">
-                <!-- 多选模式 -->
-                <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;">
+                <div :class="ns.e('content')" v-if="multiple">
+                    <div v-if="selected && selected.length > 0">
                         <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>
@@ -39,47 +38,13 @@
                                         </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"
@@ -94,30 +59,11 @@
                         <ArrowDown v-else />
                     </ElIcon>
                 </div>
-                <!-- 单选模式 -->
-                <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>
+                <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>
                     <ElIcon
                         :class="ns.be('option', 'selected')"
                     >
@@ -126,6 +72,19 @@
                     </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"
@@ -233,8 +192,6 @@ 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)
@@ -287,44 +244,6 @@ 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
@@ -359,22 +278,8 @@ 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({
@@ -403,23 +308,4 @@ const handleClearClick = () => {
 defineExpose({
     data
 })
-</script>
-
-<style scoped>
-@keyframes blink {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-}
-
-.cursor-blink {
-    display: inline-block;
-    width: 1px;
-    height: 16px;
-    background-color: #333;
-    animation: blink 1s infinite;
-}
-</style>
+</script>

package/es/components.css

@@ -1 +0,0 @@
-.letter-circle[data-v-4c0fde1d]{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:14px;height:24px;justify-content:center;margin-right:8px;width:24px}@keyframes blink-ca1affd9{0%,to{opacity:1}50%{opacity:0}}.cursor-blink[data-v-ca1affd9]{animation:blink-ca1affd9 1s infinite;background-color:#333;display:inline-block;height:16px;width:1px}

package/es/pct-filter-panel/pct-compents/pct-multiple-menu-condition.vue_vue_type_style_index_0_scoped_ca1affd9_lang.mjs

@@ -1,13 +0,0 @@
-// Inject __name helper
-if (typeof __name === 'undefined') {
-  function __name(obj, name) {
-    Object.defineProperty(obj, "name", {
-      value: name,
-      configurable: true
-    });
-  }
-}
-
-var undefined$1 = undefined;
-
-export { undefined$1 as default };

package/lib/components.css

@@ -1 +0,0 @@
-.letter-circle[data-v-4c0fde1d]{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:14px;height:24px;justify-content:center;margin-right:8px;width:24px}@keyframes blink-ca1affd9{0%,to{opacity:1}50%{opacity:0}}.cursor-blink[data-v-ca1affd9]{animation:blink-ca1affd9 1s infinite;background-color:#333;display:inline-block;height:16px;width:1px}

package/lib/pct-filter-panel/pct-compents/pct-multiple-menu-condition.vue_vue_type_style_index_0_scoped_ca1affd9_lang.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-// Inject __name helper
-if (typeof __name === 'undefined') {
-  function __name(obj, name) {
-    Object.defineProperty(obj, "name", {
-      value: name,
-      configurable: true
-    });
-  }
-}
-
-var undefined$1 = undefined;
-
-exports["default"] = undefined$1;