plus-pro-components
Version:
Page level components developed based on Element Plus.
359 lines (356 loc) • 13.4 kB
JavaScript
import { defineComponent, ref, inject, unref, h, withDirectives, openBlock, createBlock, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, resolveDynamicComponent, createVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
import { ArrowDownBold } from '@element-plus/icons-vue';
import { ElTooltip, ElPopconfirm, ElIcon, ElButton, ElLink, ElMessageBox, ElTableColumn, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import '../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../constants/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { TableFormRefInjectionKey } from '../../../constants/form.mjs';
import { isFunction, isPlainObject } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-table-action-bar__dropdown__link" };
const _hoisted_2 = { class: "plus-table-action-bar__more-text" };
var _sfc_main = /* @__PURE__ */ 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();
const hideOnClick = ref(true);
const formRefs = inject(TableFormRefInjectionKey);
const getSubButtons = (row, index) => {
const data = props.buttons.filter((item) => {
if (isFunction(item.show)) {
const tempFunction = item.show;
const isShow = tempFunction(row, index, item);
return unref(isShow) !== false;
}
return unref(item.show) !== false;
});
const showNumber = 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 (isPlainObject(buttonRow.confirm)) {
const tempTitle = isFunction(buttonRow.confirm.title) ? buttonRow.confirm.title(callbackParams) : buttonRow.confirm.title;
if (tempTitle) {
title = tempTitle;
}
const tempMessage = 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 = isFunction(buttonRow.props) ? buttonRow.props(row, index, buttonRow) : unref(buttonRow.props);
const text = isFunction(buttonRow.text) ? unref(buttonRow.text(row, index, buttonRow)) : unref(buttonRow.text);
const params = {
text,
row,
buttonRow,
index,
rest
};
const { msg, callbackParams } = getConfirmParams(params);
if (props.type === "icon") {
return h(
ElTooltip,
{ placement: "top", content: text, ...buttonRow.tooltipProps },
() => {
var _a2;
return props.confirmType === "popconfirm" && buttonRow.confirm ? h(
"span",
{
class: "el-icon"
},
h(
ElPopconfirm,
{
trigger: "click",
...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: () => withDirectives(
h(
ElIcon,
{
size: 16,
style: { margin: 0 },
...buttonRowProps,
onClick: () => {
hideOnClick.value = false;
if (isFunction(buttonRow.onClick)) {
buttonRow.onClick({
...callbackParams,
formRefs: formRefs.value[index]
});
}
}
},
() => buttonRow.icon ? h(buttonRow.icon) : ""
),
buttonRow.directives || []
)
}
)
) : withDirectives(
h(
ElIcon,
{
size: 16,
...buttonRowProps,
onClick: (event) => handleClickAction(
{ ...callbackParams, e: event, formRefs: formRefs.value[index] },
msg
)
},
() => buttonRow.icon ? h(buttonRow.icon) : ""
),
buttonRow.directives || []
);
}
);
} else {
const Tag = props.type === "button" ? ElButton : ElLink;
const defaultProps = props.type === "link" ? { href: "javaScript:;" } : {};
return props.confirmType === "popconfirm" && buttonRow.confirm ? h(
ElPopconfirm,
{
trigger: "click",
...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: () => withDirectives(
h(
Tag,
{
size: "small",
...defaultProps,
...buttonRowProps,
onClick: () => {
hideOnClick.value = false;
if (isFunction(buttonRow.onClick)) {
buttonRow.onClick({ ...callbackParams, formRefs: formRefs.value[index] });
}
}
},
() => text
),
buttonRow.directives || []
)
}
) : withDirectives(
h(
Tag,
{
size: "small",
...defaultProps,
...buttonRowProps,
onClick: (event) => handleClickAction(
{ ...callbackParams, e: event, formRefs: formRefs.value[index] },
msg
)
},
() => text
),
buttonRow.directives || []
);
}
};
const handleConfirm = (callbackParams) => {
if (isFunction(callbackParams.buttonRow.onConfirm)) {
callbackParams.buttonRow.onConfirm(callbackParams);
}
emit("clickAction", callbackParams);
};
const handleCancel = (callbackParams) => {
if (isFunction(callbackParams.buttonRow.onCancel)) {
callbackParams.buttonRow.onCancel(callbackParams);
}
emit("clickActionConfirmCancel", callbackParams);
};
const handleClickAction = (callbackParams, msg) => {
hideOnClick.value = true;
const { buttonRow } = callbackParams;
if (isFunction(buttonRow.onClick)) {
buttonRow.onClick(callbackParams);
}
if (buttonRow.confirm) {
if (props.confirmType === "messageBox") {
const { message, title, options, appContext } = msg;
ElMessageBox.confirm(message, title, options, appContext).then(() => {
if (isFunction(buttonRow.onConfirm)) {
buttonRow.onConfirm(callbackParams);
}
emit("clickAction", callbackParams);
}).catch(() => {
if (isFunction(buttonRow.onCancel)) {
buttonRow.onCancel(callbackParams);
}
emit("clickActionConfirmCancel", callbackParams);
});
}
} else {
emit("clickAction", callbackParams);
}
};
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
key: "actionBar",
"class-name": "plus-table-action-bar",
label: unref(_ctx.label) || unref(t)("plus.table.action"),
fixed: _ctx.fixed || "right",
width: _ctx.width || 200
}, _ctx.actionBarTableColumnProps), {
default: withCtx(({ row, $index, ...rest }) => [
createCommentVNode(" \u663E\u793A\u51FA\u6765\u7684\u6309\u94AE "),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(getSubButtons(row, $index).preButtons, (buttonRow) => {
return openBlock(), createBlock(resolveDynamicComponent(render(row, buttonRow, $index, rest)), {
key: buttonRow.text
});
}),
128
/* KEYED_FRAGMENT */
)),
createCommentVNode(" \u9690\u85CF\u7684\u6309\u94AE "),
getSubButtons(row, $index).showMore ? (openBlock(), createBlock(unref(ElDropdown), {
key: 0,
trigger: "click",
class: "plus-table-action-bar__dropdown",
"hide-on-click": hideOnClick.value
}, {
dropdown: withCtx(() => [
createVNode(
unref(ElDropdownMenu),
null,
{
default: withCtx(() => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(getSubButtons(row, $index).nextButtons, (buttonRow) => {
return openBlock(), createBlock(
unref(ElDropdownItem),
{
key: unref(buttonRow.text)
},
{
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(render(row, buttonRow, $index, rest))))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)
]),
default: withCtx(() => [
createElementVNode("span", _hoisted_1, [
createElementVNode(
"span",
_hoisted_2,
toDisplayString(unref(t)("plus.table.more")),
1
/* TEXT */
),
renderSlot(_ctx.$slots, "action-bar-more-icon", {}, () => [
createVNode(unref(ElIcon), null, {
default: withCtx(() => [
createVNode(unref(ArrowDownBold))
]),
_: 1
/* STABLE */
})
])
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["hide-on-click"])) : createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["label", "fixed", "width"]);
};
}
});
export { _sfc_main as default };