cui-print 1.0.28

package/dist/print-designer-api/use-create-html/use-base-component-helper.js

@@ -0,0 +1,129 @@
+import printDesignerStyleHelper from "../print-designer-style-helper";
+import createHtmlUtils from "./create-html-utils";
+export default ({ printData, printConfig, formConfig, layoutConfig, errorLogs } = {}) => {
+  const createPageTopHtml = (componentItem) => {
+    let pageBreakHtml = `<div class="print-page-top"></div>`;
+    return pageBreakHtml;
+  };
+  const createPageBottomHtml = (componentItem) => {
+    let pageBreakHtml = `<div class="print-page-bottom"></div>`;
+    return pageBreakHtml;
+  };
+  const createPageBreakHtml = (componentItem) => {
+    let pageBreakHtml = `<div class="print-page-break"></div>`;
+    return pageBreakHtml;
+  };
+  const createTextHtml = (componentItem) => {
+    let titleHtml = `<div class="${createHtmlUtils.formatComponentClass({
+      componentItem,
+      className: "print-text"
+    })}" style="${printDesignerStyleHelper.createTextStyle({
+      styleConfig: componentItem.style
+    })}">${componentItem.props.defaultContent}</div>`;
+    return titleHtml;
+  };
+  const createDynamicTextHtml = (componentItem) => {
+    let text = printData[componentItem.props.field];
+    if (!!componentItem.props.isDateTime) {
+      text = createHtmlUtils.formatDate({
+        dateText: text,
+        format: componentItem.props.dateTimeFormat
+      });
+    }
+    let textHtml = `<div class="${createHtmlUtils.formatComponentClass({
+      componentItem,
+      className: "print-dynamic-text"
+    })}" style="${printDesignerStyleHelper.createDynamicTextStyle({
+      styleConfig: componentItem.style
+    })}">
+        <div class="print-dynamic-text_label" style="${printDesignerStyleHelper.createDynamicTextLabelStyle({
+          styleConfig: componentItem.style
+        })}">${componentItem.props.label}</div>
+        <div class="print-dynamic-text_content" style="${printDesignerStyleHelper.createDynamicTextContentStyle({
+          styleConfig: componentItem.style
+        })}">${text}</div>
+      </div>`;
+    return textHtml;
+  };
+  const createTableHtml = (componentItem) => {
+    let tableHtml = `<table class="${createHtmlUtils.formatComponentClass({
+      componentItem,
+      className: "print-table"
+    })}" cellpadding="0" cellspacing="0" style="${printDesignerStyleHelper.createTableStyle({
+      styleConfig: componentItem.style
+    })}">${_createTableHeaderHtml(componentItem)}${_createTableContentHtml(componentItem)}</table>`;
+    return tableHtml;
+  };
+  function _createTableHeaderHtml(componentItem) {
+    let tableHeaderHtml = "";
+    componentItem.columns.forEach((columnItem, columnIndex) => {
+      tableHeaderHtml += `<th style="${printDesignerStyleHelper.createTableHeaderStyle({
+        tableStyleConfig: componentItem.style,
+        columnStyleConfig: columnItem.style
+      })}">${columnItem.props.headerTitle}</th>`;
+    });
+    tableHeaderHtml = `<tr>${tableHeaderHtml}</tr>`;
+    return tableHeaderHtml;
+  }
+  function _createTableContentHtml(componentItem) {
+    let tableData = printData[componentItem.props.field];
+    let tableContentHtml = "";
+    tableData.forEach((tableDataItem, tableDataIndex) => {
+      let trHtml = "";
+      componentItem.columns.forEach((columnItem, columnIndex) => {
+        trHtml += `<td style="${printDesignerStyleHelper.createTableCellStyle({
+          tableStyleConfig: componentItem.style,
+          columnStyleConfig: columnItem.style
+        })}">${tableDataItem[columnItem.props.field]}</td>`;
+      });
+      trHtml = `<tr>${trHtml}</tr>`;
+      tableContentHtml += trHtml;
+    });
+    return tableContentHtml;
+  }
+  const createBarcodeHtml = (componentItem) => {
+    let barcodeHtml = `<div class="${createHtmlUtils.formatComponentClass({
+      componentItem,
+      className: "print-barcode"
+    })}" style="${printDesignerStyleHelper.createBarcodeContainerStyle({
+      styleConfig: componentItem.style
+    })}"><svg name="barcode_${componentItem.id}"></svg></div>`;
+    return barcodeHtml;
+  };
+  const createQrcodeHtml = (componentItem) => {
+    let barcodeHtml = `<div class="${createHtmlUtils.formatComponentClass({
+      componentItem,
+      className: "print-qrcode"
+    })}" style="${printDesignerStyleHelper.createQrcodeContainerStyle({
+      styleConfig: componentItem.style
+    })}"><div name="qrcode_${componentItem.id}"></div></div>`;
+    return barcodeHtml;
+  };
+  const createImageHtml = (componentItem) => {
+    let propsConfig = componentItem.props;
+    let imageSrc = "";
+    if (!!propsConfig && !propsConfig.field && !!propsConfig.src) {
+      imageSrc = propsConfig.src;
+    } else if (!!propsConfig && !!propsConfig.field) {
+      imageSrc = printData[propsConfig.field];
+    }
+    let imageHtml = `<div class="${createHtmlUtils.formatComponentClass({
+      componentItem,
+      className: "print-image"
+    })}" style="${printDesignerStyleHelper.createImageContainerStyle({
+      styleConfig: componentItem.style
+    })}"><img src="${imageSrc}" /></div>`;
+    return imageHtml;
+  };
+  return {
+    createPageTopHtml,
+    createPageBottomHtml,
+    createPageBreakHtml,
+    createTextHtml,
+    createDynamicTextHtml,
+    createTableHtml,
+    createBarcodeHtml,
+    createQrcodeHtml,
+    createImageHtml
+  };
+};

