yk-element-components
Version:
614 lines (613 loc) • 24.5 kB
JavaScript
import { createVNode as x, resolveComponent as V, Fragment as y, createTextVNode as I, defineComponent as ge, ref as K, computed as T, watch as ce, onMounted as ye, resolveDirective as we, openBlock as a, createElementBlock as p, withDirectives as Q, createBlock as g, mergeProps as ke, unref as d, withCtx as f, createCommentVNode as O, renderList as D, createSlots as F, renderSlot as w, toDisplayString as J, createElementVNode as ve, isRef as X, vShow as be, nextTick as Y } from "vue";
const Z = {
props: {
scopedSlots: {
type: Array,
default: () => []
},
align: {
type: String,
default: "left"
},
more: {
type: Array,
default: () => []
},
trigger: {
type: String,
default: "hover"
},
editing: {
type: Boolean,
default: !1
},
orEdit: {
type: Boolean,
default: !1
}
},
data() {
return {};
},
render(s) {
const M = this.scopedSlots, k = M.slice(0, this.orEdit ? this.editing ? 1 : 2 : 3), c = M.slice(this.orEdit ? this.editing ? 1 : 2 : 3, M.length), $ = () => this.more.length === 0 ? x(V("el-button"), {
type: "text"
}, {
default: () => [x("i", {
class: "el-icon-more"
}, null), I("\u66F4\u591A")]
}) : this.more;
return x("div", null, [x("div", null, [k.map((L, S) => L), c.length > 0 ? x(V("el-dropdown"), {
style: "margin-left: 10px",
"popper-class": "node_dropdown_box",
trigger: this.trigger
}, {
default: () => [$()],
dropdown: () => x(y, null, [x(V("el-dropdown-menu"), null, {
default: () => [x("div", {
class: "dropdownBox"
}, [c.map((L) => x("div", {
class: ["dropdownItem", this.align]
}, [L]))])]
})])
}) : ""])]);
}
}, Se = { key: 1 }, Ee = { key: 1 }, xe = { key: 1 }, Oe = { key: 1 }, $e = { key: 1 }, Ve = { class: "operation" }, Me = /* @__PURE__ */ ge({
__name: "index",
props: {
page: {
type: [Number, String],
default: 1
},
limit: {
type: Number,
default: 20
},
options: {
type: Array,
required: !0
},
data: {
type: Array,
required: !0
},
isLoading: {
type: Array,
default: !1
},
elementLoadingText: {
type: String
},
elementLoadingSpinner: {
type: String
},
elementLoadingBackground: {
type: String
},
elementLoadingSvg: {
type: String
},
elementLoadingSvgViewBox: {
type: String
},
orEdit: {
type: Boolean,
default: !1
},
editRowIndex: {
type: String,
default: ""
},
pagination: {
type: Boolean,
default: !1
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40]
},
total: {
type: Number,
default: 0
},
paginationAlign: {
type: String,
default: "left"
},
operateDropAlign: {
type: String,
default: "left"
},
trigger: {
type: String,
default: "hover"
},
rowKey: {
type: String,
default: ""
},
treeProps: {
type: Object,
default: () => {
}
},
lazy: {
type: Boolean,
default: !1
},
load: {
type: Function,
default: null
},
defaultEdit: {
type: Boolean,
default: !1
},
spanMethod: Function
},
emits: [
"edit",
"rowClick",
"cancel",
"confirm",
"selection-change",
"select-all",
"pagination",
"update:page",
"update:limit"
],
setup(s, { expose: M, emit: k }) {
const c = s;
let $ = K(), L = T(() => (c.options.forEach((e) => {
e.headerSlot && (e.headerName = "header");
}), c.options.filter((e) => !e.action && !e.selection))), S = T(() => c.options.find((e) => e.selection)), E = T(() => c.options.find((e) => e.action)), R = T({
get() {
return Number(c.page);
},
set(e) {
k("update:page", e);
}
}), j = T({
get() {
return c.limit;
},
set(e) {
k("update:limit", e);
}
}), h = K({});
const m = (e) => (e.forEach((i) => {
i.headerSlot && (i.headerName = "header");
}), e.filter((i) => !i.action && !i.selection)), _ = (e) => {
$.value.clearFilter(e);
}, A = (e, i, u) => {
if (u.sortable && u.sortMethod)
return u.sortMethod(e, i, u);
}, W = (e, i, u, b) => {
if (b.filterMethod && b.filterMethod)
return b.filterMethod(e, i, u);
}, ee = (e, i) => {
let u = JSON.parse(JSON.stringify(e));
h.value[i] = u, e.rowEdit = !0, k("edit", e, i);
}, le = (e, i) => {
for (let u in e)
e[u] = h.value[i][u];
e.rowEdit = !1, Y(() => {
h.value[i] = {};
}), k("confirm", e, i);
};
let oe = (e, i) => {
k("rowClick", e, i);
}, te = (e, i) => {
e.rowEdit = !1, Y(() => {
h.value[i] = {}, k("cancel", e, i);
});
}, G = K(JSON.parse(JSON.stringify(c.data)));
ce(
() => c.data,
(e) => {
e && H();
},
{
deep: !0
}
), ye(() => {
H();
});
const ne = ({ row: e, column: i, rowIndex: u, columnIndex: b }) => {
if (c.spanMethod)
return c.spanMethod({ row: e, column: i, rowIndex: u, columnIndex: b });
}, H = () => {
let e = JSON.parse(JSON.stringify(c.data));
e.map((i, u) => {
i.rowEdit = i.rowEdit ? i.rowEdit : c.defaultEdit;
let b = JSON.parse(JSON.stringify(i));
h.value[u] = b;
}), G.value = e;
}, re = (e, i) => {
$.value.toggleRowSelection(e, i);
}, de = () => {
$.value.clearSelection();
}, ae = (e) => {
k("selection-change", e);
}, ie = (e) => {
k("select-all", e);
}, se = (e, i) => {
k("pagination", e, i);
};
return M({
clearFilter: _,
toggleRowSelection: re,
clearSelection: de
}), (e, i) => {
const u = V("el-table-column"), b = V("el-input"), q = V("el-button"), ue = V("el-table"), pe = V("yk-pagination"), he = we("loading");
return a(), p(y, null, [
Q((a(), g(ue, ke({
ref_key: "customTable",
ref: $
}, e.$attrs, {
data: d(G),
"element-loading-text": s.elementLoadingText,
"element-loading-spinner": s.elementLoadingSpinner,
"element-loading-background": s.elementLoadingBackground,
"element-loading-svg": s.elementLoadingSvg,
"element-loading-svg-view-box": s.elementLoadingSvgViewBox,
onRowClick: d(oe),
onSelectionChange: ae,
onSelectAll: ie,
"tree-props": s.treeProps,
"row-key": s.rowKey,
lazy: s.lazy,
load: s.load,
"span-method": ne
}), {
default: f(() => [
d(S) && d(S).selection ? (a(), g(u, {
key: 0,
type: "selection",
align: d(S).align ? d(S).align : "left",
width: d(S).width ? d(S).width : "",
"min-width": d(S).minWidth ? d(S).minWidth : "",
fixed: d(S).fixed,
selectable: d(S).selectable,
"reserve-selection": d(S).reserveSelection
}, null, 8, ["align", "width", "min-width", "fixed", "selectable", "reserve-selection"])) : O("", !0),
(a(!0), p(y, null, D(d(L), (l, P) => (a(), g(u, {
key: P,
label: l.label,
prop: l.prop,
align: l.align ? l.align : "left",
width: l.width,
fixed: l.fixed,
sortable: l.sortable,
"sort-method": l.sortMethod ? (n, C) => A(n, C, l) : null,
"min-width": l.minWidth ? l.minWidth : "",
"show-overflow-tooltip": l.showOverflowTooltip,
"column-key": l.prop,
filters: l.filters,
"filter-method": l.filterMethod ? (n, C, o) => W(n, C, o, l) : null
}, F({
default: f(() => [
l.childrenOptions && l.childrenOptions.length > 0 ? (a(!0), p(y, { key: 0 }, D(m(l.childrenOptions), (n, C) => (a(), g(u, {
key: C,
label: n.label,
prop: n.prop,
align: n.align ? n.align : "left",
width: n.width,
fixed: n.fixed,
sortable: n.sortable,
"sort-method": n.sortMethod ? (o, N) => A(o, N, n) : null,
"min-width": n.minWidth ? n.minWidth : "",
"show-overflow-tooltip": n.showOverflowTooltip,
"column-key": n.prop,
filters: n.filters,
"filter-method": n.filterMethod ? (o, N, t) => W(o, N, t, n) : null
}, F({
default: f(() => [
n.childrenOptions && n.childrenOptions.length > 0 ? (a(!0), p(y, { key: 0 }, D(m(n.childrenOptions), (o, N) => (a(), g(u, {
key: N,
label: o.label,
prop: o.prop,
align: o.align ? o.align : "left",
width: o.width,
fixed: o.fixed,
sortable: o.sortable,
"sort-method": o.sortMethod ? (t, z) => A(t, z, o) : null,
"min-width": o.minWidth ? o.minWidth : "",
"show-overflow-tooltip": o.showOverflowTooltip,
"column-key": o.prop,
filters: o.filters,
"filter-method": o.filterMethod ? (t, z, r) => W(t, z, r, o) : null
}, F({
default: f(() => [
o.childrenOptions && o.childrenOptions.length > 0 ? (a(!0), p(y, { key: 0 }, D(m(o.childrenOptions), (t, z) => (a(), g(u, {
key: z,
label: t.label,
prop: t.prop,
align: t.align ? t.align : "left",
width: t.width,
fixed: t.fixed,
sortable: t.sortable,
"sort-method": t.sortMethod ? (r, B) => A(r, B, t) : null,
"min-width": t.minWidth ? t.minWidth : "",
"show-overflow-tooltip": t.showOverflowTooltip,
"column-key": t.prop,
filters: t.filters,
"filter-method": t.filterMethod ? (r, B, v) => W(r, B, v, t) : null
}, F({
default: f(() => [
t.childrenOptions && t.childrenOptions.length > 0 ? (a(!0), p(y, { key: 0 }, D(m(t.childrenOptions), (r, B) => (a(), g(u, {
key: B,
label: r.label,
prop: r.prop,
align: r.align ? r.align : "left",
width: r.width,
fixed: r.fixed,
sortable: r.sortable,
"sort-method": r.sortMethod ? (v, U) => A(v, U, r) : null,
"min-width": r.minWidth ? r.minWidth : "",
"show-overflow-tooltip": r.showOverflowTooltip,
"column-key": r.prop,
filters: r.filters,
"filter-method": r.filterMethod ? (v, U, fe) => W(v, U, fe, r) : null
}, F({ _: 2 }, [
r.headerSlot ? {
name: "header",
fn: f((v) => [
w(e.$slots, r.headerSlot, { scope: v }, void 0, !0)
]),
key: "0"
} : void 0,
!r.childrenOptions || r.childrenOptions.length == 0 ? {
name: "default",
fn: f((v) => [
v.row.rowEdit && r.editable && s.orEdit ? (a(), p(y, { key: 0 }, [
r.customEditSlot ? w(e.$slots, r.customEditSlot, {
key: 0,
scope: d(h)[v.$index]
}, void 0, !0) : (a(), g(b, {
key: 1,
size: "small",
modelValue: d(h)[v.$index][r.prop ? r.prop : ""],
"onUpdate:modelValue": (U) => d(h)[v.$index][r.prop ? r.prop : ""] = U
}, null, 8, ["modelValue", "onUpdate:modelValue"]))
], 64)) : (a(), p(y, { key: 1 }, [
r.slot ? w(e.$slots, r.slot, {
key: 0,
scope: v
}, void 0, !0) : (a(), p("span", Se, J(v.row[r.prop ? r.prop : ""]), 1))
], 64))
]),
key: "1"
} : void 0
]), 1032, ["label", "prop", "align", "width", "fixed", "sortable", "sort-method", "min-width", "show-overflow-tooltip", "column-key", "filters", "filter-method"]))), 128)) : O("", !0)
]),
_: 2
}, [
t.headerSlot ? {
name: "header",
fn: f((r) => [
w(e.$slots, t.headerSlot, { scope: r }, void 0, !0)
]),
key: "0"
} : void 0,
!t.childrenOptions || t.childrenOptions.length == 0 ? {
name: "default",
fn: f((r) => [
r.row.rowEdit && t.editable && s.orEdit ? (a(), p(y, { key: 0 }, [
t.customEditSlot ? w(e.$slots, t.customEditSlot, {
key: 0,
scope: d(h)[r.$index]
}, void 0, !0) : (a(), g(b, {
key: 1,
size: "small",
modelValue: d(h)[r.$index][t.prop ? t.prop : ""],
"onUpdate:modelValue": (B) => d(h)[r.$index][t.prop ? t.prop : ""] = B
}, null, 8, ["modelValue", "onUpdate:modelValue"]))
], 64)) : (a(), p(y, { key: 1 }, [
t.slot ? w(e.$slots, t.slot, {
key: 0,
scope: r
}, void 0, !0) : (a(), p("span", Ee, J(r.row[t.prop ? t.prop : ""]), 1))
], 64))
]),
key: "1"
} : void 0
]), 1032, ["label", "prop", "align", "width", "fixed", "sortable", "sort-method", "min-width", "show-overflow-tooltip", "column-key", "filters", "filter-method"]))), 128)) : O("", !0)
]),
_: 2
}, [
o.headerSlot ? {
name: "header",
fn: f((t) => [
w(e.$slots, o.headerSlot, { scope: t }, void 0, !0)
]),
key: "0"
} : void 0,
!o.childrenOptions || o.childrenOptions.length == 0 ? {
name: "default",
fn: f((t) => [
t.row.rowEdit && o.editable && s.orEdit ? (a(), p(y, { key: 0 }, [
o.customEditSlot ? w(e.$slots, o.customEditSlot, {
key: 0,
scope: d(h)[t.$index]
}, void 0, !0) : (a(), g(b, {
key: 1,
size: "small",
modelValue: d(h)[t.$index][o.prop ? o.prop : ""],
"onUpdate:modelValue": (z) => d(h)[t.$index][o.prop ? o.prop : ""] = z
}, null, 8, ["modelValue", "onUpdate:modelValue"]))
], 64)) : (a(), p(y, { key: 1 }, [
o.slot ? w(e.$slots, o.slot, {
key: 0,
scope: t
}, void 0, !0) : (a(), p("span", xe, J(t.row[o.prop ? o.prop : ""]), 1))
], 64))
]),
key: "1"
} : void 0
]), 1032, ["label", "prop", "align", "width", "fixed", "sortable", "sort-method", "min-width", "show-overflow-tooltip", "column-key", "filters", "filter-method"]))), 128)) : O("", !0)
]),
_: 2
}, [
n.headerSlot ? {
name: "header",
fn: f((o) => [
w(e.$slots, n.headerSlot, { scope: o }, void 0, !0)
]),
key: "0"
} : void 0,
!n.childrenOptions || n.childrenOptions.length == 0 ? {
name: "default",
fn: f((o) => [
o.row.rowEdit && n.editable && s.orEdit ? (a(), p(y, { key: 0 }, [
n.customEditSlot ? w(e.$slots, n.customEditSlot, {
key: 0,
scope: d(h)[o.$index]
}, void 0, !0) : (a(), g(b, {
key: 1,
size: "small",
modelValue: d(h)[o.$index][n.prop ? n.prop : ""],
"onUpdate:modelValue": (N) => d(h)[o.$index][n.prop ? n.prop : ""] = N
}, null, 8, ["modelValue", "onUpdate:modelValue"]))
], 64)) : (a(), p(y, { key: 1 }, [
n.slot ? w(e.$slots, n.slot, {
key: 0,
scope: o
}, void 0, !0) : (a(), p("span", Oe, J(o.row[n.prop ? n.prop : ""]), 1))
], 64))
]),
key: "1"
} : void 0
]), 1032, ["label", "prop", "align", "width", "fixed", "sortable", "sort-method", "min-width", "show-overflow-tooltip", "column-key", "filters", "filter-method"]))), 128)) : O("", !0)
]),
_: 2
}, [
l.headerSlot ? {
name: "header",
fn: f((n) => [
w(e.$slots, l.headerSlot, { scope: n }, void 0, !0)
]),
key: "0"
} : void 0,
!l.childrenOptions || l.childrenOptions.length == 0 ? {
name: "default",
fn: f((n) => [
n.row.rowEdit && l.editable && s.orEdit ? (a(), p(y, { key: 0 }, [
l.customEditSlot ? w(e.$slots, l.customEditSlot, {
key: 0,
scope: d(h)[n.$index]
}, void 0, !0) : (a(), g(b, {
key: 1,
size: "small",
modelValue: d(h)[n.$index][l.prop ? l.prop : ""],
"onUpdate:modelValue": (C) => d(h)[n.$index][l.prop ? l.prop : ""] = C
}, null, 8, ["modelValue", "onUpdate:modelValue"]))
], 64)) : (a(), p(y, { key: 1 }, [
l.slot ? w(e.$slots, l.slot, {
key: 0,
scope: n
}, void 0, !0) : (a(), p("span", $e, J(n.row[l.prop ? l.prop : ""]), 1))
], 64))
]),
key: "1"
} : void 0
]), 1032, ["label", "prop", "align", "width", "fixed", "sortable", "sort-method", "min-width", "show-overflow-tooltip", "column-key", "filters", "filter-method"]))), 128)),
d(E) ? (a(), g(u, {
key: 1,
label: d(E).label ? d(E).label : "",
align: d(E).align ? d(E).align : "left",
width: d(E).width ? d(E).width : "",
"min-width": d(E).minWidth ? d(E).minWidth : "",
fixed: d(E).fixed
}, {
default: f((l) => [
ve("div", Ve, [
s.orEdit && !l.row.rowEdit ? (a(), g(q, {
key: 0,
type: "text",
size: "mini",
style: { "margin-right": "10px" },
onClick: (P) => ee(l.row, l.$index)
}, {
default: f(() => [
I("\u7F16\u8F91")
]),
_: 2
}, 1032, ["onClick"])) : O("", !0),
s.orEdit && l.row.rowEdit ? (a(), g(q, {
key: 1,
type: "text",
size: "mini",
onClick: (P) => le(l.row, l.$index)
}, {
default: f(() => [
I("\u786E\u8BA4")
]),
_: 2
}, 1032, ["onClick"])) : O("", !0),
s.orEdit && l.row.rowEdit ? (a(), g(q, {
key: 2,
type: "text",
size: "mini",
style: { "margin-right": "10px" },
onClick: (P) => d(te)(l.row, l.$index)
}, {
default: f(() => [
I("\u53D6\u6D88")
]),
_: 2
}, 1032, ["onClick"])) : O("", !0),
l.row.rowEdit ? (a(), g(d(Z), {
key: 3,
orEdit: s.orEdit,
editing: l.row.rowEdit,
align: s.operateDropAlign,
"scoped-slots": e.$slots.editRow ? e.$slots.editRow({ scope: l }) : {},
more: e.$slots.moreEl,
trigger: s.trigger
}, null, 8, ["orEdit", "editing", "align", "scoped-slots", "more", "trigger"])) : (a(), g(d(Z), {
key: 4,
orEdit: s.orEdit,
editing: l.row.rowEdit,
align: s.operateDropAlign,
"scoped-slots": e.$slots.action ? e.$slots.action({ scope: l }) : {},
more: e.$slots.moreEl,
trigger: s.trigger
}, null, 8, ["orEdit", "editing", "align", "scoped-slots", "more", "trigger"]))
])
]),
_: 1
}, 8, ["label", "align", "width", "min-width", "fixed"])) : O("", !0)
]),
_: 3
}, 16, ["data", "element-loading-text", "element-loading-spinner", "element-loading-background", "element-loading-svg", "element-loading-svg-view-box", "onRowClick", "tree-props", "row-key", "lazy", "load"])), [
[he, s.isLoading]
]),
Q(x(pe, {
total: s.total,
page: d(R),
"onUpdate:page": i[0] || (i[0] = (l) => X(R) ? R.value = l : R = l),
limit: d(j),
"onUpdate:limit": i[1] || (i[1] = (l) => X(j) ? j.value = l : j = l),
pageSizes: s.pageSizes,
onPagination: se
}, null, 8, ["total", "page", "limit", "pageSizes"]), [
[be, s.pagination]
])
], 64);
};
}
});
const Ce = (s, M) => {
const k = s.__vccOpts || s;
for (const [c, $] of M)
k[c] = $;
return k;
}, Ne = /* @__PURE__ */ Ce(Me, [["__scopeId", "data-v-12f74e4a"]]), Be = {
install(s) {
s.component("yk-table", Ne);
}
};
export {
Be as default
};