wui-print/dist/print-designer-api/use-create-html/use-complex-table-helper/use-pagination.js

前端打印插件，包含打印设计器、打印表单、打印API

import { deepCopy, camelToKebab } 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._tablePaginationConfig) {
      return "";
    }
    if (!!complexTableDetails._tablePaginationConfig && complexTableDetails._tablePaginationConfig.type == "pagination_default") {
      return _createHtml({ complexTableDetails });
    }
    if (
      !!complexTableDetails._tablePaginationConfig &&
      complexTableDetails._tablePaginationConfig.type == "pagination_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="${_formatContentTrClass({
        complexTableDetails,
        rowData: tableData[rowIndex]
      })}" content-index="${rowIndex}">${contentCellHtml}</tr>`;
      complexTableHtml += rowHtml;
    }
    let tableClassList = ["print-complex-table", "print-complex-table--pagination"];
    let tableClass = tableClassList.join(" ");
    complexTableHtml = `<table class="${tableClass}" 
      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 _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 tablePaginationConfig = complexTableDetails._tablePaginationConfig;
    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="${_formatContentTrClass({
        complexTableDetails,
        rowData: tableData[rowIndex]
      })}" content-index="${rowIndex}">${contentCellHtml}</tr>`;
      complexTableHtml += rowHtml;
    }
    for (let rowIndex = 0; rowIndex < tablePaginationConfig.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 complex-table-blank-tr--after" blank-index="${rowIndex}">${contentCellHtml}</tr>`;
      complexTableHtml += rowHtml;
    }
    let tableClassList = ["print-complex-table", "print-complex-table--pagination"];
    let tableClass = tableClassList.join(" ");
    complexTableHtml = `<table class="${tableClass}" 
      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 = "";
    let rowData = tableData[rowIndex];
    if (!!rowData._paginationMode_type && rowData._paginationMode_type == "excessBlankRow" && rowIndex > 0) {
      // 超出的空白行
      contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
        complexTablePropsConfig: propsConfig,
        complexTableStyleConfig: styleConfig
      })}"><div></div></td>`;
      return contentCellHtml;
    }
    if (!!rowData._paginationMode_type && rowData._paginationMode_type == "excessBlankRow" && rowIndex === 0) {
      // 超出的空白行 跨页
      contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
        complexTablePropsConfig: propsConfig,
        complexTableStyleConfig: styleConfig
      })}"><div class="excess-td-container" style="${_createExcessBlankRowTdContainerStyle({
        rowIndex,
        colIndex,
        tableData,
        complexTableDetails
      })}"><div  style="${printDesignerStyleHelper.createComplexTableContentTdContainerStyle({
        complexTablePropsConfig: propsConfig,
        complexTableStyleConfig: styleConfig
      })}${_createExcessBlankRowTdContainerContentStyle({
        rowIndex,
        colIndex,
        tableData,
        complexTableDetails
      })}">${_createContentTdText({
        rowIndex,
        colIndex,
        tableData,
        complexTableDetails
      })}</div></div></td>`;
      return 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 _createContentTdText({ rowIndex, colIndex, tableData, complexTableDetails } = {}) {
    let propsConfig = complexTableDetails.props;
    if (!propsConfig.columnsField || !propsConfig.columnsField[colIndex]) {
      return "";
    }
    if (!tableData[rowIndex]) {
      return "";
    }
    let columnField = propsConfig.columnsField[colIndex].field;
    let columnFieldList = columnField.split("&#");
    let nowContentTdText = "";
    columnFieldList.forEach((filed) => {
      let columnItemText = tableData[rowIndex][filed];
      if (!columnItemText && columnItemText !== 0) {
        return;
      }
      columnItemText = `${columnItemText}`;
      columnItemText = columnItemText
        .replace(/[\s\n]+$/, "")
        .replace(/ /g, "&nbsp;")
        .replace(/\n/g, "<br>");
      nowContentTdText += columnItemText;
    });
    return nowContentTdText;
  }
  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._tablePaginationConfig.currentPage}页</div>`;
    return paginationHtml;
  }
  function _createExcessBlankRowTdContainerStyle({ rowIndex, colIndex, tableData, complexTableDetails }) {
    let propsConfig = complexTableDetails.props;
    if (!propsConfig.columnsField || !propsConfig.columnsField[colIndex]) {
      return "";
    }
    let nowRow = tableData[rowIndex];
    if (!nowRow) {
      return "";
    }
    let styleText = "";
    let styleObj = {};
    let containerHeight =
      (nowRow._paginationMode_excessRowsLength - nowRow._paginationMode_excessIndex) * propsConfig.contentRowHeight;
    styleObj.height = `${containerHeight}px`;
    Object.keys(styleObj).forEach((key, index) => {
      styleText += `${camelToKebab(key)}:${styleObj[key]};`;
    });
    return styleText;
  }
  function _createExcessBlankRowTdContainerContentStyle({ rowIndex, colIndex, tableData, complexTableDetails }) {
    let propsConfig = complexTableDetails.props;
    if (!propsConfig.columnsField || !propsConfig.columnsField[colIndex]) {
      return "";
    }
    let nowRow = tableData[rowIndex];
    if (!nowRow) {
      return "";
    }
    let styleText = "";
    let styleObj = {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0
    };
    let topSpace = (nowRow._paginationMode_excessIndex + 1) * propsConfig.contentRowHeight;
    styleObj.top = `-${topSpace}px`;
    Object.keys(styleObj).forEach((key, index) => {
      styleText += `${camelToKebab(key)}:${styleObj[key]};`;
    });
    return styleText;
  }
  function _formatContentTrClass({ complexTableDetails, rowData }) {
    let classList = ["complex-table-content-tr"];
    if (
      !!rowData._paginationMode_type &&
      rowData._paginationMode_type == "notExcess" &&
      rowData._paginationMode_excessRowsLength >= 1
    ) {
      classList.push("complex-table-content-tr--excess-blank-begin");
    } else if (
      !!rowData._paginationMode_type &&
      rowData._paginationMode_type == "excessBlankRow" &&
      rowData._paginationMode_excessIndex == rowData._paginationMode_excessRowsLength - 1
    ) {
      classList.push("complex-table-content-tr--excess-blank-end");
    } else if (!!rowData._paginationMode_type && rowData._paginationMode_type == "excessBlankRow") {
      classList.push("complex-table-content-tr--excess-blank");
    }
    return classList.join(" ");
  }
  return {
    createComplexTableHtml
  };
};