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

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

@@ -1,186 +1,414 @@
-import { defineComponent, ref, useAttrs, computed, inject, unref, resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createVNode, isRef, withCtx, Fragment, renderList, createBlock } from 'vue';
+import { ref, onMounted, nextTick, useAttrs, computed, inject, unref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createVNode, isRef, withCtx, createTextVNode, createElementVNode, Fragment, renderList, createBlock, withModifiers, renderSlot } from 'vue';
+import { ElTooltip, ElTag, ElIcon, ElInput } from 'element-plus';
+import { ArrowUp, ArrowDown } from '@element-plus/icons';
 import { useService, HttpRequest, useNamespace, filterPanelItemKey } from '@ctzy-web-client/web-base-client-vue';
 import { dataProps } from '../../hooks/use-data/index.mjs';
+import BwaAdvanceSelect from '../../advance-select/advance-select.mjs';
+import BwaAdvanceOption from '../../advance-select/advance-option.mjs';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
 
-const __default__ = defineComponent({
-  name: "BwaPctMultipleMenuCondition",
-  __conditionTitle__: "\u591A\u9009\u5217\u8868",
-  __conditionDefault__: () => []
-});
-const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
-  props: {
-    ...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: "\u8BF7\u9009\u62E9"
-    },
-    remote: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String,
-      default: "small"
-    },
-    searchPlaceholder: {
-      type: String,
-      default: ""
-    },
-    labelAttr: "",
-    valueAttr: "",
-    searchAttr: "",
-    itfInfo: null,
-    isRequiredByVisibleChange: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue", "search"],
+const _hoisted_1 = { key: 0 };
+
+
+const _sfc_main = {
+  __name: 'pct-multiple-menu-condition',
+  props: {
+    ...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,
+    },
+},
+  emits: ['update:modelValue', 'search'],
   setup(__props, { expose, emit }) {
-    var _a;
-    const props = __props;
-    const httpRequest = useService(HttpRequest);
-    ;
-    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 filterPanelItem = inject(filterPanelItemKey, null);
-    const column = computed(() => {
-      var _a2;
-      return (_a2 = filterPanelItem == null ? void 0 : filterPanelItem.column) != null ? _a2 : 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(() => {
-      var _a2, _b;
-      return ((_b = (_a2 = column.value) == null ? void 0 : _a2.componentProps) == null ? void 0 : _b.searchPlaceholder) || props.searchPlaceholder;
-    });
-    const placeholderStr = computed(() => showTitle.value ? props.placeholder : column.value.title);
-    const labelPropStr = computed(() => {
-      var _a2, _b;
-      return ((_b = (_a2 = column.value) == null ? void 0 : _a2.componentProps) == null ? void 0 : _b.labelAttr) || props.labelProp;
-    });
-    const valuePropStr = computed(() => {
-      var _a2, _b;
-      return ((_b = (_a2 = column.value) == null ? void 0 : _a2.componentProps) == null ? void 0 : _b.valueAttr) || props.valueProp;
-    });
-    const getData = async (query) => {
-      var _a2;
-      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 = (_a2 = await unref(httpRequest)[method.toLowerCase()](url, params, options)) == null ? void 0 : _a2.data;
-      loading.value = false;
-    };
-    data.value = (_a = props.options) != null ? _a : [];
-    const visibleChange = (val) => {
-      var _a2, _b;
-      isShowPopper.value = val;
-      if (!val || !column.value.componentProps || ((_b = (_a2 = column.value) == null ? void 0 : _a2.componentProps) == null ? void 0 : _b.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)
-    });
-    expose({
-      data
-    });
-    return (_ctx, _cache) => {
-      const _component_el_option = resolveComponent("el-option");
-      const _component_el_select = resolveComponent("el-select");
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(ns).e("conditbox"))
-      }, [
-        unref(showTitle) ? (openBlock(), createElementBlock("div", {
+
+const props = __props;
+
+const httpRequest = useService(HttpRequest);
+defineOptions({
+    name: 'BwaPctMultipleMenuCondition',
+    __conditionTitle__: '多选列表',
+    __conditionDefault__: () => [],
+});
+
+
+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 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();
+    }
+};
+
+expose({
+    data
+});
+
+return (_ctx, _cache) => {
+  const _component_CircleClose = resolveComponent("CircleClose");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(unref(ns).e('conditbox'))
+  }, [
+    (unref(showTitle))
+      ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass(unref(ns).e("title"))
-        }, toDisplayString(unref(column).title), 3)) : createCommentVNode("v-if", true),
-        createVNode(_component_el_select, {
-          multiple: __props.multiple,
-          modelValue: unref(modelValue),
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
-          onVisibleChange: visibleChange,
-          class: normalizeClass(unref(ns).e("options")),
-          loading: loading.value,
-          placeholder: unref(placeholderStr),
-          clearable: true,
-          filterable: __props.showSearch,
-          remote: __props.remote,
-          "remote-method": remoteMethod,
-          size: "small"
-        }, {
-          default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(data.value, (item) => {
-              return openBlock(), createBlock(_component_el_option, {
-                key: item[unref(valuePropStr)] + "",
-                value: item[unref(valuePropStr)] + "",
-                label: item[unref(labelPropStr)] + ""
-              }, null, 8, ["value", "label"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["multiple", "modelValue", "class", "loading", "placeholder", "filterable", "remote"])
-      ], 2);
-    };
-  }
-});
-var PctMultipleMenuCondition = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "pct-multiple-menu-condition.vue"]]);
+          class: normalizeClass(unref(ns).e('title'))
+        }, toDisplayString(unref(column).title), 3 /* TEXT, CLASS */))
+      : createCommentVNode("v-if", true),
+    createVNode(BwaAdvanceSelect, {
+      multiple: __props.multiple,
+      modelValue: unref(modelValue),
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (isRef(modelValue) ? (modelValue).value = $event : null)),
+      onSearch: handleFieldSearch,
+      class: normalizeClass(unref(ns).e('options')),
+      onVisibleChange: visibleChange,
+      source: "pct",
+      showSearch: false,
+      showSelectIcon: !__props.multiple,
+      showSelection: false,
+      loading: loading.value,
+      width: popperWidth.value,
+      borderRadius: "4px",
+      ref_key: "advanceSelectRef",
+      ref: advanceSelectRef
+    }, {
+      "reference-content": withCtx(({ selected }) => [
+        (__props.multiple)
+          ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(ns).e('content'))
+            }, [
+              (selected && selected.length > 0)
+                ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                    createVNode(unref(ElTooltip), {
+                      content: selected[0].label,
+                      placement: "top",
+                      effect: "light",
+                      "append-to": ".bwa-application"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ElTag), {
+                          class: normalizeClass(unref(ns).e('tag')),
+                          closable: "",
+                          onClose: $event => (handleClose(selected[0])),
+                          type: "info"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(selected[0].label), 1 /* TEXT */)
+                          ]),
+                          _: 2 /* DYNAMIC */
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClose"])
+                      ]),
+                      _: 2 /* DYNAMIC */
+                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["content"]),
+                    createVNode(unref(ElTooltip), {
+                      content: "Bottom center",
+                      placement: "top",
+                      effect: "light",
+                      "append-to": ".bwa-application"
+                    }, {
+                      content: withCtx(() => [
+                        createElementVNode("div", {
+                          class: normalizeClass(unref(ns).e('tag_box'))
+                        }, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(selected, (item, index) => {
+                            return (openBlock(), createElementBlock(Fragment, null, [
+                              (index !== 0)
+                                ? (openBlock(), createBlock(unref(ElTag), {
+                                    key: 0,
+                                    class: normalizeClass(unref(ns).e('tag_details')),
+                                    type: "info",
+                                    closable: "",
+                                    onClose: $event => (handleClose(item))
+                                  }, {
+                                    default: withCtx(() => [
+                                      createTextVNode(toDisplayString(item.label), 1 /* TEXT */)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClose"]))
+                                : createCommentVNode("v-if", true)
+                            ], 64 /* STABLE_FRAGMENT */))
+                          }), 256 /* UNKEYED_FRAGMENT */))
+                        ], 2 /* CLASS */)
+                      ]),
+                      default: withCtx(() => [
+                        (selected.length > 1)
+                          ? (openBlock(), createBlock(unref(ElTag), {
+                              key: 0,
+                              class: normalizeClass(unref(ns).e('tag')),
+                              type: "info"
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode("+" + toDisplayString(selected.length - 1), 1 /* TEXT */)
+                              ]),
+                              _: 2 /* DYNAMIC */
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class"]))
+                          : createCommentVNode("v-if", true)
+                      ]),
+                      _: 2 /* DYNAMIC */
+                    }, 1024 /* DYNAMIC_SLOTS */)
+                  ]))
+                : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass(unref(ns).e('contentBox_placeholder'))
+                  }, toDisplayString(unref(placeholderStr)), 3 /* TEXT, CLASS */)),
+              createVNode(unref(ElIcon), {
+                onMouseenter: _cache[0] || (_cache[0] = $event => (isHoverIcon.value = true)),
+                onMouseleave: _cache[1] || (_cache[1] = $event => (isHoverIcon.value = false)),
+                onClick: withModifiers(handleIconClick, ["stop"]),
+                class: normalizeClass(unref(ns).be('option', 'selected'))
+              }, {
+                default: withCtx(() => [
+                  (isHoverIcon.value  && selected.length > 0)
+                    ? (openBlock(), createBlock(_component_CircleClose, {
+                        key: 0,
+                        class: "delete-icon"
+                      }))
+                    : (isShowPopper.value)
+                      ? (openBlock(), createBlock(unref(ArrowUp), { key: 1 }))
+                      : (openBlock(), createBlock(unref(ArrowDown), { key: 2 }))
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "class"])
+            ], 2 /* CLASS */))
+          : (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(unref(ns).e('content'))
+            }, [
+              createVNode(unref(ElTooltip), {
+                disabled: !selected.label,
+                content: selected.label,
+                placement: "top",
+                effect: "light",
+                "append-to": ".bwa-application"
+              }, {
+                default: withCtx(() => [
+                  (selected.label)
+                    ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        class: normalizeClass([unref(ns).e('contentBox'), unref(ns).e('contentBox_label')])
+                      }, toDisplayString(selected.label || unref(placeholderStr)), 3 /* TEXT, CLASS */))
+                    : (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: normalizeClass([unref(ns).e('contentBox'), unref(ns).e('contentBox_placeholder')])
+                      }, toDisplayString(unref(placeholderStr)), 3 /* TEXT, CLASS */))
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "content"]),
+              createVNode(unref(ElIcon), {
+                class: normalizeClass(unref(ns).be('option', 'selected'))
+              }, {
+                default: withCtx(() => [
+                  (isShowPopper.value)
+                    ? (openBlock(), createBlock(unref(ArrowUp), { key: 0 }))
+                    : (openBlock(), createBlock(unref(ArrowDown), { key: 1 }))
+                ]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */))
+      ]),
+      contentTop: withCtx(() => [
+        (__props.showSearch && !unref(column).componentProps?.options)
+          ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(ns).e('contentTop'))
+            }, [
+              createVNode(unref(ElInput), {
+                modelValue: search.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((search).value = $event)),
+                class: normalizeClass(unref(ns).e('select')),
+                placeholder: unref(searchPlaceholderStr),
+                type: "text",
+                "prefix-icon": "Search",
+                clearable: ""
+              }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder"])
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true)
+      ]),
+      contentBottom: withCtx(() => [
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e('clear')),
+          onClick: handleClearClick
+        }, "清除已选", 2 /* CLASS */)
+      ]),
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(data.value, (item) => {
+            return (openBlock(), createBlock(BwaAdvanceOption, {
+              key: item[unref(valuePropStr)] + '',
+              value: item[unref(valuePropStr)] + '',
+              label: item[unref(labelPropStr)] + '',
+              class: normalizeClass(unref(ns).be('filter', 'option'))
+            }, null, 8 /* PROPS */, ["value", "label", "class"]))
+          }), 128 /* KEYED_FRAGMENT */))
+        ])
+      ]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["multiple", "modelValue", "class", "showSelectIcon", "loading", "width"])
+  ], 2 /* CLASS */))
+}
+}
+
+};
+var PctMultipleMenuCondition = /*#__PURE__*/_export_sfc(_sfc_main, [['__file',"pct-multiple-menu-condition.vue"]]);
 
 export { PctMultipleMenuCondition as default };