cui-print 1.0.28

package/dist/print-designer-api/use-create-html/use-format/use-complex-table-pagination.js

@@ -0,0 +1,286 @@
+import { deepCopy, extractNumbers } from "../../print-designer-utils";
+export default ({ printData, printConfig, formConfig, layoutConfig, tablePaginationElements } = {}) => {
+  const formatLayoutConfig = () => {
+    console.log("【复杂表格分页】formatLayoutConfig入参===>", {
+      printData: deepCopy(printData),
+      printConfig: deepCopy(printConfig),
+      formConfig: deepCopy(formConfig),
+      layoutConfig: deepCopy(layoutConfig),
+      tablePaginationElements
+    });
+    let paginationDetails = _getPaginationDetails();
+    console.log("【复杂表格分页】获取续打信息====>paginationDetails", paginationDetails);
+    if (!paginationDetails.paginationState || !paginationDetails.dataField) {
+      return layoutConfig;
+    }
+    printData[paginationDetails.dataField] = _formatTableData({ paginationDetails });
+    let continueAllData = printData[paginationDetails.dataField];
+    console.log("【复杂表格分页】处理后的数据====>continueAllData", deepCopy(continueAllData));
+    let continueSplitData = _splitPaginationAllData({
+      continueAllData,
+      pageMaxRow: paginationDetails.pageMaxRow
+    });
+    console.log("【复杂表格分页】拆分数据====>continueSplitData", continueSplitData);
+    let oldLayoutConfig = _filterLayoutConfig();
+    let layoutConfigExcludingLastPage = _formatLayoutConfigExcludingLastPage({ oldLayoutConfig });
+    let newLayoutConfig = [];
+    continueSplitData.forEach((item, index) => {
+      let currentPage = index + 1;
+      let pageLayoutConfig = _createPageLayoutConfig({
+        oldLayoutConfig,
+        layoutConfigExcludingLastPage,
+        paginationDetails,
+        pageComplateTableData: item,
+        currentPage: currentPage,
+        pageCount: continueSplitData.length
+      });
+      newLayoutConfig.push(...pageLayoutConfig);
+    });
+    return newLayoutConfig;
+  };
+  function _createPageLayoutConfig({
+    oldLayoutConfig,
+    layoutConfigExcludingLastPage,
+    paginationDetails,
+    pageComplateTableData,
+    currentPage,
+    pageCount
+  } = {}) {
+    let pageLayoutConfig;
+    if (currentPage < pageCount) {
+      // 不是最后一页 需要过滤在最后一页显示的元素
+      pageLayoutConfig = deepCopy(layoutConfigExcludingLastPage);
+    } else {
+      pageLayoutConfig = deepCopy(oldLayoutConfig);
+    }
+    let newField = `_pagination_${paginationDetails.dataField}_${currentPage}`;
+    let nowTablePaginationConfig = {
+      type: "pagination_default",
+      currentPage,
+      blankRowCount: 0
+    };
+    let layoutConfigIndex = _getComplexTableIndex({ nowLayoutConfig: pageLayoutConfig });
+    pageLayoutConfig[layoutConfigIndex].props.field = newField;
+    printData[newField] = deepCopy(pageComplateTableData);
+
+    // 最后一页还有空白行
+    if (currentPage == pageCount && pageComplateTableData.length < paginationDetails.pageMaxRow) {
+      nowTablePaginationConfig.blankRowCount = paginationDetails.pageMaxRow - pageComplateTableData.length;
+      nowTablePaginationConfig.type = "pagination_afterBlankRow";
+    }
+    pageLayoutConfig[layoutConfigIndex]._tablePaginationConfig = nowTablePaginationConfig;
+    if (pageCount > 1) {
+      if (currentPage > 1) {
+        // 添加分页上边距
+        pageLayoutConfig.unshift({
+          type: "pageTop"
+        });
+      }
+      if (currentPage < pageCount) {
+        // 添加分页下边距
+        pageLayoutConfig.push({
+          type: "pageBottom"
+        });
+        // 添加分页
+        pageLayoutConfig.push({
+          type: "pageBreak"
+        });
+      }
+    }
+    return pageLayoutConfig;
+  }
+  function _filterLayoutConfig() {
+    // 只保留第一个续打表格
+    let newLayoutConfig = [];
+    let paginationConfigItem = false;
+    layoutConfig.forEach((item, index) => {
+      let nowProps = !!item.props ? item.props : {};
+      if (item.type == "complexTable" && !!nowProps.canContinue && !!paginationConfigItem) {
+        return;
+      }
+      if (item.type == "complexTable" && !!nowProps.canContinue) {
+        paginationConfigItem = item;
+      }
+      newLayoutConfig.push(item);
+    });
+    return newLayoutConfig;
+  }
+  function _getPaginationDetails() {
+    let paginationDetails = {
+      paginationState: false
+    };
+    if (!layoutConfig || layoutConfig.length <= 0) {
+      return paginationDetails;
+    }
+    let paginationConfigItem = false;
+    layoutConfig.forEach((item, index) => {
+      if (!!paginationConfigItem) {
+        return;
+      }
+      let nowProps = !!item.props ? item.props : {};
+      if (item.type == "complexTable" && !!nowProps.isPaginationMode) {
+        paginationConfigItem = item;
+      }
+    });
+    if (!paginationConfigItem) {
+      return paginationDetails;
+    }
+    let paginationConfigItemProps = !!paginationConfigItem.props ? paginationConfigItem.props : {};
+    let paginationConfigItemStyle = !!paginationConfigItem.style ? paginationConfigItem.style : {};
+    paginationDetails.paginationState = true;
+    paginationDetails.paginationConfigItem = deepCopy(paginationConfigItem);
+    paginationDetails.dataField = !!paginationConfigItemProps.field ? paginationConfigItemProps.field : "";
+    paginationDetails.pageMaxRow = !!paginationConfigItemProps.perPageMaxRow ? paginationConfigItemProps.perPageMaxRow : 0;
+    paginationDetails.contentRowHeight = !!paginationConfigItemProps.contentRowHeight
+      ? paginationConfigItemProps.contentRowHeight
+      : 0;
+    if (!paginationConfigItemStyle.contentCell_borderWidth && !!paginationConfigItemStyle.contentCell_borderTopWidth) {
+      paginationDetails.contentRowBorderTop = extractNumbers(paginationConfigItemStyle.contentCell_borderTopWidth);
+    } else if (!!paginationConfigItemStyle.contentCell_borderWidth) {
+      paginationDetails.contentRowBorderTop = extractNumbers(paginationConfigItemStyle.contentCell_borderWidth);
+    } else {
+      paginationDetails.contentRowBorderTop = 0;
+    }
+    if (!paginationConfigItemStyle.contentCell_borderWidth && !!paginationConfigItemStyle.contentCell_borderBottomWidth) {
+      paginationDetails.contentRowBorderBottom = extractNumbers(paginationConfigItemStyle.contentCell_borderBottomWidth);
+    } else if (!!paginationConfigItemStyle.contentCell_borderWidth) {
+      paginationDetails.contentRowBorderBottom = extractNumbers(paginationConfigItemStyle.contentCell_borderWidth);
+    } else {
+      paginationDetails.contentRowBorderBottom = 0;
+    }
+    // 页尾向上合并行数
+    if (!!paginationConfigItemProps.mergedFooterRowCount || paginationConfigItemProps.mergedFooterRowCount === 0) {
+      paginationDetails.mergedFooterRowCount = paginationConfigItemProps.mergedFooterRowCount;
+    } else {
+      paginationDetails.mergedFooterRowCount = 1;
+    }
+    //_printDataTotal内部逻辑使用
+    paginationDetails._printDataTotal = 0;
+    return paginationDetails;
+  }
+  function _formatTableData({ paginationDetails } = {}) {
+    let oldTableData = [];
+    let tempTableData = [];
+    let tableDataGroup = [];
+    if (!!printData[paginationDetails.dataField]) {
+      oldTableData = deepCopy(printData[paginationDetails.dataField]);
+    }
+    tempTableData.push(...oldTableData);
+    tempTableData.forEach((item, index) => {
+      let groupItem = [];
+      let excessRows = _getContentTrExcessRows({ paginationDetails, index, rowData: item });
+      item._paginationMode_excessRowsLength = excessRows.length;
+      groupItem.push(item, ...excessRows);
+      tableDataGroup.push(groupItem);
+    });
+    let newTableData = [];
+    tableDataGroup.forEach((groupItem, groupIndex) => {
+      if (groupIndex.length > 1) {
+        groupItem[0]._paginationMode_type = "excessContentRow";
+      } else {
+        groupItem[0]._paginationMode_type = "notExcess";
+      }
+      newTableData.push(...groupItem);
+    });
+    return newTableData;
+  }
+  function _getContentTrExcessRows({ paginationDetails, index, rowData }) {
+    // 获取超出行数
+    const trElement = tablePaginationElements.querySelector(`[content-index="${index}"]`);
+    let trContentMinHeight =
+      trElement.clientHeight - paginationDetails.contentRowBorderTop - paginationDetails.contentRowBorderBottom;
+    let trContentHeight = trContentMinHeight;
+    let contentTextElements = trElement.querySelectorAll(".content-text");
+    for (let i = 0; i < contentTextElements.length; i++) {
+      let element = contentTextElements[i];
+      if (element.offsetHeight > trContentHeight) {
+        trContentHeight = element.offsetHeight;
+      }
+    }
+    let excessRows = [];
+    let excessRowsLength = (trContentHeight - paginationDetails.contentRowHeight) / paginationDetails.contentRowHeight;
+    excessRowsLength = Math.ceil(excessRowsLength);
+    paginationDetails._printDataTotal += excessRowsLength + 1;
+    // 剩余行数
+    let pageSurplus = paginationDetails.pageMaxRow - (paginationDetails._printDataTotal % paginationDetails.pageMaxRow);
+    if (pageSurplus >= 0 && pageSurplus <= paginationDetails.mergedFooterRowCount) {
+      excessRowsLength += pageSurplus;
+      paginationDetails._printDataTotal += pageSurplus;
+    }
+    for (let i = 0; i < excessRowsLength; i++) {
+      let newRowData = deepCopy(rowData);
+      newRowData._paginationMode_type = "excessBlankRow";
+      newRowData._paginationMode_excessIndex = i;
+      newRowData._paginationMode_excessRowsLength = excessRowsLength;
+      excessRows.push(newRowData);
+    }
+    return excessRows;
+  }
+  function _splitPaginationAllData({ continueAllData, pageMaxRow, continueBeforeRowCount }) {
+    let result = [];
+    let newAllData = continueAllData;
+    for (let i = 0; i < newAllData.length; i += pageMaxRow) {
+      result.push(newAllData.slice(i, i + pageMaxRow));
+    }
+    return result;
+  }
+  function _formatLayoutConfigExcludingLastPage({ oldLayoutConfig }) {
+    // 排除最后一页显示的元素
+    let newLayoutConfig = [];
+    let layoutConfigCopy = deepCopy(oldLayoutConfig);
+    layoutConfigCopy.forEach((item, index) => {
+      if (item.type == "grid") {
+        item.children.forEach((gridItem, gridItemIndex) => {
+          let gridItemCopy = deepCopy(gridItem);
+          gridItem.children = [];
+          gridItemCopy.children.forEach((componentItem, componentIndex) => {
+            if (!__getExcludingState(componentItem)) {
+              gridItem.children.push(componentItem);
+            }
+          });
+        });
+        newLayoutConfig.push(item);
+      } else if (item.type == "tableLayout") {
+        let itemCopy = deepCopy(item);
+        item.children = [];
+        itemCopy.children.forEach((componentItem, componentIndex) => {
+          if (!__getExcludingState(componentItem)) {
+            item.children.push(componentItem);
+          }
+        });
+        newLayoutConfig.push(item);
+      } else if (item.type == "complexTable") {
+        newLayoutConfig.push(item);
+      } else {
+        if (!__getExcludingState(item)) {
+          newLayoutConfig.push(item);
+        }
+      }
+    });
+    function __getExcludingState(componentItem) {
+      if (!componentItem.props) {
+        return false;
+      }
+      if (!!componentItem.props.showOnLastPage) {
+        return true;
+      }
+      return false;
+    }
+    return newLayoutConfig;
+  }
+  function _getComplexTableIndex({ nowLayoutConfig }) {
+    let layoutConfigIndex = -1;
+    nowLayoutConfig.forEach((item, index) => {
+      if (layoutConfigIndex >= 0) {
+        return;
+      }
+      if (item.type == "complexTable") {
+        layoutConfigIndex = index;
+      }
+    });
+    return layoutConfigIndex;
+  }
+  return {
+    formatLayoutConfig
+  };
+};

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

