DetailDom.js

import React from 'react';
import JsBarcode from 'jsbarcode';
import styles from '../index.less';
import moment from 'moment';

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

export const fieldTypeList = [
  {
    key: '-2',
    name: '条形码',
  },
  {
    key: '-1',
    name: '常量',
  },
  {
    key: '0',
    name: '文字',
  },
  {
    key: '1',
    name: '时间',
  },
  {
    key: '2',
    name: '照片',
  },
];

export const fontFamilyList = [
  {
    key: '宋体',
    name: '宋体',
  },
  {
    key: '楷体',
    name: '楷体',
  },
  {
    key: '黑体',
    name: '黑体',
  },
  {
    key: '隶书',
    name: '隶书',
  },
  {
    key: '微软雅黑',
    name: '微软雅黑',
  },
];


const normalTextRender = (text, config) => {
  if (!text || text === 'undefined' || typeof text === 'undefined') {
    return null;
  }
  const style = {
    fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px
    fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
  };
  if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符
    text = text.split(config.mark);
    return <span style={style}>
          {text.map((x) => {
            return <p
              key={x}
              style={{ marginBottom: '0' }}>
              {x}
            </p>;
          })}
        </span>;
  }
  return <span style={style}>
    {text}
  </span>;
};

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, fieldCode, transform } = config;
  const outSideDom = (children) => {
    return (
      <div
        className={styles.inSideItemPrint}
        key={`filed${config.id}`}
        style={{
          left: x + 'px',
          top: y + 'px',
          transform: transform ? `rotate(${transform}deg)` : 'none',
        }}>
        {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);
}