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

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

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
  };
};