wui-print/dist/print-designer-api/use-create-html/use-complex-table-helper/use-auto-height.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._continueConfig) {
      return "";
    }
    if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "auto_default") {
      return _createHtml({ complexTableDetails });
    }
    if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "auto_continuingContent") {
      // 添加续打表格
      return _createContinueContentHtml({ complexTableDetails });
    }
    if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "auto_blankTable") {
      // 添加空白表格
      return _createBlankHtml({ complexTableDetails });
    }
    if (!!complexTableDetails._continueConfig && complexTableDetails._continueConfig.type == "auto_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"];
    if (!_isAutoHeightSpanCell({ complexTableDetails })) {
      tableClassList.push("print-complex-table--auto-continue-not-span");
    } else {
      tableClassList.push("print-complex-table--auto-continue-span");
    }
    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 _createContinueContentHtml({ complexTableDetails } = {}) {
    let complexTableHtml = "";
    // 设置td宽度需要先执行 complexTableTools.formatHeaderRules 过滤多余的配置
    complexTableTools.formatHeaderRules({ complexTableDetails });
    let colLength = complexTableDetails.props.col;
    let tableData = complexTableTools.getTableData({ complexTableDetails, printData });
    let continueConfig = complexTableDetails._continueConfig;
    let perPageMaxRow = complexTableDetails.props.perPageMaxRow;
    let hasEndTr = false;
    //判断是否包含打印页的最后一行
    if (tableData.length + continueConfig.continueBeforeRowCount == perPageMaxRow) {
      hasEndTr = true;
    }
    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 trClass = _formatContentTrClass({
        complexTableDetails,
        rowData: tableData[rowIndex]
      });
      if (!!hasEndTr && rowIndex == tableData.length - 1) {
        trClass += " complex-table-content-tr--page-end";
      }
      let rowHtml = `<tr class="${trClass}" content-index="${rowIndex}">${contentCellHtml}</tr>`;
      complexTableHtml += rowHtml;
    }
    let tableClassList = ["print-complex-table"];
    if (!_isAutoHeightSpanCell({ complexTableDetails })) {
      tableClassList.push("print-complex-table--auto-continue-not-span");
      tableClassList.push("print-complex-table--auto-continue-not-span_continue-content");
    } else {
      tableClassList.push("print-complex-table--auto-continue-span");
      tableClassList.push("print-complex-table--auto-continue-span_continue-content");
    }
    let tableClass = tableClassList.join(" ");
    complexTableHtml = `<table class="${tableClass}" 
      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;
    }
    let tableClassList = ["print-complex-table"];
    if (!_isAutoHeightSpanCell({ complexTableDetails })) {
      tableClassList.push("print-complex-table--auto-continue-not-span");
    } else {
      tableClassList.push("print-complex-table--auto-continue-span");
    }
    let tableClass = tableClassList.join(" ");
    complexTableHtml = `<table class="${tableClass} 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="${_formatContentTrClass({
        complexTableDetails,
        rowData: tableData[rowIndex]
      })}" 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;
    }
    let tableClassList = ["print-complex-table"];
    if (!_isAutoHeightSpanCell({ complexTableDetails })) {
      tableClassList.push("print-complex-table--auto-continue-not-span");
    } else {
      tableClassList.push("print-complex-table--auto-continue-span");
    }
    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._autoHeightMode_type && rowData._autoHeightMode_type == "excessBlankRow" && rowIndex > 0) {
      // 超出的空白行
      contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
        complexTablePropsConfig: propsConfig,
        complexTableStyleConfig: styleConfig
      })}"><div></div></td>`;
      return contentCellHtml;
    }
    if (!!rowData._autoHeightMode_type && rowData._autoHeightMode_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 _getContinueContentCellHtml({ rowIndex, colIndex, tableData, complexTableDetails } = {}) {
    let propsConfig = complexTableDetails.props;
    let styleConfig = complexTableDetails.style;
    let headerRules = complexTableDetails.headerRules;
    let contentCellHtml = "";
    let rowData = tableData[rowIndex];
    if (!!rowData._autoHeightMode_type && rowData._autoHeightMode_type == "excessBlankRow") {
      // 超出的空白行
      contentCellHtml = `<td style="${printDesignerStyleHelper.createComplexTableContentTdStyle({
        complexTablePropsConfig: propsConfig,
        complexTableStyleConfig: styleConfig
      })}"><div></div></td>`;
      return 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;
  }
  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 shadeHeight =
      (nowRow._autoHeightMode_excessRowsLength - nowRow._autoHeightMode_excessIndex) * propsConfig.contentRowHeight;
    styleObj.height = `${shadeHeight}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._autoHeightMode_excessIndex + 1) * propsConfig.contentRowHeight;
    styleObj.top = `-${topSpace}px`;
    Object.keys(styleObj).forEach((key, index) => {
      styleText += `${camelToKebab(key)}:${styleObj[key]};`;
    });
    return styleText;
  }
  function _isAutoHeightSpanCell({ complexTableDetails }) {
    let propsConfig = complexTableDetails.props;
    if (!printConfig) {
      return false;
    }
    return !!propsConfig.autoHeightSpanCell;
  }
  function _formatContentTrClass({ complexTableDetails, rowData }) {
    let classList = ["complex-table-content-tr"];
    if (
      !!rowData._autoHeightMode_type &&
      rowData._autoHeightMode_type == "notExcess" &&
      rowData._autoHeightMode_excessRowsLength >= 1
    ) {
      classList.push("complex-table-content-tr--excess-blank-begin");
    } else if (
      !!rowData._autoHeightMode_type &&
      rowData._autoHeightMode_type == "excessBlankRow" &&
      rowData._autoHeightMode_excessIndex == rowData._autoHeightMode_excessRowsLength - 1
    ) {
      classList.push("complex-table-content-tr--excess-blank-end");
    } else if (!!rowData._autoHeightMode_type && rowData._autoHeightMode_type == "excessBlankRow") {
      classList.push("complex-table-content-tr--excess-blank");
    }
    return classList.join(" ");
  }
  return {
    createComplexTableHtml
  };
};