smart-admin-web 10.20.1 → 10.21.0

package/dist/components/UserPicker/index2.vue.js

@@ -1,265 +1,407 @@
-import { defineComponent as ae, ref as v, computed as p, onMounted as ne, h as se, reactive as oe, openBlock as f, createBlock as _, unref as l, withCtx as h, createVNode as u, createTextVNode as g, toDisplayString as o, createCommentVNode as b, createElementVNode as r, normalizeClass as re, createElementBlock as C, withDirectives as A, vShow as K, Fragment as ie, renderList as ce } from "vue";
-import { useMessage as ue, NButton as S, NTabs as de, NTab as L, NTree as pe, NTreeSelect as me, NInput as ve, NEmpty as fe } from "naive-ui";
-import { SmartTable as he } from "smart-naive-table";
-import { useI18n as ke } from "vue-i18n";
-import { useWindowSize as ge } from "@vueuse/core";
-import ye from "../AppIcon.vue.js";
-import we from "../FormContainer/index.vue.js";
+import { defineComponent as Ne, ref as d, computed as u, onMounted as Ie, reactive as Ee, openBlock as i, createBlock as w, unref as s, withCtx as f, createVNode as c, createTextVNode as E, toDisplayString as r, createCommentVNode as h, createElementVNode as n, normalizeClass as H, createElementBlock as m, withDirectives as R, Fragment as Z, renderList as J, withKeys as Q, withModifiers as X, vShow as Y } from "vue";
+import { useMessage as Ue, NTabs as Te, NTab as ee, NTree as $e, NTreeSelect as Ae, NInput as ae, NDropdown as De, NButton as te, NSpin as Be, NEmpty as se } from "naive-ui";
+import { useI18n as Me } from "vue-i18n";
+import { useWindowSize as Ke, useDebounceFn as Le } from "@vueuse/core";
+import S from "../AppIcon.vue.js";
+import Oe from "../FormContainer/index.vue.js";
 /* empty css                          */