package/dist/print-designer-api/use-create-html/use-complex-table-helper/complex-table-tools.js

@@ -0,0 +1,129 @@
+import { deepCopy } from "../../print-designer-utils";
+const getHeaderCellId = ({ rowIndex, colIndex } = {}) => {
+  return `${rowIndex}-${colIndex}`;
+};
+const createHeaderSpanDetails = ({ complexTableDetails } = {}) => {
+  let spanHeaderCellDict = {};
+  let spanHeaderCellList = [];
+  if (!complexTableDetails.headerLayout || complexTableDetails.headerLayout.length <= 0) {
+    return { spanHeaderCellDict, spanHeaderCellList };
+  }
+  complexTableDetails.headerLayout.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);
+      }
+    }
+    spanHeaderCellDict[getHeaderCellId({ rowIndex: item.rowIndex, colIndex: item.colIndex })] = itemSpanCellList;
+    spanHeaderCellList.push(...itemSpanCellList);
+  });
+  return { spanHeaderCellDict, spanHeaderCellList };
+};
+const getHeaderCellShow = ({ rowIndex, colIndex, spanHeaderCellList }) => {
+  if (!spanHeaderCellList || spanHeaderCellList.length <= 0) {
+    return true;
+  }
+  let cellItem = spanHeaderCellList.find((item, index) => {
+    return rowIndex === item.rowIndex && item.colIndex === colIndex;
+  });
+  if (!cellItem) {
+    return true;
+  }
+  if (!!cellItem) {
+    return cellItem.show;
+  }
+};
+const getRowspan = ({ rowIndex, colIndex, headerLayout } = {}) => {
+  let nowRowspan = 1;
+  if (!headerLayout || headerLayout.length <= 0) {
+    return nowRowspan;
+  }
+  let cellItem = headerLayout.find((item, index) => {
+    return rowIndex === item.rowIndex && item.colIndex === colIndex;
+  });
+  if (!cellItem) {
+    return nowRowspan;
+  }
+  if (!!cellItem && !!cellItem.rowspan) {
+    return cellItem.rowspan;
+  }
+  return nowRowspan;
+};
+const getColspan = ({ rowIndex, colIndex, headerLayout } = {}) => {
+  let nowColspan = 1;
+  if (!headerLayout || headerLayout.length <= 0) {
+    return nowColspan;
+  }
+  let cellItem = headerLayout.find((item, index) => {
+    return rowIndex === item.rowIndex && item.colIndex === colIndex;
+  });
+  if (!cellItem) {
+    return nowColspan;
+  }
+  if (!!cellItem && !!cellItem.colspan) {
+    return cellItem.colspan;
+  }
+  return nowColspan;
+};
+const getTableData = ({ complexTableDetails, printData } = {}) => {
+  if (!complexTableDetails.props || !complexTableDetails.props.field) {
+    return [];
+  }
+  let field = complexTableDetails.props.field;
+  if (Array.isArray(printData[field])) {
+    return deepCopy(printData[field]);
+  }
+  return [];
+};
+const formatHeaderRules = ({ complexTableDetails }) => {
+  let headerRules = complexTableDetails.headerRules;
+  if (!headerRules) {
+    return;
+  }
+  let { spanHeaderCellDict, spanHeaderCellList } = createHeaderSpanDetails({ complexTableDetails });
+  spanHeaderCellList.forEach((item, index) => {
+    if (!!item.show) {
+      return;
+    }
+    let headerCellId = getHeaderCellId({ rowIndex: item.rowIndex, colIndex: item.colIndex });
+    if (!!headerRules[headerCellId]) {
+      delete headerRules[headerCellId];
+    }
+  });
+};
+export default {
+  getHeaderCellId,
+  createHeaderSpanDetails,
+  getHeaderCellShow,
+  getRowspan,
+  getColspan,
+  getTableData,
+  formatHeaderRules
+};

