@ctzy-web-client/plugin-component-vue 1.0.22 → 1.0.24

package/src/pct-filter-panel/pct-compents/pct-date-range-condition.vue

@@ -1,61 +1,61 @@
-<template>
-  <div :class="ns.e('cont')">
-    <div v-if="column && showTitle" :class="ns.e('label')">{{ column.title }}</div>
-    <el-date-picker
-      v-model="value"
-      type="daterange"
-      range-separator="至"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      :value-format="valueFormat"
-      size="small"
-    />
-  </div>
-</template>
-
-<script setup>
-import {computed, inject} from 'vue';
-import {useNamespace, filterPanelItemKey} from '@ctzy-web-client/web-base-client-vue';
-const ns = useNamespace('pct-daterange');
-defineOptions({
-  name: 'BwaPctDateRangeCondition',
-  __conditionTitle__: '日期选择',
-  __conditionDefault__: () => ({ start: '', end: '' }),
-});
-
-const props = defineProps({
-    modelValue: {
-        type: null,
-    },
-    valueFormat: {
-        type: String,
-        default: 'YYYY-MM-DD',
-    },
-    showTitle: {
-        type: Boolean,
-        default: false
-    }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const filterPanelItem = inject(filterPanelItemKey);
-const column = computed(() => filterPanelItem?.column ?? null);
-
-const value = computed({
-  get: () => {
-    if (props.modelValue && props.modelValue.start && props.modelValue.end) {
-      return [props.modelValue.start, props.modelValue.end];
-    }
-    return [];
-  },
-  set: (v) => {
-    if (v && v.length === 2) {
-      emit('update:modelValue', { start: v[0], end: v[1] });
-    } else {
-      emit('update:modelValue', { start: '', end: '' });
-    }
-  },
-});
-</script>
-
+<template>
+  <div :class="ns.e('cont')">
+    <div v-if="column && showTitle" :class="ns.e('label')">{{ column.title }}</div>
+    <el-date-picker
+      v-model="value"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :value-format="valueFormat"
+      
+    />
+  </div>
+</template>
+
+<script setup>
+import {computed, inject} from 'vue';
+import {useNamespace, filterPanelItemKey} from '@ctzy-web-client/web-base-client-vue';
+const ns = useNamespace('pct-daterange');
+defineOptions({
+  name: 'BwaPctDateRangeCondition',
+  __conditionTitle__: '日期选择',
+  __conditionDefault__: () => ({ start: '', end: '' }),
+});
+
+const props = defineProps({
+    modelValue: {
+        type: null,
+    },
+    valueFormat: {
+        type: String,
+        default: 'YYYY-MM-DD',
+    },
+    showTitle: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const filterPanelItem = inject(filterPanelItemKey);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const value = computed({
+  get: () => {
+    if (props.modelValue && props.modelValue.start && props.modelValue.end) {
+      return [props.modelValue.start, props.modelValue.end];
+    }
+    return [];
+  },
+  set: (v) => {
+    if (v && v.length === 2) {
+      emit('update:modelValue', { start: v[0], end: v[1] });
+    } else {
+      emit('update:modelValue', { start: '', end: '' });
+    }
+  },
+});
+</script>
+

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

@@ -1,178 +1,302 @@
-<template>
-    <div :class="ns.e('conditbox')">
-        <div v-if="showTitle" :class="ns.e('title')">{{column.title}}</div>
-        <el-select
-            :multiple="multiple"
-            v-model="modelValue"
-            @visible-change="visibleChange"
-            :class="ns.e('options')"
-            :loading="loading"
-            :placeholder="placeholderStr"
-            :clearable="true"
-            :filterable="showSearch"
-            :remote="remote"
-            :remote-method="remoteMethod"
-            size="small"
-        >
-            <el-option
-                v-for="item in data"
-                :key="item[valuePropStr] + ''"
-                :value="item[valuePropStr] + ''"
-                :label="item[labelPropStr] + ''"
-            />
-        </el-select>
-    </div>
-</template>
-
-<script setup>
-import { useNamespace } from '@ctzy-web-client/web-base-client-vue';
-import {computed, unref, defineEmits, inject, ref, useAttrs, watch} from 'vue';
-import {dataProps} from "../../hooks/use-data";
-
-import {
-    useService,
-    HttpRequest,
-    filterPanelItemKey
-} from '@ctzy-web-client/web-base-client-vue';
-
-const httpRequest = useService(HttpRequest);
-defineOptions({
-    name: 'BwaPctMultipleMenuCondition',
-    __conditionTitle__: '多选列表',
-    __conditionDefault__: () => [],
-});
-
-const props = defineProps({
-    ...dataProps,
-    modelValue: {
-        type: null,
-    },
-    options: {
-        type: Array,
-        default: () => [],
-    },
-    labelProp: {
-        type: String,
-        default: 'label',
-    },
-    valueProp: {
-        type: String,
-        default: 'value',
-    },
-    multiple: {
-        type: Boolean,
-        default: true,
-    },
-    showSearch: {
-        type: Boolean,
-        default: true,
-    },
-    placeholder: {
-        type: String,
-        default: '请选择',
-    },
-    remote: {
-        type: Boolean,
-        default: true,
-    },
-    size: {
-        type: String,
-        default: 'small',
-    },
-    searchPlaceholder: {
-        type: String,
-        default: '',
-    },
-    labelAttr: '',
-    valueAttr: '',
-    searchAttr: '',
-    itfInfo: null,
-    // 自定义选项时  是否通过展开自动触发自定义search
-    isRequiredByVisibleChange: {
-        type: Boolean,
-        default: false,
-    },
-});
-
-const ns = useNamespace('pctfilterpanel-item');
-const isShowPopper = ref(false)
-
-const attrs = useAttrs();
-const showTitle = computed(() => attrs.showTitle)
-
-const data = ref([])
-const loading = ref(false)
-const emit = defineEmits(['update:modelValue', 'search']);
-
-const filterPanelItem = inject(filterPanelItemKey, null);
-const column = computed(() => filterPanelItem?.column ?? null);
-
-/**
- * 页面参数层级覆盖配置文件传递的参数层级
- */
-if (props.itfInfo) {
-    column.value.componentProps = {
-        itfInfo: props.itfInfo || {},
-        labelAttr: props.labelAttr || 'label',
-        valueAttr: props.valueAttr || 'value',
-        searchAttr: props.searchAttr || 'search'
-    }
-}
-
-const searchPlaceholderStr = computed(() => column.value?.componentProps?.searchPlaceholder || props.searchPlaceholder)
-const placeholderStr = computed(() => showTitle.value ? props.placeholder : column.value.title)
-
-const labelPropStr = computed(() => column.value?.componentProps?.labelAttr || props.labelProp)
-const valuePropStr = computed(() => column.value?.componentProps?.valueAttr || props.valueProp)
-
-const getData = async (query) => {
-    loading.value = true
-    const { itfInfo, searchAttr } = column.value.componentProps
-    const {url, method, options, params } = {
-        url: unref(itfInfo).url,
-        method: unref(itfInfo).method || 'POST',
-        options: unref(itfInfo).options || {},
-        params: { ...unref(itfInfo).params, [searchAttr]: query || ''} || {},
-    }
-    data.value = (await unref(httpRequest)[method.toLowerCase()](url, params, options))?.data
-    loading.value = false
-}
-
-data.value = props.options ?? []
-const visibleChange = (val) => {
-    isShowPopper.value = val
-    if (!val || !column.value.componentProps || column.value?.componentProps?.options) {
-        if (isShowPopper.value && props.isRequiredByVisibleChange) {
-            emit('search', '')
-        }
-        return
-    }
-    getData()
-}
-
-const remoteMethod = (query) => {
-    if (column.value.componentProps) {
-        getData(query)
-    } else {
-        emit('search', query)
-    }
-}
-
-const modelValue = computed({
-    get: () => {
-        if (props.multiple) {
-            return Array.isArray(props.modelValue)
-                ? props.modelValue.map((item) => item )
-                : [];
-        } else {
-            return props.modelValue == null || Array.isArray(props.modelValue) ? '' : props.modelValue;
-        }
-    },
-    set: (v) => emit('update:modelValue', v),
-});
-
-defineExpose({
-    data
-})
-</script>
-
+<template>
+    <div :class="ns.e('conditbox')">
+        <div v-if="showTitle" :class="ns.e('title')">{{column.title}}</div>
+        <BwaAdvanceSelect
+            :multiple="multiple"
+            v-model="modelValue"
+            @search="handleFieldSearch"
+            :class="ns.e('options')"
+            @visible-change="visibleChange"
+            source="pct"
+            :showSearch="false"
+            :showSelectIcon="!multiple"
+            :showSelection="false"
+            :loading="loading"
+            :width="popperWidth"
+            borderRadius="4px"
+            ref="advanceSelectRef"
+        >
+            <template #reference-content="{ selected }">
+                <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>
+                        </ElTooltip>
+                        <ElTooltip content="Bottom center" placement="top" effect="light" append-to=".bwa-application">
+                            <template #content>
+                                <div :class="ns.e('tag_box')">
+                                    <template v-for="(item, index) in selected">
+                                        <el-tag
+                                            :class="ns.e('tag_details')"
+                                            type="info"
+                                            closable  @close="handleClose(item)"
+                                            v-if="index !== 0"
+                                        >
+                                            {{item.label}}
+                                        </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>
+                    <div v-else :class="ns.e('contentBox_placeholder')">{{placeholderStr}}</div>
+                    <ElIcon
+                      @mouseenter="isHoverIcon = true"
+                     @mouseleave="isHoverIcon = false"
+                      @click.stop="handleIconClick"
+                        :class="ns.be('option', 'selected')"
+                    >   
+                     <CircleClose
+    v-if="isHoverIcon  && selected.length > 0"
+    class="delete-icon"
+  />
+                        <ArrowUp v-else-if="isShowPopper" />
+                        <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>
+                    <ElIcon
+                        :class="ns.be('option', 'selected')"
+                    >
+                        <ArrowUp v-if="isShowPopper" />
+                        <ArrowDown v-else />
+                    </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"
+                    :key="item[valuePropStr] + ''"
+                    :value="item[valuePropStr] + ''"
+                    :label="item[labelPropStr] + ''"
+                    :class="ns.be('filter', 'option')"
+                >
+                </BwaAdvanceOption>
+            </slot>
+            <template #contentBottom>
+                <div :class="ns.e('clear')" @click="handleClearClick">清除已选</div>
+            </template>
+        </BwaAdvanceSelect>
+    </div>
+</template>
+
+<script setup>
+import {ElOption, ElSelect, ElTooltip, ElIcon, ElInput, ElTag} from 'element-plus';
+import {ArrowUp, ArrowDown} from '@element-plus/icons';
+import { useNamespace } from '@ctzy-web-client/web-base-client-vue';
+import {computed, unref, defineEmits, inject, ref, useAttrs, watch, onMounted, nextTick} from 'vue';
+import {dataProps} from "../../hooks/use-data";
+
+import {
+    useService,
+    HttpRequest,
+    filterPanelItemKey
+} from '@ctzy-web-client/web-base-client-vue';
+import BwaAdvanceSelect from '../../advance-select/advance-select.vue';
+import BwaAdvanceOption from '../../advance-select/advance-option.vue';
+
+const httpRequest = useService(HttpRequest);
+defineOptions({
+    name: 'BwaPctMultipleMenuCondition',
+    __conditionTitle__: '多选列表',
+    __conditionDefault__: () => [],
+});
+
+const props = defineProps({
+    ...dataProps,
+    modelValue: {
+        type: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    labelProp: {
+        type: String,
+        default: 'label',
+    },
+    valueProp: {
+        type: String,
+        default: 'value',
+    },
+    multiple: {
+        type: Boolean,
+        default: true,
+    },
+    showSearch: {
+        type: Boolean,
+        default: true,
+    },
+    placeholder: {
+        type: String,
+        default: '请选择',
+    },
+    remote: {
+        type: Boolean,
+        default: true,
+    },
+    size: {
+        type: String,
+        default: 'small',
+    },
+    searchPlaceholder: {
+        type: String,
+        default: '',
+    },
+    labelAttr: '',
+    valueAttr: '',
+    searchAttr: '',
+    itfInfo: null,
+    // 自定义选项时  是否通过展开自动触发自定义search
+    isRequiredByVisibleChange: {
+        type: Boolean,
+        default: false,
+    },
+});
+const popperWidth = ref('240px')
+onMounted(() => {
+    nextTick(() => {
+        const offsetWidth = document.getElementsByClassName('bwa-pctfilterpanel-item__options')[0]?.offsetWidth
+        if (offsetWidth > 0) {
+            popperWidth.value = offsetWidth + 'px'
+        }
+    })
+})
+const ns = useNamespace('pctfilterpanel-item');
+const isShowPopper = ref(false)
+const isHoverIcon = ref(false)
+
+const attrs = useAttrs();
+const showTitle = computed(() => attrs.showTitle)
+
+const data = ref([])
+const loading = ref(false)
+const emit = defineEmits(['update:modelValue', 'search']);
+
+const filterPanelItem = inject(filterPanelItemKey, null);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+/**
+ * 页面参数层级覆盖配置文件传递的参数层级
+ */
+if (props.itfInfo) {
+    column.value.componentProps = {
+        itfInfo: props.itfInfo || {},
+        labelAttr: props.labelAttr || 'label',
+        valueAttr: props.valueAttr || 'value',
+        searchAttr: props.searchAttr || 'search'
+    }
+}
+
+const searchPlaceholderStr = computed(() => column.value?.componentProps?.searchPlaceholder || props.searchPlaceholder)
+const placeholderStr = computed(() => showTitle.value ? props.placeholder : column.value.title)
+
+const labelPropStr = computed(() => column.value?.componentProps?.labelAttr || props.labelProp)
+const valuePropStr = computed(() => column.value?.componentProps?.valueAttr || props.valueProp)
+const handleClose = (val)=>{
+
+  // 优化后
+// 1. 空值兜底：避免 modelValue.value 为 null/undefined 时报错
+const currentModelValue = Array.isArray(modelValue.value) ? modelValue.value : [];
+// 2. 严格相等 + 类型统一：解决 1 vs "1" 不匹配，同时避免隐式类型转换
+modelValue.value = currentModelValue.filter(item => 
+  String(item) !== String(val.value)
+);
+   
+}
+ const handleIconClick = () => {
+      if (isHoverIcon.value) {
+        // 多选清空逻辑：重置 modelValue 为空数组
+        modelValue.value = []
+        isHoverIcon.value = false; // 重置悬浮状态
+        return;
+      }
+      // 原有逻辑：切换下拉显隐
+      isShowPopper.value = !isShowPopper.value;
+    };
+const getData = async (query) => {
+    loading.value = true
+    const { itfInfo, searchAttr } = column.value.componentProps
+    const {url, method, options, params } = {
+        url: unref(itfInfo).url,
+        method: unref(itfInfo).method || 'POST',
+        options: unref(itfInfo).options || {},
+        params: { ...unref(itfInfo).params, [searchAttr]: query || ''} || {},
+    }
+    data.value = (await unref(httpRequest)[method.toLowerCase()](url, params, options))?.data
+    loading.value = false
+}
+
+data.value = props.options ?? []
+const visibleChange = (val) => {
+    isShowPopper.value = val
+    if (!val || !column.value.componentProps || column.value?.componentProps?.options) {
+        if (isShowPopper.value && props.isRequiredByVisibleChange) {
+            emit('search', '')
+        }
+        return
+    }
+    getData()
+}
+
+const handleFieldSearch = (query) => {
+    if (column.value.componentProps) {
+        getData(query)
+    } else {
+        emit('search', query)
+    }
+}
+
+const search = ref('')
+watch(() => search.value, val => {
+    handleFieldSearch(val)
+})
+
+const modelValue = computed({
+    get: () => {
+        if (props.multiple) {
+            return Array.isArray(props.modelValue)
+                ? props.modelValue.map((item) => item )
+                : [];
+        } else {
+            return props.modelValue == null || Array.isArray(props.modelValue) ? '' : props.modelValue;
+        }
+    },
+    set: (v) => emit('update:modelValue', v),
+});
+
+/**
+ * 清除已选
+ */
+const advanceSelectRef = ref(null)
+const handleClearClick = () => {
+    if (advanceSelectRef.value) {
+        advanceSelectRef.value.handleClearClick()
+    }
+}
+
+defineExpose({
+    data
+})
+</script>

package/src/pct-filter-panel/pct-filter-panel.vue

@@ -42,7 +42,7 @@
           <div v-if="showTitle" :class="ns.e('title')" style="padding-right: 8px">{{searchTitle}}</div>
           <ElInput
               prefix-icon="Search"
-              size="small"
+              
               clearable
               v-model="searchValue"
               :placeholder="searchPlaceholder"
@@ -60,7 +60,7 @@
       >
         <template #reference-content>
             <ElButton
-                size="small"
+                
                 :class="ns.e('filterBut')"
             >
                 <div :class="ns.be('filter', 'plus')"></div>
@@ -90,7 +90,7 @@
 
 
       <ElButton
-          size="small"
+          
           type="primary"
           :class="ns.e('reset')"
           @click="handleSearch"
@@ -98,7 +98,7 @@
           查询
       </ElButton>
     <ElButton
-      size="small"
+      
       :class="ns.e('reset')"
       @click="handleReset"
     >