@ithinkdt/naive
Version:
iThinkDT Naive UI
357 lines (356 loc) • 10.7 kB
JavaScript
import { defineComponent as H, computed as T, reactive as J, shallowRef as F, watch as Q, ref as A, createVNode as a, mergeProps as L, isVNode as Y, nextTick as Z, Fragment as I, createTextVNode as O } from "vue";
import { NTreeSelect as ee, NSelect as le, NTransfer as te, NTag as ae, NIcon as v, NTree as ue, NSpin as ne, NButton as de, NList as re, NListItem as ie, NCheckbox as se, NRadio as fe, NAvatar as R, NEmpty as _ } from "ithinkdt-ui";
import { $dialog as ce, CORE_CTX as M } from "@ithinkdt/core";
import { walkTree as oe, flattenTree as ye } from "@ithinkdt/common";
import { w as j, x as V, y as G, z as me } from "./index-BSADCRmB.js";
function p(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
}
const xe = /* @__PURE__ */ H({
name: "UserDept",
inheritAttrs: !1,
props: {
users: {
type: Array,
default: () => []
},
groups: {
type: Array,
default: () => []
},
depts: {
type: Array,
default: () => []
},
value: {
type: [Array, String],
default: void 0
},
placeholder: {
type: String,
default: void 0
},
size: {
type: String,
default: void 0
},
type: {
type: String,
default: "user"
},
selectType: {
type: String,
default: "dropdown"
},
max: {
type: Number,
default: void 0
},
multiple: {
type: Boolean,
default: !1
},
defaultExpandAll: {
type: Boolean,
default: !1
},
filterable: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: void 0
},
getUsersByGroup: {
type: Function,
default: () => []
},
getUsersByDept: {
type: Function,
default: () => []
}
},
emits: ["update:value", "update-value"],
setup(e, {
emit: f,
attrs: S
}) {
const U = T(() => {
if (e.multiple)
return e.value || [];
const l = e.value?.trim();
return l ? [l] : [];
}), x = /* @__PURE__ */ new Map(), y = T(() => (x.clear(), e.users.map((l) => (l = J(l), l.label = l.nickname, l.value = l.username, l.type = "user", x.set(l.username, l), l)))), k = F([]);
Q(() => e.depts, (l) => {
oe(l, (u) => {
u.label = u.name, u.value = u.code, u.type = "dept", u.children?.length || delete u.children;
}), k.value = ye(l);
}, {
immediate: !0
});
const K = T(() => [...e.depts, ...e.groups.map((l) => ({
label: l.name,
value: l.code,
type: "group"
})), ...y.value]), E = A([]), m = A(), C = async (l) => {
let u;
u = await (l.type === "group" ? e.getUsersByGroup(l.value) : e.getUsersByDept(l.value));
for (const t of y.value)
t.disabled = !0;
m.value = [...l.type === "dept" ? l.children ?? [] : [], ...u.map((t) => {
const i = x.get(t.username);
return i && (i.disabled = !1), {
...t,
label: t.nickname,
value: t.username,
type: "user"
};
})];
}, D = /* @__PURE__ */ new WeakMap(), P = (l, u, t) => {
let i;
if (e.type === "dept")
return a(ue, {
data: e.depts,
keyField: "value",
labelField: "name",
defaultExpandAll: e.defaultExpandAll,
checkable: e.multiple,
selectable: !e.multiple,
multiple: !1,
blockLine: !0,
checkOnClick: !0,
pattern: t,
filter: (n, o) => o.label.includes(n) || o.value.includes(n),
checkedKeys: e.multiple ? l : void 0,
selectedKeys: e.multiple ? void 0 : l,
onUpdateCheckedKeys: (n) => {
e.max && n?.length > e.max || u(n);
},
onUpdateSelectedKeys: (n) => {
u(n);
}
}, null);
let s = l ? D.get(l) : /* @__PURE__ */ new Set();
if (l && !s && (s = new Set(l), D.set(l, s)), m.value === !1)
return a(ne, {
show: !0
}, null);
let d = m.value || K.value;
t = t?.trim(), t && (d = d?.filter((n) => n.label.includes(t) || n.value.includes(t)));
const r = E.value;
return a(I, null, [a("div", {
style: "margin: 12px 16px; display: flex; justify-content: space-between; align-items: center"
}, [r.length > 0 ? a(I, null, [a("span", {
style: "display: flex; align-items: center"
}, [r.length >= 2 ? r.at(-2).label : "全部", a("span", {
style: "padding: 0 4px"
}, [a(G, null, null)]), r.at(-1).label]), a(de, {
text: !0,
type: "warning",
onClick: () => {
if (r.pop(), m.value = r.length > 0 ? !1 : void 0, r.length > 0)
C(r.at(-1));
else
for (const n of y.value)
n.disabled = !1;
}
}, {
default: () => [a(v, null, {
default: () => [a(me, null, null)]
}), O("返回上一级")]
})]) : a("span", null, [O("全部")])]), d?.length ? a(re, {
showDivider: !1,
style: "padding: 0 16px"
}, p(i = d.map((n) => {
let o, N;
return a(ie, {
key: n.type + "_" + n.value,
style: "padding: 6px 0"
}, {
default: () => [n.type === "user" ? e.multiple ? a(se, {
checked: s.has(n.value) || !1,
onUpdateChecked: (h) => {
if (h && e.max && l.length >= e.max)
return;
let b = [...l || []];
if (h)
b.push(n.value);
else {
const q = b.indexOf(n.value);
b.splice(q, 1);
}
u(b);
},
style: "margin-left: 3px"
}, p(o = M.renderUsers([n], {
max: 1,
size: 24,
placement: "right"
})) ? o : {
default: () => [o]
}) : a(fe, {
checked: s.has(n.value) || !1,
onUpdateChecked: (h) => {
u(h ? [n.value] : []);
},
style: "margin-left: 3px"
}, p(N = M.renderUsers([n], {
max: 1,
size: 24,
placement: "right"
})) ? N : {
default: () => [N]
}) : a("div", {
onClick: () => {
m.value = !1, E.value.push(n), C(n);
},
style: "cursor: pointer; display: flex; align-items: center; gap: 8px"
}, [n.type === "dept" ? a(R, {
size: 24,
style: "background-color: red"
}, {
default: () => [a(v, null, {
default: () => [a(V, null, null)]
})]
}) : a(R, {
size: 24,
style: "background-color: green"
}, {
default: () => [a(v, null, {
default: () => [a(j, null, null)]
})]
}), a("span", {
style: "flex: 1 1 auto"
}, [n.label]), a(v, null, {
default: () => [a(G, null, null)]
})])]
});
})) ? i : {
default: () => [i]
}) : a(_, null, null)]);
}, W = () => a(_, {
description: e.placeholder
}, null), z = (l, u, t, i, s) => a(te, L(l, {
key: e.type,
options: u,
renderSourceList: ({
onCheck: d,
pattern: r
}) => P(t, d, r),
renderTargetList: e.placeholder?.trim() && !e.value?.length ? W : void 0,
sourceFilterable: e.filterable,
size: e.size,
disabled: e.disabled || void 0,
value: t,
filter: (d, r) => r.label.includes(d) || r.value.includes(d),
"onUpdate:value": (d) => {
i?.(d);
},
onUpdateValue: (d) => {
s?.(d);
}
}), null), X = ({
option: l,
handleClose: u
}) => a(ae, {
type: e.type === "user" ? "primary" : "info",
closable: !0,
onMousedown: (t) => t.preventDefault(),
onClose: (t) => {
t.stopPropagation(), u();
}
}, {
default: () => [l.label]
}), g = (l, u = "update-value") => {
e.multiple ? f(u, l) : f(u, l?.[0]);
}, B = A();
let w = !1;
const $ = () => {
if (w)
return;
w = !0;
const l = F([...U.value || []]);
ce({
showIcon: !1,
title: e.placeholder,
style: {
width: "700px"
},
content: () => {
const u = e.type === "user" ? y.value : k.value;
return a("div", {
style: {
height: "550px"
}
}, [z({
style: {
height: "100%"
}
}, u, l.value, (t) => l.value = t)]);
},
onOk() {
g(l.value, "update:value"), g(l.value, "update-value");
},
onAfterLeave() {
Z(() => {
B.value?.blur(), w = !1;
});
}
});
}, c = {
arrow: () => a(v, null, {
default: () => [e.type === "user" ? a(j, null, null) : a(V, null, null)]
})
};
return () => {
const l = e.type === "user" ? y.value : k.value;
if (e.selectType === "dropdown" && e.type === "dept")
return a(ee, {
options: l,
keyField: "value",
defaultExpandAll: e.defaultExpandAll,
checkable: e.multiple,
multiple: e.multiple,
filter: (t, i) => i.label.includes(t) || i.value.includes(t),
value: e.value,
onUpdateValue: (t) => {
e.multiple && e.max && t?.length > e.max || f("update-value", t);
},
"onUpdate:value": (t) => {
e.multiple && e.max && t?.length > e.max || f("update:value", t);
}
}, p(c) ? c : {
default: () => [c]
});
if (e.selectType === "transfer")
return z(S, l, U.value, (t) => g(t, "update:value"), (t) => g(t, "update-value"));
const u = e.selectType === "dropdown";
return a(le, L(S, {
key: e.type,
ref: B,
show: u ? void 0 : !1,
filterable: u ? e.filterable : !1,
options: l,
multiple: e.multiple,
size: e.size,
placeholder: e.placeholder,
disabled: e.disabled || void 0,
value: e.value,
renderTag: e.multiple ? X : void 0,
onFocus: u ? void 0 : $,
onUpdateValue: (t) => {
f("update-value", t);
},
"onUpdate:value": (t) => {
f("update:value", t);
}
}), p(c) ? c : {
default: () => [c]
});
};
}
});
export {
xe as DtUserDept
};