wui-print
Version:
前端打印插件，包含打印设计器、打印表单、打印API
124 lines (123 loc) • 5.08 kB
JavaScript
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];
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
};
};