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

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({

package/style/data-table.css

@@ -1 +1 @@
-.bwa-datatable{--bwa-datatable-pagination-padding-top:20px;--bwa-datatable-pagination-line-height:36px;--bwa-datatable-pagination-info-margin-right:16px;--bwa-datatable-pagination-info-font-size:12px;--bwa-datatable-pagination-info-text-color:#547781;display:flex;flex-direction:column;height:100%;width:100%}.bwa-datatable__pagination{display:flex;line-height:var(--bwa-datatable-pagination-line-height)}.bwa-datatable__pagination::before{content:"";position:relative;flex:1}.bwa-datatable__pagination{padding-top:var(--bwa-datatable-pagination-padding-top)}.bwa-datatable__pagination-info{margin-right:var(--bwa-datatable-pagination-info-margin-right);font-size:var(--bwa-datatable-pagination-info-font-size);color:var(--bwa-datatable-pagination-info-text-color);white-space:nowrap}.bwa-datatable>.el-table{flex:1;height:0}.bwa-datatable__drag{text-align:center;cursor:grab}.bwa-datatable__dragbar{position:fixed;background-color:var(--bwa-color-primary);z-index:99}.bwa-column-view{text-overflow:ellipsis;overflow:hidden}
+.bwa-datatable{--bwa-datatable-pagination-padding-top:20px;--bwa-datatable-pagination-line-height:36px;--bwa-datatable-pagination-info-margin-right:16px;--bwa-datatable-pagination-info-font-size:12px;--bwa-datatable-pagination-info-text-color:#547781;height:100%;width:100%}.bwa-datatable__pagination{display:flex;line-height:var(--bwa-datatable-pagination-line-height)}.bwa-datatable__pagination::before{content:"";position:relative;flex:1}.bwa-datatable__pagination{padding-top:var(--bwa-datatable-pagination-padding-top)}.bwa-datatable__pagination-info{margin-right:var(--bwa-datatable-pagination-info-margin-right);font-size:var(--bwa-datatable-pagination-info-font-size);color:var(--bwa-datatable-pagination-info-text-color);white-space:nowrap}.bwa-datatable>.el-table{flex:1;height:0}.bwa-datatable__drag{text-align:center;cursor:grab}.bwa-datatable__dragbar{position:fixed;background-color:var(--bwa-color-primary);z-index:99}.bwa-column-view{text-overflow:ellipsis;overflow:hidden}