bm-admin-ui 1.0.40-alpha → 1.0.41-alpha

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

@@ -3,24 +3,94 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('bm-admin-ui/lib/utils/with-install');
-var AModal = require('ant-design-vue/lib/modal');
 var vue = require('vue');
+var AModal = require('ant-design-vue/lib/modal');
 var iconsVue = require('@ant-design/icons-vue');
 var Empty = require('ant-design-vue/lib/empty');
-var AInput = require('ant-design-vue/lib/input');
 var Checkbox = require('ant-design-vue/lib/checkbox');
-var ATree = require('ant-design-vue/lib/tree');
+var message = require('ant-design-vue/lib/message');
+var AInput = require('ant-design-vue/lib/input');
 var ARadio = require('ant-design-vue/lib/radio');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var AModal__default = /*#__PURE__*/_interopDefaultLegacy(AModal);
 var Empty__default = /*#__PURE__*/_interopDefaultLegacy(Empty);
-var AInput__default = /*#__PURE__*/_interopDefaultLegacy(AInput);
 var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
-var ATree__default = /*#__PURE__*/_interopDefaultLegacy(ATree);
+var message__default = /*#__PURE__*/_interopDefaultLegacy(message);
+var AInput__default = /*#__PURE__*/_interopDefaultLegacy(AInput);
 var ARadio__default = /*#__PURE__*/_interopDefaultLegacy(ARadio);
 
