bm-admin-ui 1.0.82-alpha → 1.0.83-alpha

package/es/components/shops-filter/index.js

@@ -0,0 +1,453 @@
+import { withInstall } from 'bm-admin-ui/es/utils/with-install';
+import { defineComponent, reactive, watch, onMounted, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeStyle, toDisplayString, normalizeClass, withDirectives, createVNode, vShow, withCtx, createTextVNode, Fragment, renderList, createCommentVNode, createBlock } from 'vue';
+import { DownOutlined, DeleteOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
+import { InputSearch } from 'ant-design-vue/lib/input';
+import Checkbox from 'ant-design-vue/lib/checkbox';
+import Button from 'ant-design-vue/lib/button';
+import Popover from 'ant-design-vue/lib/popover';
+import Empty from 'ant-design-vue/lib/empty';
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main = defineComponent({
+  name: "BmShopsFilter",
+  components: {
+    DownOutlined,
+    DeleteOutlined,
+    CloseCircleFilled,
+    InputSearch,
+    Checkbox,
+    Button,
+    Popover,
+    Empty
+  },
+  props: {
+    labelTitle: {
+      type: String,
+      default: "\u5E97\u94FA"
+    },
+    showAlways: {
+      type: Boolean,
+      default: false
+    },
+    displayParams: {
+      type: Object,
+      default: () => {
+        return {
+          width: "436px",
+          labelOffset: "0px",
+          labelWidth: "98px",
+          searchWidth: "240px",
+          listMaxHeight: "366px"
+        };
+      }
+    },
+    loadFilter: {
+      type: Function,
+      default: () => {
+        return Promise.resolve([]);
+      }
+    },
+    loadData: {
+      type: Function,
+      default: () => {
+        return Promise.reject("\u672A\u58F0\u660E\u5E97\u94FA\u6570\u636E\u8BF7\u6C42\u51FD\u6570");
+      }
+    }
+  },
+  emits: ["update:selected", "change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      isActive: false,
+      searchVal: "",
+      selected: [],
+      shopList: [],
+      shopListByCode: {},
+      checkAll: false,
+      hasCheck: false,
+      inverSelect: false,
+      shopCheck: {},
+      filterSelects: [],
+      filterArr: []
+    });
+    const methods = {
+      triggleActive() {
+        if (!props.showAlways)
+          state.isActive = !state.isActive;
+        if (state.shopList && !state.shopList.length)
+          methods.fetchData();
+      },
+      outSideClick() {
+        state.isActive = false;
+      },
+      changeFilterSelect(index, code) {
+        let filter = state.filterArr[index];
+        if (filter.multiple) {
+          if (!code) {
+            state.filterSelects[index] = [];
+          } else {
+            let list = state.filterSelects[index];
+            list.indexOf(code) > -1 ? list.splice(list.indexOf(code), 1) : list.push(code);
+          }
+        } else {
+          state.filterSelects[index] = code;
+        }
+        methods.fetchData();
+      },
+      onCheckAllChange(e) {
+        state.inverSelect = false;
+        let checked = e.target.checked;
+        state.shopList.forEach((item) => {
+          state.shopCheck[item.shopCode] = checked;
+        });
+      },
+      checkboxChange() {
+        let hasCheck = false;
+        let checkAll = true;
+        state.shopList.some((item) => {
+          if (state.shopCheck[item.shopCode]) {
+            hasCheck = true;
+            return true;
+          }
+        });
+        state.shopList.every((item) => {
+          if (!state.shopCheck[item.shopCode]) {
+            checkAll = false;
+            return false;
+          }
+          return true;
+        });
+        state.checkAll = checkAll;
+        state.hasCheck = state.checkAll ? false : hasCheck;
+      },
+      invertChange() {
+        state.checkAll = false;
+        state.shopList.forEach((item) => {
+          state.shopCheck[item.shopCode] = !state.shopCheck[item.shopCode];
+        });
+      },
+      clearAll() {
+        state.inverSelect = false;
+        state.checkAll = false;
+        state.hasCheck = false;
+        state.shopList.forEach((item) => {
+          state.shopCheck[item.shopCode] = false;
+        });
+      },
+      fetchData() {
+        let params = {};
+        let filters = state.filterArr;
+        filters.forEach((item, index) => {
+          params[String(item.paramsStr)] = state.filterSelects[index] || "";
+        });
+        params["search"] = state.searchVal;
+        props.loadData(params).then((data) => {
+          state.shopList = data;
+          data.forEach((item) => {
+            return state.shopListByCode[item.shopCode] = item.shopName;
+          });
+          methods.checkboxChange();
+        });
+      },
+      clearAllSelected(e) {
+        e && e.stopPropagation();
+        state.searchVal = "";
+        state.shopCheck = {};
+        state.inverSelect = false;
+        state.checkAll = false;
+      },
+      filterIsActive(filterIndex, code) {
+        let select = state.filterSelects[filterIndex];
+        let filter = state.filterArr[filterIndex];
+        let isMultiple = filter && filter.multiple;
+        if (!isMultiple) {
+          return select === code;
+        } else {
+          return select.indexOf(code) > -1;
+        }
+      }
+    };
+    props.loadFilter().then((data) => {
+      state.filterArr = data;
+      state.filterSelects = state.filterArr.map(
+        (item) => {
+          return item.multiple ? [] : "";
+        }
+      );
+    }).finally(() => {
+      methods.fetchData();
+    });
+    watch(
+      () => state.shopCheck,
+      () => {
+        let list = [];
+        for (let [key, value] of Object.entries(state.shopCheck)) {
+          value && list.push(key);
+        }
+        state.selected = list;
+        emit("update:selected", list);
+        emit("change", list);
+        methods.checkboxChange();
+      },
+      { deep: true }
+    );
+    if (props.showAlways) {
+      state.isActive = true;
+    }
+    onMounted(() => {
+      if (!props.showAlways)
+        document.addEventListener("click", methods.outSideClick);
+    });
+    onUnmounted(() => {
+      if (!props.showAlways)
+        document.removeEventListener("click", methods.outSideClick);
+    });
+    return {
+      ...toRefs(state),
+      ...methods
+    };
+  }
+});
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("span", null, "\u8BF7\u9009\u62E9", -1);
+const _hoisted_2 = { class: "input-icon active-icon" };
+const _hoisted_3 = { class: "pop-seleted-title" };
+const _hoisted_4 = { class: "__shops-filter-list" };
+const _hoisted_5 = {
+  key: 0,
+  class: "__shops-filter-tabs"
+};
+const _hoisted_6 = { class: "label" };
+const _hoisted_7 = { class: "__shops-filter-areas" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "__shops-filter-selecting" };
+const _hoisted_11 = { class: "__checkbox-operate-box" };
+const _hoisted_12 = {
+  key: 0,
+  class: "__shops-filter-selecting"
+};
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", { style: { "color": "#9393a3" } }, "\u6682\u65E0\u6570\u636E", -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_down_outlined = resolveComponent("down-outlined");
+  const _component_close_circle_filled = resolveComponent("close-circle-filled");
+  const _component_Popover = resolveComponent("Popover");
+  const _component_input_search = resolveComponent("input-search");
+  const _component_Checkbox = resolveComponent("Checkbox");
+  const _component_delete_outlined = resolveComponent("delete-outlined");
+  const _component_Button = resolveComponent("Button");
+  const _component_Empty = resolveComponent("Empty");
+  return openBlock(), createElementBlock("div", {
+    class: "__shops-filter-component",
+    onClick: _cache[8] || (_cache[8] = withModifiers(() => {
+    }, ["stop"]))
+  }, [
+    createElementVNode("span", {
+      class: "__shops-filter-label",
+      style: normalizeStyle({
+        width: _ctx.displayParams?.labelWidth || "",
+        marginRight: _ctx.displayParams?.labelOffset || "0"
+      })
+    }, toDisplayString(_ctx.labelTitle) + ":", 5),
+    createElementVNode("div", {
+      class: normalizeClass(["__shops-filter-input-box", { "active-box": !_ctx.showAlways && _ctx.isActive }]),
+      style: normalizeStyle({ width: _ctx.displayParams?.width || "436px" }),
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.triggleActive && _ctx.triggleActive(...args))
+    }, [
+      withDirectives(createElementVNode("div", null, [
+        _hoisted_1,
+        createElementVNode("span", _hoisted_2, [
+          createVNode(_component_down_outlined)
+        ])
+      ], 512), [
+        [vShow, _ctx.selected && !_ctx.selected.length]
+      ]),
+      withDirectives(createElementVNode("div", null, [
+        createVNode(_component_Popover, {
+          title: "",
+          "overlay-class-name": "__shops-filter-popover"
+        }, {
+          content: withCtx(() => [
+            createElementVNode("div", {
+              class: "pop-seleted",
+              style: normalizeStyle({ "min-width": _ctx.displayParams?.width || "436px" })
+            }, [
+              createElementVNode("div", _hoisted_3, [
+                createTextVNode(" \u5DF2\u9009\u62E9"),
+                createElementVNode("span", null, toDisplayString(_ctx.selected.length), 1),
+                createTextVNode("\u9879 ")
+              ]),
+              createElementVNode("div", {
+                class: "pop-seleted-shops",
+                onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selected, (item) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item,
+                    class: "pop-seleted-item"
+                  }, toDisplayString(_ctx.shopListByCode[item]), 1);
+                }), 128))
+              ], 32)
+            ], 4)
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selected, (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item,
+                  class: "selected-tag"
+                }, toDisplayString(_ctx.shopListByCode[item]), 1);
+              }), 128)),
+              createElementVNode("div", {
+                class: "delete-icon",
+                onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.clearAllSelected && _ctx.clearAllSelected(...args), ["stop"])),
+                onMouseover: _cache[2] || (_cache[2] = withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                createVNode(_component_close_circle_filled, { style: { "color": "#9393a3" } })
+              ], 32)
+            ])
+          ]),
+          _: 1
+        })
+      ], 512), [
+        [vShow, _ctx.selected && _ctx.selected.length]
+      ])
+    ], 6),
+    withDirectives(createElementVNode("div", {
+      class: "__shops-filter-search-input",
+      style: normalizeStyle({ width: _ctx.displayParams?.searchWidth || "240px" })
+    }, [
+      createVNode(_component_input_search, {
+        modelValue: _ctx.searchVal,
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.searchVal = $event),
+        placeholder: "\u641C\u7D22\u5E97\u94FA\u540D\u79F0",
+        "allow-clear": true,
+        onSearch: _ctx.fetchData
+      }, null, 8, ["modelValue", "onSearch"])
+    ], 4), [
+      [vShow, _ctx.isActive]
+    ]),
+    withDirectives(createElementVNode("div", {
+      class: normalizeClass(["__shops-filter-content", { "__shops-filter-no-absolute": _ctx.showAlways }])
+    }, [
+      _ctx.filterArr && _ctx.filterArr.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filterArr, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.paramsStr,
+            class: "__shops-filter-area-tabs"
+          }, [
+            createElementVNode("div", _hoisted_6, toDisplayString(item.label) + ":", 1),
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("span", {
+                class: normalizeClass({
+                  active: !(item.multiple ? _ctx.filterSelects[index].length : !!_ctx.filterSelects[index])
+                }),
+                onClick: withModifiers(($event) => _ctx.changeFilterSelect(index, ""), ["self"])
+              }, "\u5168\u90E8", 10, _hoisted_8),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (element) => {
+                return openBlock(), createElementBlock("span", {
+                  key: element.code,
+                  class: normalizeClass({ active: _ctx.filterIsActive(index, element.code) }),
+                  onClick: withModifiers(($event) => _ctx.changeFilterSelect(index, element.code), ["self"])
+                }, toDisplayString(element.label), 11, _hoisted_9);
+              }), 128))
+            ])
+          ]);
+        }), 128)),
+        createElementVNode("div", _hoisted_10, [
+          createTextVNode(" \u5DF2\u9009\u62E9"),
+          createElementVNode("span", null, toDisplayString(_ctx.selected.length), 1),
+          createTextVNode("\u9879 ")
+        ])
+      ])) : createCommentVNode("v-if", true),
+      _ctx.shopList && _ctx.shopList.length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        createElementVNode("div", _hoisted_11, [
+          createVNode(_component_Checkbox, {
+            checked: _ctx.checkAll,
+            "onUpdate:checked": _cache[5] || (_cache[5] = ($event) => _ctx.checkAll = $event),
+            indeterminate: _ctx.hasCheck,
+            onChange: _ctx.onCheckAllChange
+          }, {
+            default: withCtx(() => [
+              createTextVNode("\u5168\u9009")
+            ]),
+            _: 1
+          }, 8, ["checked", "indeterminate", "onChange"]),
+          createVNode(_component_Checkbox, {
+            checked: _ctx.inverSelect,
+            "onUpdate:checked": _cache[6] || (_cache[6] = ($event) => _ctx.inverSelect = $event),
+            onChange: _ctx.invertChange
+          }, {
+            default: withCtx(() => [
+              createTextVNode("\u53CD\u9009")
+            ]),
+            _: 1
+          }, 8, ["checked", "onChange"]),
+          createVNode(_component_Button, {
+            type: "text",
+            onClick: _ctx.clearAll
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_delete_outlined)
+            ]),
+            default: withCtx(() => [
+              createTextVNode("\u6E05\u7A7A")
+            ]),
+            _: 1
+          }, 8, ["onClick"]),
+          _ctx.filterArr && !_ctx.filterArr.length ? (openBlock(), createElementBlock("div", _hoisted_12, [
+            createTextVNode(" \u5DF2\u9009\u62E9"),
+            createElementVNode("span", null, toDisplayString(_ctx.selected.length), 1),
+            createTextVNode("\u9879 ")
+          ])) : createCommentVNode("v-if", true)
+        ]),
+        createElementVNode("div", {
+          class: "__shops-checkbox-box",
+          style: normalizeStyle({ maxHeight: _ctx.displayParams.listMaxHeight || "366px" })
+        }, [
+          createElementVNode("div", {
+            class: "__shops-checkbox-grid",
+            onWheel: _cache[7] || (_cache[7] = withModifiers(() => {
+            }, ["stop"]))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.shopList, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: item.shopCode
+              }, [
+                createVNode(_component_Checkbox, {
+                  checked: _ctx.shopCheck[item.shopCode],
+                  "onUpdate:checked": ($event) => _ctx.shopCheck[item.shopCode] = $event
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.shopName), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["checked", "onUpdate:checked"])
+              ]);
+            }), 128))
+          ], 32)
+        ], 4)
+      ], 64)) : createCommentVNode("v-if", true),
+      _ctx.shopList && !_ctx.shopList.length ? (openBlock(), createBlock(_component_Empty, { key: 2 }, {
+        description: withCtx(() => [
+          _hoisted_13
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true)
+    ], 2), [
+      [vShow, _ctx.isActive]
+    ])
+  ]);
+}
+var shopsFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "shops-filter.vue"]]);
+
+const BmShopsFilter = withInstall(shopsFilter);
+
+export { BmShopsFilter, BmShopsFilter as default };