wui-print
Version:
前端打印插件，包含打印设计器、打印表单、打印API
241 lines (240 loc) • 12.1 kB
JavaScript
import { deepCopy } from "../../print-designer-utils";
import printDesignerStyleHelper from "../../print-designer-style-helper";
import complexTableTools from "./complex-table-tools";
import createTableHeader from "./create-table-header";
export default ({ printData, printConfig, formConfig, layoutConfig, createHtmlByComponentItem, errorLogs } = {}) => {
const createComplexTableHtml = (complexTableDetails) => {
if (!complexTableDetails._continueConfig) {
return "";
}
if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "fixed_default") {
return _createHtml({ complexTableDetails });
}
if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "fixed_continuingContent") {
// 添加续打表格
return _createContinueContentHtml({ complexTableDetails });
}
if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "fixed_blankTable") {
// 添加空白表格
return _createBlankHtml({ complexTableDetails });
}
if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "fixed_afterBlankRow") {
// 添加表格含空白内容
return _createHtmlHasBlankContent({ complexTableDetails });
}
};
function _createHtml({ complexTableDetails } = {}) {
let complexTableHtml = "";
let { spanHeaderCellDict, spanHeaderCellList } = complexTableTools.createHeaderSpanDetails({ complexTableDetails });
let headerRowLength = complexTableDetails.props.headerRow;
let colLength = complexTableDetails.props.col;
let tableData = complexTableTools.getTableData({ complexTableDetails, printData });
for (let rowIndex = 0; rowIndex < headerRowLength; rowIndex++) {
let headerCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = createTableHeader.getHeaderCellHtml({ rowIndex, colIndex, spanHeaderCellList, complexTableDetails });
headerCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-header-tr" header-index="${rowIndex}">${headerCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
let contentCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = _getContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails });
contentCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-content-tr" content-index="${rowIndex}">${contentCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
complexTableHtml = `<table
class="print-complex-table print-complex-table--fixed-continue"
style="${printDesignerStyleHelper.createComplexTableStyle({
propsConfig: complexTableDetails.props,
styleConfig: complexTableDetails.style
})}"
cellspacing="0"
cellpadding="0">${complexTableHtml}
</table>`;
let isPaginationEnabled = complexTableDetails.props.isPaginationEnabled;
if (!!isPaginationEnabled) {
complexTableHtml += _getPaginationHtml({ complexTableDetails });
}
return complexTableHtml;
}
function _createContinueContentHtml({ complexTableDetails } = {}) {
let complexTableHtml = "";
// 设置td宽度需要先执行 complexTableTools.formatHeaderRules 过滤多余的配置
complexTableTools.formatHeaderRules({ complexTableDetails });
let colLength = complexTableDetails.props.col;
let tableData = complexTableTools.getTableData({ complexTableDetails, printData });
for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
let contentCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = _getContinueContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails });
contentCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-content-tr" content-index="${rowIndex}">${contentCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
complexTableHtml = `<table
class="print-complex-table print-complex-table--fixed-continue print-complex-table--fixed-continue_continue-content"
style="${printDesignerStyleHelper.createComplexTableStyle({
propsConfig: complexTableDetails.props,
styleConfig: complexTableDetails.style
})}"
cellspacing="0"
cellpadding="0">${complexTableHtml}
</table>`;
return complexTableHtml;
}
function _createBlankHtml({ complexTableDetails } = {}) {
let complexTableHtml = "";
let { spanHeaderCellDict, spanHeaderCellList } = complexTableTools.createHeaderSpanDetails({ complexTableDetails });
let headerRowLength = complexTableDetails.props.headerRow;
let colLength = complexTableDetails.props.col;
let continueConfig = complexTableDetails._continueConfig;
for (let rowIndex = 0; rowIndex < headerRowLength; rowIndex++) {
let headerCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = createTableHeader.getHeaderCellHtml({ rowIndex, colIndex, spanHeaderCellList, complexTableDetails });
headerCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-header-tr" header-index="${rowIndex}">${headerCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
for (let rowIndex = 0; rowIndex < continueConfig.blankRowCount; rowIndex++) {
let contentCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = _getBlankContentCellHtml({ rowIndex, colIndex, complexTableDetails });
contentCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-content-tr" content-index="${rowIndex}">${contentCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
complexTableHtml = `<table
class="print-complex-table print-complex-table--fixed-continue print-continue-blank print-continue-blank--before"
style="${printDesignerStyleHelper.createComplexTableStyle({
propsConfig: complexTableDetails.props,
styleConfig: complexTableDetails.style
})}"
cellspacing="0"
cellpadding="0">${complexTableHtml}
</table>`;
return complexTableHtml;
}
function _createHtmlHasBlankContent({ complexTableDetails } = {}) {
let complexTableHtml = "";
let { spanHeaderCellDict, spanHeaderCellList } = complexTableTools.createHeaderSpanDetails({ complexTableDetails });
let headerRowLength = complexTableDetails.props.headerRow;
let colLength = complexTableDetails.props.col;
let tableData = complexTableTools.getTableData({ complexTableDetails, printData });
let continueConfig = complexTableDetails._continueConfig;
for (let rowIndex = 0; rowIndex < headerRowLength; rowIndex++) {
let headerCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = createTableHeader.getHeaderCellHtml({ rowIndex, colIndex, spanHeaderCellList, complexTableDetails });
headerCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-header-tr" header-index="${rowIndex}">${headerCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
let contentCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = _getContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails });
contentCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-content-tr" content-index="${rowIndex}">${contentCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
for (let rowIndex = 0; rowIndex < continueConfig.blankRowCount; rowIndex++) {
let contentCellHtml = ``;
for (let colIndex = 0; colIndex < colLength; colIndex++) {
let nowCellHtml = _getBlankContentCellHtml({ rowIndex, colIndex, complexTableDetails });
contentCellHtml += nowCellHtml;
}
let rowHtml = `<tr class="complex-table-blank-tr" blank-index="${rowIndex}">${contentCellHtml}</tr>`;
complexTableHtml += rowHtml;
}
complexTableHtml = `<table
class="print-complex-table print-complex-table--fixed-continue"
style="${printDesignerStyleHelper.createComplexTableStyle({
propsConfig: complexTableDetails.props,
styleConfig: complexTableDetails.style
})}"
cellspacing="0"
cellpadding="0">${complexTableHtml}
</table>`;
let isPaginationEnabled = complexTableDetails.props.isPaginationEnabled;
if (!!isPaginationEnabled) {
complexTableHtml += _getPaginationHtml({ complexTableDetails });
}
return complexTableHtml;
}
function _getContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails } = {}) {
let propsConfig = complexTableDetails.props;
let styleConfig = complexTableDetails.style;
let contentCellHtml = "";
contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
complexTablePropsConfig: propsConfig,
complexTableStyleConfig: styleConfig
})}"><div style="${printDesignerStyleHelper.createComplexTableContentTdContainerStyle({
complexTablePropsConfig: propsConfig,
complexTableStyleConfig: styleConfig
})}">${_createContentTdText({ rowIndex, colIndex, tableData, complexTableDetails })}</div></td>`;
return contentCellHtml;
}
function _getContinueContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails } = {}) {
let propsConfig = complexTableDetails.props;
let styleConfig = complexTableDetails.style;
let headerRules = complexTableDetails.headerRules;
let contentCellHtml = "";
contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
complexTablePropsConfig: propsConfig,
complexTableStyleConfig: styleConfig,
complexTableHeaderRules: headerRules,
rowIndex,
colIndex
})}"><div style="${printDesignerStyleHelper.createComplexTableContentTdContainerStyle({
complexTablePropsConfig: propsConfig,
complexTableStyleConfig: styleConfig
})}">${_createContentTdText({ rowIndex, colIndex, tableData, complexTableDetails })}</div></td>`;
return contentCellHtml;
}
function _createContentTdText({ rowIndex, colIndex, tableData, complexTableDetails } = {}) {
let propsConfig = complexTableDetails.props;
if (!propsConfig.columnsField || !propsConfig.columnsField[colIndex]) {
return "";
}
let columnField = propsConfig.columnsField[colIndex].field;
if (!tableData[rowIndex]) {
return "";
}
let nowContentTdText = tableData[rowIndex][columnField];
if (!!nowContentTdText || nowContentTdText === 0) {
return nowContentTdText;
}
return "";
}
function _getBlankContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails } = {}) {
let propsConfig = complexTableDetails.props;
let styleConfig = complexTableDetails.style;
let contentCellHtml = "";
contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
complexTablePropsConfig: propsConfig,
complexTableStyleConfig: styleConfig
})}"><div style="${printDesignerStyleHelper.createComplexTableContentTdContainerStyle({
complexTablePropsConfig: propsConfig,
complexTableStyleConfig: styleConfig
})}"></div></td>`;
return contentCellHtml;
}
function _getPaginationHtml({ complexTableDetails } = {}) {
let paginationHtml = `<div class="print-complex-table_pagination">第${complexTableDetails._continueConfig.currentPage}页</div>`;
return paginationHtml;
}
return {
createComplexTableHtml
};
};