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

package/es/components/staffs-selector/index.js

@@ -0,0 +1,728 @@
+import { withInstall } from 'bm-admin-ui/es/utils/with-install';
+import { readonly, ref, reactive, defineComponent, watch, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, withDirectives, createTextVNode, vShow, Fragment, renderList, toDisplayString, createCommentVNode, computed, createBlock, unref, withModifiers } from 'vue';
+import { Checkbox, Empty, Radio, Input, RadioGroup, Tree, message, Modal } from 'ant-design-vue';
+import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
+
+const MODE = {
+    RADIO: 'radio',
+    MULTIPLE: 'multiple',
+    VARIED: 'varied',
+    DEPARTMENT: 'department',
+};
+const selectProps = {
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+    mode: {
+        type: String,
+        default: MODE.MULTIPLE,
+    },
+    limit: {
+        type: Number,
+        default: 0,
+    },
+    title: {
+        type: String,
+        default: '人员选择器',
+    },
+    load: {
+        type: Function,
+        default: () => {
+            return Promise.resolve([]);
+        },
+    },
+    select: {
+        type: Array || Object,
+        defualt: () => [],
+    },
+    forceStatic: {
+        type: Boolean,
+        default: false,
+    },
+    immediateFetch: {
+        type: Boolean,
+        default: false,
+    },
+    showCount: {
+        type: Boolean,
+        default: true,
+    },
+    unitStr: {
+        type: String,
+        default: '人',
+    },
+};
+readonly([
+    { title: '成员', key: 0, paramStr: 'staff' },
+    { title: '部门', key: 1, paramStr: 'department' },
+    { title: '工作组', key: 2, paramStr: 'group' },
+    { title: '店铺', key: 3, paramStr: 'shop' },
+]);
+ref('');
+const selectState = reactive({
+    multipleChecked: {},
+    multipDepartment: [],
+    dataMap: new Map(),
+    curlistKeys: new Set(),
+    fetchLoading: false,
+    searched: false,
+});
+reactive({
+    departmentChecked: [],
+    staffsChecked: {},
+    shopChecked: {},
+    groupChecked: {},
+    dataMap: new Map(),
+    activeKey: 0,
+    curlistKeys: new Set(),
+    searched: false,
+});
+const list = ref([]);
+const departNative = ref([]);
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main$3 = defineComponent({
+  components: { SearchOutlined, Checkbox, Empty },
+  props: {
+    limit: {
+      type: Number,
+      default: 0
+    },
+    selected: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["fetchList", "update:selected"],
+  setup(props, { emit }) {
+    const state = reactive({
+      searchVal: "",
+      selectAll: false,
+      indeterminate: false,
+      emptyPic: Empty.PRESENTED_IMAGE_SIMPLE,
+      isFulfill: false
+    });
+    const methods = {
+      changeAllOption() {
+        let status = state.selectAll;
+        let length = props.selected.length;
+        list.value.forEach((item) => {
+          if (status && props.limit > 0 && length++ >= props.limit)
+            return;
+          selectState.multipleChecked[item.key] = status;
+        });
+      },
+      search() {
+        let data = { searchVal: state.searchVal || "" };
+        emit("fetchList", data);
+      },
+      setState() {
+        let indeterminate = false;
+        let selectAll = true;
+        list.value.forEach((item) => {
+          if (!selectState.multipleChecked[item.key]) {
+            selectAll = false;
+          } else {
+            indeterminate = true;
+          }
+        });
+        state.selectAll = selectAll;
+        state.indeterminate = selectAll ? false : indeterminate;
+      }
+    };
+    watch(
+      () => selectState.multipleChecked,
+      () => {
+        if (props.limit && props.limit > 0) {
+          let length = 0;
+          for (let key in selectState.multipleChecked) {
+            if (selectState.multipleChecked[key])
+              length++;
+          }
+          state.isFulfill = length >= props.limit;
+        }
+        methods.setState();
+      },
+      { deep: true }
+    );
+    watch(
+      () => list,
+      () => {
+        methods.setState();
+      },
+      { deep: true }
+    );
+    return {
+      ...toRefs(state),
+      ...toRefs(selectState),
+      list,
+      ...methods
+    };
+  }
+});
+const _hoisted_1$3 = { class: "multiple-selector" };
+const _hoisted_2$3 = { class: "__selector-modal-panel" };
+const _hoisted_3$3 = { class: "__search-panel" };
+const _hoisted_4$3 = { class: "__selector-modal-options" };
+const _hoisted_5$3 = { class: "__selector-modal-options-item fixed-option" };
+const _hoisted_6$2 = {
+  key: 0,
+  class: "noData",
+  style: { "height": "280px" }
+};
+const _hoisted_7$1 = { style: { "color": "#9393a3", "font-size": "12px", "font-weight": "400" } };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_search_outlined = resolveComponent("search-outlined");
+  const _component_AInput = resolveComponent("AInput");
+  const _component_Checkbox = resolveComponent("Checkbox");
+  const _component_Empty = resolveComponent("Empty");
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    createElementVNode("div", _hoisted_2$3, [
+      createElementVNode("div", _hoisted_3$3, [
+        createVNode(_component_AInput, {
+          value: _ctx.searchVal,
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.searchVal = $event),
+          placeholder: "\u8BF7\u8F93\u5165\u59D3\u540D\u6216\u7F16\u53F7",
+          onBlur: _ctx.search
+        }, {
+          suffix: withCtx(() => [
+            createVNode(_component_search_outlined, { style: { color: "#9393A3" } })
+          ]),
+          _: 1
+        }, 8, ["value", "onBlur"]),
+        createElementVNode("div", _hoisted_4$3, [
+          createElementVNode("div", _hoisted_5$3, [
+            withDirectives(createVNode(_component_Checkbox, {
+              checked: _ctx.selectAll,
+              "onUpdate:checked": _cache[1] || (_cache[1] = ($event) => _ctx.selectAll = $event),
+              indeterminate: _ctx.indeterminate,
+              onChange: _ctx.changeAllOption
+            }, {
+              default: withCtx(() => [
+                createTextVNode("\u5168\u9009")
+              ]),
+              _: 1
+            }, 8, ["checked", "indeterminate", "onChange"]), [
+              [vShow, _ctx.list.length]
+            ])
+          ]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.key,
+              class: "__selector-modal-options-item"
+            }, [
+              createVNode(_component_Checkbox, {
+                checked: _ctx.multipleChecked[item.key],
+                "onUpdate:checked": ($event) => _ctx.multipleChecked[item.key] = $event,
+                class: "__selector-modal-option-check",
+                disabled: _ctx.isFulfill
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(item?.fullTitle || item.title), 1)
+                ]),
+                _: 2
+              }, 1032, ["checked", "onUpdate:checked", "disabled"])
+            ]);
+          }), 128)),
+          _ctx.list && !_ctx.list.length ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+            createVNode(_component_Empty, { image: _ctx.emptyPic }, {
+              description: withCtx(() => [
+                createElementVNode("span", _hoisted_7$1, toDisplayString(!!_ctx.searched ? "\u6682\u65E0\u6570\u636E" : "\u8BF7\u5148\u641C\u7D22\u4EBA\u5458\u5173\u952E\u5B57"), 1)
+              ]),
+              _: 1
+            }, 8, ["image"])
+          ])) : createCommentVNode("v-if", true)
+        ])
+      ])
+    ])
+  ]);
+}
+var multipleCmp = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2], ["__file", "multipleCmp.vue"]]);
+
+const _sfc_main$2 = defineComponent({
+  name: "RadioCmp",
+  components: { ARadio: Radio, AInput: Input, ARadioGroup: RadioGroup, Empty, SearchOutlined },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    selected: {
+      type: String || Number || Object,
+      default: ""
+    }
+  },
+  emits: ["fetchList", "update:selected"],
+  setup(_, { emit }) {
+    const searchVal = ref("");
+    const emptyPic = Empty.PRESENTED_IMAGE_SIMPLE;
+    function search() {
+      let data = { searchVal: searchVal.value || "" };
+      emit("fetchList", data);
+    }
+    function radioChange(e) {
+      emit("update:selected", String(e.target.value));
+    }
+    const searched = computed(() => selectState.searched);
+    return {
+      searchVal,
+      emptyPic,
+      searched,
+      search,
+      radioChange
+    };
+  }
+});
+const _hoisted_1$2 = { class: "radio-selector-panel" };
+const _hoisted_2$2 = { class: "__search-panel withoutpad" };
+const _hoisted_3$2 = {
+  key: 0,
+  class: "__selector-modal-options __radio-panel"
+};
+const _hoisted_4$2 = {
+  key: 1,
+  class: "noData"
+};
+const _hoisted_5$2 = { style: { "color": "#9393a3", "font-size": "12px", "font-weight": "400" } };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_search_outlined = resolveComponent("search-outlined");
+  const _component_a_input = resolveComponent("a-input");
+  const _component_ARadio = resolveComponent("ARadio");
+  const _component_ARadioGroup = resolveComponent("ARadioGroup");
+  const _component_Empty = resolveComponent("Empty");
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+    createElementVNode("div", _hoisted_2$2, [
+      createVNode(_component_a_input, {
+        value: _ctx.searchVal,
+        "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.searchVal = $event),
+        placeholder: "\u8BF7\u8F93\u5165\u59D3\u540D\u6216\u7F16\u53F7",
+        onBlur: _ctx.search
+      }, {
+        suffix: withCtx(() => [
+          createVNode(_component_search_outlined, { style: { color: "#9393A3" } })
+        ]),
+        _: 1
+      }, 8, ["value", "onBlur"]),
+      _ctx.list && _ctx.list.length ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+        createVNode(_component_ARadioGroup, {
+          value: _ctx.selected,
+          style: { width: "100%" },
+          onChange: _ctx.radioChange
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item) => {
+              return openBlock(), createBlock(_component_ARadio, {
+                key: item.key,
+                class: "__radio-option",
+                value: item.key
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(item.fullTitle || item.title), 1)
+                ]),
+                _: 2
+              }, 1032, ["value"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["value", "onChange"])
+      ])) : createCommentVNode("v-if", true),
+      _ctx.list && !_ctx.list.length ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+        createVNode(_component_Empty, { image: _ctx.emptyPic }, {
+          description: withCtx(() => [
+            createElementVNode("span", _hoisted_5$2, toDisplayString(!!_ctx.searched ? "\u6682\u65E0\u6570\u636E" : "\u8BF7\u5148\u641C\u7D22\u4EBA\u5458\u5173\u952E\u5B57"), 1)
+          ]),
+          _: 1
+        }, 8, ["image"])
+      ])) : createCommentVNode("v-if", true)
+    ])
+  ]);
+}
+var radioCmp = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__file", "radioCmp.vue"]]);
+
+const _sfc_main$1 = defineComponent({
+  components: { SearchOutlined, Empty, ATree: Tree },
+  props: {
+    limit: {
+      type: Number,
+      default: 0
+    },
+    selected: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["fetchList", "update:selected"],
+  setup(props, { emit }) {
+    const treeRef = ref();
+    const state = reactive({
+      searchVal: "",
+      selectAll: false,
+      indeterminate: false,
+      emptyPic: Empty.PRESENTED_IMAGE_SIMPLE,
+      isFulfill: false
+    });
+    const methods = {
+      search() {
+        let data = state.searchVal ? { searchVal: state.searchVal } : { searchVal: "" };
+        emit("fetchList", data);
+      }
+    };
+    function changeTreeCheck(checkedKeys) {
+      let flatMap = selectState.dataMap;
+      let curlistKeys = selectState.curlistKeys;
+      let hadselected = new Set(selectState.multipDepartment);
+      let curselect = new Set(checkedKeys);
+      console.log(hadselected, curselect);
+      for (let key of hadselected) {
+        if (curlistKeys.has(key) && (!curselect.has(key) || curselect.has(key) && curselect.has(flatMap.get(key)["parent"]))) {
+          hadselected.delete(key);
+        }
+      }
+      for (let key of curselect) {
+        let obj = flatMap.get(key);
+        if (obj && !curselect.has(obj["parent"])) {
+          hadselected.add(key);
+        }
+      }
+      let arr = Array.from(hadselected) || [];
+      if (props.limit && props.limit > 0 && arr.length > props.limit) {
+        message.error("\u52FE\u9009\u540E\u5C06\u8D85\u8FC7\u4EBA\u5458\u9650\u5236");
+        return;
+      }
+      selectState.multipDepartment = Array.from(hadselected) || [];
+      console.log(selectState.multipDepartment);
+    }
+    return {
+      changeTreeCheck,
+      ...toRefs(state),
+      ...toRefs(selectState),
+      treeRef,
+      list,
+      ...methods
+    };
+  }
+});
+const _hoisted_1$1 = { class: "multiple-selector" };
+const _hoisted_2$1 = { class: "__selector-modal-panel" };
+const _hoisted_3$1 = { class: "__search-panel" };
+const _hoisted_4$1 = { class: "__selector-modal-options" };
+const _hoisted_5$1 = { class: "department-option-item" };
+const _hoisted_6$1 = {
+  key: 0,
+  class: "department-desc"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "noData",
+  style: { "height": "280px" }
+};
+const _hoisted_8 = { style: { "color": "#9393a3", "font-size": "12px", "font-weight": "400" } };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_search_outlined = resolveComponent("search-outlined");
+  const _component_AInput = resolveComponent("AInput");
+  const _component_ATree = resolveComponent("ATree");
+  const _component_Empty = resolveComponent("Empty");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+    createElementVNode("div", _hoisted_2$1, [
+      createElementVNode("div", _hoisted_3$1, [
+        createVNode(_component_AInput, {
+          value: _ctx.searchVal,
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.searchVal = $event),
+          placeholder: "\u8BF7\u8F93\u5165\u90E8\u95E8\u540D\u79F0",
+          onBlur: _ctx.search
+        }, {
+          suffix: withCtx(() => [
+            createVNode(_component_search_outlined, { style: { color: "#9393A3" } })
+          ]),
+          _: 1
+        }, 8, ["value", "onBlur"]),
+        createElementVNode("div", _hoisted_4$1, [
+          createVNode(_component_ATree, {
+            ref: "treeRef",
+            "checked-keys": _ctx.multipDepartment,
+            checkable: "",
+            "tree-data": _ctx.list,
+            onCheck: _ctx.changeTreeCheck
+          }, {
+            title: withCtx(({ title, key, description }) => [
+              createElementVNode("div", _hoisted_5$1, [
+                createElementVNode("span", null, toDisplayString(title) + toDisplayString(key ? `(${key})` : ""), 1),
+                description ? (openBlock(), createElementBlock("p", _hoisted_6$1, toDisplayString(description), 1)) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 1
+          }, 8, ["checked-keys", "tree-data", "onCheck"]),
+          _ctx.list && !_ctx.list.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createVNode(_component_Empty, { image: _ctx.emptyPic }, {
+              description: withCtx(() => [
+                createElementVNode("span", _hoisted_8, toDisplayString(!!_ctx.searched ? "\u6682\u65E0\u6570\u636E" : "\u8BF7\u5148\u641C\u7D22\u4EBA\u5458\u5173\u952E\u5B57"), 1)
+              ]),
+              _: 1
+            }, 8, ["image"])
+          ])) : createCommentVNode("v-if", true)
+        ])
+      ])
+    ])
+  ]);
+}
+var departmentCmp = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "departmentCmp.vue"]]);
+
+const _hoisted_1 = { class: "selector-content" };
+const _hoisted_2 = {
+  key: 3,
+  class: "__selector-chosen-panel"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "__chosen-panel-tip"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "__limit-tip"
+};
+const _hoisted_5 = { class: "__chosen-panel-list" };
+const _hoisted_6 = { class: "__tiem-title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "staffs-selector",
+  props: selectProps,
+  emits: ["update:visible", "update:select", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const selected = ref([]);
+    const computeSelected = computed(() => {
+      let list2 = [];
+      if (props.mode === MODE.MULTIPLE) {
+        for (let [key, value] of Object.entries(selectState.multipleChecked)) {
+          value && list2.push(String(key));
+        }
+        return list2;
+      } else if (props.mode === MODE.DEPARTMENT) {
+        return [...selectState.multipDepartment];
+      }
+      return [];
+    });
+    const multipTree = ref(false);
+    const width = computed(() => {
+      if (props.mode === MODE.MULTIPLE) {
+        return 648;
+      } else if (props.mode === MODE.RADIO) {
+        return 480;
+      }
+      return 648;
+    });
+    function modalCancel() {
+      emit("update:visible", !props.visible);
+      list.value = [];
+    }
+    async function fetch(params) {
+      list.value = [];
+      selectState.searched = !!params?.searchVal;
+      let isDepartTree = props.mode === MODE.DEPARTMENT;
+      if (isDepartTree) {
+        if (!departNative.value.length) {
+          departNative.value = await props.load(params);
+          selectState.dataMap = flatListFunc([...departNative.value]);
+        }
+        if (params.searchVal) {
+          let result = [];
+          let queues = [...departNative.value];
+          while (queues.length) {
+            let node = queues.shift();
+            if (node["title"] && node["title"].includes(params?.searchVal || "")) {
+              result.push({ ...node });
+            }
+            if (node.children)
+              queues.push(...node.children);
+          }
+          list.value = result;
+        } else {
+          list.value = departNative.value;
+        }
+        return;
+      }
+      if (params.searchVal) {
+        await props.load(params).then((data) => {
+          if (data && data.length) {
+            let result = data.map((item) => {
+              return item;
+            });
+            list.value = result;
+            selectState.dataMap = flatListFunc(data);
+          } else {
+            list.value = [];
+          }
+        });
+      } else {
+        list.value = [];
+      }
+    }
+    function flatListFunc(list2) {
+      let queue = [...list2];
+      let map = new Map(selectState.dataMap);
+      let Keys = /* @__PURE__ */ new Set();
+      let treedata = false;
+      while (queue.length) {
+        let curnode = queue.shift();
+        map.set(String(curnode.key), curnode);
+        Keys.add(String(curnode.key));
+        let children = curnode.children;
+        if (children) {
+          children = children.map((obj) => {
+            treedata = true;
+            obj["parent"] = curnode && curnode.key || null;
+            return obj;
+          });
+        }
+        queue = queue.concat(children || []);
+      }
+      multipTree.value = props.forceStatic ? false : treedata;
+      selectState.curlistKeys = Keys;
+      return map;
+    }
+    function findDataByKey(key) {
+      let data = selectState.dataMap.get(String(key));
+      if (!data) {
+        data = props.select.find(
+          (item) => String(item) === String(key) || String(item?.key) === String(key)
+        );
+      }
+      return data || "\u672A\u77E5\u6570\u636E";
+    }
+    function summitSelect() {
+      if (typeof selected.value === "string") {
+        let data = selectState.dataMap.get(String(selected.value));
+        emit("update:select", [data]);
+        emit("change", [data]);
+      } else if (props.mode === MODE.MULTIPLE || props.mode === MODE.DEPARTMENT) {
+        let arr = computeSelected.value.map((key) => findDataByKey(key));
+        emit("update:select", arr);
+        emit("change", arr);
+      }
+      list.value = [];
+      modalCancel();
+    }
+    function getOptionName(key) {
+      let data = selectState.dataMap.get(String(key));
+      if (data && data.title)
+        return `${data.title}${data.key ? `(${data.key})` : ""}${data.description ? `-(${data.description})` : ""}`;
+      let arr = props.select;
+      arr = arr.length ? arr : [];
+      let had = arr.find(
+        (item) => String(item) === String(key) || String(item?.key) === String(key)
+      );
+      return had?.title ? `${had.title}${had.key ? `(${had.key})` : ""}${had.description ? `-(${had.description})` : ""}` : had;
+    }
+    function deleteOptions(key) {
+      if (props.mode === MODE.MULTIPLE) {
+        if (selectState.multipleChecked[String(key)]) {
+          selectState.multipleChecked[String(key)] = false;
+        }
+      } else if (props.mode === MODE.DEPARTMENT) {
+        let index = selectState.multipDepartment.findIndex(
+          (item) => String(item) === String(key)
+        );
+        index > -1 && selectState.multipDepartment.splice(index, 1);
+      }
+    }
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          if (props.mode === MODE.RADIO) {
+            selected.value = "";
+          } else if (props.mode === MODE.DEPARTMENT) {
+            let arr = props.select;
+            selected.value = arr.length ? arr.map((item) => String(item?.key)) : [];
+            const multipDepartment = [];
+            arr.forEach((item) => multipDepartment.push(String(item?.key)));
+            selectState.multipDepartment = multipDepartment;
+            fetch({});
+          } else if (props.mode === MODE.MULTIPLE) {
+            let arr = props.select;
+            selected.value = arr.length ? arr.map((item) => String(item?.key)) : [];
+            let multipleChecked = {};
+            arr.forEach((item) => multipleChecked[String(item?.key)] = true);
+            selectState.multipleChecked = multipleChecked;
+          }
+        } else {
+          selected.value = [];
+          selectState.multipleChecked = {};
+        }
+      },
+      { immediate: true, deep: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Modal), {
+        class: "staffs-selector-modal",
+        title: _ctx.title,
+        visible: _ctx.visible,
+        width: unref(width),
+        "ok-text": "\u786E\u5B9A",
+        "cancel-text": "\u53D6\u6D88",
+        "destroy-on-close": true,
+        onCancel: modalCancel,
+        onOk: summitSelect
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            _ctx.mode === "radio" ? (openBlock(), createBlock(radioCmp, {
+              key: 0,
+              selected: selected.value,
+              "onUpdate:selected": _cache[0] || (_cache[0] = ($event) => selected.value = $event),
+              list: unref(list),
+              onFetchList: fetch
+            }, null, 8, ["selected", "list"])) : _ctx.mode === "department" ? (openBlock(), createBlock(departmentCmp, {
+              key: 1,
+              selected: selected.value,
+              "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => selected.value = $event),
+              limit: _ctx.limit,
+              onFetchList: fetch
+            }, null, 8, ["selected", "limit"])) : (openBlock(), createBlock(multipleCmp, {
+              key: 2,
+              selected: selected.value,
+              "onUpdate:selected": _cache[2] || (_cache[2] = ($event) => selected.value = $event),
+              limit: _ctx.limit,
+              list: unref(list),
+              "is-tree": multipTree.value,
+              onFetchList: fetch
+            }, null, 8, ["selected", "limit", "list", "is-tree"])),
+            ["multiple", "department"].includes(_ctx.mode) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              ["multiple", "varied"].includes(_ctx.mode) && _ctx.showCount ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                createElementVNode("span", null, "\u5DF2\u9009\u62E9" + toDisplayString(unref(computeSelected) && unref(computeSelected).length || 0) + toDisplayString(_ctx.$props.unitStr), 1),
+                _ctx.limit ? (openBlock(), createElementBlock("span", _hoisted_4, "\u6700\u591A\u9009\u62E9" + toDisplayString(_ctx.limit) + toDisplayString(_ctx.$props.unitStr), 1)) : createCommentVNode("v-if", true)
+              ])) : createCommentVNode("v-if", true),
+              createElementVNode("div", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(computeSelected), (item) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item + "checked",
+                    class: "__chosen-panel-list-item"
+                  }, [
+                    createElementVNode("span", _hoisted_6, toDisplayString(getOptionName(item)), 1),
+                    createVNode(unref(CloseCircleFilled), {
+                      style: { "color": "#ced1d9" },
+                      onMousedown: withModifiers(($event) => deleteOptions(item), ["stop"])
+                    }, null, 8, ["onMousedown"])
+                  ]);
+                }), 128))
+              ])
+            ])) : createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["title", "visible", "width"]);
+    };
+  }
+});
+var staffsSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "staffs-selector.vue"]]);
+
+const BmStaffsSelector = withInstall(staffsSelector);
+
+export { BmStaffsSelector, BmStaffsSelector as default };