package/dist/print-designer-api/use-create-html/use-complex-table-helper/create-table-header.js

@@ -0,0 +1,111 @@
+import { deepCopy } from "../../print-designer-utils";
+import printDesignerStyleHelper from "../../print-designer-style-helper";
+import complexTableTools from "./complex-table-tools";
+const getHeaderCellHtml = ({ rowIndex, colIndex, spanHeaderCellList, complexTableDetails } = {}) => {
+  let cellShow = complexTableTools.getHeaderCellShow({ rowIndex, colIndex, spanHeaderCellList });
+  let headerCellHtml = "";
+  if (!cellShow) {
+    return "";
+  }
+  let headerLayout = complexTableDetails.headerLayout;
+  let propsConfig = complexTableDetails.props;
+  let styleConfig = complexTableDetails.style;
+  let headerRules = complexTableDetails.headerRules;
+  let headerRulesId = printDesignerStyleHelper.getComplexTableHeaderRulesId({
+    rowIndex,
+    colIndex
+  });
+  let tdPropsConfig = {};
+  let tdStyleConfig = {};
+  if (!!headerRules && !!headerRules[headerRulesId]) {
+    tdPropsConfig = headerRules[headerRulesId].props;
+    tdStyleConfig = headerRules[headerRulesId].style;
+  }
+  if (!!tdPropsConfig.slash) {
+    // 有斜线
+    headerCellHtml = `<td rowspan="${complexTableTools.getRowspan({
+      rowIndex,
+      colIndex,
+      headerLayout
+    })}" colspan="${complexTableTools.getColspan({
+      rowIndex,
+      colIndex,
+      headerLayout
+    })}" style="${printDesignerStyleHelper.createComplexTableHeaderTdStyle({
+      complexTablePropsConfig: propsConfig,
+      complexTableStyleConfig: styleConfig,
+      tdPropsConfig,
+      tdStyleConfig
+    })}">${_createHeaderCellSlashHtml({
+      complexTableId: complexTableDetails.id,
+      rowIndex,
+      colIndex,
+      complexTableStyleConfig: complexTableDetails.style,
+      tdPropsConfig
+    })}</td>`;
+  } else {
+    // 无斜线
+    headerCellHtml = `<td rowspan="${complexTableTools.getRowspan({
+      rowIndex,
+      colIndex,
+      headerLayout
+    })}" colspan="${complexTableTools.getColspan({
+      rowIndex,
+      colIndex,
+      headerLayout
+    })}" style="${printDesignerStyleHelper.createComplexTableHeaderTdStyle({
+      complexTablePropsConfig: propsConfig,
+      complexTableStyleConfig: styleConfig,
+      tdPropsConfig,
+      tdStyleConfig
+    })}"><div style="${printDesignerStyleHelper.createComplexTableHeaderTdContainerStyle({
+      complexTablePropsConfig: propsConfig,
+      complexTableStyleConfig: styleConfig,
+      tdPropsConfig,
+      tdStyleConfig
+    })}">${_createHeaderTdText({ rowIndex, colIndex, complexTableDetails })}</div></td>`;
+  }
+  return headerCellHtml;
+};
+function _createHeaderTdText({ rowIndex, colIndex, complexTableDetails } = {}) {
+  let headerRules = complexTableDetails.headerRules;
+  let headerRulesId = printDesignerStyleHelper.getComplexTableHeaderRulesId({
+    rowIndex,
+    colIndex
+  });
+  let tdPropsConfig = false;
+  if (!!headerRules && !!headerRules[headerRulesId]) {
+    tdPropsConfig = headerRules[headerRulesId].props;
+  }
+  if (!!tdPropsConfig) {
+    return tdPropsConfig.title;
+  }
+  return "";
+}
+function _createHeaderCellSlashHtml({ complexTableId, rowIndex, colIndex, complexTableStyleConfig, tdPropsConfig } = {}) {
+  let slashContainerHtml = "";
+  let slashHtml = "";
+  let slashTextLeftHtml = "";
+  let slashTexRightHtml = "";
+  let slashTexLeft = "";
+  let slashTexRight = "";
+  if (!!tdPropsConfig && !!tdPropsConfig.slashTextLeft) {
+    slashTexLeft = tdPropsConfig.slashTextLeft;
+  }
+  if (!!tdPropsConfig && !!tdPropsConfig.slashTextRight) {
+    slashTexRight = tdPropsConfig.slashTextRight;
+  }
+  slashHtml = `<div class="_p-c-t_td-slash_slash"></div>`;
+  slashTextLeftHtml = `<div class="_p-c-t_td-slash_left">${slashTexLeft}</div>`;
+  slashTexRightHtml = `<div class="_p-c-t_td-slash_right">${slashTexRight}</div>`;
+  slashContainerHtml = `<div name="${complexTableId}_header_${complexTableTools.getHeaderCellId({
+    rowIndex,
+    colIndex
+  })}_slash" class="print-complex-table_td-slash print-complex-table_td-slash--${
+    tdPropsConfig.slashDirection
+  }">${slashTextLeftHtml}${slashHtml}${slashTexRightHtml}</div>`;
+  return slashContainerHtml;
+}
+export default {
+  getHeaderCellHtml
+};

