plus-pro-components
Version:
Page level components developed based on Element Plus.
363 lines (358 loc) • 13.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var iconsVue = require('@element-plus/icons-vue');
var elementPlus = require('element-plus');
require('../../utils/index.js');
require('../../../hooks/index.js');
require('../../../constants/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var form = require('../../../constants/form.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-table-action-bar__dropdown__link" };
const _hoisted_2 = { class: "plus-table-action-bar__more-text" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusTableActionBar"
},
__name: "table-action-bar",
props: {
label: { default: "" },
fixed: { default: "right" },
showNumber: { type: [Number, Function], default: 3 },
showLimitIncludeMore: { type: Boolean, default: false },
type: { default: "link" },
buttons: { default: () => [] },
width: { default: 200 },
actionBarTableColumnProps: { default: () => ({}) },
confirmType: { default: "messageBox" }
},
emits: ["clickAction", "clickActionConfirmCancel"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { t } = useLocale.useLocale();
const hideOnClick = vue.ref(true);
const formRefs = vue.inject(form.TableFormRefInjectionKey);
const getSubButtons = (row, index) => {
const data = props.buttons.filter((item) => {
if (is.isFunction(item.show)) {
const tempFunction = item.show;
const isShow = tempFunction(row, index, item);
return vue.unref(isShow) !== false;
}
return vue.unref(item.show) !== false;
});
const showNumber = is.isFunction(props.showNumber) ? props.showNumber(row, index) : props.showNumber;
const showMore = data.length > showNumber;
if (!showMore) {
return {
showMore,
preButtons: data,
nextButtons: []
};
}
if (props.showLimitIncludeMore) {
return {
showMore,
preButtons: data.slice(0, showNumber - 1),
nextButtons: data.slice(showNumber - 1)
};
}
return {
showMore,
preButtons: data.slice(0, showNumber),
nextButtons: data.slice(showNumber)
};
};
const getConfirmParams = (params, e) => {
var _a, _b;
const { row, buttonRow, index, rest, text } = params;
const callbackParams = {
/**
* 解析后的按钮数据中的text
* @version v0.1.17
*/
text,
row,
buttonRow,
index,
rowIndex: index,
e,
formRefs: formRefs.value[index],
...rest
};
let message = t("plus.table.confirmToPerformThisOperation");
let title = t("plus.table.prompt");
let options = void 0;
let appContext = null;
if (is.isPlainObject(buttonRow.confirm)) {
const tempTitle = is.isFunction(buttonRow.confirm.title) ? buttonRow.confirm.title(callbackParams) : buttonRow.confirm.title;
if (tempTitle) {
title = tempTitle;
}
const tempMessage = is.isFunction(buttonRow.confirm.message) ? buttonRow.confirm.message(callbackParams) : buttonRow.confirm.message;
if (tempMessage) {
message = tempMessage;
}
options = (_a = buttonRow.confirm) == null ? void 0 : _a.options;
appContext = (_b = buttonRow.confirm) == null ? void 0 : _b.appContext;
}
return { msg: { message, title, options, appContext }, callbackParams };
};
const render = (row, buttonRow, index, rest) => {
var _a;
const buttonRowProps = is.isFunction(buttonRow.props) ? buttonRow.props(row, index, buttonRow) : vue.unref(buttonRow.props);
const text = is.isFunction(buttonRow.text) ? vue.unref(buttonRow.text(row, index, buttonRow)) : vue.unref(buttonRow.text);
const params = {
text,
row,
buttonRow,
index,
rest
};
const { msg, callbackParams } = getConfirmParams(params);
if (props.type === "icon") {
return vue.h(
elementPlus.ElTooltip,
{ placement: "top", content: text, ...buttonRow.tooltipProps },
() => {
var _a2;
return props.confirmType === "popconfirm" && buttonRow.confirm ? vue.h(
"span",
{
class: "el-icon"
},
vue.h(
elementPlus.ElPopconfirm,
{
trigger: "click",
...is.isPlainObject(buttonRow.confirm) ? (_a2 = buttonRow.confirm) == null ? void 0 : _a2.popconfirmProps : {},
title: msg.message,
onConfirm: (event) => handleConfirm({ ...callbackParams, e: event, formRefs: formRefs.value[index] }),
onCancel: (event) => handleCancel({ ...callbackParams, e: event, formRefs: formRefs.value[index] })
},
{
reference: () => vue.withDirectives(
vue.h(
elementPlus.ElIcon,
{
size: 16,
style: { margin: 0 },
...buttonRowProps,
onClick: () => {
hideOnClick.value = false;
if (is.isFunction(buttonRow.onClick)) {
buttonRow.onClick({
...callbackParams,
formRefs: formRefs.value[index]
});
}
}
},
() => buttonRow.icon ? vue.h(buttonRow.icon) : ""
),
buttonRow.directives || []
)
}
)
) : vue.withDirectives(
vue.h(
elementPlus.ElIcon,
{
size: 16,
...buttonRowProps,
onClick: (event) => handleClickAction(
{ ...callbackParams, e: event, formRefs: formRefs.value[index] },
msg
)
},
() => buttonRow.icon ? vue.h(buttonRow.icon) : ""
),
buttonRow.directives || []
);
}
);
} else {
const Tag = props.type === "button" ? elementPlus.ElButton : elementPlus.ElLink;
const defaultProps = props.type === "link" ? { href: "javaScript:;" } : {};
return props.confirmType === "popconfirm" && buttonRow.confirm ? vue.h(
elementPlus.ElPopconfirm,
{
trigger: "click",
...is.isPlainObject(buttonRow.confirm) ? (_a = buttonRow.confirm) == null ? void 0 : _a.popconfirmProps : {},
title: msg.message,
onConfirm: (event) => handleConfirm({ ...callbackParams, e: event, formRefs: formRefs.value[index] }),
onCancel: (event) => handleCancel({ ...callbackParams, e: event, formRefs: formRefs.value[index] })
},
{
reference: () => vue.withDirectives(
vue.h(
Tag,
{
size: "small",
...defaultProps,
...buttonRowProps,
onClick: () => {
hideOnClick.value = false;
if (is.isFunction(buttonRow.onClick)) {
buttonRow.onClick({ ...callbackParams, formRefs: formRefs.value[index] });
}
}
},
() => text
),
buttonRow.directives || []
)
}
) : vue.withDirectives(
vue.h(
Tag,
{
size: "small",
...defaultProps,
...buttonRowProps,
onClick: (event) => handleClickAction(
{ ...callbackParams, e: event, formRefs: formRefs.value[index] },
msg
)
},
() => text
),
buttonRow.directives || []
);
}
};
const handleConfirm = (callbackParams) => {
if (is.isFunction(callbackParams.buttonRow.onConfirm)) {
callbackParams.buttonRow.onConfirm(callbackParams);
}
emit("clickAction", callbackParams);
};
const handleCancel = (callbackParams) => {
if (is.isFunction(callbackParams.buttonRow.onCancel)) {
callbackParams.buttonRow.onCancel(callbackParams);
}
emit("clickActionConfirmCancel", callbackParams);
};
const handleClickAction = (callbackParams, msg) => {
hideOnClick.value = true;
const { buttonRow } = callbackParams;
if (is.isFunction(buttonRow.onClick)) {
buttonRow.onClick(callbackParams);
}
if (buttonRow.confirm) {
if (props.confirmType === "messageBox") {
const { message, title, options, appContext } = msg;
elementPlus.ElMessageBox.confirm(message, title, options, appContext).then(() => {
if (is.isFunction(buttonRow.onConfirm)) {
buttonRow.onConfirm(callbackParams);
}
emit("clickAction", callbackParams);
}).catch(() => {
if (is.isFunction(buttonRow.onCancel)) {
buttonRow.onCancel(callbackParams);
}
emit("clickActionConfirmCancel", callbackParams);
});
}
} else {
emit("clickAction", callbackParams);
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTableColumn), vue.mergeProps({
key: "actionBar",
"class-name": "plus-table-action-bar",
label: vue.unref(_ctx.label) || vue.unref(t)("plus.table.action"),
fixed: _ctx.fixed || "right",
width: _ctx.width || 200
}, _ctx.actionBarTableColumnProps), {
default: vue.withCtx(({ row, $index, ...rest }) => [
vue.createCommentVNode(" \u663E\u793A\u51FA\u6765\u7684\u6309\u94AE "),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(getSubButtons(row, $index).preButtons, (buttonRow) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(render(row, buttonRow, $index, rest)), {
key: buttonRow.text
});
}),
128
/* KEYED_FRAGMENT */
)),
vue.createCommentVNode(" \u9690\u85CF\u7684\u6309\u94AE "),
getSubButtons(row, $index).showMore ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDropdown), {
key: 0,
trigger: "click",
class: "plus-table-action-bar__dropdown",
"hide-on-click": hideOnClick.value
}, {
dropdown: vue.withCtx(() => [
vue.createVNode(
vue.unref(elementPlus.ElDropdownMenu),
null,
{
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(getSubButtons(row, $index).nextButtons, (buttonRow) => {
return vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElDropdownItem),
{
key: vue.unref(buttonRow.text)
},
{
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(render(row, buttonRow, $index, rest))))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)
]),
default: vue.withCtx(() => [
vue.createElementVNode("span", _hoisted_1, [
vue.createElementVNode(
"span",
_hoisted_2,
vue.toDisplayString(vue.unref(t)("plus.table.more")),
1
/* TEXT */
),
vue.renderSlot(_ctx.$slots, "action-bar-more-icon", {}, () => [
vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowDownBold))
]),
_: 1
/* STABLE */
})
])
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["hide-on-click"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["label", "fixed", "width"]);
};
}
});
exports.default = _sfc_main;