@wetspace/pro-components
Version:
::: tip 基本介绍
277 lines (276 loc) • 9.85 kB
JavaScript
import { defineComponent as R, useSlots as U, ref as w, computed as $, onMounted as j, openBlock as s, createElementBlock as p, normalizeClass as o, unref as e, normalizeStyle as M, createVNode as i, mergeProps as q, createCommentVNode as g, withDirectives as W, createBlock as c, withCtx as u, createTextVNode as k, toDisplayString as S, renderSlot as G, createElementVNode as m, Fragment as B, renderList as H, resolveDynamicComponent as E, cloneVNode as J } from "vue";
import { useNamespace as O, ElLoading as X, ElRow as D, ElCol as f, ElText as C, ElAlert as Y, ElButton as Z, ElCheckbox as ee, ElImage as te, ElEmpty as ae, ElPagination as le } from "element-plus";
import { wetProListProps as ne } from "./types.mjs";
import { WetQeuryForm as se } from "../../pro-form/index.mjs";
import { TextEllipsis as re } from "../../ellipsis/index.mjs";
const pe = /* @__PURE__ */ R({
__name: "index",
props: ne,
emits: ["update:selection"],
setup(L, { emit: T }) {
const a = O("pro-list"), h = U(), t = L, _ = w([]), A = X.directive, P = T, z = $(() => t.request ? _.value : t.dataSource), F = (n) => {
const r = h.default && h.default({});
return () => r == null ? void 0 : r.map((l) => J(l, {
info: n
}));
}, I = (n, r) => {
let l = [...t.selection];
n ? l.push(r) : l = l.filter((b) => b[t.rowKey] !== r[t.rowKey]), P("update:selection", l);
}, Q = () => {
P("update:selection", []);
}, v = w(!1), K = w({}), x = async () => {
v.value = !0;
try {
const n = await t.request(K.value, d.value);
n.success && (_.value = n.data, d.value.total = n.total);
} catch (n) {
console.error(n);
}
v.value = !1;
}, d = w({
pageSize: 10,
currentPage: 1,
total: 0
}), N = async (n) => {
if (d.value.currentPage = 1, v.value = !0, t.request) {
K.value = n;
try {
const r = await t.request(n, d.value);
r.success && (_.value = r.data, d.value.total = r.total);
} catch (r) {
console.error(r);
}
}
v.value = !1;
}, V = $(() => {
const n = {
pageSizes: [10, 20, 50],
layout: "total,sizes,prev,pager,next,jumper",
background: !0,
position: "center"
};
return typeof t.pagination == "boolean" ? n : {
...n,
...t.pagination
};
});
return j(() => {
t.request && N({});
}), (n, r) => (s(), p("div", {
class: o([e(a).b()]),
style: M(`--wet-prolist-gutter:${t.grid.gutter / 2 || 0}px`)
}, [
t.search ? (s(), p("div", {
key: 0,
class: o([
e(a).e("form"),
e(a).is("ghost", t.ghost)
])
}, [
i(e(se), q(t.search, { onQuery: N }), null, 16)
], 2)) : g("", !0),
W((s(), c(e(D), {
class: o([
e(a).e("panel"),
e(a).is("card", t.type === "card"),
e(a).is("ghost", t.ghost)
]),
gutter: t.grid.gutter,
tag: "ul"
}, {
default: u(() => [
i(e(f), { span: 24 }, {
default: u(() => [
t.title || e(h)["tools-bar"] ? (s(), p("div", {
key: 0,
class: o([
e(a).e("tool-bar"),
e(a).is("card", t.type === "card")
])
}, [
i(e(D), null, {
default: u(() => [
i(e(f), { span: 8 }, {
default: u(() => [
i(e(C), null, {
default: u(() => [
i(e(re), null, {
default: u(() => [
k(S(t.title), 1)
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
i(e(f), { span: 16 }, {
default: u(() => [
G(n.$slots, "tools-bar")
]),
_: 3
})
]),
_: 3
})
], 2)) : g("", !0)
]),
_: 3
}),
t.selection && t.selection.length !== 0 ? (s(), c(e(f), {
key: 0,
span: 24
}, {
default: u(() => [
m("div", {
class: o(e(a).e("selection-tip"))
}, [
i(e(Y), { closable: !1 }, {
default: u(() => [
m("div", {
class: o(e(a).em("selection-tip", "content"))
}, [
i(e(C), null, {
default: u(() => [
k("已选择" + S(t.selection.length) + "项", 1)
]),
_: 1
}),
i(e(Z), {
link: "",
type: "primary",
onClick: Q
}, {
default: u(() => r[2] || (r[2] = [
k(" 取消选择 ")
])),
_: 1
})
], 2)
]),
_: 1
})
], 2)
]),
_: 1
})) : g("", !0),
(s(!0), p(B, null, H(z.value, (l, b) => (s(), c(e(f), q({
key: l[t.rowKey] || b,
tag: "li",
ref_for: !0
}, { ...t.grid }), {
default: u(() => [
m("div", {
class: o([
e(a).e("item"),
e(a).is("card", t.type === "card"),
e(a).is("selected", n.selection && n.selection.map((y) => y[t.rowKey]).includes(l[t.rowKey]))
])
}, [
e(h).default ? (s(), c(E(F(l)), { key: 1 })) : (s(), p(B, { key: 0 }, [
t.selection ? (s(), p("div", {
key: 0,
class: o(e(a).e("selection"))
}, [
i(e(ee), {
"model-value": n.selection.map((y) => y[t.rowKey]).includes(l[t.rowKey]),
onChange: (y) => I(y, l)
}, null, 8, ["model-value", "onChange"])
], 2)) : g("", !0),
m("div", {
class: o(e(a).e("hd"))
}, [
t.headElement ? (s(), c(E(t.headElement(l)), { key: 0 })) : g("", !0),
!t.headElement && l.image ? (s(), p("div", {
key: 1,
class: o(e(a).e("image"))
}, [
i(e(te), {
class: o(e(a).m("content-image")),
fit: "cover",
src: l.image
}, null, 8, ["class", "src"])
], 2)) : g("", !0)
], 2),
m("div", {
class: o(e(a).e("body"))
}, [
m("div", {
class: o(e(a).em("item", "title"))
}, [
t.nameElement ? (s(), c(E(t.nameElement(l)), { key: 0 })) : (s(), c(e(C), {
key: 1,
tag: "b"
}, {
default: u(() => [
k(S(l.name), 1)
]),
_: 2
}, 1024))
], 2),
m("div", {
class: o(e(a).em("item", "description"))
}, [
t.contentElement ? (s(), c(E(t.contentElement), { key: 0 })) : (s(), c(e(C), {
key: 1,
type: "info"
}, {
default: u(() => [
k(S(l.desc), 1)
]),
_: 2
}, 1024))
], 2)
], 2),
t.actionsElement ? (s(), p("div", {
key: 1,
class: o(e(a).e("ft"))
}, [
(s(), c(E(t.actionsElement(l))))
], 2)) : g("", !0)
], 64))
], 2)
]),
_: 2
}, 1040))), 128)),
!z.value || z.value.length === 0 ? (s(), c(e(f), { key: 1 }, {
default: u(() => [
i(e(ae))
]),
_: 1
})) : g("", !0)
]),
_: 3
}, 8, ["class", "gutter"])), [
[e(A), v.value]
]),
t.request && t.pagination ? (s(), p("div", {
key: 1,
class: o([
e(a).e("pagination"),
e(a).is("ghost", t.ghost),
V.value.position
])
}, [
m("div", {
class: o(e(a).e("pagination-inner"))
}, [
i(e(le), q(V.value, {
"current-page": d.value.currentPage,
"onUpdate:currentPage": r[0] || (r[0] = (l) => d.value.currentPage = l),
"page-size": d.value.pageSize,
"onUpdate:pageSize": r[1] || (r[1] = (l) => d.value.pageSize = l),
total: d.value.total,
onCurrentChange: x,
onSizeChange: x
}), null, 16, ["current-page", "page-size", "total"])
], 2)
], 2)) : g("", !0)
], 6));
}
});
export {
pe as default
};