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

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

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