@king-one/antdv 1.1.13 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @king-one/antdv
 
+## 1.2.0
+
+### Minor Changes
+
+- 增加用户选择器
+
+## 2.0.0
+
+### Major Changes
+
+- 增加用户选择器组件
+
 ## 1.1.13
 
 ### Patch Changes

package/dist/es/components/index.mjs

@@ -17,6 +17,8 @@ import "./pro-loading/index.mjs";
 import { KPlusUpload } from "./plus-upload/index.mjs";
 import { KProOverlay } from "./pro-overlay/index.mjs";
 import { KProSign } from "./pro-sign/index.mjs";
+import "./pro-selector/index.mjs";
+import { KUserAvatar } from "./pro-user-avatar/index.mjs";
 export {
   KCollapseTranstion,
   KCoverScrollBar,
@@ -36,5 +38,6 @@ export {
   KProTitle,
   KProUpload,
   KScaleVirtualList,
-  KScrollBar
+  KScrollBar,
+  KUserAvatar
 };

package/dist/es/components/pro-selector/index.mjs

@@ -0,0 +1,8 @@
+import ProUserSelector from "./src/pro-user.mjs";
+import "./style/index.mjs";
+import "./src/types.mjs";
+import "./src/hooks/index.mjs";
+ProUserSelector.GTE_ORGTREE_URL = "/security/dept/user/tree";
+export {
+  ProUserSelector
+};

package/dist/es/components/pro-selector/src/components/org-tree.mjs

@@ -0,0 +1,304 @@
+import { isVNode, defineComponent, ref, watch, createVNode, Fragment, createTextVNode, onMounted } from "vue";
+import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
+import "../../../index.mjs";
+import { Modal, Empty, Breadcrumb, BreadcrumbItem, Skeleton } from "ant-design-vue";
+import { uid } from "@king-one/utils";
+import { debounce, uniqueById, formatOrgTree } from "../utils/orgTree.mjs";
+import User from "./user.mjs";
+import { KIcon } from "../../../icon/index.mjs";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const {
+  b
+} = useNamespace("pro-user-selector");
+const OrgTree = /* @__PURE__ */ defineComponent({
+  name: "OrgTree",
+  props: {
+    selectUserList: {
+      type: Array,
+      default: () => []
+    },
+    initUserList: {
+      type: Array,
+      default: () => []
+    },
+    keyword: {
+      type: String,
+      default: ""
+    },
+    initData: {
+      type: Function,
+      default: () => Promise.resolve([])
+    },
+    maxCount: {
+      type: Number,
+      default: 25
+    }
+  },
+  emits: {
+    "update:selectUserList": (list) => list
+  },
+  setup(props, {
+    emit,
+    expose
+  }) {
+    const initData = ref([]);
+    const currentViewDept = ref({});
+    const breadCrumbList = ref([]);
+    const currentBreadCrumbItem = ref({});
+    const keywordUserList = ref([]);
+    const isSearching = ref(false);
+    const debouncedHandleKeywordChange = debounce((keyword) => {
+      const list = [];
+      const loop = (data) => {
+        for (const item of data) {
+          if (item.members && item.members.length > 0) {
+            for (const member of item.members) {
+              if (member.realName.includes(keyword)) {
+                list.push(member);
+              }
+            }
+          }
+          if (item.children && item.children.length > 0) {
+            loop(item.children);
+          }
+        }
+      };
+      loop(initData.value);
+      keywordUserList.value = uniqueById(list);
+      isSearching.value = keyword !== "";
+    }, 300);
+    watch(() => props.keyword, (newVal, oldVal) => {
+      if (newVal === "") {
+        debouncedHandleKeywordChange.cancel();
+        isSearching.value = false;
+        keywordUserList.value = [];
+        return;
+      }
+      if (newVal !== oldVal) {
+        debouncedHandleKeywordChange(newVal);
+      }
+    });
+    const deleteDeptUser = (id) => {
+      var _a;
+      (_a = currentViewDept.value.members) == null ? void 0 : _a.forEach((member) => {
+        if (member.id === id) {
+          member.checked = false;
+        }
+      });
+      keywordUserList.value = keywordUserList.value.map((item) => {
+        if (item.id === id) {
+          item.checked = false;
+        }
+        return item;
+      });
+    };
+    const handleChangeCheckedValue = (checked, info) => {
+      if (props.selectUserList.length === props.maxCount) {
+        info.checked = false;
+        Modal.warning({
+          title: "温馨提示",
+          content: `最多只能选择${props.maxCount}个用户`
+        });
+        return;
+      }
+      emit("update:selectUserList", checked ? [...props.selectUserList, info] : props.selectUserList.filter((item) => item.id !== info.id));
+    };
+    const handleClickOrgItem = (item) => {
+      var _a;
+      if (item.parentId === "root") {
+        breadCrumbList.value.push({
+          id: uid(32),
+          deptName: "组织内联系人",
+          children: initData.value[0].children,
+          members: initData.value[0].members
+        });
+      } else {
+        breadCrumbList.value.push(item);
+      }
+      (_a = item.members) == null ? void 0 : _a.forEach((member) => {
+        member.checked = props.selectUserList.some((val) => val.id === member.id);
+      });
+      currentViewDept.value = item;
+      currentBreadCrumbItem.value = item;
+    };
+    const handleClickBreadCrumbItem = (item, _index) => {
+      var _a;
+      let dept = {};
+      if (currentBreadCrumbItem.value.id === item.id) {
+        console.log(`当前组织架构树展示的视图已经是《${item.deptName}》部门下面的数据`);
+        return;
+      }
+      if (_index === 0) {
+        dept = {
+          children: initData.value
+        };
+        breadCrumbList.value = [{
+          id: uid(32),
+          deptName: "联系人",
+          children: initData.value
+        }];
+      } else if (_index === 1) {
+        dept = initData.value[0];
+        breadCrumbList.value = breadCrumbList.value.slice(0, 2);
+      } else {
+        dept = item;
+        const index = breadCrumbList.value.findIndex((val) => val.id === item.id);
+        if (index !== -1) {
+          breadCrumbList.value = breadCrumbList.value.slice(0, index + 1);
+        }
+      }
+      (_a = dept.members) == null ? void 0 : _a.forEach((member) => {
+        member.checked = props.selectUserList.some((val) => val.id === member.id);
+      });
+      currentViewDept.value = dept;
+    };
+    const getOrgTitle = (item) => {
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": b("org-tree-item-title")
+      }, [item.parentId === "root" ? createVNode(KIcon, {
+        "name": "zuzhijiagou",
+        "size": 18,
+        "color": "#00d6b9"
+      }, null) : createVNode("div", {
+        "class": b("org-tree-dept-icon")
+      }, [createVNode(KIcon, {
+        "name": "zuzhijiagou",
+        "size": 18,
+        "color": "#ffffff"
+      }, null)], 2), createVNode("div", {
+        "class": b("org-tree-item-title-text")
+      }, [item.deptName, item.parentId !== "root" && createVNode(Fragment, null, [createTextVNode("("), item.members && item.members.length > 0 ? item.members.length : 0, createTextVNode(")")])], 2)], 2), item.parentId === "root" ? createVNode(KIcon, {
+        "name": "right",
+        "size": 14,
+        "color": "#bbbfc4"
+      }, null) : createVNode("a", {
+        "style": "width: 50px",
+        "href": "javascript:void(0)"
+      }, [createTextVNode("下级")])]);
+    };
+    const getUserList = (objData) => {
+      var _a;
+      return createVNode("div", {
+        "class": b("user-list")
+      }, [(_a = objData.members) == null ? void 0 : _a.map((member) => createVNode(User, {
+        "userInfo": member,
+        "onChange-checked": handleChangeCheckedValue
+      }, null, 8, ["userInfo", "onChange-checked"]))], 2);
+    };
+    const getOrgElement = (objData) => {
+      if (objData.parentId === "root" && breadCrumbList.value.length === 1) {
+        return createVNode("div", {
+          "class": b("org-tree-item"),
+          "onClick": () => handleClickOrgItem(objData)
+        }, [getOrgTitle(objData)], 10, ["onClick"]);
+      }
+      return createVNode(Fragment, null, [objData.children && objData.children.length > 0 ? objData.children.map((item) => createVNode("div", {
+        "class": b("org-tree-item"),
+        "onClick": () => handleClickOrgItem(item)
+      }, [getOrgTitle(item)], 10, ["onClick"])) : null, getUserList(objData)]);
+    };
+    const getKeyordUserList = () => {
+      return createVNode("div", {
+        "class": b("user-list")
+      }, [keywordUserList.value.length > 0 ? keywordUserList.value.map((member) => createVNode(User, {
+        "userInfo": member,
+        "onChange-checked": handleChangeCheckedValue
+      }, {
+        name: () => createVNode("div", {
+          "style": "font-size: 14px;color: #000;"
+        }, [(member == null ? void 0 : member.realName.includes(props.keyword)) ? member == null ? void 0 : member.realName.split(props.keyword).map((part, index) => createVNode(Fragment, null, [part, index < (member == null ? void 0 : member.realName.split(props.keyword).length) - 1 && createVNode("span", {
+          "style": "color: red;"
+        }, [props.keyword])])) : member == null ? void 0 : member.realName]),
+        _: 1
+      }, 8, ["userInfo", "onChange-checked"])) : createVNode(Empty, {
+        "description": "暂无数据"
+      }, null)], 2);
+    };
+    const loading = ref(false);
+    let resolveDataLoaded;
+    const dataLoadPromise = new Promise((resolve) => {
+      resolveDataLoaded = resolve;
+    });
+    onMounted(async () => {
+      try {
+        loading.value = true;
+        initData.value = await props.initData();
+        formatOrgTree(initData.value);
+        loading.value = false;
+        resolveDataLoaded(initData.value);
+        currentViewDept.value = {
+          children: initData.value
+        };
+        breadCrumbList.value = [{
+          id: uid(32),
+          deptName: "联系人",
+          children: initData.value
+        }];
+        handleClickOrgItem(initData.value[0]);
+      } finally {
+        loading.value = false;
+      }
+    });
+    const getInitData = (_initData, orgData) => {
+      const list = [];
+      const loop = (data) => {
+        for (const item of data) {
+          if (item.members && item.members.length > 0) {
+            for (const member of item.members) {
+              if (_initData.some((val) => val.id === member.id)) {
+                member.checked = true;
+                list.push(member);
+              } else {
+                member.checked = false;
+              }
+            }
+          }
+          if (item.children && item.children.length > 0) {
+            loop(item.children);
+          }
+        }
+      };
+      loop(orgData);
+      emit("update:selectUserList", uniqueById(list));
+    };
+    expose({
+      deleteDeptUser,
+      getInitData,
+      dataLoadPromise
+    });
+    return () => {
+      let _slot;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "style": "padding:0 16px"
+      }, [breadCrumbList.value.length > 1 && !isSearching.value ? createVNode(Breadcrumb, {
+        "separator": ">",
+        "class": b("breadcrumb")
+      }, _isSlot(_slot = breadCrumbList.value.map((item, index) => createVNode(BreadcrumbItem, {
+        "onClick": () => handleClickBreadCrumbItem(item, index)
+      }, {
+        default: () => [index === breadCrumbList.value.length - 1 ? item.deptName : createVNode("a", {
+          "href": "javascript:void(0)"
+        }, [item.deptName])]
+      }, 8, ["onClick"]))) ? _slot : {
+        default: () => [_slot],
+        _: 1
+      }, 8, ["class"]) : null]), !isSearching.value ? createVNode("div", {
+        "class": b("org-tree")
+      }, [loading.value ? createVNode("div", {
+        "class": b("org-tree-item"),
+        "style": "height: 200px;display: block;"
+      }, [createVNode(Skeleton, {
+        "active": true,
+        "avatar": true
+      }, null, 8, ["active", "avatar"]), createVNode(Skeleton, {
+        "active": true,
+        "avatar": true
+      }, null, 8, ["active", "avatar"])], 2) : getOrgElement(currentViewDept.value)], 2) : createVNode(Fragment, null, [getKeyordUserList()])]);
+    };
+  }
+});
+export {
+  OrgTree as default
+};

