yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
675 lines (674 loc) • 27.5 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const core = require("../../utils/core");
const EleDialog = require("../../ele-dialog/index");
const ElePrinter = require("../../ele-printer/index");
const EleTable = require("../../ele-table/index");
const util = require("../../ele-virtual-table/util");
const util$1 = require("../util");
const ToolColumnList = require("./tool-column-list");
const ToolPrintBodyCell = require("./tool-print-body-cell");
const ToolPrintHeaderCell = require("./tool-print-header-cell");
const ownSlots = ["printTop", "printBottom"];
const _sfc_main = vue.defineComponent({
name: "ToolPrint",
components: {
ElForm: elementPlus.ElForm,
ElFormItem: elementPlus.ElFormItem,
ElSelect: elementPlus.ElSelect,
ElOption: elementPlus.ElOption,
ElCheckbox: elementPlus.ElCheckbox,
ElButton: elementPlus.ElButton,
EleDialog,
ElePrinter,
EleTable,
CellRender: util.CellRender,
ToolColumnList,
ToolPrintBodyCell,
ToolPrintHeaderCell
},
props: {
/** 表格国际化 */
locale: {
type: Object,
required: true
},
/** 缓存本地的名称 */
cacheKey: String,
/** 弹窗参数 */
modalProps: Object,
/** 打印组件参数 */
printerProps: Object,
/** 打印表格参数 */
tableProps: Object,
/** 列数据 */
columns: Array,
/** 表格选中数据 */
selections: Array,
/** 表格当前页数据 */
pageData: Array,
/** 表格全部数据 */
datasource: [Array, Function],
/** 单元格合并行列方法 */
spanMethod: Function,
/** 表格是否有表头 */
tableHeader: Boolean,
/** 是否显示合计行 */
showSummary: Boolean,
/** 合计行文本 */
sumText: String,
/** 合计行自定义方法 */
summaryMethod: Function,
/** 单元格样式 */
cellStyle: [Object, Function],
/** 单元格类名自定义 */
cellClassName: [String, Function],
/** 单元格样式 */
headerCellStyle: [Object, Function],
/** 单元格类名自定义 */
headerCellClassName: [String, Function],
/** 序号列起始索引 */
pageIndex: Number,
/** 树表字段名 */
treeProps: Object,
/** 表格请求数据方法 */
fetch: Function,
/** 默认数据类型 */
defaultDataType: {
type: String,
default: "pageData"
},
/** 默认是否勾选表尾 */
defaultShowFooter: {
type: Boolean,
default: true
},
/** 默认是否勾选层级序号 */
defaultShowTreeIndex: Boolean,
/** 打印前的钩子函数 */
beforePrint: Function
},
setup(props) {
const visible = vue.ref(false);
const loading = vue.ref(false);
const dataType = vue.ref(props.defaultDataType);
const colItems = vue.ref([]);
const isCheckAll = vue.ref(false);
const isIndeterminate = vue.ref(false);
const showHeader = vue.ref(true);
const showFooter = vue.ref(false);
const showTreeIndex = vue.ref(false);
const treeIndexDisabled = vue.ref(true);
const printOptions = vue.reactive({
printing: false,
headerData: [],
bodyData: [],
footerData: [],
hasHeader: false,
hasFooter: false,
bodyCols: [],
data: []
});
const showLoading = () => {
loading.value = true;
};
const hideLoading = () => {
loading.value = false;
};
const openModal = () => {
visible.value = true;
};
const closeModal = () => {
hideLoading();
visible.value = false;
};
const handlePrintDone = () => {
hideLoading();
};
const printData = (params) => {
var _a;
showLoading();
const printDataValue = (params == null ? void 0 : params.data) || [];
const isShowHeader = (params == null ? void 0 : params.showHeader) ?? showHeader.value;
const isShowFooter = (params == null ? void 0 : params.showFooter) ?? showFooter.value;
const isShowTreeIndex = (params == null ? void 0 : params.showTreeIndex) ?? showTreeIndex.value;
const printDataType = (params == null ? void 0 : params.dataType) ?? dataType.value;
const printColumns = (params == null ? void 0 : params.columns) || util$1.getCheckedColumns(
props.columns,
colItems.value,
true,
void 0,
util$1.columnsPrintFilter,
false,
colItems.value
);
const tableColumns = (params == null ? void 0 : params.columns) || util$1.getCheckedColumns(
props.columns,
colItems.value,
true,
void 0,
util$1.columnsPrintFilter,
true,
colItems.value
);
const { headerData, bodyData, footerData, bodyCols } = util$1.getExportData(
printDataValue,
printColumns,
props.spanMethod,
props.pageIndex,
isShowFooter,
props.sumText,
props.summaryMethod,
(_a = props.treeProps) == null ? void 0 : _a.children,
isShowTreeIndex,
isShowHeader
);
if (typeof props.beforePrint === "function") {
const flag = props.beforePrint({
data: printDataValue,
columns: printColumns,
headerData,
bodyData,
footerData,
bodyCols,
dataType: printDataType,
hideLoading,
closeModal,
showHeader: isShowHeader,
showFooter: isShowFooter,
showTreeIndex: isShowTreeIndex,
tableColumns
});
if (flag === false) {
return;
}
}
printOptions.data = printDataValue;
printOptions.headerData = headerData;
printOptions.bodyData = bodyData;
printOptions.footerData = footerData;
printOptions.hasHeader = !!printOptions.headerData.length;
printOptions.hasFooter = !!printOptions.footerData.length;
printOptions.bodyCols = bodyCols;
vue.nextTick(() => {
printOptions.printing = true;
});
};
const handlePrint = () => {
if (dataType.value === "selections") {
printData({ data: [...props.selections || []] });
return;
}
if (dataType.value !== "data") {
printData({ data: [...props.pageData || []] });
return;
}
if (props.datasource == null || typeof props.datasource !== "function" || typeof props.fetch !== "function") {
return;
}
showLoading();
props.fetch((params) => {
props.datasource(params).then((result) => {
if (result == null) {
hideLoading();
closeModal();
return;
}
printData({ data: result });
}).catch((e) => {
console.error(e);
hideLoading();
});
});
};
const initColItems = () => {
const colsWidth = util$1.getCacheColsWidth(props.cacheKey);
const { cols, checkAll, indeterminate } = util$1.getColItems(
props.columns,
props.locale,
util$1.columnsPrintFilter,
void 0,
true,
true,
colsWidth
);
colItems.value = cols;
isCheckAll.value = checkAll;
isIndeterminate.value = indeterminate;
};
const handleCheckedChange = (item, checked, type) => {
let checkAll = true;
let indeterminate = false;
core.eachTree(colItems.value, (d) => {
const flag = item == null ? type === d.type : d.uid === item.uid;
if (flag) {
d.checked = checked;
}
if (!d.checked && checkAll) {
checkAll = false;
}
if (d.checked && !indeterminate) {
indeterminate = true;
}
if (flag && !checkAll && indeterminate) {
return false;
}
});
isCheckAll.value = colItems.value.length > 0 && checkAll;
isIndeterminate.value = !checkAll && indeterminate;
};
const handleCheckAllChange = (checked) => {
isCheckAll.value = checked;
isIndeterminate.value = false;
core.eachTree(colItems.value, (d) => {
if (d.checked !== checked) {
d.checked = checked;
}
});
};
const handleSortChange = (items, parent) => {
if (!parent) {
colItems.value = items;
} else {
core.eachTree(colItems.value, (d) => {
if (d.uid === parent.uid) {
d.children = items;
return false;
}
});
}
};
const handleColWidthChange = (item, width) => {
core.eachTree(colItems.value, (d) => {
if (d.uid === item.uid) {
d.width = width;
return false;
}
});
};
const handleReset = () => {
initColItems();
};
const handleTreeIndexChange = (checked) => {
if (checked) {
handleCheckedChange(void 0, false, "index");
}
};
vue.watch(visible, (visible2) => {
if (visible2) {
dataType.value = props.defaultDataType;
initColItems();
showHeader.value = !!props.tableHeader;
showFooter.value = props.showSummary ? !!props.defaultShowFooter : false;
treeIndexDisabled.value = !(props.pageData && props.pageData.some(
(d) => {
var _a, _b, _c;
return ((_b = d[((_a = props.treeProps) == null ? void 0 : _a.children) || "children"]) == null ? void 0 : _b.length) || d[((_c = props.treeProps) == null ? void 0 : _c.hasChildren) || "hasChildren"];
}
)) && core.findTree(colItems.value, (c) => c.type === "expand") == null;
showTreeIndex.value = treeIndexDisabled.value ? false : !!props.defaultShowTreeIndex;
return;
}
printOptions.data = [];
printOptions.headerData = [];
printOptions.bodyData = [];
printOptions.footerData = [];
printOptions.bodyCols = [];
printOptions.hasHeader = false;
printOptions.hasFooter = false;
printOptions.printing = false;
hideLoading();
});
return {
ownSlots,
visible,
loading,
dataType,
colItems,
isCheckAll,
isIndeterminate,
showHeader,
showFooter,
showTreeIndex,
treeIndexDisabled,
printOptions,
openModal,
closeModal,
handlePrintDone,
handlePrint,
handleCheckedChange,
handleSortChange,
handleColWidthChange,
handleCheckAllChange,
handleReset,
handleTreeIndexChange,
printData
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = { class: "ele-tool-column is-sortable" };
const _hoisted_2 = { class: "ele-tool-column-header" };
const _hoisted_3 = { class: "ele-tool-column-label" };
const _hoisted_4 = { class: "ele-tool-form-options" };
const _hoisted_5 = ["width"];
const _hoisted_6 = { key: 0 };
const _hoisted_7 = ["colspan", "rowspan"];
const _hoisted_8 = ["rowspan", "colspan"];
const _hoisted_9 = ["colspan", "rowspan"];
const _hoisted_10 = { key: 1 };
const _hoisted_11 = ["colspan", "rowspan"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ElOption = vue.resolveComponent("ElOption");
const _component_ElSelect = vue.resolveComponent("ElSelect");
const _component_ElFormItem = vue.resolveComponent("ElFormItem");
const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
const _component_ToolColumnList = vue.resolveComponent("ToolColumnList");
const _component_ElForm = vue.resolveComponent("ElForm");
const _component_ElButton = vue.resolveComponent("ElButton");
const _component_EleDialog = vue.resolveComponent("EleDialog");
const _component_ToolPrintHeaderCell = vue.resolveComponent("ToolPrintHeaderCell");
const _component_ToolPrintBodyCell = vue.resolveComponent("ToolPrintBodyCell");
const _component_CellRender = vue.resolveComponent("CellRender");
const _component_EleTable = vue.resolveComponent("EleTable");
const _component_ElePrinter = vue.resolveComponent("ElePrinter");
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.createVNode(_component_EleDialog, vue.mergeProps({
form: true,
width: "460px",
title: _ctx.locale.print,
position: "center"
}, _ctx.modalProps || {}, {
modelValue: _ctx.visible,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.visible = $event)
}), {
footer: vue.withCtx(() => [
vue.createVNode(_component_ElButton, { onClick: _ctx.closeModal }, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.locale.exportCancel), 1)
]),
_: 1
}, 8, ["onClick"]),
vue.createVNode(_component_ElButton, {
loading: _ctx.loading,
type: "primary",
onClick: _ctx.handlePrint
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.locale.exportOk), 1)
]),
_: 1
}, 8, ["loading", "onClick"])
]),
default: vue.withCtx(() => [
vue.createVNode(_component_ElForm, {
labelWidth: "80px",
onSubmit: _cache[5] || (_cache[5] = vue.withModifiers(() => {
}, ["prevent"])),
class: "ele-tool-print-form"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_ElFormItem, {
label: _ctx.locale.exportSelectData
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_ElSelect, {
modelValue: _ctx.dataType,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.dataType = $event),
placeholder: _ctx.locale.exportSelectData
}, {
default: vue.withCtx(() => [
_ctx.pageData != null ? (vue.openBlock(), vue.createBlock(_component_ElOption, {
key: 0,
value: "pageData",
label: _ctx.locale.exportDataTypePage
}, null, 8, ["label"])) : vue.createCommentVNode("", true),
_ctx.selections != null ? (vue.openBlock(), vue.createBlock(_component_ElOption, {
key: 1,
value: "selections",
label: _ctx.locale.exportDataTypeSelected
}, null, 8, ["label"])) : vue.createCommentVNode("", true),
_ctx.datasource != null ? (vue.openBlock(), vue.createBlock(_component_ElOption, {
key: 2,
value: "data",
label: _ctx.locale.exportDataTypeAll
}, null, 8, ["label"])) : vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"]),
vue.createVNode(_component_ElFormItem, {
label: _ctx.locale.exportSelectColumn
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createVNode(_component_ElCheckbox, {
label: _ctx.locale.columnTitle,
modelValue: _ctx.isCheckAll,
indeterminate: _ctx.isIndeterminate,
"onUpdate:modelValue": _ctx.handleCheckAllChange
}, null, 8, ["label", "modelValue", "indeterminate", "onUpdate:modelValue"])
]),
vue.createElementVNode("div", {
class: "ele-tool-column-link",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
}, vue.toDisplayString(_ctx.locale.columnReset), 1)
]),
vue.createVNode(_component_ToolColumnList, {
data: _ctx.colItems,
sortable: true,
allowWidth: true,
columnWidthPlaceholder: _ctx.locale.columnWidth,
onSortChange: _ctx.handleSortChange,
onCheckedChange: _ctx.handleCheckedChange,
onColWidthChange: _ctx.handleColWidthChange
}, null, 8, ["data", "columnWidthPlaceholder", "onSortChange", "onCheckedChange", "onColWidthChange"])
])
]),
_: 1
}, 8, ["label"]),
vue.createVNode(_component_ElFormItem, {
label: _ctx.locale.exportOther
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_4, [
vue.createVNode(_component_ElCheckbox, {
label: _ctx.locale.exportOtherHeader,
modelValue: _ctx.showHeader,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.showHeader = $event)
}, null, 8, ["label", "modelValue"]),
vue.createVNode(_component_ElCheckbox, {
label: _ctx.locale.exportOtherFooter,
modelValue: _ctx.showFooter,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.showFooter = $event),
disabled: !_ctx.showSummary
}, null, 8, ["label", "modelValue", "disabled"]),
vue.createVNode(_component_ElCheckbox, {
label: _ctx.locale.exportOtherTreeIndex,
modelValue: _ctx.showTreeIndex,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.showTreeIndex = $event),
disabled: _ctx.treeIndexDisabled,
onChange: _ctx.handleTreeIndexChange
}, null, 8, ["label", "modelValue", "disabled", "onChange"])
])
]),
_: 1
}, 8, ["label"])
]),
_: 1
})
]),
_: 1
}, 16, ["title", "modelValue"]),
vue.createVNode(_component_ElePrinter, vue.mergeProps({ target: "_iframe" }, _ctx.printerProps || {}, {
modelValue: _ctx.printOptions.printing,
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => _ctx.printOptions.printing = $event),
onDone: _ctx.handlePrintDone
}), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "printTop", {
data: _ctx.printOptions.data
}),
vue.createVNode(_component_EleTable, vue.mergeProps({
border: true,
printSkin: true,
hasHeader: _ctx.printOptions.hasHeader,
hasFooter: _ctx.printOptions.hasFooter
}, _ctx.tableProps || {}), {
default: vue.withCtx(() => [
vue.createElementVNode("colgroup", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.printOptions.bodyCols, (col) => {
return vue.openBlock(), vue.createElementBlock("col", {
key: col.key,
width: col.width
}, null, 8, _hoisted_5);
}), 128))
]),
_ctx.printOptions.hasHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_6, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.printOptions.headerData, (item, index) => {
return vue.openBlock(), vue.createElementBlock("tr", { key: index }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item, (col, columnIndex) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: col.key
}, [
col.isTreeIndex ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
col.rowspan !== 0 && col.colspan !== 0 ? (vue.openBlock(), vue.createElementBlock("th", {
key: 0,
colspan: col.colspan,
rowspan: col.rowspan,
class: "ele-print-tree-index"
}, null, 8, _hoisted_7)) : vue.createCommentVNode("", true)
], 64)) : col.rowspan !== 0 && col.colspan !== 0 ? (vue.openBlock(), vue.createBlock(_component_ToolPrintHeaderCell, {
key: 1,
col,
columnIndex,
headerCellStyle: _ctx.headerCellStyle,
headerCellClass: _ctx.headerCellClassName
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter(
(k) => !_ctx.ownSlots.includes(k)
), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
])
};
})
]), 1032, ["col", "columnIndex", "headerCellStyle", "headerCellClass"])) : vue.createCommentVNode("", true)
], 64);
}), 128))
]);
}), 128))
])) : vue.createCommentVNode("", true),
vue.createElementVNode("tbody", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.printOptions.bodyData, (item, index) => {
return vue.openBlock(), vue.createElementBlock("tr", { key: index }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item, (col, columnIndex) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: col.key
}, [
col.isExpandCell ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
col.rowspan !== 0 && col.colspan !== 0 ? (vue.openBlock(), vue.createElementBlock("td", {
key: 0,
rowspan: col.rowspan,
colspan: col.colspan,
style: { "padding-left": "0", "padding-right": "0" },
class: "ele-print-expand-td"
}, [
col.column && (col.column.printSlot || col.column.slot) && !_ctx.ownSlots.includes(
col.column.printSlot || col.column.slot
) ? vue.renderSlot(_ctx.$slots, col.column.printSlot || col.column.slot, vue.mergeProps({
key: 0,
ref_for: true
}, {
row: col.row,
column: col.column,
$index: col.index
})) : vue.createCommentVNode("", true)
], 8, _hoisted_8)) : vue.createCommentVNode("", true)
], 64)) : col.isTreeIndex ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
col.rowspan !== 0 && col.colspan !== 0 ? (vue.openBlock(), vue.createElementBlock("td", {
key: 0,
colspan: col.colspan,
rowspan: col.rowspan,
style: vue.normalizeStyle({
paddingLeft: 0,
paddingRight: 0,
textAlign: "center",
verticalAlign: "top",
borderLeftColor: col.hideLeftBorder ? "transparent" : void 0
}),
class: vue.normalizeClass([
"ele-print-tree-index",
{ "is-placeholder": !col.text }
])
}, vue.toDisplayString(col.text), 15, _hoisted_9)) : vue.createCommentVNode("", true)
], 64)) : col.rowspan !== 0 && col.colspan !== 0 ? (vue.openBlock(), vue.createBlock(_component_ToolPrintBodyCell, {
key: 2,
col,
columnIndex,
bodyCellStyle: _ctx.cellStyle,
bodyCellClass: _ctx.cellClassName
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter(
(k) => !_ctx.ownSlots.includes(k)
), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
])
};
})
]), 1032, ["col", "columnIndex", "bodyCellStyle", "bodyCellClass"])) : vue.createCommentVNode("", true)
], 64);
}), 128))
]);
}), 128))
]),
_ctx.printOptions.hasFooter ? (vue.openBlock(), vue.createElementBlock("tfoot", _hoisted_10, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.printOptions.footerData, (item, index) => {
return vue.openBlock(), vue.createElementBlock("tr", { key: index }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item, (col) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
col.rowspan !== 0 && col.colspan !== 0 ? (vue.openBlock(), vue.createElementBlock("td", {
key: col.key,
colspan: col.colspan,
rowspan: col.rowspan
}, [
!col.isExpandCell ? (vue.openBlock(), vue.createBlock(_component_CellRender, {
key: 0,
render: () => col.text,
params: []
}, null, 8, ["render"])) : vue.createCommentVNode("", true)
], 8, _hoisted_11)) : vue.createCommentVNode("", true)
], 64);
}), 256))
]);
}), 128))
])) : vue.createCommentVNode("", true)
]),
_: 3
}, 16, ["hasHeader", "hasFooter"]),
vue.renderSlot(_ctx.$slots, "printBottom", {
data: _ctx.printOptions.data
})
]),
_: 3
}, 16, ["modelValue", "onDone"])
], 64);
}
const toolPrint = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = toolPrint;