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

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

import printDesignerStyleHelper from "../print-designer-style-helper";
import createHtmlUtils from "./create-html-utils";
export default ({ printData, printConfig, formConfig, layoutConfig, createHtmlByComponentItem, errorLogs } = {}) => {
  const createTableLayoutHtml = (item) => {
    let tableLayoutHtml = "";
    if (!item.props || !item.props.row || !item.props.col) {
      return tableLayoutHtml;
    }
    let { spanCellDict, spanCellList } = _createTableLayoutSpanDetails(item);
    let rowLength = item.props.row;
    let colLength = item.props.col;
    for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
      let cellHtml = ``;
      for (let colIndex = 0; colIndex < colLength; colIndex++) {
        let nowCellHtml = _getCellHtml({ rowIndex, colIndex, spanCellList, tableLayoutDetails: item });
        cellHtml += nowCellHtml;
      }
      let rowHtml = `<tr>${cellHtml}</tr>`;
      tableLayoutHtml += rowHtml;
    }
    tableLayoutHtml = `<table class="print-table-layout ${createHtmlUtils.formatComponentClass({
      componentItem: item
    })}" style="${printDesignerStyleHelper.createTableLayoutStyle({
      styleConfig: item.style
    })}" cellspacing="0" cellpadding="0">${tableLayoutHtml}</table>`;
    return tableLayoutHtml;
  };
  function _getCellId({ rowIndex, colIndex } = {}) {
    return `${rowIndex}-${colIndex}`;
  }
  function _createTableLayoutSpanDetails(tableLayoutDetails) {
    let spanCellDict = {};
    let spanCellList = [];
    if (!tableLayoutDetails.layout || tableLayoutDetails.layout.length <= 0) {
      return { spanCellDict, spanCellList };
    }
    tableLayoutDetails.layout.forEach((item, index) => {
      let rowspan = !!item.rowspan ? item.rowspan : 1;
      let colspan = !!item.colspan ? item.colspan : 1;
      let minRowIndex = item.rowIndex;
      let maxRowIndex = item.rowIndex + rowspan - 1;
      let minColIndex = item.colIndex;
      let maxColIndex = item.colIndex + colspan - 1;
      let itemSpanCellList = [];
      for (let rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
        for (let colIndex = minColIndex; colIndex <= maxColIndex; colIndex++) {
          let newCellDetails;
          if (rowIndex === item.rowIndex && colIndex === item.colIndex) {
            newCellDetails = {
              rowIndex,
              colIndex,
              rowspan,
              colspan,
              show: true
            };
          } else {
            newCellDetails = {
              rowIndex,
              colIndex,
              rowspan,
              colspan,
              startRowIndex: item.rowIndex,
              startColIndex: item.colIndex,
              show: false
            };
          }
          itemSpanCellList.push(newCellDetails);
        }
      }
      spanCellDict[_getCellId({ rowIndex: item.rowIndex, colIndex: item.colIndex })] = itemSpanCellList;
      spanCellList.push(...itemSpanCellList);
    });
    return { spanCellDict, spanCellList };
  }
  function _getCellShow({ rowIndex, colIndex, spanCellList }) {
    if (!spanCellList || spanCellList.length <= 0) {
      return true;
    }
    let cellItem = spanCellList.find((item, index) => {
      return rowIndex === item.rowIndex && item.colIndex === colIndex;
    });
    if (!cellItem) {
      return true;
    }
    if (!!cellItem) {
      return cellItem.show;
    }
  }
  function _getRowspan({ rowIndex, colIndex, layout } = {}) {
    let nowRowspan = 1;
    if (!layout || layout.length <= 0) {
      return nowRowspan;
    }
    let cellItem = layout.find((item, index) => {
      return rowIndex === item.rowIndex && item.colIndex === colIndex;
    });
    if (!cellItem) {
      return nowRowspan;
    }
    if (!!cellItem && !!cellItem.rowspan) {
      return cellItem.rowspan;
    }
    return nowRowspan;
  }
  function _getColspan({ rowIndex, colIndex, layout } = {}) {
    let nowColspan = 1;
    if (!layout || layout.length <= 0) {
      return nowColspan;
    }
    let cellItem = layout.find((item, index) => {
      return rowIndex === item.rowIndex && item.colIndex === colIndex;
    });
    if (!cellItem) {
      return nowColspan;
    }
    if (!!cellItem && !!cellItem.colspan) {
      return cellItem.colspan;
    }
    return nowColspan;
  }
  function _getCellHtml({ rowIndex, colIndex, spanCellList, tableLayoutDetails } = {}) {
    let cellShow = _getCellShow({ rowIndex, colIndex, spanCellList });
    let cellHtml = "";
    if (!cellShow) {
      return "";
    }
    let layout = tableLayoutDetails.layout;
    let styleRules = tableLayoutDetails.styleRules;
    let styleRulesId = printDesignerStyleHelper.getTableLayoutStyleRulesId({
      rowIndex,
      colIndex
    });
    let tdStyleConfig = false;
    if (!!styleRules && !!styleRules[styleRulesId]) {
      tdStyleConfig = styleRules[styleRulesId];
    }
    let slashHtml = "";
    let componentsHtml = "";
    if (!!tdStyleConfig.container_custom_slash) {
      // 有斜线
      slashHtml = _createSlashHtml({
        tableLayoutId: tableLayoutDetails.id,
        rowIndex,
        colIndex,
        tableLayoutStyleConfig: tableLayoutDetails.style,
        tdStyleConfig
      });
    } else {
      // 没有斜线才会渲染组件
      let componentList = _getComponentList({ rowIndex, colIndex, tableLayoutDetails });
      componentList.forEach((componentItem, componentIndex) => {
        componentsHtml += createHtmlByComponentItem(componentItem);
      });
    }
    cellHtml = `<td rowspan="${_getRowspan({
      rowIndex,
      colIndex,
      layout
    })}" colspan="${_getColspan({
      rowIndex,
      colIndex,
      layout
    })}" style="${printDesignerStyleHelper.createTableLayoutTdStyle({
      tableLayoutStyleConfig: tableLayoutDetails.style,
      tdStyleConfig
    })}">${slashHtml}<div class="print-table-layout_td-container" style="${printDesignerStyleHelper.createTableLayoutTdContainerStyle(
      {
        tableLayoutStyleConfig: tableLayoutDetails.style,
        tdStyleConfig
      }
    )}">${componentsHtml}</div></td>`;
    return cellHtml;
  }
  function _getComponentList({ rowIndex, colIndex, tableLayoutDetails } = {}) {
    let componentList = [];
    if (!tableLayoutDetails || !tableLayoutDetails.children || tableLayoutDetails.children.length <= 0) {
      return componentList;
    }
    tableLayoutDetails.children.forEach((componentItem, componentIndex) => {
      if (componentItem.rowIndex === rowIndex && componentItem.colIndex === colIndex) {
        componentList.push(componentItem);
      }
    });
    return componentList;
  }
  function _createSlashHtml({ tableLayoutId, rowIndex, colIndex, tableLayoutStyleConfig, tdStyleConfig } = {}) {
    let slashContainerHtml = "";
    let slashHtml = "";
    let slashTextLeftHtml = "";
    let slashTexRightHtml = "";
    let slashTexLeft = "";
    let slashTexRight = "";
    if (!!tdStyleConfig && !!tdStyleConfig.container_custom_slashTextLeft) {
      slashTexLeft = tdStyleConfig.container_custom_slashTextLeft;
    }
    if (!!tdStyleConfig && !!tdStyleConfig.container_custom_slashTextRight) {
      slashTexRight = tdStyleConfig.container_custom_slashTextRight;
    }
    slashHtml = `<div class="_p-t-l_td-slash_slash"></div>`;
    slashTextLeftHtml = `<div class="_p-t-l_td-slash_left">${slashTexLeft}</div>`;
    slashTexRightHtml = `<div class="_p-t-l_td-slash_right">${slashTexRight}</div>`;
    slashContainerHtml = `<div id="${tableLayoutId}_${_getCellId({
      rowIndex,
      colIndex
    })}_slash" class="print-table-layout_td-slash print-table-layout_td-slash--${
      tdStyleConfig.container_custom_slashDirection
    }">${slashTextLeftHtml}${slashHtml}${slashTexRightHtml}</div>`;
    return slashContainerHtml;
  }
  return {
    createTableLayoutHtml
  };
};