package/dist/es/components/pro-selector/src/components/user.mjs

@@ -0,0 +1,92 @@
+import { isVNode, defineComponent, createVNode } from "vue";
+import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
+import { Checkbox } from "ant-design-vue";
+import "../../../index.mjs";
+import { KUserAvatar } from "../../../pro-user-avatar/index.mjs";
+import { KIcon } from "../../../icon/index.mjs";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const {
+  b
+} = useNamespace("pro-user-selector");
+const User = /* @__PURE__ */ defineComponent({
+  name: "User",
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    isChecked: {
+      type: Boolean,
+      default: true
+    },
+    isDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    "delete-user": (id) => id,
+    "change-checked": (checked, info) => checked
+  },
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const handleChangeChecked = (e) => {
+      emit("change-checked", e.target.checked, props.userInfo);
+    };
+    const getUserInfo = () => createVNode("div", {
+      "class": b("user-item-content")
+    }, [createVNode("div", {
+      "style": {
+        width: "100%",
+        display: "flex",
+        alignItems: "center"
+      }
+    }, [createVNode(KUserAvatar, {
+      "name": props.userInfo.realName ? props.userInfo.realName : "",
+      "avatar": props.userInfo.avatar,
+      "size": "default"
+    }, null, 8, ["name", "avatar"]), createVNode("div", null, [createVNode("div", {
+      "style": "display: flex;align-items: center;"
+    }, [slots.name ? slots.name() : createVNode("div", {
+      "style": "font-size: 14px;color: #000;"
+    }, [props.userInfo.realName]), props.userInfo.position && createVNode("div", {
+      "class": b("user-item-content-tag")
+    }, [props.userInfo.position], 2)]), createVNode("div", {
+      "style": {
+        fontSize: "12px",
+        color: "#8f959e",
+        lineHeight: "20px"
+      }
+    }, [props.userInfo.stageName])])]), props.isDelete && createVNode("div", {
+      "class": "select-user-item-icon",
+      "onClick": () => emit("delete-user", props.userInfo.id)
+    }, [createVNode(KIcon, {
+      "name": "shanchu",
+      "size": 12,
+      "color": "#2b2f36"
+    }, null)], 8, ["onClick"])], 2);
+    return () => {
+      let _slot;
+      return createVNode("div", {
+        "class": b("user-item")
+      }, [props.isChecked ? createVNode(Checkbox, {
+        "style": "margin: 0 6px;width: 100%;",
+        "checked": props.userInfo.checked,
+        "onUpdate:checked": ($event) => props.userInfo.checked = $event,
+        "onChange": handleChangeChecked
+      }, _isSlot(_slot = getUserInfo()) ? _slot : {
+        default: () => [_slot],
+        _: 1
+      }, 8, ["checked", "onUpdate:checked", "onChange"]) : createVNode("div", {
+        "style": "width: 100%;"
+      }, [getUserInfo()])], 2);
+    };
+  }
+});
+export {
+  User as default
+};

