@king-one/antdv 1.1.11 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @king-one/antdv
 
+## 1.2.0
+
+### Minor Changes
+
+- 增加用户选择器
+
+## 2.0.0
+
+### Major Changes
+
+- 增加用户选择器组件
+
+## 1.1.13
+
+### Patch Changes
+
+- feat：增加 pro-sign 组件
+
+## 1.1.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @king-one/tapable@3.0.0
+
 ## 1.1.11
 
 ### Patch Changes

package/dist/es/components/index.mjs

@@ -16,6 +16,9 @@ import { KProContractView } from "./pro-contract-view/index.mjs";
 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,
@@ -28,11 +31,13 @@ export {
   KProModal,
   KProOverlay,
   KProPicker,
+  KProSign,
   KProSignature,
   KProTable,
   KProTag,
   KProTitle,
   KProUpload,
   KScaleVirtualList,
-  KScrollBar
+  KScrollBar,
+  KUserAvatar
 };

package/dist/es/components/pro-contract-view/apis/pro-contract-view.api.mjs

@@ -3,7 +3,7 @@ const proContractViewApi = {
   getSignPrefix: (config) => globalThis.$http.get(`/sign/uri/prefix`, config),
   getPreviewUrl: (preFix, config) => globalThis.$http.get(`${preFix}/redirect/contract-preview-url`, config),
   getFileList: (preFix, config) => globalThis.$http.get(`${preFix}/contract/file/detail/list`, config),
-  getFilePreview: (signPreFix, config) => globalThis.$http.get(`${signPreFix}//file/preview`, config)
+  getFilePreview: (signPreFix, config) => globalThis.$http.get(`${signPreFix}/file/preview`, config)
 };
 export {
   proContractViewApi

package/dist/es/components/pro-loading/src/pro-loading.mjs

@@ -57,7 +57,8 @@ function addStyle(instance, options = {}) {
     right: 0,
     bottom: 0,
     left: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    inset: "-1px",
+    backgroundColor: "rgba(255, 255, 255, .6)",
     display: "flex",
     justifyContent: "center",
     alignItems: "center"

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
+};