wui-print
Version:
前端打印插件，包含打印设计器、打印表单、打印API
159 lines (158 loc) • 6.85 kB
JavaScript
import printDesignerStyleHelper from "../print-designer-style-helper";
import createHtmlUtils from "./create-html-utils";
export default ({ printData, printConfig, formConfig, layoutConfig, errorLogs } = {}) => {
const createInputHtml = (componentItem) => {
let text = printData[componentItem.props.field];
let inputHtml = `<div class="print-form_input print-form_input--${_getComponentSize(
componentItem
)} ${createHtmlUtils.formatComponentClass({
componentItem
})}" style="${printDesignerStyleHelper.createInputStyle({
styleConfig: componentItem.style
})}">${text}</div>`;
return _createFormItemHtml(componentItem, inputHtml);
};
const createTextareaHtml = (componentItem) => {
let text = printData[componentItem.props.field];
let inputHtml = `<div class="print-form_textarea print-form_textarea--${_getComponentSize(
componentItem
)} ${createHtmlUtils.formatComponentClass({
componentItem
})}" style="${printDesignerStyleHelper.createTextareaStyle({
styleConfig: componentItem.style
})}">${text}</div>`;
return _createFormItemHtml(componentItem, inputHtml);
};
const createRadioHtml = (componentItem) => {
let value = printData[componentItem.props.field];
let dataSource = [];
if (Array.isArray(componentItem.props.dataSource)) {
dataSource = componentItem.props.dataSource;
}
let radioGroupHtml = ``;
dataSource.forEach((item, index) => {
let radioClassList = [];
if (item.value === value) {
radioClassList.push("print-form_radio--active");
}
let radioHtml = `<div class="print-form_radio ${radioClassList.join(" ")}">
<div class="print-form_radio-icon"></div>
<div class="print-form_radio-label">${item.label}</div>
</div>`;
radioGroupHtml += radioHtml;
});
radioGroupHtml = `<div class="print-form_radio-group print-form_radio-group--${_getComponentSize(
componentItem
)} ${createHtmlUtils.formatComponentClass({
componentItem
})}">${radioGroupHtml}</div>`;
return _createFormItemHtml(componentItem, radioGroupHtml);
};
const createCheckboxHtml = (componentItem) => {
let value = printData[componentItem.props.field];
let dataSource = [];
if (Array.isArray(componentItem.props.dataSource)) {
dataSource = componentItem.props.dataSource;
}
let valueList = value.split(",");
let checkboxGroupHtml = ``;
dataSource.forEach((item, index) => {
let checkboxClassList = [];
if (valueList.indexOf(item.value) >= 0) {
checkboxClassList.push("print-form_checkbox--active");
}
let checkboxHtml = `<div class="print-form_checkbox ${checkboxClassList.join(" ")}">
<div class="print-form_checkbox-icon"></div>
<div class="print-form_checkbox-label">${item.label}</div>
</div>`;
checkboxGroupHtml += checkboxHtml;
});
checkboxGroupHtml = `<div class="print-form_checkbox-group print-form_checkbox-group--${_getComponentSize(
componentItem
)} ${createHtmlUtils.formatComponentClass({
componentItem
})}">${checkboxGroupHtml}</div>`;
return _createFormItemHtml(componentItem, checkboxGroupHtml);
};
const createSelectHtml = (componentItem) => {
let value = printData[componentItem.props.field];
let dataSource = [];
if (Array.isArray(componentItem.props.dataSource)) {
dataSource = componentItem.props.dataSource;
}
let nowItem = dataSource.find((item, index) => {
return item.value === value;
});
let nowLabel = "";
if (!!nowItem) {
nowLabel = nowItem.label;
}
let selectHtml = `<div class="print-form_select print-form_select--${_getComponentSize(
componentItem
)} ${createHtmlUtils.formatComponentClass({
componentItem
})}">${nowLabel}</div>`;
return _createFormItemHtml(componentItem, selectHtml);
};
const createDatetimeHtml = (componentItem) => {
let text = printData[componentItem.props.field];
let datetimeHtml = `<div class="print-form_datetime print-form_datetime--${_getComponentSize(
componentItem
)} ${createHtmlUtils.formatComponentClass({
componentItem
})}" style="${printDesignerStyleHelper.createTextareaStyle({
styleConfig: componentItem.style
})}">${text}</div>`;
return _createFormItemHtml(componentItem, datetimeHtml);
};
function _createFormItemHtml(componentItem, componentHtml) {
let formItemLabelHtml;
if (!componentItem.formItemProps.label) {
formItemLabelHtml = "";
} else if (!formConfig.props.labelWidth && !componentItem.formItemProps.labelWidth) {
formItemLabelHtml = "";
} else {
formItemLabelHtml = `<label class="print-form-item_label" style="${printDesignerStyleHelper.createFormItemLabelStyle({
styleConfig: componentItem.style,
formConfigProps: formConfig.props,
formItemProps: componentItem.formItemProps
})}"><p style="${printDesignerStyleHelper.createFormItemLabelContentStyle({
styleConfig: componentItem.style,
formConfigProps: formConfig.props,
formItemProps: componentItem.formItemProps
})}">${componentItem.formItemProps.label}</p></label>`;
}
let formItemContentHtml = `<div class="print-form-item_content" style="${printDesignerStyleHelper.createFormItemMainStyle({
styleConfig: componentItem.style
})}">${componentHtml}</div>`;
let formItemProps = !!componentItem.formItemProps ? componentItem.formItemProps : {};
let formItemClassList = [];
if (!!formItemProps.labelPosition) {
formItemClassList.push(`print-form-item_label-${formItemProps.labelPosition}`);
}
let formItemClassStr = formItemClassList.join(" ");
let formItemHtml = `<div class="print-form-item ${formItemClassStr} ${createHtmlUtils.formatComponentClass({
componentItem
})}" style="${printDesignerStyleHelper.createFormItemStyle({
styleConfig: componentItem.style
})}">${formItemLabelHtml}${formItemContentHtml}</div>`;
return formItemHtml;
}
function _getComponentSize(componentItem) {
if (!!componentItem.formComponentProps && !!componentItem.formComponentProps.size) {
return componentItem.formComponentProps.size;
}
if (!!formConfig.props && !!formConfig.props.size) {
return formConfig.props.size;
}
return "default";
}
return {
createInputHtml,
createTextareaHtml,
createRadioHtml,
createCheckboxHtml,
createSelectHtml,
createDatetimeHtml
};
};