el-plus-powerful-table
Version:
## [DOCS](https://peng-xiao-shuai.github.io/vite-vue-admin-docs/zh-CN/component_directive/component/powerful-table-doc.html)
201 lines (200 loc) • 6.54 kB
JavaScript
import { defineComponent as O, inject as P, reactive as E, watch as L, onBeforeUnmount as T, createVNode as n, Fragment as V, isVNode as j, mergeProps as z } from "vue";
import "./style.css.mjs";
import { ElButtonGroup as C, ElButton as D, ElTooltip as N, ElPopover as _, ElScrollbar as R, ElCheckbox as v } from "element-plus";
import { SizeSymbol as U } from "../../keys.mjs";
import { t as p } from "../../locale/lang.mjs";
import { LangKey as g } from "../../locale/packages.mjs";
function h(o) {
return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !j(o);
}
const M = /* @__PURE__ */ O({
name: "PTBtnPlus",
props: {
// 按钮的配置数据
btnConfig: {
type: Object
// required: true,
},
// 表格的配置数据
headerList: Array,
// 表格当前选择的数据集合
multipleSelection: {
type: Array,
default: () => []
},
// 判断是否为移动端
isTable: Boolean
},
emits: ["update:isTable", "refresh", "change"],
setup(o, {
emit: s,
slots: c
}) {
const b = P(U), f = E({
headerData: [],
// isPC: store.state.isPC.isPC,
isPC: !0
}), w = (t) => t === "single" && o.multipleSelection.length !== 1 || t === "batch" && o.multipleSelection.length < 1, m = () => {
}, k = (t, e) => {
if (typeof e.click == "function") {
e.click({
btnItem: e,
rows: o.multipleSelection
});
return;
}
const a = () => {
if (t === "left")
s("change", {
effect: e.effect,
rows: o.multipleSelection
});
else
switch (e.effect) {
case "refresh":
s("refresh");
break;
case "switch":
s("update:isTable", !o.isTable);
break;
case "columns":
break;
default:
s("change", {
effect: e.effect,
rows: o.multipleSelection
});
break;
}
};
if (typeof e.beforeClick != "function")
return a(), !1;
new Promise((l) => {
e.beforeClick({
btnItem: e,
rows: o.multipleSelection
}, l);
}).then((l) => {
if (!l)
return !1;
a();
});
}, y = L(() => o.headerList, (t) => {
t && (f.headerData = t, f.headerData.forEach((e) => {
e.defaultFilter = typeof e.defaultFilter == "boolean" ? e.defaultFilter : e.isShowOrFilterColumn == "filter", e.defaultShow = typeof e.defaultShow > "u" ? !0 : e.defaultShow;
}));
}, {
immediate: !0,
deep: !0
}), u = (t, e, a = "left") => {
const l = n(D, z({
class: [t.text ? "" : "no-margin", a === "left" ? "btn-plus-left-item" : "btn-plus-right-item"],
size: b,
style: t.style || {},
disabled: t.disabled || w(t.operateType)
}, t.property, {
onClick: () => k(a, t)
}), t.text ? {
default: () => t.text
} : {});
return t.tip ? n(N, {
key: e,
content: t.tip,
class: "each",
effect: "dark",
placement: "top"
}, h(l) ? l : {
default: () => [l]
}) : l;
}, i = (t) => t ? t.filter((e) => typeof e.showBtn == "function" ? e.showBtn() : e.showBtn === void 0 ? !0 : e.showBtn) : [], B = (t, e) => ({
default: () => {
let a;
return n("div", {
class: "popover-table"
}, [n("div", {
class: "popover-table-row popover-table-header"
}, [n("div", {
class: "popover-table-row-label"
}, [p(g.ColumnName)]), n("div", {
class: "checkbox"
}, [p(g.Hidden)]), n("div", {
class: "checkbox"
}, [p(g.Filter)])]), n(R, {
style: "height: 300px"
}, h(a = f.headerData.filter((l) => l.isShowOrFilterColumn !== !1).map((l, d) => n("div", {
key: d,
class: "popover-table-row"
}, [n("div", {
class: "popover-table-row-label"
}, [n("span", {
class: "line-1"
}, [l.label])]), n("div", {
class: "checkbox"
}, [n(v, {
modelValue: l.defaultShow,
"onUpdate:modelValue": (r) => l.defaultShow = r,
class: "checkbox",
disabled: !(l.isShowOrFilterColumn === "show" || l.isShowOrFilterColumn === void 0),
size: b,
onChange: () => m()
}, null)]), n("div", {
class: "checkbox"
}, [n(v, {
modelValue: l.defaultFilter,
"onUpdate:modelValue": (r) => l.defaultFilter = r,
class: "checkbox",
disabled: !(l.isShowOrFilterColumn === "filter" || l.isShowOrFilterColumn === void 0),
size: b,
onChange: () => m()
}, null)])]))) ? a : {
default: () => [a]
})]);
},
reference: () => n("div", null, [u(t, e)])
}), S = () => {
var t;
return i((t = o.btnConfig) == null ? void 0 : t.btnRightList).map((e, a) => {
switch (e.effect) {
case "columns":
return n(_, {
placement: "bottom",
trigger: "click",
width: "250",
"hide-after": 0,
"popper-style": "padding: 0"
}, B(e, a));
default:
return u(e, a, "right");
}
});
};
return T(() => {
y();
}), () => {
var a, l, d, r;
let t, e;
return n(V, null, [n("div", {
class: ["pt-btn-plus", f.isPC ? "cl-btn-plus" : "cl-btn-plus-mobile"]
}, [c["btn-left"] ? c["btn-left"]() : i((a = o.btnConfig) == null ? void 0 : a.btnList).length > 1 ? (
// /* 左侧操作按钮 */
n(C, {
class: "filter-item btn-plus-left"
}, h(t = i((l = o.btnConfig) == null ? void 0 : l.btnList).map((F, x) => u(F, x))) ? t : {
default: () => [t]
})
) : n("div", {
class: "filter-item btn-plus-left"
}, [u(i((d = o.btnConfig) == null ? void 0 : d.btnList)[0], 0)]), c["btn-right"] ? c["btn-right"]() : i((r = o.btnConfig) == null ? void 0 : r.btnRightList).length > 1 ? n(C, {
class: "filter-item btn-plus-right"
}, h(e = S()) ? e : {
default: () => [e]
}) : n("div", {
class: "filter-item btn-plus-right"
}, [S()])])]);
};
}
});
export {
M as default
};
//# sourceMappingURL=btn-plus.mjs.map