npm - cd-personselector - Versions diffs - 1.0.0 - Mend

cd-personselector 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +126 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +1 -0
package/dist/index.mjs +446 -0
package/dist/src/PersonSelector.vue.d.ts +116 -0
package/dist/src/types.d.ts +51 -0
package/dist/style.css +1 -0
package/package.json +48 -0
package/src/PersonSelector.vue +819 -0
package/src/types.ts +64 -0

package/README.md ADDED Viewed

@@ -0,0 +1,126 @@
+# cd-personselector
+基于 Vue 3 + TDesign 的人员选择器组件，支持多 Tab、树形结构、搜索、懒加载等功能。
+## 安装
+```bash
+npm install cd-personselector
+```
+## 使用
+```vue
+<template>
+  <PersonSelector
+    v-model:visible="showSelector"
+    v-model="selectedIds"
+    :tabs="tabs"
+    :organizations="organizations"
+    tips="支持用户名、手机号、职务搜索"
+    @confirm="handleConfirm"
+    @load-users="handleLoadUsers"
+    @search="handleSearch"
+  />
+</template>
+<script setup>
+import { ref } from 'vue'
+import PersonSelector from 'cd-personselector'
+import 'cd-personselector/style.css'
+const showSelector = ref(false)
+const selectedIds = ref([])
+const tabs = ref([
+  {
+    key: 'department',
+    name: '按部门',
+    icon: 'folder',
+    tree: [
+      { id: 'dept-1', name: '研发部', userCount: 5 },
+      { id: 'dept-2', name: '产品部', userCount: 3 }
+    ]
+  },
+  {
+    key: 'external',
+    name: '外部联系人',
+    icon: 'usergroup',
+    tree: [
+      { id: 'ext-1', name: '客户A', isUser: true, phone: '13800001111' }
+    ]
+  }
+])
+const organizations = ref([
+  { id: 'org-1', name: '总公司' }
+])
+function handleConfirm(items) {
+  console.log('选中项:', items)
+}
+function handleLoadUsers({ tabKey, nodeId, callback }) {
+  // 异步加载用户数据
+  fetchUsers(nodeId).then(users => callback(users))
+}
+function handleSearch({ keyword, orgId, callback }) {
+  // 搜索用户
+  searchUsers(keyword).then(users => callback(users))
+}
+</script>
+```
+## Props
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | boolean | false | 控制弹窗显示 |
+| tabs | TabConfig[] | [] | Tab 配置数组 |
+| organizations | Organization[] | [] | 组织列表 |
+| modelValue | (string\|number)[] | [] | 选中的 ID 数组 |
+| dialogWidth | string | '900px' | 弹窗宽度 |
+| tips | string | '' | 顶部提示文字 |
+| showSearch | boolean | true | 是否显示搜索 |
+## Events
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| confirm | items: any[] | 确认选择时触发 |
+| load-users | { tabKey, nodeId, callback } | 点击"显示人员"时触发 |
+| search | { keyword, orgId, callback } | 搜索时触发 |
+## 类型定义
+```typescript
+interface TabConfig {
+  key: string
+  name: string
+  icon?: string
+  tree: TreeNode[]
+}
+interface TreeNode {
+  id: number | string
+  name: string
+  children?: TreeNode[]
+  userCount?: number
+  isUser?: boolean
+}
+interface User {
+  id: number | string
+  name: string
+  displayName?: string
+  phone?: string
+  position?: string
+  department?: string
+}
+```
+## 依赖
+- vue >= 3.0.0
+- tdesign-vue-next >= 1.0.0

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { default as PersonSelector } from './src/PersonSelector.vue';
+import { Plugin } from 'vue';
+declare const PersonSelectorPlugin: Plugin;
+export default PersonSelectorPlugin;
+export { PersonSelector };
+export * from './src/types';