package/dist/print-designer-api/use-create-html/use-complex-table-helper/index.js

@@ -0,0 +1,87 @@
+import { deepCopy } from "../../print-designer-utils";
+import useDefault from "./use-default";
+import useFixedHeight from "./use-fixed-height";
+import useAutoHeightPreview from "./use-auto-height-preview";
+import useAutoHeight from "./use-auto-height";
+import usePaginationPreview from "./use-pagination-preview";
+import usePagination from "./use-pagination";
+export default ({ printData, printConfig, formConfig, layoutConfig, createHtmlByComponentItem, errorLogs } = {}) => {
+  const createComplexTableHtml = (item) => {
+    let complexTableHtml = "";
+    if (!item.props || !item.props.headerRow || !item.props.col) {
+      return complexTableHtml;
+    }
+    if (!item.props.canContinue && !item.props.isPaginationMode) {
+      const defaultInstance = useDefault({
+        printData,
+        printConfig,
+        formConfig,
+        layoutConfig,
+        createHtmlByComponentItem,
+        errorLogs
+      });
+      return defaultInstance.createComplexTableHtml(item);
+    }
+    if (!!item.props.canContinue && item.props.continuePrintMode == "fixedHeight") {
+      const fixedHeightInstance = useFixedHeight({
+        printData,
+        printConfig,
+        formConfig,
+        layoutConfig,
+        createHtmlByComponentItem,
+        errorLogs
+      });
+      return fixedHeightInstance.createComplexTableHtml(item);
+    }
+    if (!!item.props.canContinue && item.props.continuePrintMode == "_autoHeight_previewElements") {
+      // _autoHeight_previewElements 该值是代码运行中动态赋予的，无法在设计器中设置
+      const autoHeightPreviewInstance = useAutoHeightPreview({
+        printData,
+        printConfig,
+        formConfig,
+        layoutConfig,
+        createHtmlByComponentItem,
+        errorLogs
+      });
+      return autoHeightPreviewInstance.createComplexTableHtml(item);
+    }
+    if (!!item.props.canContinue && item.props.continuePrintMode == "autoHeight") {
+      const autoHeightInstance = useAutoHeight({
+        printData,
+        printConfig,
+        formConfig,
+        layoutConfig,
+        createHtmlByComponentItem,
+        errorLogs
+      });
+      return autoHeightInstance.createComplexTableHtml(item);
+    }
+    if (!!item.props.isPaginationMode && !!item.props._paginationModePreview) {
+      // _paginationModePreview 该属性是代码运行中动态赋予的，无法在设计器中设置
+      const paginationPreviewInstance = usePaginationPreview({
+        printData,
+        printConfig,
+        formConfig,
+        layoutConfig,
+        createHtmlByComponentItem,
+        errorLogs
+      });
+      return paginationPreviewInstance.createComplexTableHtml(item);
+    }
+    if (!!item.props.isPaginationMode && !item.props._paginationModePreview) {
+      const paginationInstance = usePagination({
+        printData,
+        printConfig,
+        formConfig,
+        layoutConfig,
+        createHtmlByComponentItem,
+        errorLogs
+      });
+      return paginationInstance.createComplexTableHtml(item);
+    }
+    return complexTableHtml;
+  };
+  return {
+    createComplexTableHtml
+  };
+};

package/dist/print-designer-api/use-create-html/use-complex-table-helper/use-auto-height-preview.js

@@ -0,0 +1,84 @@
+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) => {
+    return _createHtml({ 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--auto-continue-preview" 
+      style="${printDesignerStyleHelper.createComplexTableStyle({
+        propsConfig: complexTableDetails.props,
+        styleConfig: complexTableDetails.style
+      })}" 
+      cellspacing="0" 
+      cellpadding="0">${complexTableHtml}
+    </table>`;
+    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 class="content-text" 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;
+  }
+  return {
+    createComplexTableHtml
+  };
+};