+const MODE = {
+    RADIO: 'radio',
+    MULTIPLE: 'multiple',
+    VARIED: 'varied',
+};
+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: '人',
+    },
+};
+vue.readonly([
+    { title: '成员', key: 0, paramStr: 'staff' },
+    { title: '部门', key: 1, paramStr: 'department' },
+    { title: '工作组', key: 2, paramStr: 'group' },
+    { title: '店铺', key: 3, paramStr: 'shop' },
+]);
+vue.ref('');
+const selectState = vue.reactive({
+    multipleChecked: {},
+    departmentChecked: [],
+    multipDepartment: [],
+    staffsChecked: {},
+    shopChecked: {},
+    groupChecked: {},
+    dataMap: new Map(),
+    curlistKeys: new Set(),
+    activeKey: 0,
+});
+const list = vue.ref([]);
+const departNative = vue.ref([]);
+
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -30,46 +100,19 @@ var _export_sfc = (sfc, props) => {
 };
 
 const _sfc_main$3 = vue.defineComponent({
-  components: {
-    CloseCircleFilled: iconsVue.CloseCircleFilled,
-    SearchOutlined: iconsVue.SearchOutlined,
-    Empty: Empty__default["default"],
-    AInput: AInput__default["default"],
-    Checkbox: Checkbox__default["default"],
-    ATree: ATree__default["default"]
-  },
+  components: { SearchOutlined: iconsVue.SearchOutlined, Checkbox: Checkbox__default["default"], Empty: Empty__default["default"] },
   props: {
     limit: {
       type: Number,
       default: 0
     },
-    list: {
-      type: Array,
-      default: () => []
-    },
     selected: {
       type: Array,
       default: () => []
     },
-    dataMap: {
-      type: Map,
-      default: () => /* @__PURE__ */ new Map()
-    },
     isTree: {
       type: Boolean,
       default: false
-    },
-    curlistKeys: {
-      type: Set,
-      default: () => /* @__PURE__ */ new Set()
-    },
-    showCount: {
-      type: Boolean,
-      default: true
-    },
-    unitStr: {
-      type: String,
-      default: "\u4EBA"
     }
   },
   emits: ["fetchList", "update:selected"],
@@ -79,18 +122,16 @@ const _sfc_main$3 = vue.defineComponent({
       selectAll: false,
       indeterminate: false,
       emptyPic: Empty__default["default"].PRESENTED_IMAGE_SIMPLE,
-      listChecked: {},
-      isFulfill: false,
-      departmentChecked: {}
+      isFulfill: false
     });
     const methods = {
       changeAllOption() {
         let status = state.selectAll;
         let length = props.selected.length;
-        props.list.forEach((item) => {
+        list.value.forEach((item) => {
           if (status && props.limit > 0 && length++ >= props.limit)
             return;
-          state.listChecked[item.key] = status;
+          selectState.multipleChecked[item.key] = status;
         });
       },
       search() {
@@ -100,8 +141,8 @@ const _sfc_main$3 = vue.defineComponent({
       setState() {
         let indeterminate = false;
         let selectAll = true;
-        props.list.forEach((item) => {
-          if (!state.listChecked[item.key]) {
+        list.value.forEach((item) => {
+          if (!selectState.multipleChecked[item.key]) {
             selectAll = false;
           } else {
             indeterminate = true;
@@ -109,88 +150,68 @@ const _sfc_main$3 = vue.defineComponent({
         });
         state.selectAll = selectAll;
         state.indeterminate = selectAll ? false : indeterminate;
-      },
-      deleteOption(key) {
-        if (props.isTree) {
-          let list = [].concat(state.departmentChecked);
-          let result = [];
-          list.forEach((item) => {
-            if (!(item === key || props.dataMap.get(item) && key === props.dataMap.get(item)["parent"])) {
-              result.push(item);
-            }
-          });
-          state.departmentChecked = Array.from(new Set(result));
-        } else {
-          state.listChecked[key] = false;
-        }
-      },
-      getSelectName(key) {
-        let data = props.dataMap.get(String(key)) || null;
-        return data ? data.title : "\u672A\u77E5";
       }
     };
     vue.watch(
-      () => state.listChecked,
+      () => selectState.multipleChecked,
       () => {
-        let list = [];
-        for (let [key, value] of Object.entries(state.listChecked)) {
-          value && list.push(key);
+        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;
         }
-        if (props.limit > 0 && list.length >= props.limit)
-          state.isFulfill = true;
-        else
-          state.isFulfill = false;
         methods.setState();
-        emit("update:selected", list);
       },
       { deep: true }
     );
     vue.watch(
-      () => state.departmentChecked,
+      () => list,
       () => {
-        let flatMap = props.dataMap;
-        let curlistKeys = props.curlistKeys;
-        let hadselected = new Set(props.selected);
-        let curselect = new Set(state.departmentChecked);
-        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);
-          }
-        }
-        emit("update:selected", Array.from(hadselected));
+        !props.isTree && methods.setState();
       },
       { deep: true }
     );
-    vue.watch(
-      () => props.list,
-      () => {
-        !props.isTree && methods.setState();
+    function changeTreeCheck(checkedKeys) {
+      let flatMap = selectState.dataMap;
+      let curlistKeys = selectState.curlistKeys;
+      let hadselected = new Set(selectState.multipDepartment);
+      let curselect = new Set(checkedKeys);
+      for (let key of hadselected) {
+        if (curlistKeys.has(String(key)) && (!curselect.has(String(key)) || curselect.has(String(key)) && curselect.has(flatMap.get(String(key))["parent"]))) {
+          hadselected.delete(key);
+        }
       }
-    );
-    vue.onMounted(() => {
-      let list = props.selected;
-      list && list.forEach((key) => {
-        state.listChecked[key] = true;
-      });
-    });
+      for (let key of curselect) {
+        let obj = flatMap.get(String(key));
+        if (obj && !curselect.has(obj["parent"])) {
+          hadselected.add(String(key));
+        }
+      }
+      let arr = Array.from(hadselected) || [];
+      if (props.limit && props.limit > 0 && arr.length > props.limit) {
+        message__default["default"].error("\u52FE\u9009\u540E\u5C06\u8D85\u8FC7\u4EBA\u5458\u9650\u5236");
+        return;
+      }
+      selectState.multipDepartment = Array.from(hadselected) || [];
+    }
     return {
+      changeTreeCheck,
       ...vue.toRefs(state),
+      ...vue.toRefs(selectState),
+      list,
       ...methods
     };
   }
 });
 const _hoisted_1$3 = { class: "multiple-selector" };
-const _hoisted_2$2 = { class: "__selector-modal-panel" };
-const _hoisted_3$2 = { class: "__search-panel" };
-const _hoisted_4$2 = { class: "__selector-modal-options" };
-const _hoisted_5$2 = { class: "__selector-modal-options-item fixed-option" };
-const _hoisted_6$1 = { class: "department-option-item" };
+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 = { class: "department-option-item" };
 const _hoisted_7$1 = {
   key: 0,
   class: "department-desc"
@@ -201,27 +222,15 @@ const _hoisted_8$1 = {
   style: { "height": "280px" }
 };
 const _hoisted_9$1 = { style: { "color": "#9393a3", "font-size": "12px", "font-weight": "400" } };
-const _hoisted_10$1 = { class: "__selector-chosen-panel" };
-const _hoisted_11$1 = {
-  key: 0,
-  class: "__chosen-panel-tip"
-};
-const _hoisted_12$1 = {
-  key: 0,
-  class: "__limit-tip"
-};
-const _hoisted_13$1 = { class: "__chosen-panel-list" };
-const _hoisted_14$1 = { class: "__tiem-title" };
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_search_outlined = vue.resolveComponent("search-outlined");
   const _component_AInput = vue.resolveComponent("AInput");
   const _component_Checkbox = vue.resolveComponent("Checkbox");
   const _component_ATree = vue.resolveComponent("ATree");
   const _component_Empty = vue.resolveComponent("Empty");
-  const _component_CloseCircleFilled = vue.resolveComponent("CloseCircleFilled");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-    vue.createElementVNode("div", _hoisted_2$2, [
-      vue.createElementVNode("div", _hoisted_3$2, [
+    vue.createElementVNode("div", _hoisted_2$3, [
+      vue.createElementVNode("div", _hoisted_3$3, [
         vue.createVNode(_component_AInput, {
           value: _ctx.searchVal,
           "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.searchVal = $event),
@@ -233,9 +242,9 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
         }, 8, ["value", "onChange"]),
-        vue.createElementVNode("div", _hoisted_4$2, [
+        vue.createElementVNode("div", _hoisted_4$3, [
           !_ctx.isTree ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createElementVNode("div", _hoisted_5$2, [
+            vue.createElementVNode("div", _hoisted_5$3, [
               vue.withDirectives(vue.createVNode(_component_Checkbox, {
                 checked: _ctx.selectAll,
                 "onUpdate:checked": _cache[1] || (_cache[1] = ($event) => _ctx.selectAll = $event),
@@ -256,8 +265,8 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "__selector-modal-options-item"
               }, [
                 vue.createVNode(_component_Checkbox, {
-                  checked: _ctx.listChecked[item.key],
-                  "onUpdate:checked": ($event) => _ctx.listChecked[item.key] = $event,
+                  checked: _ctx.multipleChecked[item.key],
+                  "onUpdate:checked": ($event) => _ctx.multipleChecked[item.key] = $event,
                   class: "__selector-modal-option-check",
                   disabled: _ctx.isFulfill
                 }, {
@@ -270,19 +279,19 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128))
           ], 64)) : _ctx.isTree ? (vue.openBlock(), vue.createBlock(_component_ATree, {
             key: 1,
-            checkedKeys: _ctx.departmentChecked,
-            "onUpdate:checkedKeys": _cache[2] || (_cache[2] = ($event) => _ctx.departmentChecked = $event),
+            "checked-keys": _ctx.multipDepartment,
             checkable: "",
-            "tree-data": _ctx.list
+            "tree-data": _ctx.list,
+            onCheck: _ctx.changeTreeCheck
           }, {
-            title: vue.withCtx(({ title, description }) => [
-              vue.createElementVNode("div", _hoisted_6$1, [
-                vue.createElementVNode("span", null, vue.toDisplayString(title), 1),
+            title: vue.withCtx(({ title, key, description }) => [
+              vue.createElementVNode("div", _hoisted_6$2, [
+                vue.createElementVNode("span", null, vue.toDisplayString(title) + vue.toDisplayString(key ? `(${key})` : ""), 1),
                 description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7$1, vue.toDisplayString(description), 1)) : vue.createCommentVNode("v-if", true)
               ])
             ]),
             _: 1
-          }, 8, ["checkedKeys", "tree-data"])) : vue.createCommentVNode("v-if", true),
+          }, 8, ["checked-keys", "tree-data", "onCheck"])) : vue.createCommentVNode("v-if", true),
           _ctx.list && !_ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$1, [
             vue.createVNode(_component_Empty, { image: _ctx.emptyPic }, {
               description: vue.withCtx(() => [
@@ -293,30 +302,10 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
           ])) : vue.createCommentVNode("v-if", true)
         ])
       ])
-    ]),
-    vue.createElementVNode("div", _hoisted_10$1, [
-      _ctx.showCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
-        vue.createElementVNode("span", null, "\u5DF2\u9009\u62E9" + vue.toDisplayString(_ctx.selected && _ctx.selected.length || 0) + vue.toDisplayString(_ctx.$props.unitStr), 1),
-        _ctx.limit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12$1, "\u6700\u591A\u9009\u62E9" + vue.toDisplayString(_ctx.limit) + vue.toDisplayString(_ctx.$props.unitStr), 1)) : vue.createCommentVNode("v-if", true)
-      ])) : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", _hoisted_13$1, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            key: item + "checked",
-            class: "__chosen-panel-list-item"
-          }, [
-            vue.createElementVNode("span", _hoisted_14$1, vue.toDisplayString(_ctx.getSelectName(item)), 1),
-            vue.createVNode(_component_CloseCircleFilled, {
-              style: { "color": "#ced1d9" },
-              onMousedown: vue.withModifiers(($event) => _ctx.deleteOption(item), ["stop"])
-            }, null, 8, ["onMousedown"])
-          ]);
-        }), 128))
-      ])
     ])
   ]);
 }
-var multipleCmp = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "multipleCmp.vue"]]);
+var multipleCmp = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2], ["__file", "multipleCmp.vue"]]);
 
 const _sfc_main$2 = vue.defineComponent({
   name: "RadioCmp",
@@ -351,24 +340,24 @@ const _sfc_main$2 = vue.defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "radio-selector-panel" };
-const _hoisted_2$1 = { class: "__search-panel withoutpad" };
-const _hoisted_3$1 = {
+const _hoisted_2$2 = { class: "__search-panel withoutpad" };
+const _hoisted_3$2 = {
   key: 0,
   class: "__selector-modal-options __radio-panel"
 };
-const _hoisted_4$1 = {
+const _hoisted_4$2 = {
   key: 1,
   class: "noData"
 };
-const _hoisted_5$1 = { style: { "color": "#9393a3", "font-size": "12px", "font-weight": "400" } };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+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 = vue.resolveComponent("search-outlined");
   const _component_a_input = vue.resolveComponent("a-input");
   const _component_ARadio = vue.resolveComponent("ARadio");
   const _component_ARadioGroup = vue.resolveComponent("ARadioGroup");
   const _component_Empty = vue.resolveComponent("Empty");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-    vue.createElementVNode("div", _hoisted_2$1, [
+    vue.createElementVNode("div", _hoisted_2$2, [
       vue.createVNode(_component_a_input, {
         value: _ctx.searchVal,
         "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.searchVal = $event),
@@ -380,7 +369,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }, 8, ["value", "onChange"]),
-      _ctx.list && _ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+      _ctx.list && _ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
         vue.createVNode(_component_ARadioGroup, {
           value: _ctx.selected,
           style: { width: "100%" },
@@ -403,10 +392,10 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
         }, 8, ["value", "onChange"])
       ])) : vue.createCommentVNode("v-if", true),
-      _ctx.list && !_ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+      _ctx.list && !_ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
         vue.createVNode(_component_Empty, { image: _ctx.emptyPic }, {
           description: vue.withCtx(() => [
-            vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString(!!_ctx.searchVal ? "\u6682\u65E0\u6570\u636E" : "\u8BF7\u5148\u641C\u7D22\u4EBA\u5458\u5173\u952E\u5B57"), 1)
+            vue.createElementVNode("span", _hoisted_5$2, vue.toDisplayString(!!_ctx.searchVal ? "\u6682\u65E0\u6570\u636E" : "\u8BF7\u5148\u641C\u7D22\u4EBA\u5458\u5173\u952E\u5B57"), 1)
           ]),
           _: 1
         }, 8, ["image"])
@@ -414,18 +403,9 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-var radioCmp = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "radioCmp.vue"]]);
+var radioCmp = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__file", "radioCmp.vue"]]);
 
 const _sfc_main$1 = vue.defineComponent({
-  name: "VariedCmp",
-  components: {
-    CloseCircleFilled: iconsVue.CloseCircleFilled,
-    SearchOutlined: iconsVue.SearchOutlined,
-    AInput: AInput__default["default"],
-    Checkbox: Checkbox__default["default"],
-    ATree: ATree__default["default"],
-    Empty: Empty__default["default"]
-  },
   props: {
     list: {
       type: Array,
@@ -446,164 +426,83 @@ const _sfc_main$1 = vue.defineComponent({
   },
   emits: ["fetchList", "update:selected"],
   setup(props, { emit }) {
+    const indicator = vue.h(iconsVue.LoadingOutlined, {
+      style: {
+        fontSize: "24px"
+      },
+      spin: true
+    });
+    const loading = vue.ref(false);
     const emptyPic = Empty__default["default"].PRESENTED_IMAGE_SIMPLE;
-    const activeKey = vue.ref(0);
+    const areas = vue.readonly([
+      { title: "\u6210\u5458", key: 0, paramStr: "staff" },
+      { title: "\u90E8\u95E8", key: 1, paramStr: "department" },
+      { title: "\u5DE5\u4F5C\u7EC4", key: 2, paramStr: "group" },
+      { title: "\u5E97\u94FA", key: 3, paramStr: "shop" }
+    ]);
     const searchVal = vue.ref("");
-    const staffsChecked = vue.ref({});
-    const groupChecked = vue.ref({});
-    const departmentChecked = vue.ref([]);
-    const shopChecked = vue.ref({});
+    function changeArea(item) {
+      selectState.activeKey = item.key;
+      searchVal.value = "";
+      if (selectState.activeKey === 1) {
+        search();
+      } else
+        emit("fetchList", false);
+    }
+    function search() {
+      emit("fetchList", {
+        searchVal: searchVal.value,
+        area: areas[selectState.activeKey].paramStr
+      });
+    }
     const inputPlaceHolder = vue.computed(() => {
-      if (activeKey.value === 2) {
+      if (selectState.activeKey === 1) {
         return "\u8BF7\u8F93\u5165\u90E8\u95E8\u641C\u7D22";
-      } else if (activeKey.value === 3) {
+      } else if (selectState.activeKey === 2) {
         return "\u8BF7\u8F93\u5165\u5DE5\u4F5C\u7EC4\u641C\u7D22";
-      } else if (activeKey.value === 4) {
+      } else if (selectState.activeKey === 3) {
         return "\u8BF7\u8F93\u5165\u5E97\u94FA\u641C\u7D22";
       }
       return "\u8BF7\u8F93\u5165\u4EBA\u540D\u641C\u7D22";
     });
-    const areas = vue.readonly([
-      { title: "\u6210\u5458", key: 0, paramStr: "staff" },
-      { title: "\u90E8\u95E8", key: 1, paramStr: "department" },
-      { title: "\u5DE5\u4F5C\u7EC4", key: 2, paramStr: "group" },
-      { title: "\u5E97\u94FA", key: 3, paramStr: "shop" }
-    ]);
-    const methods = {
-      deleteOption(key) {
-        let object = new Object();
-        if (object.hasOwnProperty.call(staffsChecked.value, key)) {
-          staffsChecked.value[key] = false;
-        } else if (object.hasOwnProperty.call(shopChecked.value, key)) {
-          shopChecked.value[key] = false;
-        } else if (object.hasOwnProperty.call(groupChecked.value, key)) {
-          groupChecked.value[key] = false;
-        } else {
-          let list = [].concat(departmentChecked.value);
-          let result = [];
-          list.forEach((item) => {
-            if (!(item === key || props.dataMap.get(item) && key === props.dataMap.get(item)["parent"])) {
-              result.push(item);
-            }
-          });
-          departmentChecked.value = Array.from(new Set(result));
+    function changeTreeCheck(checkedKeys) {
+      let flatMap = selectState.dataMap;
+      let curlistKeys = selectState.curlistKeys;
+      let hadselected = new Set(selectState.departmentChecked);
+      let curselect = new Set(checkedKeys);
+      for (let key of hadselected) {
+        if (curlistKeys.has(String(key)) && (!curselect.has(String(key)) || curselect.has(String(key)) && curselect.has(flatMap.get(String(key))["parent"]))) {
+          hadselected.delete(key);
         }
-      },
-      changeArea(item) {
-        activeKey.value = item.key;
-        searchVal.value = "";
-        if (activeKey.value === 1) {
-          methods.search();
-        } else
-          emit("fetchList", false);
-      },
-      search() {
-        emit("fetchList", {
-          searchVal: searchVal.value,
-          area: areas[activeKey.value].paramStr
-        });
-      },
-      getSelectName(key) {
-        let data = props.dataMap.get(key) || null;
-        return data ? data.title : "\u672A\u77E5";
       }
-    };
-    vue.watch(
-      () => departmentChecked,
-      () => {
-        let flatMap = props.dataMap;
-        let curlistKeys = props.curlistKeys;
-        let hadselected = new Set(props.selected);
-        let curselect = new Set(departmentChecked.value);
-        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);
-          }
-        }
-        emit("update:selected", Array.from(hadselected));
-      },
-      { deep: true }
-    );
-    vue.watch(
-      () => staffsChecked,
-      () => {
-        let set = new Set(props.selected.length ? props.selected : null);
-        for (let [key, value] of Object.entries(staffsChecked.value)) {
-          if (value) {
-            set.add(key);
-          } else {
-            set.has(key) && set.delete(key);
-          }
-        }
-        emit("update:selected", Array.from(set));
-      },
-      { deep: true }
-    );
-    vue.watch(
-      () => shopChecked,
-      () => {
-        let set = new Set(props.selected.length ? props.selected : null);
-        for (let [key, value] of Object.entries(shopChecked.value)) {
-          if (value) {
-            set.add(key);
-          } else {
-            set.has(key) && set.delete(key);
-          }
-        }
-        emit("update:selected", Array.from(set));
-      },
-      { deep: true }
-    );
-    vue.watch(
-      () => groupChecked,
-      () => {
-        let set = new Set(props.selected.length ? props.selected : null);
-        for (let [key, value] of Object.entries(groupChecked.value)) {
-          if (value) {
-            set.add(key);
-          } else {
-            set.has(key) && set.delete(key);
-          }
+      for (let key of curselect) {
+        let obj = flatMap.get(String(key));
+        if (obj && !curselect.has(obj["parent"])) {
+          hadselected.add(String(key));
         }
-        emit("update:selected", Array.from(set));
-      },
-      { deep: true }
-    );
-    vue.onMounted(() => {
-      let list = props.selected;
-      list && list.forEach((key) => {
-        staffsChecked.value[key] = true;
-        groupChecked.value[key] = true;
-        shopChecked.value[key] = true;
-        departmentChecked.value.push(key);
-      });
-    });
+      }
+      selectState.departmentChecked = Array.from(hadselected) || [];
+    }
     return {
+      indicator,
+      loading,
       emptyPic,
-      activeKey,
+      areas,
       searchVal,
-      staffsChecked,
-      groupChecked,
-      departmentChecked,
-      shopChecked,
+      search,
+      changeArea,
       inputPlaceHolder,
-      areas,
-      ...methods
+      changeTreeCheck,
+      ...vue.toRefs(selectState)
     };
   }
 });
 const _hoisted_1$1 = { class: "varied-selector-panel" };
-const _hoisted_2 = { class: "__selector-modal-panel-withGroup" };
-const _hoisted_3 = { class: "varied-area-tabs" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "area-panel" };
-const _hoisted_6 = {
+const _hoisted_2$1 = { class: "__selector-modal-panel-withGroup" };
+const _hoisted_3$1 = { class: "varied-area-tabs" };
+const _hoisted_4$1 = ["onClick"];
+const _hoisted_5$1 = { class: "area-panel" };
+const _hoisted_6$1 = {
   key: 0,
   class: "noData"
 };
@@ -614,7 +513,8 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = {
   key: 1,
-  class: "__selector-modal-options"
+  class: "__selector-modal-options",
+  style: { "overflow": "auto" }
 };
 const _hoisted_10 = { class: "department-option-item" };
 const _hoisted_11 = {
@@ -629,25 +529,22 @@ const _hoisted_13 = {
   key: 3,
   class: "__selector-modal-options"
 };
-const _hoisted_14 = { class: "__selector-chosen-panel" };
-const _hoisted_15 = { class: "__chosen-panel-list" };
-const _hoisted_16 = { class: "__tiem-title" };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_search_outlined = vue.resolveComponent("search-outlined");
   const _component_a_input = vue.resolveComponent("a-input");
   const _component_Empty = vue.resolveComponent("Empty");
   const _component_Checkbox = vue.resolveComponent("Checkbox");
+  const _component_Spin = vue.resolveComponent("Spin");
   const _component_a_tree = vue.resolveComponent("a-tree");
-  const _component_CloseCircleFilled = vue.resolveComponent("CloseCircleFilled");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-    vue.createElementVNode("div", _hoisted_2, [
-      vue.createElementVNode("div", _hoisted_3, [
+    vue.createElementVNode("div", _hoisted_2$1, [
+      vue.createElementVNode("div", _hoisted_3$1, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.areas, (item) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: item.key,
             class: vue.normalizeClass(["area-tabs-item", { active: item.key === _ctx.activeKey }]),
             onClick: vue.withModifiers(($event) => _ctx.changeArea(item), ["stop"])
-          }, vue.toDisplayString(item.title), 11, _hoisted_4);
+          }, vue.toDisplayString(item.title), 11, _hoisted_4$1);
         }), 128))
       ]),
       vue.createVNode(_component_a_input, {
@@ -661,8 +558,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }, 8, ["value", "placeholder", "onChange"]),
-      vue.createElementVNode("div", _hoisted_5, [
-        _ctx.list && !_ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+      vue.createElementVNode("div", _hoisted_5$1, [
+        _ctx.list && !_ctx.list.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
           vue.createVNode(_component_Empty, { image: _ctx.emptyPic }, {
             description: vue.withCtx(() => [
               vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(!!_ctx.searchVal ? "\u6682\u65E0\u6570\u636E" : "\u8BF7\u5148\u641C\u7D22\u4EBA\u5458\u5173\u952E\u5B57"), 1)
@@ -689,12 +586,17 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
               ]);
             }), 128))
           ])) : _ctx.activeKey === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+            vue.createVNode(_component_Spin, {
+              indicator: _ctx.indicator,
+              spinning: _ctx.loading
+            }, null, 8, ["indicator", "spinning"]),
+            vue.createCommentVNode("  "),
             vue.createVNode(_component_a_tree, {
-              checkedKeys: _ctx.departmentChecked,
-              "onUpdate:checkedKeys": _cache[1] || (_cache[1] = ($event) => _ctx.departmentChecked = $event),
-              "default-expand-all": _ctx.searchVal === "",
+              "checked-keys": _ctx.departmentChecked,
+              "default-expand-all": false,
               checkable: "",
-              "tree-data": _ctx.list
+              "tree-data": _ctx.list,
+              onCheck: _ctx.changeTreeCheck
             }, {
               title: vue.withCtx(({ title, description }) => [
                 vue.createElementVNode("div", _hoisted_10, [
@@ -703,7 +605,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               _: 1
-            }, 8, ["checkedKeys", "default-expand-all", "tree-data"])
+            }, 8, ["checked-keys", "tree-data", "onCheck"])
           ])) : _ctx.activeKey === 2 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (item) => {
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -743,214 +645,342 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           ])) : vue.createCommentVNode("v-if", true)
         ], 64))
       ])
