yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
676 lines (675 loc) • 26.9 kB
JavaScript
import { defineComponent, ref, reactive, watch, nextTick, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, mergeProps, withCtx, createTextVNode, toDisplayString, withModifiers, createBlock, createCommentVNode, createElementVNode, renderSlot, renderList, createSlots, normalizeStyle, normalizeClass } from "vue";
import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElButton } from "element-plus";
import { findTree, eachTree } from "../../utils/core";
import EleModal from "../../ele-dialog/index";
import ElePrinter from "../../ele-printer/index";
import EleTable from "../../ele-table/index";
import { CellRender } from "../../ele-virtual-table/util";
import { getCheckedColumns, columnsPrintFilter, getExportData, getCacheColsWidth, getColItems } from "../util";
import ToolColumnList from "./tool-column-list";
import ToolPrintBodyCell from "./tool-print-body-cell";
import ToolPrintHeaderCell from "./tool-print-header-cell";
const ownSlots = ["printTop", "printBottom"];
const _sfc_main = defineComponent({
name: "ToolPrint",
components: {
ElForm,
ElFormItem,
ElSelect,
ElOption,
ElCheckbox,
ElButton,
EleModal,
ElePrinter,
EleTable,
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 = ref(false);
const loading = ref(false);
const dataType = ref(props.defaultDataType);
const colItems = ref([]);
const isCheckAll = ref(false);
const isIndeterminate = ref(false);
const showHeader = ref(true);
const showFooter = ref(false);
const showTreeIndex = ref(false);
const treeIndexDisabled = ref(true);
const printOptions = 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) || getCheckedColumns(
props.columns,
colItems.value,
true,
void 0,
columnsPrintFilter,
false,
colItems.value
);
const tableColumns = (params == null ? void 0 : params.columns) || getCheckedColumns(
props.columns,
colItems.value,
true,
void 0,
columnsPrintFilter,
true,
colItems.value
);
const { headerData, bodyData, footerData, bodyCols } = 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;
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 = getCacheColsWidth(props.cacheKey);
const { cols, checkAll, indeterminate } = getColItems(
props.columns,
props.locale,
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;
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;
eachTree(colItems.value, (d) => {
if (d.checked !== checked) {
d.checked = checked;
}
});
};
const handleSortChange = (items, parent) => {
if (!parent) {
colItems.value = items;
} else {
eachTree(colItems.value, (d) => {
if (d.uid === parent.uid) {
d.children = items;
return false;
}
});
}
};
const handleColWidthChange = (item, width) => {
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");
}
};
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"];
}
)) && 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 = resolveComponent("ElOption");
const _component_ElSelect = resolveComponent("ElSelect");
const _component_ElFormItem = resolveComponent("ElFormItem");
const _component_ElCheckbox = resolveComponent("ElCheckbox");
const _component_ToolColumnList = resolveComponent("ToolColumnList");
const _component_ElForm = resolveComponent("ElForm");
const _component_ElButton = resolveComponent("ElButton");
const _component_EleModal = resolveComponent("EleModal");
const _component_ToolPrintHeaderCell = resolveComponent("ToolPrintHeaderCell");
const _component_ToolPrintBodyCell = resolveComponent("ToolPrintBodyCell");
const _component_CellRender = resolveComponent("CellRender");
const _component_EleTable = resolveComponent("EleTable");
const _component_ElePrinter = resolveComponent("ElePrinter");
return openBlock(), createElementBlock(Fragment, null, [
createVNode(_component_EleModal, 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: withCtx(() => [
createVNode(_component_ElButton, { onClick: _ctx.closeModal }, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.locale.exportCancel), 1)
]),
_: 1
}, 8, ["onClick"]),
createVNode(_component_ElButton, {
loading: _ctx.loading,
type: "primary",
onClick: _ctx.handlePrint
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.locale.exportOk), 1)
]),
_: 1
}, 8, ["loading", "onClick"])
]),
default: withCtx(() => [
createVNode(_component_ElForm, {
labelWidth: "80px",
onSubmit: _cache[5] || (_cache[5] = withModifiers(() => {
}, ["prevent"])),
class: "ele-tool-print-form"
}, {
default: withCtx(() => [
createVNode(_component_ElFormItem, {
label: _ctx.locale.exportSelectData
}, {
default: withCtx(() => [
createVNode(_component_ElSelect, {
modelValue: _ctx.dataType,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.dataType = $event),
placeholder: _ctx.locale.exportSelectData
}, {
default: withCtx(() => [
_ctx.pageData != null ? (openBlock(), createBlock(_component_ElOption, {
key: 0,
value: "pageData",
label: _ctx.locale.exportDataTypePage
}, null, 8, ["label"])) : createCommentVNode("", true),
_ctx.selections != null ? (openBlock(), createBlock(_component_ElOption, {
key: 1,
value: "selections",
label: _ctx.locale.exportDataTypeSelected
}, null, 8, ["label"])) : createCommentVNode("", true),
_ctx.datasource != null ? (openBlock(), createBlock(_component_ElOption, {
key: 2,
value: "data",
label: _ctx.locale.exportDataTypeAll
}, null, 8, ["label"])) : createCommentVNode("", true)
]),
_: 1
}, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"]),
createVNode(_component_ElFormItem, {
label: _ctx.locale.exportSelectColumn
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createVNode(_component_ElCheckbox, {
label: _ctx.locale.columnTitle,
modelValue: _ctx.isCheckAll,
indeterminate: _ctx.isIndeterminate,
"onUpdate:modelValue": _ctx.handleCheckAllChange
}, null, 8, ["label", "modelValue", "indeterminate", "onUpdate:modelValue"])
]),
createElementVNode("div", {
class: "ele-tool-column-link",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
}, toDisplayString(_ctx.locale.columnReset), 1)
]),
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"]),
createVNode(_component_ElFormItem, {
label: _ctx.locale.exportOther
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_4, [
createVNode(_component_ElCheckbox, {
label: _ctx.locale.exportOtherHeader,
modelValue: _ctx.showHeader,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.showHeader = $event)
}, null, 8, ["label", "modelValue"]),
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"]),
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"]),
createVNode(_component_ElePrinter, mergeProps({ target: "_iframe" }, _ctx.printerProps || {}, {
modelValue: _ctx.printOptions.printing,
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => _ctx.printOptions.printing = $event),
onDone: _ctx.handlePrintDone
}), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "printTop", {
data: _ctx.printOptions.data
}),
createVNode(_component_EleTable, mergeProps({
border: true,
printSkin: true,
hasHeader: _ctx.printOptions.hasHeader,
hasFooter: _ctx.printOptions.hasFooter
}, _ctx.tableProps || {}), {
default: withCtx(() => [
createElementVNode("colgroup", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.printOptions.bodyCols, (col) => {
return openBlock(), createElementBlock("col", {
key: col.key,
width: col.width
}, null, 8, _hoisted_5);
}), 128))
]),
_ctx.printOptions.hasHeader ? (openBlock(), createElementBlock("thead", _hoisted_6, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.printOptions.headerData, (item, index) => {
return openBlock(), createElementBlock("tr", { key: index }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(item, (col, columnIndex) => {
return openBlock(), createElementBlock(Fragment, {
key: col.key
}, [
col.isTreeIndex ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
col.rowspan !== 0 && col.colspan !== 0 ? (openBlock(), createElementBlock("th", {
key: 0,
colspan: col.colspan,
rowspan: col.rowspan,
class: "ele-print-tree-index"
}, null, 8, _hoisted_7)) : createCommentVNode("", true)
], 64)) : col.rowspan !== 0 && col.colspan !== 0 ? (openBlock(), createBlock(_component_ToolPrintHeaderCell, {
key: 1,
col,
columnIndex,
headerCellStyle: _ctx.headerCellStyle,
headerCellClass: _ctx.headerCellClassName
}, createSlots({ _: 2 }, [
renderList(Object.keys(_ctx.$slots).filter(
(k) => !_ctx.ownSlots.includes(k)
), (name) => {
return {
name,
fn: withCtx((slotProps) => [
renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
])
};
})
]), 1032, ["col", "columnIndex", "headerCellStyle", "headerCellClass"])) : createCommentVNode("", true)
], 64);
}), 128))
]);
}), 128))
])) : createCommentVNode("", true),
createElementVNode("tbody", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.printOptions.bodyData, (item, index) => {
return openBlock(), createElementBlock("tr", { key: index }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(item, (col, columnIndex) => {
return openBlock(), createElementBlock(Fragment, {
key: col.key
}, [
col.isExpandCell ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
col.rowspan !== 0 && col.colspan !== 0 ? (openBlock(), 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
) ? renderSlot(_ctx.$slots, col.column.printSlot || col.column.slot, mergeProps({
key: 0,
ref_for: true
}, {
row: col.row,
column: col.column,
$index: col.index
})) : createCommentVNode("", true)
], 8, _hoisted_8)) : createCommentVNode("", true)
], 64)) : col.isTreeIndex ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
col.rowspan !== 0 && col.colspan !== 0 ? (openBlock(), createElementBlock("td", {
key: 0,
colspan: col.colspan,
rowspan: col.rowspan,
style: normalizeStyle({
paddingLeft: 0,
paddingRight: 0,
textAlign: "center",
verticalAlign: "top",
borderLeftColor: col.hideLeftBorder ? "transparent" : void 0
}),
class: normalizeClass([
"ele-print-tree-index",
{ "is-placeholder": !col.text }
])
}, toDisplayString(col.text), 15, _hoisted_9)) : createCommentVNode("", true)
], 64)) : col.rowspan !== 0 && col.colspan !== 0 ? (openBlock(), createBlock(_component_ToolPrintBodyCell, {
key: 2,
col,
columnIndex,
bodyCellStyle: _ctx.cellStyle,
bodyCellClass: _ctx.cellClassName
}, createSlots({ _: 2 }, [
renderList(Object.keys(_ctx.$slots).filter(
(k) => !_ctx.ownSlots.includes(k)
), (name) => {
return {
name,
fn: withCtx((slotProps) => [
renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
])
};
})
]), 1032, ["col", "columnIndex", "bodyCellStyle", "bodyCellClass"])) : createCommentVNode("", true)
], 64);
}), 128))
]);
}), 128))
]),
_ctx.printOptions.hasFooter ? (openBlock(), createElementBlock("tfoot", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.printOptions.footerData, (item, index) => {
return openBlock(), createElementBlock("tr", { key: index }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(item, (col) => {
return openBlock(), createElementBlock(Fragment, null, [
col.rowspan !== 0 && col.colspan !== 0 ? (openBlock(), createElementBlock("td", {
key: col.key,
colspan: col.colspan,
rowspan: col.rowspan
}, [
!col.isExpandCell ? (openBlock(), createBlock(_component_CellRender, {
key: 0,
render: () => col.text,
params: []
}, null, 8, ["render"])) : createCommentVNode("", true)
], 8, _hoisted_11)) : createCommentVNode("", true)
], 64);
}), 256))
]);
}), 128))
])) : createCommentVNode("", true)
]),
_: 3
}, 16, ["hasHeader", "hasFooter"]),
renderSlot(_ctx.$slots, "printBottom", {
data: _ctx.printOptions.data
})
]),
_: 3
}, 16, ["modelValue", "onDone"])
], 64);
}
const toolPrint = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
toolPrint as default
};