-import { useShellBreakpoint as _e } from "../../composables/useShellBreakpoint.js";
-import { orgApi as be, userApi as O } from "../../api/index.js";
-import { buildTree as Se } from "../../utils/tree.js";
-import { translateError as ze } from "../../utils/error.js";
-import { SEARCH_ACTIONS as xe } from "../../utils/tableFilter.js";
-const Ce = {
+import le from "./UserAvatar.vue.js";
+import { useShellBreakpoint as Ve } from "../../composables/useShellBreakpoint.js";
+import { orgApi as Fe, userApi as ne } from "../../api/index.js";
+import { buildTree as qe } from "../../utils/tree.js";
+import { translateError as We } from "../../utils/error.js";
+const je = {
   key: 0,
-  class: "picker-tree"
-}, Ne = { class: "panel-header" }, Pe = { class: "picker-table" }, Ie = { class: "panel-header" }, Te = { class: "picker-selected" }, Ue = { class: "panel-header" }, Ee = { class: "selected-list" }, Be = { class: "selected-name" }, qe = { class: "selected-account" }, Ge = /* @__PURE__ */ ae({
+  class: "picker-org"
+}, Ge = { class: "side-title" }, He = { class: "picker-main" }, Re = { class: "picker-toolbar" }, Ze = {
+  class: "scope-trigger",
+  role: "button",
+  tabindex: "0"
+}, Je = {
+  class: "user-list",
+  role: "group"
+}, Qe = ["aria-checked", "aria-disabled", "tabindex", "onClick", "onKeydown"], Xe = { class: "user-main" }, Ye = { class: "user-name" }, ea = {
+  key: 0,
+  class: "user-sub"
+}, aa = {
+  key: 0,
+  class: "user-tag"
+}, ta = {
+  key: 1,
+  class: "user-check"
+}, sa = { class: "picker-foot" }, la = { class: "picker-total" }, na = {
+  key: 0,
+  class: "pager"
+}, oa = ["disabled", "aria-label"], ia = { class: "pager-num" }, ca = ["disabled", "aria-label"], ra = { class: "picker-selected" }, ua = { class: "side-head" }, da = { class: "side-title" }, va = { class: "side-count" }, pa = { class: "selected-list" }, ma = { class: "user-main" }, fa = { class: "user-name" }, ha = {
+  key: 0,
+  class: "user-sub"
+}, ga = ["aria-label", "onClick"], oe = 20, ka = 8, Ua = /* @__PURE__ */ Ne({
   __name: "index",
   props: {
     excludeIds: {}
   },
   emits: ["confirm"],
-  setup(R, { expose: V, emit: D }) {
-    const $ = R, F = D, { t: n } = ke(), M = ue(), z = v(!1), y = v(), { bp: N } = _e(), { width: W } = ge(), d = p(() => N.value === "narrow" || W.value < 900), H = p(() => N.value === "narrow" ? "drawer" : "modal"), k = v("users"), x = p(() => d.value ? "large" : "small"), P = v([]), I = p(() => [{ id: 0, parentId: -1, name: n("common.all"), children: Se(P.value) }]), c = v(null), j = p(
-      () => c.value && c.value !== 0 ? c.value : void 0
+  setup(ie, { expose: ce, emit: re }) {
+    const ue = ie, de = re, { t: l } = Me(), ve = Ue(), M = d(!1), { bp: V } = Ve(), { width: pe } = Ke(), g = u(() => V.value === "narrow" || pe.value < 900), me = u(() => V.value === "narrow" ? "drawer" : "modal"), x = d("users"), F = d([]), q = u(() => [{ id: 0, parentId: -1, name: l("common.all"), children: qe(F.value) }]), k = d(null), fe = u(
+      () => k.value && k.value !== 0 ? k.value : void 0
     );
-    ne(async () => {
+    Ie(async () => {
       try {
-        P.value = await be.list();
+        F.value = await Fe.list();
       } catch {
       }
     });
-    function G(t) {
-      var e;
-      c.value = t[0] ?? null, (e = y.value) == null || e.refresh();
+    function he(e) {
+      k.value = e[0] ?? null, A();
     }
-    function J(t) {
-      var e;
-      c.value = t ?? null, (e = y.value) == null || e.refresh();
+    function ge(e) {
+      k.value = e ?? null, A();
     }
-    const m = v([]), T = p(() => new Set($.excludeIds ?? [])), Q = (t) => O.page({
-      page: t.page,
-      pageSize: t.pageSize,
-      account: t.account,
-      orgId: j.value
-    }), X = [
-      { type: "selection" },
-      { key: "name", title: () => n("user.name"), width: 100 },
-      {
-        key: "account",
-        title: () => n("user.account"),
-        width: 120,
-        search: { actions: xe.fuzzy }
-      },
-      {
-        key: "op",
-        title: () => n("common.operation"),
-        width: 70,
-        render: (t) => {
-          const e = U.value.has(t.id) || T.value.has(t.id);
-          return se(
-            S,
-            {
-              size: "tiny",
-              type: "primary",
-              quaternary: !0,
-              disabled: e,
-              onClick: () => B([t])
-            },
-            () => n(e ? "userPicker.added" : "userPicker.add")
-          );
-        }
+    const b = d("name"), P = d(""), v = d(1), C = d(0), y = d([]), U = d(!1);
+    let T = 0;
+    const $ = u(() => Math.max(1, Math.ceil(C.value / oe))), ke = u(
+      () => b.value === "name" ? l("userPicker.searchName") : l("userPicker.searchAccount")
+    ), _e = u(() => [
+      { key: "name", label: l("user.name") },
+      { key: "account", label: l("user.account") }
+    ]);
+    async function K() {
+      const e = ++T;
+      U.value = !0;
+      try {
+        const t = P.value.trim() || void 0, a = await ne.page({
+          page: v.value,
+          pageSize: oe,
+          name: b.value === "name" ? t : void 0,
+          account: b.value === "account" ? t : void 0,
+          orgId: fe.value
+        });
+        if (e !== T) return;
+        y.value = a.items, C.value = a.total;
+      } catch (t) {
+        if (e !== T) return;
+        y.value = [], C.value = 0, ve.error(We(t));
+      } finally {
+        e === T && (U.value = !1);
       }
-    ], s = oe([]), U = p(() => new Set(s.map((t) => t.id))), w = v(""), E = p(() => {
-      const t = w.value.trim().toLowerCase();
-      return t ? s.filter(
-        (e) => e.name.toLowerCase().includes(t) || e.account.toLowerCase().includes(t)
-      ) : s;
+    }
+    function A() {
+      v.value = 1, K();
+    }
+    const be = Le(A, 300);
+    function ye(e) {
+      P.value = e, be();
+    }
+    function we(e) {
+      b.value = e, P.value.trim() && A();
+    }
+    function W(e) {
+      e < 1 || e > $.value || e === v.value || (v.value = e, K());
+    }
+    const o = Ee([]), z = u(() => new Set(o.map((e) => e.id))), _ = u(() => new Set(ue.excludeIds ?? [])), D = d(""), Se = u(() => {
+      const e = D.value.trim().toLowerCase();
+      return e ? o.filter(
+        (t) => t.name.toLowerCase().includes(e) || t.account.toLowerCase().includes(e)
+      ) : o;
     });
-    function B(t) {
-      for (const e of t)
-        !U.value.has(e.id) && !T.value.has(e.id) && s.push(e);
+    function j(e) {
+      for (const t of e)
+        !z.value.has(t.id) && !_.value.has(t.id) && o.push(t);
     }
-    function Y() {
-      var e;
-      const t = (l((e = y.value) == null ? void 0 : e.rows) ?? []).filter((a) => m.value.includes(a.id));
-      B(t), m.value = [];
+    function L(e) {
+      const t = o.findIndex((a) => a.id === e);
+      t >= 0 && o.splice(t, 1);
     }
-    function Z(t) {
-      const e = s.findIndex((a) => a.id === t);
-      e >= 0 && s.splice(e, 1);
+    function O(e) {
+      _.value.has(e.id) || (z.value.has(e.id) ? L(e.id) : j([e]));
     }
-    function ee() {
-      s.splice(0, s.length);
+    function xe() {
+      o.splice(0, o.length);
     }
-    async function te(t) {
-      if (s.splice(0, s.length), m.value = [], w.value = "", c.value = null, k.value = "users", z.value = !0, t != null && t.length)
+    const N = u(() => y.value.filter((e) => !_.value.has(e.id))), G = u(
+      () => N.value.length > 0 && N.value.every((e) => z.value.has(e.id))
+    );
+    function Pe() {
+      if (G.value)
+        for (const e of N.value) L(e.id);
+      else
+        j(N.value);
+    }
+    function B(e) {
+      return [e.account !== e.name ? e.account : "", e.orgName].filter(Boolean).join(" · ");
+    }
+    async function Ce(e) {
+      if (o.splice(0, o.length), D.value = "", k.value = null, P.value = "", b.value = "name", v.value = 1, y.value = [], C.value = 0, x.value = "users", M.value = !0, K(), !!(e != null && e.length))
         try {
-          const { items: e } = await O.page({ page: 1, pageSize: 200 }), a = e.filter((i) => t.includes(i.id)), q = new Set(a.map((i) => i.id));
-          for (const i of a) s.push(i);
-          for (const i of t)
-            q.has(i) || s.push({ id: i, account: String(i), name: String(i) });
+          const { items: t } = await ne.page({ page: 1, pageSize: 200 }), a = t.filter((p) => e.includes(p.id)), I = new Set(a.map((p) => p.id));
+          for (const p of a) o.push(p);
+          for (const p of e)
+            I.has(p) || o.push({ id: p, account: String(p), name: String(p) });
         } catch {
-          for (const e of t) s.push({ id: e, account: String(e), name: String(e) });
+          for (const t of e) o.push({ id: t, account: String(t), name: String(t) });
         }
     }
-    async function le() {
-      const t = s.map((e) => e.id);
-      F("confirm", t);
+    async function ze() {
+      de(
+        "confirm",
+        o.map((e) => e.id)
+      );
     }
-    return V({ open: te }), (t, e) => (f(), _(we, {
-      show: z.value,
-      "onUpdate:show": e[4] || (e[4] = (a) => z.value = a),
-      variant: H.value,
-      title: l(n)("userPicker.title"),
-      width: 1100,
-      "on-confirm": le,
-      "confirm-text": l(n)("common.confirm")
+    return ce({ open: Ce }), (e, t) => (i(), w(Oe, {
+      show: M.value,
+      "onUpdate:show": t[4] || (t[4] = (a) => M.value = a),
+      variant: me.value,
+      title: s(l)("userPicker.title"),
+      width: 920,
+      "on-confirm": ze,
+      "confirm-text": s(l)("common.confirm")
     }, {
-      default: h(() => [
-        d.value ? (f(), _(l(de), {
+      default: f(() => [
+        g.value ? (i(), w(s(Te), {
           key: 0,
-          value: k.value,
-          "onUpdate:value": e[0] || (e[0] = (a) => k.value = a),
+          value: x.value,
+          "onUpdate:value": t[0] || (t[0] = (a) => x.value = a),
           type: "segment",
           animated: "",
           class: "picker-tabs"
         }, {
-          default: h(() => [
-            u(l(L), { name: "users" }, {
-              default: h(() => [
-                g(o(l(n)("userPicker.available")), 1)
+          default: f(() => [
+            c(s(ee), { name: "users" }, {
+              default: f(() => [
+                E(r(s(l)("userPicker.available")), 1)
               ]),
               _: 1
             }),
-            u(l(L), { name: "selected" }, {
-              default: h(() => [
-                g(o(l(n)("userPicker.selected")) + "(" + o(s.length) + ")", 1)
+            c(s(ee), { name: "selected" }, {
+              default: f(() => [
+                E(r(s(l)("userPicker.selected")) + " " + r(o.length), 1)
               ]),
               _: 1
             })
           ]),
           _: 1
-        }, 8, ["value"])) : b("", !0),
-        r("div", {
-          class: re(["user-picker", { "is-compact": d.value }])
+        }, 8, ["value"])) : h("", !0),
+        n("div", {
+          class: H(["user-picker", { "is-compact": g.value }])
         }, [
-          d.value ? b("", !0) : (f(), C("div", Ce, [
-            r("div", Ne, o(l(n)("org.title")), 1),
-            u(l(pe), {
-              data: I.value,
+          g.value ? h("", !0) : (i(), m("div", je, [
+            n("div", Ge, r(s(l)("userPicker.org")), 1),
+            c(s($e), {
+              data: q.value,
               "key-field": "id",
               "label-field": "name",
               "children-field": "children",
               selectable: "",
               "block-line": "",
               "default-expand-all": "",
-              "selected-keys": c.value != null ? [c.value] : [],
-              "onUpdate:selectedKeys": G
+              "selected-keys": [k.value ?? 0],
+              "onUpdate:selectedKeys": he
             }, null, 8, ["data", "selected-keys"])
           ])),
-          A(r("div", Pe, [
-            d.value ? (f(), _(l(me), {
+          R(n("div", He, [
+            g.value ? (i(), w(s(Ae), {
               key: 0,
-              value: c.value ?? 0,
-              options: I.value,
+              value: k.value ?? 0,
+              options: q.value,
               "key-field": "id",
               "label-field": "name",
               "children-field": "children",
               "default-expand-all": "",
               size: "large",
               class: "picker-org-select",
-              "onUpdate:value": J
-            }, null, 8, ["value", "options"])) : b("", !0),
-            r("div", Ie, [
-              r("span", null, o(l(n)("userPicker.available")), 1),
-              u(l(S), {
-                size: x.value,
+              "onUpdate:value": ge
+            }, null, 8, ["value", "options"])) : h("", !0),
+            n("div", Re, [
+              c(s(ae), {
+                value: P.value,
+                round: "",
+                clearable: "",
+                size: g.value ? "large" : "medium",
+                placeholder: ke.value,
+                class: "picker-search",
+                "onUpdate:value": ye
+              }, {
+                prefix: f(() => [
+                  c(s(De), {
+                    trigger: "click",
+                    options: _e.value,
+                    value: b.value,
+                    onSelect: we
+                  }, {
+                    default: f(() => [
+                      n("span", Ze, [
+                        c(S, {
+                          icon: "ph:magnifying-glass",
+                          size: 15
+                        }),
+                        c(S, {
+                          icon: "ph:caret-down",
+                          size: 10
+                        })
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["options", "value"])
+                ]),
+                _: 1
+              }, 8, ["value", "size", "placeholder"]),
+              c(s(te), {
+                text: "",
                 type: "primary",
-                disabled: m.value.length === 0,
-                onClick: Y
+                class: "page-toggle",
+                disabled: N.value.length === 0,
+                onClick: Pe
               }, {
-                default: h(() => [
-                  g(o(l(n)("userPicker.addChecked")) + "(" + o(m.value.length) + ") ", 1)
+                default: f(() => [
+                  E(r(G.value ? s(l)("userPicker.unselectPage") : s(l)("userPicker.selectPage")), 1)
                 ]),
                 _: 1
-              }, 8, ["size", "disabled"])
+              }, 8, ["disabled"])
             ]),
-            u(l(he), {
-              "default-page-size": 100,
-              ref_key: "tableRef",
-              ref: y,
-              columns: X,
-              fetcher: Q,
-              search: { container: "table" },
-              pagination: { pageSize: 10 },
+            c(s(Be), {
+              show: U.value,
               size: "small",
-              "storage-key": "user-picker",
-              "tool-button": !1,
-              "checked-row-keys": m.value,
-              "onUpdate:checkedRowKeys": e[1] || (e[1] = (a) => m.value = a),
-              onError: e[2] || (e[2] = (a) => l(M).error(l(ze)(a)))
-            }, null, 8, ["checked-row-keys"])
+              class: "picker-spin"
+            }, {
+              default: f(() => [
+                n("div", Je, [
+                  (i(!0), m(Z, null, J(y.value, (a) => (i(), m("div", {
+                    key: a.id,
+                    class: H(["user-row", {
+                      "is-selected": z.value.has(a.id),
+                      "is-disabled": _.value.has(a.id)
+                    }]),
+                    role: "checkbox",
+                    "aria-checked": z.value.has(a.id) ? "true" : "false",
+                    "aria-disabled": _.value.has(a.id) ? "true" : void 0,
+                    tabindex: _.value.has(a.id) ? -1 : 0,
+                    onClick: (I) => O(a),
+                    onKeydown: [
+                      Q(X((I) => O(a), ["prevent"]), ["enter"]),
+                      Q(X((I) => O(a), ["prevent"]), ["space"])
+                    ]
+                  }, [
+                    c(le, {
+                      name: a.name,
+                      src: a.avatar,
+                      size: 32
+                    }, null, 8, ["name", "src"]),
+                    n("span", Xe, [
+                      n("span", Ye, r(a.name), 1),
+                      B(a) ? (i(), m("span", ea, r(B(a)), 1)) : h("", !0)
+                    ]),
+                    _.value.has(a.id) ? (i(), m("span", aa, r(s(l)("userPicker.existing")), 1)) : (i(), m("span", ta, [
+                      c(S, {
+                        icon: "ph:check-bold",
+                        size: 12
+                      })
+                    ]))
+                  ], 42, Qe))), 128)),
+                  !U.value && y.value.length === 0 ? (i(), w(s(se), {
+                    key: 0,
+                    description: s(l)("common.noData"),
+                    class: "user-empty"
+                  }, null, 8, ["description"])) : h("", !0)
+                ])
+              ]),
+              _: 1
+            }, 8, ["show"]),
+            n("div", sa, [
+              n("span", la, r(s(l)("userPicker.total", { n: C.value })), 1),
+              $.value > 1 ? (i(), m("div", na, [
+                n("button", {
+                  type: "button",
+                  class: "pager-btn pager-prev",
+                  disabled: v.value <= 1,
+                  "aria-label": s(l)("userPicker.prevPage"),
+                  onClick: t[1] || (t[1] = (a) => W(v.value - 1))
+                }, [
+                  c(S, {
+                    icon: "ph:caret-left",
+                    size: 14
+                  })
+                ], 8, oa),
+                n("span", ia, r(v.value) + " / " + r($.value), 1),
+                n("button", {
+                  type: "button",
+                  class: "pager-btn pager-next",
+                  disabled: v.value >= $.value,
+                  "aria-label": s(l)("userPicker.nextPage"),
+                  onClick: t[2] || (t[2] = (a) => W(v.value + 1))
+                }, [
+                  c(S, {
+                    icon: "ph:caret-right",
+                    size: 14
+                  })
+                ], 8, ca)
+              ])) : h("", !0)
+            ])
           ], 512), [
-            [K, !d.value || k.value === "users"]
+            [Y, !g.value || x.value === "users"]
           ]),
-          A(r("div", Te, [
-            r("div", Ue, [
-              r("span", null, o(l(n)("userPicker.selected")) + "(" + o(s.length) + ")", 1),
-              u(l(S), {
-                size: x.value,
-                quaternary: "",
+          R(n("div", ra, [
+            n("div", ua, [
+              n("span", da, [
+                E(r(s(l)("userPicker.selected")) + " ", 1),
+                n("span", va, r(o.length), 1)
+              ]),
+              c(s(te), {
+                text: "",
                 type: "error",
-                disabled: s.length === 0,
-                onClick: ee
+                class: "selected-clear",
+                disabled: o.length === 0,
+                onClick: xe
               }, {
-                default: h(() => [
-                  g(o(l(n)("userPicker.clear")), 1)
+                default: f(() => [
+                  E(r(s(l)("userPicker.clear")), 1)
                 ]),
                 _: 1
-              }, 8, ["size", "disabled"])
+              }, 8, ["disabled"])
             ]),
-            u(l(ve), {
-              value: w.value,
-              "onUpdate:value": e[3] || (e[3] = (a) => w.value = a),
-              size: d.value ? "large" : "small",
+            o.length > ka ? (i(), w(s(ae), {
+              key: 0,
+              value: D.value,
+              "onUpdate:value": t[3] || (t[3] = (a) => D.value = a),
+              round: "",
               clearable: "",
-              placeholder: l(n)("common.search"),
-              style: { "margin-bottom": "8px" }
-            }, null, 8, ["value", "size", "placeholder"]),
-            r("div", Ee, [
-              (f(!0), C(ie, null, ce(E.value, (a) => (f(), C("div", {
+              size: g.value ? "large" : "small",
+              placeholder: s(l)("common.search"),
+              class: "selected-search"
+            }, null, 8, ["value", "size", "placeholder"])) : h("", !0),
+            n("div", pa, [
+              (i(!0), m(Z, null, J(Se.value, (a) => (i(), m("div", {
                 key: a.id,
                 class: "selected-item"
               }, [
-                r("span", Be, [
-                  g(o(a.name) + " ", 1),
-                  r("span", qe, "(" + o(a.account) + ")", 1)
+                c(le, {
+                  name: a.name,
+                  src: a.avatar,
+                  size: 28
+                }, null, 8, ["name", "src"]),
+                n("span", ma, [
+                  n("span", fa, r(a.name), 1),
+                  B(a) ? (i(), m("span", ha, r(B(a)), 1)) : h("", !0)
                 ]),
-                u(l(S), {
-                  size: x.value,
-                  quaternary: "",
-                  type: "error",
-                  onClick: (q) => Z(a.id)
-                }, {
-                  icon: h(() => [
-                    u(ye, {
-                      icon: "ph:x",
-                      size: 14
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["size", "onClick"])
+                n("button", {
+                  type: "button",
+                  class: "item-remove",
+                  "aria-label": s(l)("userPicker.remove"),
+                  onClick: (I) => L(a.id)
+                }, [
+                  c(S, {
+                    icon: "ph:x",
+                    size: 12
+                  })
+                ], 8, ga)
               ]))), 128)),
-              E.value.length === 0 ? (f(), _(l(fe), {
+              o.length === 0 ? (i(), w(s(se), {
                 key: 0,
-                description: l(n)("common.noData"),
-                style: { padding: "24px 0" }
-              }, null, 8, ["description"])) : b("", !0)
+                description: s(l)("userPicker.emptySelected"),
+                class: "user-empty"
+              }, null, 8, ["description"])) : h("", !0)
             ])
           ], 512), [
-            [K, !d.value || k.value === "selected"]
+            [Y, !g.value || x.value === "selected"]
           ])
         ], 2)
       ]),
@@ -268,6 +410,6 @@ const Ce = {
   }
 });
 export {
-  Ge as default
+  Ua as default
 };
 //# sourceMappingURL=index2.vue.js.map