-    ]),
-    vue.createElementVNode("div", _hoisted_14, [
-      vue.createElementVNode("div", _hoisted_15, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            key: item + "checked",
-            class: "__chosen-panel-list-item"
-          }, [
-            vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(_ctx.getSelectName(item)), 1),
-            vue.createVNode(_component_CloseCircleFilled, {
-              onMousedown: vue.withModifiers(($event) => _ctx.deleteOption(item), ["stop"])
-            }, null, 8, ["onMousedown"])
-          ]);
-        }), 128))
-      ])
     ])
   ]);
 }
-var VariedCmp = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "variedCmp.vue"]]);
+var VariedCmp = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "variedCmp.vue"]]);
 
-const MODE = {
-  RADIO: "radio",
-  MULTIPLE: "multiple",
-  VARIED: "varied"
+const _hoisted_1 = { class: "selector-content" };
+const _hoisted_2 = {
+  key: 3,
+  class: "__selector-chosen-panel"
 };
-const _sfc_main = vue.defineComponent({
-  name: "BmStaffsSelector",
-  components: { AModal: AModal__default["default"], multipleCmp, radioCmp, VariedCmp },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    mode: {
-      type: String,
-      default: MODE.MULTIPLE
-    },
-    limit: {
-      type: Number,
-      default: 0
-    },
-    title: {
-      type: String,
-      default: "\u4EBA\u5458\u9009\u62E9\u5668"
-    },
-    load: {
-      type: Function,
-      default: () => {
-        return Promise.resolve([]);
+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__ */ vue.defineComponent({
+  __name: "staffs-selector",
+  props: selectProps,
+  emits: ["update:visible", "update:select", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const selected = vue.ref([]);
+    const computeSelected = vue.computed(() => {
+      let list2 = [];
+      if (props.mode === MODE.MULTIPLE) {
+        if (multipTree.value) {
+          return [...selectState.multipDepartment];
+        }
+        for (let [key, value] of Object.entries(selectState.multipleChecked)) {
+          value && list2.push(String(key));
+        }
+        return list2;
+      } else if (props.mode === MODE.VARIED) {
+        list2 = list2.concat(selectState.departmentChecked);
+        for (let [key, value] of Object.entries(selectState.staffsChecked)) {
+          value && list2.push(String(key));
+        }
+        for (let [key, value] of Object.entries(selectState.shopChecked)) {
+          value && list2.push(String(key));
+        }
+        for (let [key, value] of Object.entries(selectState.groupChecked)) {
+          value && list2.push(String(key));
+        }
+        return list2;
       }
-    },
-    select: {
-      type: Array || Object,
-      defualt: () => []
-    },
-    forceStatic: {
-      type: Boolean,
-      default: false
-    },
-    immediateFetch: {
-      type: Boolean,
-      default: false
-    },
-    showCount: {
-      type: Boolean,
-      default: true
-    },
-    unitStr: {
-      type: String,
-      default: "\u4EBA"
+      return [];
+    });
+    const multipTree = vue.ref(false);
+    const width = vue.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 = [];
     }
-  },
-  emits: ["update:visible", "update:select"],
-  setup(props, { emit }) {
-    const methods = {
-      modalCancel() {
-        emit("update:visible", !props.visible);
-      },
-      fetch(params) {
-        if (typeof params === "boolean") {
-          state.list = [];
-        } else {
-          props.load(params).then((data) => {
-            state.list = data.map((item) => {
-              return item;
-            });
-            state.dataMap = methods.flatListFunc(data);
-          });
+    function isCurrentFetch(area) {
+      let activeKey = 0;
+      activeKey = area === "department" ? 1 : activeKey;
+      activeKey = area === "group" ? 2 : activeKey;
+      activeKey = area === "shop" ? 3 : activeKey;
+      return selectState.activeKey === activeKey;
+    }
+    function fetch(params) {
+      list.value = [];
+      if (typeof params !== "boolean") {
+        let isDepartTree = params.area === "department" || props.mode === MODE.MULTIPLE && multipTree.value;
+        if (isDepartTree && departNative.value.length) {
+          if (props.mode === MODE.VARIED && !params.searchVal || params.searchVal === "") {
+            list.value = isCurrentFetch(params.area || "") ? [...departNative.value] : [];
+            return;
+          } else {
+            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 = isCurrentFetch(params?.area || "") ? result : [];
+            return;
+          }
         }
-      },
-      flatListFunc(list) {
-        let queue = [...list];
-        let map = new Map(state.dataMap);
-        let curlistKeys = /* @__PURE__ */ new Set();
-        let treedata = false;
-        while (queue.length) {
-          let curnode = queue.shift();
-          map.set(curnode.key, curnode);
-          curlistKeys.add(curnode.key);
-          let children = curnode.children;
-          if (children) {
-            children = children.map((obj) => {
-              treedata = true;
-              obj["parent"] = curnode && curnode.key || null;
-              return obj;
-            });
+        props.load(params).then((data) => {
+          if (data && data.length) {
+            if (params.area && params.area === "department") {
+              departNative.value = data;
+              fetch(params);
+            } else {
+              let result = data.map((item) => {
+                return item;
+              });
+              list.value = isCurrentFetch(params.area) ? result : [];
+            }
+            selectState.dataMap = flatListFunc(data);
+          } else {
+            list.value = [];
           }
-          queue = queue.concat(children || []);
+        });
+      } else {
+        if (props.mode === MODE.MULTIPLE && multipTree.value) {
+          list.value = [...departNative.value];
         }
-        state.multipTree = props.forceStatic ? false : treedata;
-        state.curlistKeys = curlistKeys;
-        return map;
-      },
-      summitSelect() {
-        if (["string", "number"].includes(typeof state.selected)) {
-          emit("update:select", [state.dataMap.get(state.selected)]);
-        } else if (state.selected instanceof Array) {
-          emit(
-            "update:select",
-            state.selected.map((item) => state.dataMap.get(item))
-          );
-        } else ;
-        state.list = [];
-        methods.modalCancel();
       }
-    };
-    const state = vue.reactive({
-      list: [],
-      selected: props.mode === "radio" ? "" : [],
-      dataMap: /* @__PURE__ */ new Map(),
-      curlistKeys: /* @__PURE__ */ new Set(),
-      multipTree: false,
-      width: vue.computed(() => {
-        if (props.mode === MODE.MULTIPLE) {
-          return 648;
-        } else if (props.mode === MODE.RADIO) {
-          return 480;
+    }
+    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;
+          });
         }
-        return 648;
-      })
-    });
+        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) {
+        let arr = computeSelected.value.map((key) => findDataByKey(key));
+        emit("update:select", arr);
+        emit("change", arr);
+      } else if (props.mode === MODE.VARIED) {
+        let department = selectState.departmentChecked.map((key) => {
+          let data = findDataByKey(key);
+          return { ...data, area: "department" };
+        });
+        let group = [];
+        for (let key in selectState.groupChecked) {
+          let data = findDataByKey(key);
+          group.push({ ...data, area: "group" });
+        }
+        let shop = [];
+        for (let key in selectState.shopChecked) {
+          let data = findDataByKey(key);
+          shop.push({ ...data, area: "shop" });
+        }
+        let staff = [];
+        for (let key in selectState.staffsChecked) {
+          let data = findDataByKey(key);
+          staff.push({ ...data, area: "staff" });
+        }
+        let arr = [...department, ...group, ...shop, ...staff];
+        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 {
+          let index = selectState.multipDepartment.findIndex(
+            (item) => String(item) === String(key)
+          );
+          index > -1 && selectState.multipDepartment.splice(index, 1);
+        }
+      } else if (props.mode === MODE.VARIED) {
+        if (selectState.staffsChecked[String(key)]) {
+          selectState.staffsChecked[String(key)] = false;
+        } else if (selectState.shopChecked[String(key)]) {
+          selectState.shopChecked[String(key)] = false;
+        } else if (selectState.groupChecked[String(key)]) {
+          selectState.groupChecked[String(key)] = false;
+        } else {
+          let index = selectState.departmentChecked.findIndex(
+            (item) => String(item) === String(key)
+          );
+          index > -1 && selectState.departmentChecked.splice(index, 1);
+        }
+      }
+    }
     vue.watch(
       () => props.visible,
       (val) => {
+        if (val) {
+          if (props.mode === "radio") {
+            selected.value = "";
+          } else {
+            let arr = props.select;
+            selected.value = arr.length ? arr.map((item) => String(item?.key)) : [];
+            if (props.mode === MODE.MULTIPLE) {
+              let multipleChecked = {};
+              arr.forEach(
+                (item) => multipleChecked[String(item?.key)] = true
+              );
+              selectState.multipleChecked = multipleChecked;
+            } else if (props.mode === MODE.VARIED) {
+              let department = [];
+              let shop = {};
+              let staff = {};
+              let group = {};
+              arr.forEach((item) => {
+                if (item["area"] && item["area"] === "department")
+                  department.push(String(item?.key));
+                else if (item["area"] && item["area"] === "shop")
+                  shop[String(item?.key)] = true;
+                else if (item["area"] && item["area"] === "staff")
+                  staff[String(item?.key)] = true;
+                else if (item["area"] && item["area"] === "group")
+                  group[String(item?.key)] = true;
+              });
+              selectState.departmentChecked = department;
+              selectState.shopChecked = shop;
+              selectState.staffsChecked = staff;
+              selectState.groupChecked = group;
+            }
+          }
+        } else {
+          selected.value = [];
+          selectState.multipleChecked = {};
+          selectState.departmentChecked = [];
+          selectState.shopChecked = {};
+          selectState.staffsChecked = {};
+          selectState.groupChecked = {};
+          selectState.activeKey = 0;
+        }
         if (val && props.immediateFetch) {
-          methods.fetch({});
+          fetch({});
         }
       },
-      { immediate: true }
+      { immediate: true, deep: true }
     );
-    return {
-      ...methods,
-      ...vue.toRefs(state)
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(AModal__default["default"]), {
+        class: "staffs-selector-modal",
+        title: _ctx.title,
+        visible: _ctx.visible,
+        width: vue.unref(width),
+        "ok-text": "\u786E\u5B9A",
+        "cancel-text": "\u53D6\u6D88",
+        "destroy-on-close": true,
+        onCancel: modalCancel,
+        onOk: summitSelect
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            _ctx.mode === "radio" ? (vue.openBlock(), vue.createBlock(radioCmp, {
+              key: 0,
+              selected: selected.value,
+              "onUpdate:selected": _cache[0] || (_cache[0] = ($event) => selected.value = $event),
+              list: vue.unref(list),
+              onFetchList: fetch
+            }, null, 8, ["selected", "list"])) : _ctx.mode === "varied" ? (vue.openBlock(), vue.createBlock(VariedCmp, {
+              key: 1,
+              selected: selected.value,
+              "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => selected.value = $event),
+              list: vue.unref(list),
+              "show-count": _ctx.showCount,
+              onFetchList: fetch
+            }, null, 8, ["selected", "list", "show-count"])) : (vue.openBlock(), vue.createBlock(multipleCmp, {
+              key: 2,
+              selected: selected.value,
+              "onUpdate:selected": _cache[2] || (_cache[2] = ($event) => selected.value = $event),
+              limit: _ctx.limit,
+              list: vue.unref(list),
+              "is-tree": multipTree.value,
+              onFetchList: fetch
+            }, null, 8, ["selected", "limit", "list", "is-tree"])),
+            ["multiple", "varied"].includes(_ctx.mode) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+              _ctx.showCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                vue.createElementVNode("span", null, "\u5DF2\u9009\u62E9" + vue.toDisplayString(vue.unref(computeSelected) && vue.unref(computeSelected).length || 0) + vue.toDisplayString(_ctx.$props.unitStr), 1),
+                _ctx.limit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, "\u6700\u591A\u9009\u62E9" + vue.toDisplayString(_ctx.limit) + vue.toDisplayString(_ctx.$props.unitStr), 1)) : vue.createCommentVNode("v-if", true)
+              ])) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("div", _hoisted_5, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(computeSelected), (item) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: item + "checked",
+                    class: "__chosen-panel-list-item"
+                  }, [
+                    vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(getOptionName(item)), 1),
+                    vue.createVNode(vue.unref(iconsVue.CloseCircleFilled), {
+                      style: { "color": "#ced1d9" },
+                      onMousedown: vue.withModifiers(($event) => deleteOptions(item), ["stop"])
+                    }, null, 8, ["onMousedown"])
+                  ]);
+                }), 128))
+              ])
+            ])) : vue.createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["title", "visible", "width"]);
     };
   }
 });
