wui-print/dist/print-designer-api/create-style/create-complex-table-style.js

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

import { camelToKebab, deepCopy } from "../print-designer-utils";
const createComplexTableStyle = ({ propsConfig, styleConfig } = {}) => {
  if (!propsConfig) {
    propsConfig = {};
  }
  if (!styleConfig) {
    styleConfig = {};
  }
  let styleText = "";
  let styleObj = {};
  Object.keys(styleConfig).forEach((key, index) => {
    if (key.indexOf("common_") >= 0) {
      let newKey = key.replace("common_", "");
      if (!!styleConfig[key] || styleConfig[key] === 0) {
        styleObj[newKey] = styleConfig[key];
      }
      return;
    }
    if (key.indexOf("_") >= 0) {
      return;
    }
    if (!!styleConfig[key] || styleConfig[key] === 0) {
      styleObj[key] = styleConfig[key];
    }
  });
  Object.keys(styleObj).forEach((key, index) => {
    if (!!propsConfig.canContinue && _ContinueInvalidConfigList.indexOf(key) >= 0) {
      return;
    }
    if (!!propsConfig.isPaginationMode && _ContinueInvalidConfigList.indexOf(key) >= 0) {
      return;
    }
    styleText += `${camelToKebab(key)}:${styleObj[key]};`;
  });
  return styleText;
};
const createComplexTableHeaderTdStyle = ({
  complexTablePropsConfig,
  complexTableStyleConfig,
  tdPropsConfig,
  tdStyleConfig
} = {}) => {
  if (!complexTablePropsConfig) {
    complexTablePropsConfig = {};
  }
  if (!complexTableStyleConfig) {
    complexTableStyleConfig = {};
  }
  if (!tdPropsConfig) {
    tdPropsConfig = {};
  }
  if (!tdStyleConfig) {
    tdStyleConfig = {};
  }
  let styleText = "";
  let styleObj = {};
  Object.keys(complexTableStyleConfig).forEach((key, index) => {
    if (key.indexOf("common_") >= 0) {
      let newKey = key.replace("common_", "");
      if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
        styleObj[newKey] = complexTableStyleConfig[key];
      }
      return;
    }
    if (key.indexOf("headerCell_") < 0 || key.indexOf("headerCell_container_") >= 0) {
      return;
    }
    let newKey = key.replace("headerCell_", "");
    if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
      styleObj[newKey] = complexTableStyleConfig[key];
    }
  });
  Object.keys(tdStyleConfig).forEach((key, index) => {
    if (key.indexOf("_") >= 0) {
      return;
    }
    if (!!tdStyleConfig[key] || tdStyleConfig[key] === 0) {
      styleObj[key] = tdStyleConfig[key];
    }
  });
  Object.keys(styleObj).forEach((key, index) => {
    if (!!complexTablePropsConfig.canContinue && _ContinueInvalidConfigList.indexOf(key) >= 0) {
      return;
    }
    if (!!complexTablePropsConfig.isPaginationMode && _ContinueInvalidConfigList.indexOf(key) >= 0) {
      return;
    }
    styleText += `${camelToKebab(key)}:${styleObj[key]};`;
  });
  return styleText;
};
const createComplexTableHeaderTdContainerStyle = ({
  complexTablePropsConfig,
  complexTableStyleConfig,
  tdPropsConfig,
  tdStyleConfig
} = {}) => {
  if (!complexTablePropsConfig) {
    complexTablePropsConfig = {};
  }
  if (!complexTableStyleConfig) {
    complexTableStyleConfig = {};
  }
  if (!tdPropsConfig) {
    tdPropsConfig = {};
  }
  if (!tdStyleConfig) {
    tdStyleConfig = {};
  }
  let styleText = "";
  let styleObj = {
    width: "100%",
    height: "100%"
  };
  Object.keys(complexTableStyleConfig).forEach((key, index) => {
    if (key.indexOf("common_") >= 0) {
      let newKey = key.replace("common_", "");
      if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
        styleObj[newKey] = complexTableStyleConfig[key];
      }
      return;
    }
    if (key.indexOf("headerCell_container_") < 0) {
      return;
    }
    let newKey = key.replace("headerCell_container_", "");
    if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
      styleObj[newKey] = complexTableStyleConfig[key];
    }
  });
  Object.keys(tdStyleConfig).forEach((key, index) => {
    if (key.indexOf("container_") < 0) {
      return;
    }
    let newKey = key.replace("container_", "");
    if (!!tdStyleConfig[key] || tdStyleConfig[key] === 0) {
      styleObj[newKey] = tdStyleConfig[key];
    }
  });
  if (!!tdPropsConfig.centerHorizontally || !!tdPropsConfig.centerVertical) {
    styleObj.display = "flex";
  }
  if (!!tdPropsConfig.centerHorizontally) {
    styleObj.justifyContent = "center";
  }
  if (!!tdPropsConfig.centerVertical) {
    styleObj.alignItems = "center";
  }
  Object.keys(styleObj).forEach((key, index) => {
    styleText += `${camelToKebab(key)}:${styleObj[key]};`;
  });
  return styleText;
};
const createComplexTableHeaderTdSlashStyle = ({ width = 0, height = 0, direction } = {}) => {
  if (!width || !height) {
    return "";
  }
  if (!direction) {
    direction = "top-left";
  }
  let styleText = "";
  let styleObj = {};
  let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
  let slashDeg = (Math.atan(height / width) * 180) / Math.PI;
  styleObj.width = `${slashWidth}px`;
  styleObj.transformOrigin = `top left`;
  if (direction == "top-left") {
    styleObj.transform = `rotate(${slashDeg}deg)`;
  } else {
    styleObj.transform = `rotate(-${slashDeg}deg)`;
  }
  Object.keys(styleObj).forEach((key, index) => {
    styleText += `${camelToKebab(key)}:${styleObj[key]};`;
  });
  return styleText;
};
const createComplexTableContentTdStyle = ({
  complexTablePropsConfig,
  complexTableStyleConfig,
  complexTableHeaderRules,
  rowIndex,
  colIndex
} = {}) => {
  if (!complexTablePropsConfig) {
    complexTablePropsConfig = {};
  }
  if (!complexTableStyleConfig) {
    complexTableStyleConfig = {};
  }
  if (!complexTableHeaderRules) {
    complexTableHeaderRules = {};
  }
  let styleText = "";
  let styleObj = {};
  Object.keys(complexTableStyleConfig).forEach((key, index) => {
    if (key.indexOf("common_") >= 0) {
      let newKey = key.replace("common_", "");
      if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
        styleObj[newKey] = complexTableStyleConfig[key];
      }
      return;
    }
    if (key.indexOf("contentCell_") < 0 || key.indexOf("contentCell_container_") >= 0) {
      return;
    }
    let newKey = key.replace("contentCell_", "");
    if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
      styleObj[newKey] = complexTableStyleConfig[key];
    }
  });
  if (!!complexTablePropsConfig.canContinue) {
    // 续打模式
    _formatContentTdStyleOnContinue({ complexTablePropsConfig, complexTableStyleConfig, styleObj });
  } else if (!!complexTablePropsConfig.isPaginationMode) {
    // 启用分页
    _formatContentTdStyleOnPaginationMode({ complexTablePropsConfig, complexTableStyleConfig, styleObj });
  }
  if (rowIndex === 0) {
    let { props: headerProps, style: headerStyle } = _getHeaderRuleOnColumn();
    if (!!headerStyle && headerStyle.width) {
      styleObj.width = headerStyle.width;
    }
  }
  Object.keys(styleObj).forEach((key, index) => {
    if (!!complexTablePropsConfig.canContinue && _ContinueInvalidConfigList.indexOf(key) >= 0) {
      return;
    }
    if (!!complexTablePropsConfig.isPaginationMode && _ContinueInvalidConfigList.indexOf(key) >= 0) {
      return;
    }
    styleText += `${camelToKebab(key)}:${styleObj[key]};`;
  });
  function _getHeaderRuleOnColumn() {
    let headerStyleKey = "";
    let nowRowIndex = -1;
    Object.keys(complexTableHeaderRules).forEach((key, index) => {
      let headerRuleIdDetails = getComplexTableHeaderRuleIdDetails(key);
      if (!headerRuleIdDetails) {
        return;
      }
      if (nowRowIndex < headerRuleIdDetails.rowIndex && headerRuleIdDetails.colIndex === colIndex) {
        headerStyleKey = key;
        nowRowIndex = headerRuleIdDetails.rowIndex;
      }
    });
    if (!headerStyleKey) {
      return {};
    }
    return complexTableHeaderRules[headerStyleKey];
  }
  return styleText;
};
const createComplexTableContentTdContainerStyle = ({ complexTablePropsConfig, complexTableStyleConfig } = {}) => {
  if (!complexTablePropsConfig) {
    complexTablePropsConfig = {};
  }
  if (!complexTableStyleConfig) {
    complexTableStyleConfig = {};
  }
  let styleText = "";
  let styleObj = {
    width: "100%",
    height: "100%"
  };
  Object.keys(complexTableStyleConfig).forEach((key, index) => {
    if (key.indexOf("common_") >= 0) {
      let newKey = key.replace("common_", "");
      if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
        styleObj[newKey] = complexTableStyleConfig[key];
      }
      return;
    }
    if (key.indexOf("contentCell_container_") < 0) {
      return;
    }
    let newKey = key.replace("contentCell_container_", "");
    if (!!complexTableStyleConfig[key] || complexTableStyleConfig[key] === 0) {
      styleObj[newKey] = complexTableStyleConfig[key];
    }
  });
  if (!!complexTablePropsConfig.canContinue) {
    // 续打模式
    _formatContentTdContainerStyleOnContinue({ complexTablePropsConfig, complexTableStyleConfig, styleObj });
  } else if (!!complexTablePropsConfig.isPaginationMode) {
    // 启用分页
    _formatContentTdContainerStyleOnPaginationMode({ complexTablePropsConfig, complexTableStyleConfig, styleObj });
  }
  Object.keys(styleObj).forEach((key, index) => {
    styleText += `${camelToKebab(key)}:${styleObj[key]};`;
  });
  return styleText;
};
const getComplexTableHeaderRulesId = ({ rowIndex, colIndex } = {}) => {
  return `${rowIndex}-${colIndex}`;
};
const getComplexTableHeaderRuleIdDetails = (headerCellId) => {
  if (!headerCellId) {
    return false;
  }
  let headerCellIdDetailsArray = headerCellId.split("-");
  let headerCellIdDetails = {
    rowIndex: Number(headerCellIdDetailsArray[0]),
    colIndex: Number(headerCellIdDetailsArray[1])
  };
  return headerCellIdDetails;
};
function _formatContentTdStyleOnContinue({ complexTablePropsConfig, complexTableStyleConfig, styleObj }) {
  if (!complexTablePropsConfig.canContinue) {
    return;
  }
  if (complexTablePropsConfig.continuePrintMode == "fixedHeight") {
    styleObj.height = `${complexTablePropsConfig.contentRowHeight}px`;
    !!styleObj.paddingTop && delete styleObj.paddingTop;
    !!styleObj.paddingBottom && delete styleObj.paddingBottom;
    return;
  }
  if (complexTablePropsConfig.continuePrintMode == "autoHeight") {
    styleObj.height = `${complexTablePropsConfig.contentRowHeight}px`;
    !!styleObj.paddingTop && delete styleObj.paddingTop;
    !!styleObj.paddingBottom && delete styleObj.paddingBottom;
    !!styleObj.paddingLeft && delete styleObj.paddingLeft;
    !!styleObj.paddingRight && delete styleObj.paddingRight;
    return;
  }
  if (complexTablePropsConfig.continuePrintMode == "_autoHeight_previewElements") {
    styleObj.height = `${complexTablePropsConfig.contentRowHeight}px`;
    !!styleObj.paddingTop && delete styleObj.paddingTop;
    !!styleObj.paddingBottom && delete styleObj.paddingBottom;
    !!styleObj.paddingLeft && delete styleObj.paddingLeft;
    !!styleObj.paddingRight && delete styleObj.paddingRight;
    return;
  }
}
function _formatContentTdContainerStyleOnContinue({ complexTablePropsConfig, complexTableStyleConfig, styleObj }) {
  if (!complexTablePropsConfig.canContinue) {
    return;
  }
  if (complexTablePropsConfig.continuePrintMode == "fixedHeight") {
    styleObj.height = `${complexTablePropsConfig.contentRowHeight}px`;
    styleObj.lineHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    !!styleObj.minHeight && delete styleObj.minHeight;
    return;
  }
  if (complexTablePropsConfig.continuePrintMode == "autoHeight") {
    styleObj.minHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    styleObj.lineHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    if (!!complexTableStyleConfig.contentCell_paddingLeft) {
      styleObj.paddingLeft = `${complexTableStyleConfig.contentCell_paddingLeft}`;
    }
    if (!!complexTableStyleConfig.contentCell_paddingRight) {
      styleObj.paddingRight = `${complexTableStyleConfig.contentCell_paddingRight}`;
    }
    return;
  }
  if (complexTablePropsConfig.continuePrintMode == "_autoHeight_previewElements") {
    styleObj.width = "auto";
    styleObj.height = "auto";
    styleObj.minHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    styleObj.lineHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    if (!!complexTableStyleConfig.contentCell_paddingLeft) {
      styleObj.paddingLeft = `${complexTableStyleConfig.contentCell_paddingLeft}`;
    }
    if (!!complexTableStyleConfig.contentCell_paddingRight) {
      styleObj.paddingRight = `${complexTableStyleConfig.contentCell_paddingRight}`;
    }
    return;
  }
}
function _formatContentTdStyleOnPaginationMode({ complexTablePropsConfig, complexTableStyleConfig, styleObj }) {
  if (!complexTablePropsConfig.isPaginationMode) {
    return;
  }
  if (!!complexTablePropsConfig._paginationModePreview) {
    styleObj.height = `${complexTablePropsConfig.contentRowHeight}px`;
    !!styleObj.paddingTop && delete styleObj.paddingTop;
    !!styleObj.paddingBottom && delete styleObj.paddingBottom;
    !!styleObj.paddingLeft && delete styleObj.paddingLeft;
    !!styleObj.paddingRight && delete styleObj.paddingRight;
  } else {
    styleObj.height = `${complexTablePropsConfig.contentRowHeight}px`;
    !!styleObj.paddingTop && delete styleObj.paddingTop;
    !!styleObj.paddingBottom && delete styleObj.paddingBottom;
    !!styleObj.paddingLeft && delete styleObj.paddingLeft;
    !!styleObj.paddingRight && delete styleObj.paddingRight;
  }
}
function _formatContentTdContainerStyleOnPaginationMode({ complexTablePropsConfig, complexTableStyleConfig, styleObj }) {
  if (!complexTablePropsConfig.isPaginationMode) {
    return;
  }
  if (!!complexTablePropsConfig._paginationModePreview) {
    styleObj.width = "auto";
    styleObj.height = "auto";
    styleObj.minHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    styleObj.lineHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    if (!!complexTableStyleConfig.contentCell_paddingLeft) {
      styleObj.paddingLeft = `${complexTableStyleConfig.contentCell_paddingLeft}`;
    }
    if (!!complexTableStyleConfig.contentCell_paddingRight) {
      styleObj.paddingRight = `${complexTableStyleConfig.contentCell_paddingRight}`;
    }
  } else {
    styleObj.minHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    styleObj.lineHeight = `${complexTablePropsConfig.contentRowHeight}px`;
    if (!!complexTableStyleConfig.contentCell_paddingLeft) {
      styleObj.paddingLeft = `${complexTableStyleConfig.contentCell_paddingLeft}`;
    }
    if (!!complexTableStyleConfig.contentCell_paddingRight) {
      styleObj.paddingRight = `${complexTableStyleConfig.contentCell_paddingRight}`;
    }
  }
}
const _ContinueInvalidConfigList = [
  "borderStyle",
  "borderWidth",
  "borderColor",
  "borderTopStyle",
  "borderTopWidth",
  "borderTopColor",
  "borderBottomStyle",
  "borderBottomWidth",
  "borderBottomColor",
  "borderLeftStyle",
  "borderLeftWidth",
  "borderLeftColor",
  "borderRightStyle",
  "borderRightWidth",
  "borderRightColor",
  "headerCell_borderStyle",
  "headerCell_borderWidth",
  "headerCell_borderColor",
  "headerCell_borderTopStyle",
  "headerCell_borderTopWidth",
  "headerCell_borderTopColor",
  "headerCell_borderBottomStyle",
  "headerCell_borderBottomWidth",
  "headerCell_borderBottomColor",
  "headerCell_borderLeftStyle",
  "headerCell_borderLeftWidth",
  "headerCell_borderLeftColor",
  "headerCell_borderRightStyle",
  "headerCell_borderRightWidth",
  "headerCell_borderRightColor",
  "headerCell_container_minHeight",
  "contentCell_borderStyle",
  "contentCell_borderWidth",
  "contentCell_borderColor",
  "contentCell_borderTopStyle",
  "contentCell_borderTopWidth",
  "contentCell_borderTopColor",
  "contentCell_borderBottomStyle",
  "contentCell_borderBottomWidth",
  "contentCell_borderBottomColor",
  "contentCell_borderLeftStyle",
  "contentCell_borderLeftWidth",
  "contentCell_borderLeftColor",
  "contentCell_borderRightStyle",
  "contentCell_borderRightWidth",
  "contentCell_borderRightColor",
  "contentCell_container_minHeight",
  "contentCell_container_lineHeight"
];
export default {
  createComplexTableStyle,
  createComplexTableHeaderTdStyle,
  createComplexTableHeaderTdContainerStyle,
  createComplexTableHeaderTdSlashStyle,
  createComplexTableContentTdStyle,
  createComplexTableContentTdContainerStyle,
  getComplexTableHeaderRulesId,
  getComplexTableHeaderRuleIdDetails
};