@@ -0,0 +1,35 @@
+import printDesignerStyleHelper from "../print-designer-style-helper";
+import createHtmlUtils from "./create-html-utils";
+export default ({ printData, printConfig, formConfig, layoutConfig, createHtmlByComponentItem, errorLogs } = {}) => {
+  const createGridHtml = (item) => {
+    let gridHtml = "";
+    if (!item.children || item.children.length <= 0) {
+      return gridHtml;
+    }
+    item.children.forEach((gridItem, gridItemIndex) => {
+      gridHtml += `<div class="print-grid-item" style="${printDesignerStyleHelper.createGridItemStyle({
+        styleConfig: gridItem.style,
+        props: gridItem.props
+      })}">${_createGridItemHtml(gridItem)}</div>`;
+    });
+    gridHtml = `<div class="print-grid ${createHtmlUtils.formatComponentClass({
+      componentItem: item
+    })}" style="${printDesignerStyleHelper.createGridStyle({
+      styleConfig: item.style
+    })}">${gridHtml}</div>`;
+    return gridHtml;
+  };
+  function _createGridItemHtml(gridItem) {
+    let gridItemHtml = "";
+    if (!gridItem.children || gridItem.children.length <= 0) {
+      return gridItemHtml;
+    }
+    gridItem.children.forEach((componentItem, componentIndex) => {
+      gridItemHtml += createHtmlByComponentItem(componentItem);
+    });
+    return gridItemHtml;
+  }
+  return {
+    createGridHtml
+  };
+};

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