package/dist/es/components/pro-selector/src/hooks/index.mjs

@@ -0,0 +1,4 @@
+import { useUserSelector } from "./useUserSelector.mjs";
+export {
+  useUserSelector
+};

package/dist/es/components/pro-selector/src/hooks/useUserSelector.mjs

@@ -0,0 +1,9 @@
+function useUserSelector() {
+  const GTE_ORGTREE_URL = "/security/dept/user/tree";
+  return {
+    GTE_ORGTREE_URL
+  };
+}
+export {
+  useUserSelector
+};

package/dist/es/components/pro-selector/src/pro-user.mjs

@@ -0,0 +1,210 @@
+import { defineComponent, ref, watch, nextTick, createVNode, createTextVNode } from "vue";
+import "../../index.mjs";
+import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
+import { Input, Empty } from "ant-design-vue";
+import OrgTree from "./components/org-tree.mjs";
+import User from "./components/user.mjs";
+import { KProModal } from "../../pro-modal/index.mjs";
+import { KIcon } from "../../icon/index.mjs";
+import { KUserAvatar } from "../../pro-user-avatar/index.mjs";
+const {
+  b
+} = useNamespace("pro-user-selector");
+const ns = useNamespace("user-selector-extermal");
+const ProUserSelector = /* @__PURE__ */ defineComponent({
+  name: "ProUserSelector",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    maxCount: {
+      type: Number,
+      default: 25
+    },
+    /** @description 单选还是多选，默认多选，单选逻辑后续在实现，单选感觉不能使用当前的 UI 展示 */
+    type: {
+      type: String,
+      default: "checkbox"
+    },
+    load: {
+      type: Function,
+      default: () => Promise.resolve([])
+    }
+  },
+  emits: {
+    "update:visible": (visible) => true,
+    "update:modelValue": (modelValue) => true,
+    "delete-user": (id) => true,
+    "confirm": (modelValue) => true,
+    "cancel": () => true
+  },
+  setup(props, {
+    emit,
+    slots,
+    expose,
+    attrs
+  }) {
+    const searchValue = ref("");
+    const selectUserList = ref([]);
+    const orgTreeRef = ref();
+    const userListRef = ref(null);
+    const localModelValue = ref(props.modelValue || []);
+    const isInternalUpdate = ref(false);
+    watch(() => props.modelValue, (newValue) => {
+      if (isInternalUpdate.value) {
+        isInternalUpdate.value = false;
+      } else {
+        localModelValue.value = JSON.parse(JSON.stringify(newValue));
+        nextTick(() => {
+          handleExternalDataChange(localModelValue.value);
+        });
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    watch(selectUserList, (newVal, oldVal) => {
+      if (newVal.length > oldVal.length) {
+        nextTick(() => {
+          if (userListRef.value) {
+            userListRef.value.scrollTop = userListRef.value.scrollHeight;
+          }
+        });
+      }
+    }, {
+      deep: true
+    });
+    async function handleExternalDataChange(data) {
+      if (orgTreeRef.value) {
+        const orgData = await orgTreeRef.value.dataLoadPromise;
+        orgTreeRef.value.getInitData(data, orgData);
+      }
+    }
+    const handleDeleteSelectUser = (id) => {
+      var _a;
+      selectUserList.value = selectUserList.value.filter((item) => item.id !== id);
+      (_a = orgTreeRef.value) == null ? void 0 : _a.deleteDeptUser(id);
+    };
+    const handleOpen = () => {
+      emit("update:visible", false);
+      emit("cancel");
+    };
+    const handleDelUser = (id) => {
+      emit("update:modelValue", props.modelValue.filter((user) => user.id !== id));
+    };
+    const handleConfirm = () => {
+      const list = selectUserList.value.map((item) => {
+        return {
+          id: item.id,
+          realName: item.realName || "",
+          avatar: item.avatar
+        };
+      });
+      emit("update:visible", false);
+      isInternalUpdate.value = true;
+      emit("update:modelValue", list);
+      emit("confirm", list);
+    };
+    expose({
+      deleteCheckedUser: handleDelUser
+    });
+    const renderModal = () => createVNode(KProModal, {
+      "modelValue": props.visible,
+      "title": "选择联系人",
+      "modalProps": {
+        cancelText: "取消",
+        okText: "确定",
+        ...attrs
+      },
+      "onOnCancel": () => handleOpen(),
+      "onOnConfirm": () => handleConfirm()
+    }, {
+      default: () => [createVNode("div", {
+        "class": b()
+      }, [createVNode("div", {
+        "class": b("content-left")
+      }, [createVNode("div", {
+        "style": "padding: 16px 16px 0 16px"
+      }, [createVNode(Input, {
+        "value": searchValue.value,
+        "onUpdate:value": ($event) => searchValue.value = $event,
+        "size": "small",
+        "placeholder": "搜索",
+        "allowClear": true
+      }, {
+        prefix: () => createVNode(KIcon, {
+          "name": "search"
+        }, null),
+        _: 1
+      }, 8, ["value", "onUpdate:value", "allowClear"])]), createVNode(OrgTree, {
+        "ref": orgTreeRef,
+        "selectUserList": selectUserList.value,
+        "onUpdate:selectUserList": ($event) => selectUserList.value = $event,
+        "maxCount": props.maxCount,
+        "keyword": searchValue.value,
+        "initData": props.load
+      }, null, 8, ["selectUserList", "onUpdate:selectUserList", "maxCount", "keyword", "initData"])], 2), createVNode("div", {
+        "class": b("content-right")
+      }, [createVNode("div", {
+        "class": b("content-right-title")
+      }, [createTextVNode("已选:"), selectUserList.value.length, createTextVNode("/"), props.maxCount, createTextVNode("人")], 2), createVNode("div", {
+        "class": "select-user-list",
+        "ref": userListRef
+      }, [createVNode("div", {
+        "class": b("user-list")
+      }, [selectUserList.value.length > 0 ? selectUserList.value.map((item) => createVNode(User, {
+        "key": item.id,
+        "userInfo": item,
+        "isChecked": false,
+        "isDelete": true,
+        "onDelete-user": handleDeleteSelectUser
+      }, null, 8, ["userInfo", "isDelete", "onDelete-user"])) : createVNode(Empty, {
+        "image": Empty.PRESENTED_IMAGE_SIMPLE,
+        "description": "暂无数据"
+      }, null, 8, ["image"])], 2)], 512)], 2)], 2)]
+    }, 8, ["modelValue", "modalProps", "onOnCancel", "onOnConfirm"]);
+    const renderComponent = () => {
+      return createVNode("div", {
+        "class": ns.b()
+      }, [slots.default ? slots.default() : createVNode("div", {
+        "class": ns.b("list")
+      }, [createVNode("div", {
+        "class": ns.b("icon"),
+        "onClick": () => emit("update:visible", true)
+      }, [createVNode(KIcon, {
+        "name": "plus",
+        "size": 20,
+        "color": "#409eff"
+      }, null)], 10, ["onClick"]), props.modelValue.map((user) => {
+        return createVNode("div", {
+          "class": ns.b("item")
+        }, [createVNode(KUserAvatar, {
+          "name": user.realName,
+          "avatar": user.avatar,
+          "size": "small"
+        }, null, 8, ["name", "avatar"]), createVNode("span", {
+          "class": ns.be("item", "name")
+        }, [user.realName], 2), createVNode("div", {
+          "onClick": () => handleDelUser(user.id)
+        }, [createVNode(KIcon, {
+          "name": "shanchu",
+          "size": 18,
+          "color": "#646a73"
+        }, null)], 8, ["onClick"])], 2);
+      })], 2), renderModal()], 2);
+    };
+    return () => renderComponent();
+  }
+});
+export {
+  ProUserSelector as default
+};

package/dist/es/components/pro-selector/src/types.mjs

@@ -0,0 +1 @@
+