-const _hoisted_1 = { class: "selector-content" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_radioCmp = vue.resolveComponent("radioCmp");
-  const _component_VariedCmp = vue.resolveComponent("VariedCmp");
-  const _component_multipleCmp = vue.resolveComponent("multipleCmp");
-  const _component_AModal = vue.resolveComponent("AModal");
-  return vue.openBlock(), vue.createBlock(_component_AModal, {
-    class: "staffs-selector-modal",
-    title: _ctx.title,
-    visible: _ctx.visible,
-    width: _ctx.width,
-    "ok-text": "\u786E\u5B9A",
-    "cancel-text": "\u53D6\u6D88",
-    "destroy-on-close": true,
-    onCancel: _ctx.modalCancel,
-    onOk: _ctx.summitSelect
-  }, {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("div", _hoisted_1, [
-        _ctx.mode === "radio" ? (vue.openBlock(), vue.createBlock(_component_radioCmp, {
-          key: 0,
-          selected: _ctx.selected,
-          "onUpdate:selected": _cache[0] || (_cache[0] = ($event) => _ctx.selected = $event),
-          list: _ctx.list,
-          onFetchList: _ctx.fetch
-        }, null, 8, ["selected", "list", "onFetchList"])) : _ctx.mode === "varied" ? (vue.openBlock(), vue.createBlock(_component_VariedCmp, {
-          key: 1,
-          selected: _ctx.selected,
-          "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => _ctx.selected = $event),
-          list: _ctx.list,
-          "curlist-keys": _ctx.curlistKeys,
-          "data-map": _ctx.dataMap,
-          onFetchList: _ctx.fetch
-        }, null, 8, ["selected", "list", "curlist-keys", "data-map", "onFetchList"])) : (vue.openBlock(), vue.createBlock(_component_multipleCmp, {
-          key: 2,
-          selected: _ctx.selected,
-          "onUpdate:selected": _cache[2] || (_cache[2] = ($event) => _ctx.selected = $event),
-          limit: _ctx.limit,
-          list: _ctx.list,
-          "curlist-keys": _ctx.curlistKeys,
-          "is-tree": _ctx.multipTree,
-          "data-map": _ctx.dataMap,
-          "show-count": _ctx.showCount,
-          "unit-str": _ctx.unitStr,
-          onFetchList: _ctx.fetch
-        }, null, 8, ["selected", "limit", "list", "curlist-keys", "is-tree", "data-map", "show-count", "unit-str", "onFetchList"]))
-      ])
-    ]),
-    _: 1
-  }, 8, ["title", "visible", "width", "onCancel", "onOk"]);
-}
-var staffsSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "staffs-selector.vue"]]);
+var staffsSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "staffs-selector.vue"]]);
 
 const BmStaffsSelector = withInstall.withInstall(staffsSelector);