bm-admin-ui 1.0.82-alpha → 1.0.84-alpha

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

@@ -0,0 +1,465 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var withInstall = require('bm-admin-ui/lib/utils/with-install');
+var vue = require('vue');
+var iconsVue = require('@ant-design/icons-vue');
+var input = require('ant-design-vue/lib/input');
+var Checkbox = require('ant-design-vue/lib/checkbox');
+var Button = require('ant-design-vue/lib/button');
+var Popover = require('ant-design-vue/lib/popover');
+var Empty = require('ant-design-vue/lib/empty');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
+var Empty__default = /*#__PURE__*/_interopDefaultLegacy(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 = vue.defineComponent({
+  name: "BmShopsFilter",
+  components: {
+    DownOutlined: iconsVue.DownOutlined,
+    DeleteOutlined: iconsVue.DeleteOutlined,
+    CloseCircleFilled: iconsVue.CloseCircleFilled,
+    InputSearch: input.InputSearch,
+    Checkbox: Checkbox__default["default"],
+    Button: Button__default["default"],
+    Popover: Popover__default["default"],
+    Empty: Empty__default["default"]
+  },
+  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 = vue.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();
+    });
+    vue.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;
+    }
+    vue.onMounted(() => {
+      if (!props.showAlways)
+        document.addEventListener("click", methods.outSideClick);
+    });
+    vue.onUnmounted(() => {
+      if (!props.showAlways)
+        document.removeEventListener("click", methods.outSideClick);
+    });
+    return {
+      ...vue.toRefs(state),
+      ...methods
+    };
+  }
+});
+const _hoisted_1 = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("span", { style: { "color": "#9393a3" } }, "\u6682\u65E0\u6570\u636E", -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_down_outlined = vue.resolveComponent("down-outlined");
+  const _component_close_circle_filled = vue.resolveComponent("close-circle-filled");
+  const _component_Popover = vue.resolveComponent("Popover");
+  const _component_input_search = vue.resolveComponent("input-search");
+  const _component_Checkbox = vue.resolveComponent("Checkbox");
+  const _component_delete_outlined = vue.resolveComponent("delete-outlined");
+  const _component_Button = vue.resolveComponent("Button");
+  const _component_Empty = vue.resolveComponent("Empty");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "__shops-filter-component",
+    onClick: _cache[8] || (_cache[8] = vue.withModifiers(() => {
+    }, ["stop"]))
+  }, [
+    vue.createElementVNode("span", {
+      class: "__shops-filter-label",
+      style: vue.normalizeStyle({
+        width: _ctx.displayParams?.labelWidth || "",
+        marginRight: _ctx.displayParams?.labelOffset || "0"
+      })
+    }, vue.toDisplayString(_ctx.labelTitle) + ":", 5),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(["__shops-filter-input-box", { "active-box": !_ctx.showAlways && _ctx.isActive }]),
+      style: vue.normalizeStyle({ width: _ctx.displayParams?.width || "436px" }),
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.triggleActive && _ctx.triggleActive(...args))
+    }, [
+      vue.withDirectives(vue.createElementVNode("div", null, [
+        _hoisted_1,
+        vue.createElementVNode("span", _hoisted_2, [
+          vue.createVNode(_component_down_outlined)
+        ])
+      ], 512), [
+        [vue.vShow, _ctx.selected && !_ctx.selected.length]
+      ]),
+      vue.withDirectives(vue.createElementVNode("div", null, [
+        vue.createVNode(_component_Popover, {
+          title: "",
+          "overlay-class-name": "__shops-filter-popover"
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "pop-seleted",
+              style: vue.normalizeStyle({ "min-width": _ctx.displayParams?.width || "436px" })
+            }, [
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createTextVNode(" \u5DF2\u9009\u62E9"),
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selected.length), 1),
+                vue.createTextVNode("\u9879 ")
+              ]),
+              vue.createElementVNode("div", {
+                class: "pop-seleted-shops",
+                onWheel: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: item,
+                    class: "pop-seleted-item"
+                  }, vue.toDisplayString(_ctx.shopListByCode[item]), 1);
+                }), 128))
+              ], 32)
+            ], 4)
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_4, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: item,
+                  class: "selected-tag"
+                }, vue.toDisplayString(_ctx.shopListByCode[item]), 1);
+              }), 128)),
+              vue.createElementVNode("div", {
+                class: "delete-icon",
+                onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.clearAllSelected && _ctx.clearAllSelected(...args), ["stop"])),
+                onMouseover: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                vue.createVNode(_component_close_circle_filled, { style: { "color": "#9393a3" } })
+              ], 32)
+            ])
+          ]),
+          _: 1
+        })
+      ], 512), [
+        [vue.vShow, _ctx.selected && _ctx.selected.length]
+      ])
+    ], 6),
+    vue.withDirectives(vue.createElementVNode("div", {
+      class: "__shops-filter-search-input",
+      style: vue.normalizeStyle({ width: _ctx.displayParams?.searchWidth || "240px" })
+    }, [
+      vue.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), [
+      [vue.vShow, _ctx.isActive]
+    ]),
+    vue.withDirectives(vue.createElementVNode("div", {
+      class: vue.normalizeClass(["__shops-filter-content", { "__shops-filter-no-absolute": _ctx.showAlways }])
+    }, [
+      _ctx.filterArr && _ctx.filterArr.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filterArr, (item, index) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item.paramsStr,
+            class: "__shops-filter-area-tabs"
+          }, [
+            vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(item.label) + ":", 1),
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass({
+                  active: !(item.multiple ? _ctx.filterSelects[index].length : !!_ctx.filterSelects[index])
+                }),
+                onClick: vue.withModifiers(($event) => _ctx.changeFilterSelect(index, ""), ["self"])
+              }, "\u5168\u90E8", 10, _hoisted_8),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.list, (element) => {
+                return vue.openBlock(), vue.createElementBlock("span", {
+                  key: element.code,
+                  class: vue.normalizeClass({ active: _ctx.filterIsActive(index, element.code) }),
+                  onClick: vue.withModifiers(($event) => _ctx.changeFilterSelect(index, element.code), ["self"])
+                }, vue.toDisplayString(element.label), 11, _hoisted_9);
+              }), 128))
+            ])
+          ]);
+        }), 128)),
+        vue.createElementVNode("div", _hoisted_10, [
+          vue.createTextVNode(" \u5DF2\u9009\u62E9"),
+          vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selected.length), 1),
+          vue.createTextVNode("\u9879 ")
+        ])
+      ])) : vue.createCommentVNode("v-if", true),
+      _ctx.shopList && _ctx.shopList.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+        vue.createElementVNode("div", _hoisted_11, [
+          vue.createVNode(_component_Checkbox, {
+            checked: _ctx.checkAll,
+            "onUpdate:checked": _cache[5] || (_cache[5] = ($event) => _ctx.checkAll = $event),
+            indeterminate: _ctx.hasCheck,
+            onChange: _ctx.onCheckAllChange
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode("\u5168\u9009")
+            ]),
+            _: 1
+          }, 8, ["checked", "indeterminate", "onChange"]),
+          vue.createVNode(_component_Checkbox, {
+            checked: _ctx.inverSelect,
+            "onUpdate:checked": _cache[6] || (_cache[6] = ($event) => _ctx.inverSelect = $event),
+            onChange: _ctx.invertChange
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode("\u53CD\u9009")
+            ]),
+            _: 1
+          }, 8, ["checked", "onChange"]),
+          vue.createVNode(_component_Button, {
+            type: "text",
+            onClick: _ctx.clearAll
+          }, {
+            icon: vue.withCtx(() => [
+              vue.createVNode(_component_delete_outlined)
+            ]),
+            default: vue.withCtx(() => [
+              vue.createTextVNode("\u6E05\u7A7A")
+            ]),
+            _: 1
+          }, 8, ["onClick"]),
+          _ctx.filterArr && !_ctx.filterArr.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
+            vue.createTextVNode(" \u5DF2\u9009\u62E9"),
+            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selected.length), 1),
+            vue.createTextVNode("\u9879 ")
+          ])) : vue.createCommentVNode("v-if", true)
+        ]),
+        vue.createElementVNode("div", {
+          class: "__shops-checkbox-box",
+          style: vue.normalizeStyle({ maxHeight: _ctx.displayParams.listMaxHeight || "366px" })
+        }, [
+          vue.createElementVNode("div", {
+            class: "__shops-checkbox-grid",
+            onWheel: _cache[7] || (_cache[7] = vue.withModifiers(() => {
+            }, ["stop"]))
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shopList, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.shopCode
+              }, [
+                vue.createVNode(_component_Checkbox, {
+                  checked: _ctx.shopCheck[item.shopCode],
+                  "onUpdate:checked": ($event) => _ctx.shopCheck[item.shopCode] = $event
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(item.shopName), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["checked", "onUpdate:checked"])
+              ]);
+            }), 128))
+          ], 32)
+        ], 4)
+      ], 64)) : vue.createCommentVNode("v-if", true),
+      _ctx.shopList && !_ctx.shopList.length ? (vue.openBlock(), vue.createBlock(_component_Empty, { key: 2 }, {
+        description: vue.withCtx(() => [
+          _hoisted_13
+        ]),
+        _: 1
+      })) : vue.createCommentVNode("v-if", true)
+    ], 2), [
+      [vue.vShow, _ctx.isActive]
+    ])
+  ]);
+}
+var shopsFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "shops-filter.vue"]]);
+
+const BmShopsFilter = withInstall.withInstall(shopsFilter);
+
+exports.BmShopsFilter = BmShopsFilter;
+exports["default"] = BmShopsFilter;