DetailDom.js

import React from 'react';
import JsBarcode from 'jsbarcode';
import styles from '../index.less';
import moment from 'moment';
import { styleCount } from './config';
import { isJSON } from '@/webPublic/one_stop_public/copy';

/**
 * -2 条形码
 * -1 常量
 * 0  文字
 * 1 时间
 * 2 照片
 * */

const normalTextRender = (text, config) => {
	if (!text || text === 'undefined' || typeof text === 'undefined') {
		return null;
	}
	const configInfoJSON = (config.info && isJSON(config.info) && JSON.parse(config.info)) || {};
	const configTextStyle = configInfoJSON.textStyle || {}; // 文本的样式
	const configTextBreakLength = configInfoJSON.textBreakLength || undefined; // 字数过宽换行

	const width = config.wide ? config.wide + 'px' : 'auto';
	const height = config.high ? config.high + 'px' : 'auto';
	if (configTextBreakLength && text.length > configTextBreakLength) {
		text = [text.substr(0, configTextBreakLength), text.substr(configTextBreakLength)];
		return text.map((x, index) => {
			return (
				<div
					key={x}
					style={{
						...styleCount(config),
						marginBottom: '0',
						width,
						textAlign: 'right',
						...configTextStyle,
					}}>
					{x}
				</div>
			);
		});
	}
	if (config.mark && text.indexOf(config.mark) > -1) {
		// 换行分隔符
		text = text.split(config.mark);
		let length = text.length;
		return text.map((x, index) => {
			return (
				<div
					key={x}
					style={{
						...styleCount(config),
						marginBottom: '0',
						width,
						textAlign: 'right',
						...configTextStyle,
					}}>
					{x}
					{length > index + 1 ? config.mark : ''}
				</div>
			);
		});
	}

	return (
		<div
			style={{
				...styleCount(config),
				width,
				height,
				lineHeight: 'normal',
				verticalAlign: 'top',
				textAlign: 'right',
				letterSpacing: '2px',
				...configTextStyle,
			}}>
			{text}
		</div>
	);
};

const imageRender = (imageUrl) => {
	return (
		<img
			src={imageUrl} //  TODO 这里图片样式需要考虑怎么兼容所有业务
			style={{
				height: '100%',
				width: 'auto',
			}}
		/>
	);
};

class BarCode extends React.Component {
	toJsBarcode() {
		// 调用 JsBarcode方法生成条形码
		const { value } = this.props;
		let info = value;
		if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
			info = 'error';
			console.log('条形码包含中文不能输出', value);
		}
		JsBarcode(this.barcode, info, {
			text: '',
			format: 'CODE128',
			displayValue: false,
			width: 1.0,
			height: 30,
			margin: 0,
		});
		return true;
	}

	componentDidMount() {
		this.toJsBarcode();
	}

	render() {
		return (
			<div className="barcode-box">
				<svg
					ref={(ref) => {
						this.barcode = ref;
					}}
				/>
			</div>
		);
	}
}

export default function DetailDom({ config, data }) {
	const { x, y, transform } = config;
	const styleOutSide = {
		position: 'absolute',
		zIndex: 10,
		fontWeight: '600',
		left: x + 'px',
		top: y + 'px',
	};
	if (transform) {
		styleOutSide.transform = `rotate(${transform}deg)`;
		styleOutSide.WebkitTransform = `rotate(${transform}deg)`;
		styleOutSide.MozTransform = `rotate(${transform}deg)`;
		styleOutSide.MsTransform = `rotate(${transform}deg)`;
		//    styleOutSide.MsFilter = "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
	}

	const outSideDom = (children) => {
		return (
			<div
				style={{
					...styleOutSide,
				}}
				key={`filed${config.id}`}>
				{children}
			</div>
		);
	};
	let children = null;
	switch (config.fieldType) {
		case '-2':
			children = <BarCode value={data} />;
			break;
		case '-1': // 常量
			children = normalTextRender(config.content, config);
			break;
		case '0': // 文字 带参数
			let text = data;
			const strPlace = config.content && config.content.indexOf('${');
			if (strPlace > -1) {
				const str = `\${${config.fieldCode}}`;
				text = config.content.replace(str, text);
			}
			children = normalTextRender(text, config);
			break;
		case '1': // 时间
			let time = data;
			time = moment(time).format(config.fieldPattern || 'YYYY-MM-DD');
			children = normalTextRender(time, config);
			break;
		case '2': // 照片 图章
			children = imageRender(data);
			break;
		default:
			console.error('未知的打印数据类型,无法渲染');
			children = null;
			break;
	}
	return outSideDom(children);
}