package/dist/index.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,446 @@
+import { defineComponent as ye, ref as f, computed as z, watch as q, resolveComponent as _, createBlock as b, openBlock as a, withCtx as k, createElementVNode as n, createElementBlock as o, createCommentVNode as u, createVNode as r, toDisplayString as v, Fragment as E, renderList as L, createTextVNode as G, normalizeClass as W, withModifiers as te, nextTick as ge } from "vue";
+const Ce = { class: "person-selector" }, be = {
+  key: 0,
+  class: "selector-tips"
+}, xe = {
+  key: 1,
+  class: "search-area"
+}, Ue = {
+  key: 0,
+  class: "org-select"
+}, Ne = { class: "search-input" }, Se = { class: "content-area" }, Ve = { class: "left-panel tree-panel" }, Ie = {
+  key: 0,
+  class: "search-results"
+}, ze = { class: "search-results-header" }, Te = {
+  key: 0,
+  class: "search-loading"
+}, we = {
+  key: 1,
+  class: "empty-search"
+}, Re = {
+  key: 2,
+  class: "search-result-list"
+}, Be = ["onClick"], Oe = { class: "user-avatar" }, De = { class: "user-details" }, Pe = { class: "user-name" }, Ee = { class: "user-meta" }, Le = { key: 0 }, We = { key: 1 }, $e = { key: 2 }, Je = { class: "tree-container" }, Me = {
+  key: 0,
+  class: "user-count"
+}, Ae = {
+  key: 1,
+  class: "empty-tree"
+}, Fe = { class: "right-panel" }, je = { class: "selected-header" }, qe = { class: "header-count" }, Ge = { class: "selected-list-container" }, He = {
+  key: 0,
+  class: "empty-selected"
+}, Ke = {
+  key: 1,
+  class: "selected-user-list"
+}, Qe = { class: "user-info" }, Xe = { class: "user-details" }, Ye = { class: "user-name" }, Ze = { class: "user-meta" }, et = { key: 0 }, tt = { key: 1 }, st = { key: 2 }, lt = { key: 3 }, at = /* @__PURE__ */ ye({
+  __name: "PersonSelector",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    tabs: { default: () => [] },
+    organizations: { default: () => [] },
+    modelValue: { default: () => [] },
+    dialogWidth: { default: "900px" },
+    tips: { default: "" },
+    showSearch: { type: Boolean, default: !0 }
+  },
+  emits: ["update:visible", "update:modelValue", "confirm", "load-users", "search"],
+  setup(x, { expose: $, emit: O }) {
+    var Y, Z;
+    const d = x, C = O, U = f(d.visible), N = f(((Z = (Y = d.tabs) == null ? void 0 : Y[0]) == null ? void 0 : Z.key) || ""), T = f(null), S = f(""), c = f([]), J = f({}), M = f(!1), D = f(!1), V = f([]), se = z(() => d.tabs || []), H = z(() => d.organizations || []), K = z(() => d.tips || ""), le = z(() => d.showSearch), ae = z(() => d.dialogWidth), w = f({});
+    q(
+      () => d.tabs,
+      (s) => {
+        if (s && s.length > 0) {
+          const e = {};
+          s.forEach((l) => {
+            e[l.key] = JSON.parse(JSON.stringify(l.tree));
+          }), w.value = e, (!N.value || !s.find((l) => l.key === N.value)) && (N.value = s[0].key);
+        }
+      },
+      { immediate: !0, deep: !0 }
+    ), q(() => d.visible, (s) => {
+      U.value = s, s && (c.value = d.modelValue ? [...d.modelValue] : [], d.organizations.length > 0 && !T.value && (T.value = d.organizations[0].id));
+    }), q(U, (s) => {
+      C("update:visible", s);
+    });
+    function ne(s, e) {
+      e && (J.value[s] = e);
+    }
+    function Q(s, e) {
+      for (const l of s) {
+        if (l.id === e) return l;
+        if (l.children) {
+          const i = Q(l.children, e);
+          if (i) return i;
+        }
+      }
+      return null;
+    }
+    const R = z(() => {
+      const s = [];
+      return c.value.forEach((e) => {
+        const l = V.value.find((i) => i.id === e);
+        if (l) {
+          s.push({ ...l, typeName: "搜索结果" });
+          return;
+        }
+        for (const i of d.tabs) {
+          const p = w.value[i.key] || [], m = Q(p, e);
+          if (m) {
+            s.push({
+              ...m,
+              typeName: i.name
+            });
+            break;
+          }
+        }
+      }), s;
+    }), oe = () => {
+      S.value = "";
+    }, ie = () => {
+    };
+    let I = null;
+    const de = () => {
+      if (I && clearTimeout(I), !S.value.trim()) {
+        A();
+        return;
+      }
+      M.value = !0, D.value = !0, I = setTimeout(() => {
+        re();
+      }, 300);
+    }, re = () => {
+      V.value = [];
+      const s = (e) => {
+        V.value = e.map((l) => ({ ...l, isUser: !0 })), D.value = !1;
+      };
+      C("search", {
+        keyword: S.value,
+        orgId: T.value || void 0,
+        callback: s
+      });
+    }, A = () => {
+      I && (clearTimeout(I), I = null), M.value = !1, S.value = "", V.value = [], D.value = !1;
+    }, ce = (s) => {
+      const e = c.value.indexOf(s.id);
+      e > -1 ? c.value.splice(e, 1) : c.value.push(s.id);
+    };
+    function ue(s) {
+      const e = [], l = (i) => {
+        for (const p of i)
+          e.push(p.id), p.children && l(p.children);
+      };
+      return l(s), e;
+    }
+    const ve = (s) => {
+      const e = w.value[N.value] || [], l = ue(e), i = c.value.filter((p) => !l.includes(p));
+      c.value = [...i, ...s];
+    };
+    async function pe(s, e) {
+      const l = s.value, i = J.value[e];
+      C("load-users", { tabKey: e, nodeId: l, node: s, callback: async (m) => {
+        if (m.length > 0) {
+          const y = m.map((g) => {
+            const { id: B, name: F, ...j } = g;
+            return {
+              ...j,
+              id: B,
+              name: g.displayName || F,
+              isUser: !0
+            };
+          });
+          if (i) {
+            i.appendTo(l, y), s.data.loaded = !0, await ge();
+            try {
+              i.setItem(l, { expanded: !0 });
+            } catch (g) {
+              console.log("展开节点失败", g);
+            }
+          }
+        } else
+          s.data.loaded = !0;
+      } });
+    }
+    const he = (s) => {
+      c.value = c.value.filter((e) => e !== s);
+    }, X = () => {
+      c.value = [];
+    }, _e = () => {
+      C("update:modelValue", c.value), C("confirm", R.value), U.value = !1;
+    }, me = () => {
+      U.value = !1;
+    };
+    return $({
+      clearSelection: X,
+      appendUsers: (s, e, l) => {
+        const i = J.value[s];
+        if (i && l.length > 0) {
+          const p = l.map((m) => {
+            const { id: y, name: g, ...B } = m;
+            return {
+              ...B,
+              id: y,
+              name: m.displayName || g,
+              isUser: !0
+            };
+          });
+          i.appendTo(e, p);
+        }
+      }
+    }), (s, e) => {
+      const l = _("t-icon"), i = _("t-option"), p = _("t-select"), m = _("t-input"), y = _("t-button"), g = _("t-loading"), B = _("t-checkbox"), F = _("t-tree"), j = _("t-tab-panel"), fe = _("t-tabs"), ke = _("t-dialog");
+      return a(), b(ke, {
+        visible: U.value,
+        "onUpdate:visible": e[4] || (e[4] = (t) => U.value = t),
+        header: "选择人员",
+        width: ae.value,
+        footer: !0,
+        "destroy-on-close": "",
+        onConfirm: _e,
+        onClose: me
+      }, {
+        default: k(() => [
+          n("div", Ce, [
+            K.value ? (a(), o("div", be, [
+              r(l, { name: "info-circle" }),
+              n("span", null, v(K.value), 1)
+            ])) : u("", !0),
+            le.value ? (a(), o("div", xe, [
+              H.value.length > 0 ? (a(), o("div", Ue, [
+                r(p, {
+                  modelValue: T.value,
+                  "onUpdate:modelValue": e[0] || (e[0] = (t) => T.value = t),
+                  placeholder: "选择组织",
+                  style: { width: "200px" },
+                  onChange: ie
+                }, {
+                  default: k(() => [
+                    (a(!0), o(E, null, L(H.value, (t) => (a(), b(i, {
+                      key: t.id,
+                      value: t.id,
+                      label: t.displayName || t.name
+                    }, null, 8, ["value", "label"]))), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"])
+              ])) : u("", !0),
+              n("div", Ne, [
+                r(m, {
+                  modelValue: S.value,
+                  "onUpdate:modelValue": e[1] || (e[1] = (t) => S.value = t),
+                  placeholder: "搜索",
+                  clearable: "",
+                  onInput: de,
+                  onClear: A
+                }, {
+                  "prefix-icon": k(() => [
+                    r(l, { name: "search" })
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"])
+              ])
+            ])) : u("", !0),
+            n("div", Se, [
+              n("div", Ve, [
+                M.value ? (a(), o("div", Ie, [
+                  n("div", ze, [
+                    e[6] || (e[6] = n("span", null, "搜索结果", -1)),
+                    r(y, {
+                      size: "small",
+                      variant: "text",
+                      onClick: A
+                    }, {
+                      default: k(() => [...e[5] || (e[5] = [
+                        G("返回", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  D.value ? (a(), o("div", Te, [
+                    r(g),
+                    e[7] || (e[7] = n("span", null, "搜索中...", -1))
+                  ])) : V.value.length === 0 ? (a(), o("div", we, [
+                    r(l, {
+                      name: "search",
+                      size: "48px",
+                      style: { color: "#ddd" }
+                    }),
+                    e[8] || (e[8] = n("p", null, "未找到匹配的人员", -1))
+                  ])) : (a(), o("div", Re, [
+                    (a(!0), o(E, null, L(V.value, (t) => (a(), o("div", {
+                      key: t.id,
+                      class: W(["search-result-item", { "is-selected": c.value.includes(t.id) }]),
+                      onClick: (P) => ce(t)
+                    }, [
+                      r(B, {
+                        checked: c.value.includes(t.id),
+                        onClick: e[2] || (e[2] = te(() => {
+                        }, ["stop"]))
+                      }, null, 8, ["checked"]),
+                      n("div", Oe, [
+                        r(l, { name: "user" })
+                      ]),
+                      n("div", De, [
+                        n("div", Pe, v(t.displayName || t.name), 1),
+                        n("div", Ee, [
+                          t.position ? (a(), o("span", Le, v(t.position), 1)) : u("", !0),
+                          t.department ? (a(), o("span", We, v(t.department), 1)) : u("", !0),
+                          t.phone ? (a(), o("span", $e, v(t.phone), 1)) : u("", !0)
+                        ])
+                      ])
+                    ], 10, Be))), 128))
+                  ]))
+                ])) : (a(), b(fe, {
+                  key: 1,
+                  modelValue: N.value,
+                  "onUpdate:modelValue": e[3] || (e[3] = (t) => N.value = t),
+                  onChange: oe
+                }, {
+                  default: k(() => [
+                    (a(!0), o(E, null, L(se.value, (t) => (a(), b(j, {
+                      key: t.key,
+                      value: t.key,
+                      label: t.name
+                    }, {
+                      default: k(() => {
+                        var P;
+                        return [
+                          n("div", Je, [
+                            ((P = w.value[t.key]) == null ? void 0 : P.length) > 0 ? (a(), b(F, {
+                              key: 0,
+                              ref_for: !0,
+                              ref: (h) => ne(t.key, h),
+                              data: w.value[t.key],
+                              keys: { value: "id", label: "name", children: "children" },
+                              hover: "",
+                              checkable: "",
+                              "expand-all": !1,
+                              value: c.value,
+                              onChange: ve
+                            }, {
+                              label: k(({ node: h }) => {
+                                var ee;
+                                return [
+                                  n("div", {
+                                    class: W(["tree-node-label", { "is-user": h.data.isUser }])
+                                  }, [
+                                    r(l, {
+                                      name: h.data.isUser ? "user" : t.icon || "folder"
+                                    }, null, 8, ["name"]),
+                                    n("span", null, v(h.label), 1),
+                                    h.data.userCount && !h.data.isUser ? (a(), o("span", Me, "(" + v(h.data.userCount) + ")", 1)) : u("", !0),
+                                    !h.data.isUser && !((ee = h.data.children) != null && ee.length) && !h.data.loaded ? (a(), b(y, {
+                                      key: 1,
+                                      size: "small",
+                                      variant: "text",
+                                      class: "load-users-btn",
+                                      onClick: te((it) => pe(h, t.key), ["stop"])
+                                    }, {
+                                      default: k(() => [...e[9] || (e[9] = [
+                                        G(" 显示人员 ", -1)
+                                      ])]),
+                                      _: 1
+                                    }, 8, ["onClick"])) : u("", !0)
+                                  ], 2)
+                                ];
+                              }),
+                              _: 2
+                            }, 1032, ["data", "value"])) : (a(), o("div", Ae, [
+                              r(l, {
+                                name: t.icon || "folder-open",
+                                size: "48px",
+                                style: { color: "#ddd" }
+                              }, null, 8, ["name"]),
+                              e[10] || (e[10] = n("p", null, "暂无数据", -1))
+                            ]))
+                          ])
+                        ];
+                      }),
+                      _: 2
+                    }, 1032, ["value", "label"]))), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"]))
+              ]),
+              n("div", Fe, [
+                n("div", je, [
+                  e[12] || (e[12] = n("span", { class: "header-title" }, "已选择", -1)),
+                  n("span", qe, v(R.value.length) + " 项", 1),
+                  R.value.length > 0 ? (a(), b(y, {
+                    key: 0,
+                    size: "small",
+                    variant: "text",
+                    onClick: X
+                  }, {
+                    default: k(() => [...e[11] || (e[11] = [
+                      G("清空", -1)
+                    ])]),
+                    _: 1
+                  })) : u("", !0)
+                ]),
+                n("div", Ge, [
+                  R.value.length === 0 ? (a(), o("div", He, [
+                    r(l, {
+                      name: "user-checked",
+                      size: "64px",
+                      style: { color: "#ddd" }
+                    }),
+                    e[13] || (e[13] = n("p", null, "暂无选择", -1))
+                  ])) : (a(), o("div", Ke, [
+                    (a(!0), o(E, null, L(R.value, (t) => (a(), o("div", {
+                      key: t.id,
+                      class: W(["selected-user-item", { "selected-dept-item": !t.isUser }])
+                    }, [
+                      n("div", Qe, [
+                        n("div", {
+                          class: W(["user-avatar", { "dept-avatar": !t.isUser }])
+                        }, [
+                          r(l, {
+                            name: t.isUser ? "user" : "folder"
+                          }, null, 8, ["name"])
+                        ], 2),
+                        n("div", Xe, [
+                          n("div", Ye, v(t.displayName || t.name), 1),
+                          n("div", Ze, [
+                            t.isUser && t.position ? (a(), o("span", et, v(t.position), 1)) : u("", !0),
+                            t.isUser && t.department ? (a(), o("span", tt, v(t.department), 1)) : u("", !0),
+                            t.isUser ? u("", !0) : (a(), o("span", st, v(t.typeName || "部门"), 1)),
+                            !t.isUser && t.userCount ? (a(), o("span", lt, v(t.userCount) + "人", 1)) : u("", !0)
+                          ])
+                        ])
+                      ]),
+                      r(y, {
+                        size: "small",
+                        variant: "text",
+                        shape: "circle",
+                        onClick: (P) => he(t.id)
+                      }, {
+                        icon: k(() => [
+                          r(l, { name: "close" })
+                        ]),
+                        _: 1
+                      }, 8, ["onClick"])
+                    ], 2))), 128))
+                  ]))
+                ])
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible", "width"]);
+    };
+  }
+}), nt = (x, $) => {
+  const O = x.__vccOpts || x;
+  for (const [d, C] of $)
+    O[d] = C;
+  return O;
+}, ot = /* @__PURE__ */ nt(at, [["__scopeId", "data-v-210902ae"]]), rt = {
+  install(x) {
+    x.component("PersonSelector", ot);
+  }
+};
+export {
+  ot as PersonSelector,
+  rt as default
+};