dm-vue3-ui/es/multiple-filter/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { Select as Select$1, Button, MenuItem, Menu, Dropdown, Input as Input$1, Popover } from "ant-design-vue/es";
import { defineComponent, ref, computed, watch, onMounted, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, createCommentVNode, resolveDynamicComponent, createVNode, Fragment, renderList, toDisplayString, withModifiers, createTextVNode, renderSlot, nextTick } from "vue";
import { ConfigProvider } from "ant-design-vue";
import { SearchOutlined, DeleteOutlined, CloseCircleOutlined } from "@ant-design/icons-vue";
import { $t } from "../i18n/index";
import DateRange from "./component/date-range.vue";
import Input from "./component/input.vue";
import Select from "./component/select.vue";
import MultipleSelect from "./component/multiple-select.vue";
import { getTemplatesByModuleKey, deleteTemplate1, addTemplate, validateRangeDateValue } from "../utils/index";
const _hoisted_1 = { class: "dm-multiple-filter" };
const _hoisted_2 = { class: "search-header" };
const _hoisted_3 = {
  key: 0,
  style: { "display": "flex" }
};
const _hoisted_4 = { class: "search-container" };
const _hoisted_5 = { class: "search-value" };
const _hoisted_6 = { class: "extra-tools-wrap" };
const _hoisted_7 = {
  key: 0,
  class: "search-board-wrap"
};
const _hoisted_8 = { class: "tag-title" };
const _hoisted_9 = ["title"];
const _hoisted_10 = { class: "search-operation-btns" };
const _hoisted_11 = { class: "condition-temp-container" };
const _hoisted_12 = { class: "template-content" };
const _hoisted_13 = { class: "tips" };
const _hoisted_14 = { class: "save-condition" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "dm-multiple-filter"
  },
  __name: "index",
  props: {
    config: { default: () => [] },
    moduleKey: { default: "moduleKey" }
  },
  emits: ["search"],
  setup(__props, { emit: __emit }) {
    var _a;
    const props = __props;
    const emit = __emit;
    const copyCloneConfig = ((_a = JSON.parse(JSON.stringify(props.config))) == null ? void 0 : _a.filter((t) => t.value)) || [];
    const visible = ref(false);
    const fieldName = ref("");
    const searchTags = ref(copyCloneConfig);
    const tempName = ref("");
    const tempList = ref([]);
    const selectionMenuOptions = computed(() => {
      return props.config.map((v) => ({
        label: v.label,
        value: v.field,
        type: v.type,
        disabled: v.disabled
      }));
    });
    const currentSearchField = computed(() => {
      return props.config.find((v) => v.field === fieldName.value);
    });
    const componentName = computed(() => {
      var _a2;
      let componentMap = {
        input: Input,
        select: Select,
        "multiple-select": MultipleSelect,
        "date-range": DateRange
      };
      return componentMap[(_a2 = currentSearchField.value) == null ? void 0 : _a2.type];
    });
    const applyTemplate = (temp) => {
      searchTags.value = [...temp.params];
      search();
    };
    const setQueryParams = (params) => {
      params.forEach((item) => {
        let config = props.config.find((p) => p.field === item.field);
        if (config) {
          let { field, label, type } = config;
          let tag = void 0;
          switch (config.type) {
            case "input":
              if (typeof item.value === "string" && item.value.trim().length !== 0) {
                tag = { field, label, type, value: item.value, tagText: item.value };
              }
              break;
            case "select":
              let option = config.options.find((p) => p.value === item.value);
              if (option) {
                tag = { field, label, type, value: option.value, tagText: option.label };
              }
              break;
            case "multiple-select":
              if (Array.isArray(item.value)) {
                let options = config.options.filter((v) => item.value.includes(v.value));
                if (options.length > 0) {
                  let value = options.map((v) => v.value);
                  let tagText = options.map((v) => v.label).toString();
                  tag = { field, label, type, value, tagText };
                }
              }
              break;
            case "date-range":
              if (validateRangeDateValue(item.value)) {
                tag = {
                  field,
                  label,
                  type,
                  value: item.value,
                  tagText: item.value.join(" - "),
                  combinedFields: config.combinedFields
                };
              }
              break;
          }
          if (tag) {
            let index = searchTags.value.findIndex((v) => v.field === item.field);
            if (index > -1) {
              searchTags.value.splice(index, 1, tag);
            } else {
              searchTags.value.push(tag);
            }
          }
        }
      });
    };
    const applyCondition = (data) => {
      setQueryParams([data]);
      search();
    };
    const removeCondition = (field) => {
      let index = searchTags.value.findIndex((v) => v.field === field);
      if (index != -1) {
        searchTags.value.splice(index, 1);
      }
      search();
    };
    const removeAllCondition = () => {
      searchTags.value.splice(0, searchTags.value.length);
      search();
    };
    const deleteTemplate = (temp) => {
      deleteTemplate1(props.moduleKey, temp.name);
      tempList.value = getTemplatesByModuleKey(props.moduleKey);
    };
    const saveAsConditionTemplate = () => {
      addTemplate(props.moduleKey, { name: tempName.value, params: searchTags.value });
      tempName.value = "";
      tempList.value = getTemplatesByModuleKey(props.moduleKey);
      visible.value = false;
    };
    const component1 = ref();
    const search = () => {
      if (componentName.value === Input) {
        let component = component1.value;
        if (component !== "") {
          component.pressEnter();
          let queryParams = formatQueryParams();
          nextTick(() => {
            emit("search", queryParams);
          });
        } else {
          let queryParams = formatQueryParams();
          nextTick(() => {
            emit("search", queryParams);
          });
        }
      } else {
        let queryParams = formatQueryParams();
        nextTick(() => {
          emit("search", queryParams);
        });
      }
    };
    const formatQueryParams = () => {
      let searchInfo = {};
      searchTags.value.forEach((tag) => {
        let { field, type, value } = tag;
        switch (type) {
          case "input":
          case "select":
          case "multiple-select":
            searchInfo[field] = value;
            break;
          case "date-range":
            if (tag.combinedFields && tag.combinedFields.length === 2) {
              searchInfo[tag.combinedFields[0]] = value[0];
              searchInfo[tag.combinedFields[1]] = value[1];
            } else {
              searchInfo[field] = value;
            }
            break;
        }
      });
      return searchInfo;
    };
    watch(
      () => props.config,
      () => {
        tempList.value = getTemplatesByModuleKey(props.moduleKey);
        fieldName.value = props.config.length > 0 ? props.config[0].field : "";
      },
      { deep: true, immediate: true }
    );
    onMounted(() => {
    });
    return (_ctx, _cache) => {
      const _component_a_select = Select$1;
      const _component_a_button = Button;
      const _component_a_menu_item = MenuItem;
      const _component_a_menu = Menu;
      const _component_a_dropdown = Dropdown;
      const _component_a_input = Input$1;
      const _component_a_popover = Popover;
      return openBlock(), createBlock(unref(ConfigProvider), { prefixCls: "dm-ui" }, {
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            createElementVNode("div", _hoisted_2, [
              _ctx.config.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
                createElementVNode("div", _hoisted_4, [
                  _ctx.config.length > 1 ? (openBlock(), createBlock(_component_a_select, {
                    key: 0,
                    class: "selection-menu",
                    value: fieldName.value,
                    "onUpdate:value": _cache[0] || (_cache[0] = ($event) => fieldName.value = $event),
                    "dropdown-match-select-width": false,
                    options: selectionMenuOptions.value,
                    "get-popup-container": (triggerNode) => triggerNode.parentNode,
                    "dropdown-class-name": "dropdown-selection-menu",
                    size: "small"
                  }, null, 8, ["value", "options", "get-popup-container"])) : createCommentVNode("", true),
                  createElementVNode("div", _hoisted_5, [
                    (openBlock(), createBlock(resolveDynamicComponent(componentName.value), {
                      ref_key: "component1",
                      ref: component1,
                      data: currentSearchField.value,
                      onApply: applyCondition
                    }, null, 40, ["data"]))
                  ]),
                  createVNode(unref(SearchOutlined), { onClick: search })
                ]),
                tempList.value.length ? (openBlock(), createBlock(_component_a_dropdown, { key: 0 }, {
                  overlay: withCtx(() => [
                    createVNode(_component_a_menu, null, {
                      default: withCtx(() => [
                        (openBlock(true), createElementBlock(Fragment, null, renderList(tempList.value, (temp, index) => {
                          return openBlock(), createBlock(_component_a_menu_item, {
                            key: index,
                            onClick: ($event) => applyTemplate(temp),
                            title: temp.name
                          }, {
                            default: withCtx(() => [
                              createElementVNode("span", null, toDisplayString(temp.name), 1),
                              createVNode(unref(DeleteOutlined), {
                                class: "delIcon",
                                onClick: withModifiers(($event) => deleteTemplate(temp), ["stop"])
                              }, null, 8, ["onClick"])
                            ]),
                            _: 2
                          }, 1032, ["onClick", "title"]);
                        }), 128))
                      ]),
                      _: 1
                    })
                  ]),
                  default: withCtx(() => [
                    createVNode(_component_a_button, { class: "select-search-temp" }, {
                      default: withCtx(() => [
                        createTextVNode(toDisplayString(unref($t)("multipleFilter.filterTemplate")), 1)
                      ]),
                      _: 1
                    })
                  ]),
                  _: 1
                })) : createCommentVNode("", true)
              ])) : createCommentVNode("", true),
              createElementVNode("div", _hoisted_6, [
                renderSlot(_ctx.$slots, "extra-tools")
              ])
            ]),
            searchTags.value.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(searchTags.value, (tag) => {
                return openBlock(), createElementBlock("span", {
                  key: tag.field,
                  class: "search-tags"
                }, [
                  createVNode(unref(CloseCircleOutlined), {
                    style: { "margin-right": "5px" },
                    onClick: ($event) => removeCondition(tag.field)
                  }, null, 8, ["onClick"]),
                  createElementVNode("span", _hoisted_8, toDisplayString(tag.label) + ":", 1),
                  createElementVNode("span", {
                    class: "tag-value",
                    title: tag.tagText
                  }, toDisplayString(tag.tagText), 9, _hoisted_9)
                ]);
              }), 128)),
              createElementVNode("div", _hoisted_10, [
                createElementVNode("span", {
                  class: "clean-condition",
                  onClick: removeAllCondition
                }, toDisplayString(unref($t)("multipleFilter.clear")), 1),
                createVNode(_component_a_popover, {
                  visible: visible.value,
                  "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
                  trigger: "click",
                  "get-popup-container": (triggerNode) => triggerNode.parentNode,
                  placement: "bottom"
                }, {
                  content: withCtx(() => [
                    createElementVNode("div", _hoisted_11, [
                      createElementVNode("div", _hoisted_12, [
                        createVNode(_component_a_input, {
                          value: tempName.value,
                          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => tempName.value = $event),
                          placeholder: unref($t)("multipleFilter.placeholder")
                        }, null, 8, ["value", "placeholder"]),
                        createVNode(_component_a_button, {
                          class: "save-template-btn",
                          disabled: tempName.value === "",
                          onClick: saveAsConditionTemplate
                        }, {
                          default: withCtx(() => [
                            createTextVNode(toDisplayString(unref($t)("multipleFilter.save")), 1)
                          ]),
                          _: 1
                        }, 8, ["disabled"])
                      ]),
                      createElementVNode("p", _hoisted_13, toDisplayString(unref($t)("multipleFilter.tips")), 1)
                    ])
                  ]),
                  default: withCtx(() => [
                    createElementVNode("span", _hoisted_14, toDisplayString(unref($t)("multipleFilter.save")), 1)
                  ]),
                  _: 1
                }, 8, ["visible", "get-popup-container"])
              ])
            ])) : createCommentVNode("", true)
          ])
        ]),
        _: 3
      });
    };
  }
});
const style_less_vue_type_style_index_0_src_true_lang = "";
export {
  _sfc_main as default
};