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

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

import useBaseComponentHelper from "./use-base-component-helper";
import useFormComponentHelper from "./use-form-component-helper";
import useComplexTableHelper from "./use-complex-table-helper/index.js";
import useGridHelper from "./use-grid-helper";
import useTableLayoutHelper from "./use-table-layout-helper";
import useFormat from "./use-format/index.js";
import { deepCopy } from "../print-designer-utils";
export default ({
  printData,
  printConfig,
  formConfig,
  layoutConfig,
  printedRowCount = 0,
  printedRows = [],
  continuePrintElements,
  errorLogs
} = {}) => {
  // formatInstance会修改print，需要先将printData与外部数据断开引用
  printData = deepCopy(printData);
  if (typeof printedRowCount != "number" || printedRowCount < 0) {
    printedRowCount = 0;
  }
  const formatInstance = useFormat({
    printData,
    printConfig,
    formConfig,
    layoutConfig,
    printedRowCount,
    printedRows,
    continuePrintElements
  });
  const newLayoutConfig = formatInstance.formatLayoutConfig();
  console.log("格式化后的打印配置==>", {
    printData,
    printConfig,
    formConfig,
    layoutConfig: deepCopy(newLayoutConfig),
    printedRowCount,
    printedRows,
    continuePrintElements
  });
  const baseComponentHelper = useBaseComponentHelper({
    printData,
    printConfig,
    formConfig,
    layoutConfig: newLayoutConfig,
    errorLogs
  });
  const formComponentHelper = useFormComponentHelper({
    printData,
    printConfig,
    formConfig,
    layoutConfig: newLayoutConfig,
    errorLogs
  });
  const complexTableHelper = useComplexTableHelper({
    printData,
    printConfig,
    formConfig,
    layoutConfig: newLayoutConfig,
    errorLogs
  });
  const createHtmlByComponentItem = (componentItem) => {
    let newHtml = "";
    // 分页上边距
    if (componentItem.type == "pageTop") {
      newHtml = baseComponentHelper.createPageTopHtml(componentItem);
      return newHtml;
    }
    // 分页下边距
    if (componentItem.type == "pageBottom") {
      newHtml = baseComponentHelper.createPageBottomHtml(componentItem);
      return newHtml;
    }
    // 分页
    if (componentItem.type == "pageBreak") {
      newHtml = baseComponentHelper.createPageBreakHtml(componentItem);
      return newHtml;
    }
    // 文本
    if (componentItem.type == "text") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【文本】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      newHtml = baseComponentHelper.createTextHtml(componentItem);
      return newHtml;
    }
    // 动态文本
    if (componentItem.type == "dynamicText") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【动态文本】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【动态文本】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = baseComponentHelper.createDynamicTextHtml(componentItem);
      return newHtml;
    }
    // 表格
    if (componentItem.type == "table") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【表格】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【表格】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = baseComponentHelper.createTableHtml(componentItem);
      return newHtml;
    }
    // 复杂表格
    if (componentItem.type == "complexTable") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【复杂表格】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【复杂表格】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = complexTableHelper.createComplexTableHtml(componentItem);
      return newHtml;
    }
    // 条形码
    if (componentItem.type == "barcode") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【条形码】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【条形码】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = baseComponentHelper.createBarcodeHtml(componentItem);
      return newHtml;
    }
    // 二维码
    if (componentItem.type == "qrcode") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【二维码】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【二维码】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = baseComponentHelper.createQrcodeHtml(componentItem);
      return newHtml;
    }
    // 图片
    if (componentItem.type == "image") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【图片】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      newHtml = baseComponentHelper.createImageHtml(componentItem);
      return newHtml;
    }
    // 输入框
    if (componentItem.type == "input") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【输入框】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【输入框】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = formComponentHelper.createInputHtml(componentItem);
      return newHtml;
    }
    // 多行输入框
    if (componentItem.type == "textarea") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【多行输入框】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【多行输入框】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = formComponentHelper.createTextareaHtml(componentItem);
      return newHtml;
    }
    // 单选框
    if (componentItem.type == "radio") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【单选框】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【单选框】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = formComponentHelper.createRadioHtml(componentItem);
      return newHtml;
    }
    // 多选框
    if (componentItem.type == "checkbox") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【多选框】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【多选框】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = formComponentHelper.createCheckboxHtml(componentItem);
      return newHtml;
    }
    // 选择器
    if (componentItem.type == "select") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【选择器】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【选择器】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = formComponentHelper.createSelectHtml(componentItem);
      return newHtml;
    }
    // 选择器
    if (componentItem.type == "datetime") {
      let nowComponentProps = componentItem.props;
      if (!nowComponentProps) {
        errorLogs.push(`【日期时间】【${componentItem.id}】，缺少配置【props】`);
        return newHtml;
      }
      if (!nowComponentProps.field) {
        errorLogs.push(`【日期时间】【${componentItem.id}】，【props】中缺少配置【field】`);
        return newHtml;
      }
      newHtml = formComponentHelper.createDatetimeHtml(componentItem);
      return newHtml;
    }
  };
  const gridHelper = useGridHelper({
    printData,
    printConfig,
    formConfig,
    layoutConfig: newLayoutConfig,
    createHtmlByComponentItem,
    errorLogs
  });
  const tableLayoutHelper = useTableLayoutHelper({
    printData,
    printConfig,
    formConfig,
    layoutConfig: newLayoutConfig,
    createHtmlByComponentItem,
    errorLogs
  });
  const formatLayoutConfig = () => {};
  return {
    createHtmlByComponentItem,
    formatLayoutConfig,
    gridHelper: gridHelper,
    tableLayoutHelper: tableLayoutHelper,
    layoutConfig: newLayoutConfig
  };
};