@@ -0,0 +1,213 @@
+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
+  };
+};

package/dist/print-designer-api/use-create-print-js/index.js

@@ -0,0 +1,147 @@
+import useBaseComponentHelper from "./use-base-component-helper";
+import useFormComponentHelper from "./use-form-component-helper";
+import useTableLayoutHelper from "./use-table-layout-helper";
+export default ({ printData = {}, layoutConfig } = {}) => {
+  const baseComponentHelper = useBaseComponentHelper({
+    printData,
+    layoutConfig
+  });
+  const formComponentHelper = useFormComponentHelper({
+    printData,
+    layoutConfig
+  });
+  const tableLayoutHelper = useTableLayoutHelper({
+    printData,
+    layoutConfig
+  });
+  const createJsStringByComponentItem = (componentItem) => {
+    let newJsString = "";
+    if (componentItem.type == "barcode") {
+      newJsString = baseComponentHelper.createBarcodeJsString(componentItem);
+      return newJsString;
+    }
+    if (componentItem.type == "qrcode") {
+      newJsString = baseComponentHelper.creatQrcodeJsString(componentItem);
+      return newJsString;
+    }
+    return newJsString;
+  };
+  const createJsStringOnGrid = (item) => {
+    let newJsString = "";
+    if (!item.children || item.children.length <= 0) {
+      return newJsString;
+    }
+    item.children.forEach((gridItem, gridItemIndex) => {
+      if (!gridItem.children || gridItem.children.length <= 0) {
+        return;
+      }
+      gridItem.children.forEach((componentItem, componentIndex) => {
+        newJsString += createJsStringByComponentItem(componentItem);
+      });
+    });
+    return newJsString;
+  };
+  const createJsStringOnTablelayout = (item) => {
+    let newJsString = "";
+    let styleRules = !!item.styleRules ? item.styleRules : {};
+    let children = !!item.children ? item.children : [];
+    Object.keys(styleRules).forEach((key, index) => {
+      let nowStyleRule = styleRules[key];
+      if (!nowStyleRule.container_custom_slash) {
+        return;
+      }
+      newJsString += `setTableLayoutTdSlashStyle("${item.id}_${key}_slash","${nowStyleRule.container_custom_slashDirection}");\n`;
+    });
+    children.forEach((componentItem, componentIndex) => {
+      newJsString += createJsStringByComponentItem(componentItem);
+    });
+    return newJsString;
+  };
+  const createJsStringByComplexTable = (item) => {
+    let newJsString = "";
+    let headerRules = !!item.headerRules ? item.headerRules : {};
+    Object.keys(headerRules).forEach((key, index) => {
+      let nowHeaderRule = headerRules[key];
+      if (!nowHeaderRule.props || !nowHeaderRule.props.slash) {
+        return;
+      }
+      newJsString += `setComplexTableHeaderTdSlashStyleBySlashName("${item.id}_header_${key}_slash","${nowHeaderRule.props.slashDirection}");\n`;
+    });
+    return newJsString;
+  };
+  const createBaseJsString = () => {
+    const setTableLayoutTdSlashStyle = `
+      function setTableLayoutTdSlashStyle(containerId, direction) {
+        let slashContainerDom = document.getElementById(containerId);
+        if (!slashContainerDom) {
+          return;
+        }
+        let parent = slashContainerDom.parentElement; // 获取祖父元素
+        let slashDom = parent.querySelector("._p-t-l_td-slash_slash");
+        let width = parent.clientWidth;
+        let height = parent.clientHeight;
+        let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+        let slashDeg = (Math.atan(height / width) * 180) / Math.PI;
+        slashDom.style.width = slashWidth + "px";
+        slashDom.style.transformOrigin = "top left";
+        if (direction == "top-left") {
+          slashDom.style.transform = "rotate(" + slashDeg + "deg)";
+        } else {
+          slashDom.style.transform = "rotate(-" + slashDeg + "deg)";
+        }
+      }
+    `;
+    const setComplexTableHeaderTdSlashStyleBySlashName = `
+      function setComplexTableHeaderTdSlashStyleBySlashName(slashName, direction) {
+        if (!slashName) {
+          return;
+        }
+        const slashElements = document.querySelectorAll('[name="'+ slashName +'"]');
+        slashElements.forEach((element) => {
+          setComplexTableHeaderTdSlashStyle(element, direction);
+        });
+      }
+    `;
+    const setComplexTableHeaderTdSlashStyle = `
+      function setComplexTableHeaderTdSlashStyle(slashContainerDom, direction) {
+        if (!slashContainerDom) {
+          return;
+        }
+        let parent = slashContainerDom.parentElement; // 获取祖父元素
+        let slashDom = parent.querySelector("._p-c-t_td-slash_slash");
+        let width = parent.clientWidth;
+        let height = parent.clientHeight;
+        let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+        let slashDeg = (Math.atan(height / width) * 180) / Math.PI;
+        slashDom.style.width = slashWidth + "px";
+        slashDom.style.transformOrigin = "top left";
+        if (direction == "top-left") {
+          slashDom.style.transform = "rotate(" + slashDeg + "deg)";
+        } else {
+          slashDom.style.transform = "rotate(-" + slashDeg + "deg)";
+        }
+      }
+    `;
+    const createQRCode = `
+      function createQRCode(name, qrcodeConfig) {
+        let qrElements = document.getElementsByName(name);
+        for (let i = 0; i < qrElements.length; i++) {
+          const element = qrElements[i];
+          let qrcode = new QRCode(element, qrcodeConfig);
+        }
+      }
+    `;
+    return `
+    ${setTableLayoutTdSlashStyle}
+    ${setComplexTableHeaderTdSlashStyleBySlashName}
+    ${setComplexTableHeaderTdSlashStyle}
+    ${createQRCode}`;
+  };
+  return {
+    createJsStringByComponentItem,
+    createJsStringOnGrid,
+    createJsStringOnTablelayout,
+    createJsStringByComplexTable,
+    createBaseJsString
+  };
+};