打印预览修改

zyd_private/DragAndPrint/ViewPrint/DetailDom.js

 import React from 'react';
 import JsBarcode from 'jsbarcode';
 import styles from '../index.less';
-
+import moment from 'moment';
 /**
  * -2 条形码
  * -1 常量
@@ -16,29 +16,46 @@ const normalTextRender = (text, config) => {
   }
   const style = {
     fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px
-    fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体
+    fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
   };
   return <span style={style}>
     {text}
   </span>;
 };
 
+const imageRender = (imageUrl) => {
+  return <img src={imageUrl} //  TODO 这里图片样式需要考虑怎么兼容所有业务
+              style={{
+                height: '100%',
+                width: 'auto',
+              }}
+  />;
+};
+
 
 class BarCode extends React.Component {
-  componentDidMount() {
-    this.toJsBarcode();
-  }
 
   toJsBarcode() {
     // 调用 JsBarcode方法生成条形码
-    JsBarcode(this.barcode, this.props.value || '1234567890', {
+    const { value } = this.props;
+    let info = value;
+    if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
+      info = 'error';
+      console.log('条形码包含中文不能输出', value);
+    }
+    JsBarcode(this.barcode, info, {
       text: '',
-      format: 'CODE39',
+      format: 'CODE128',
       displayValue: false,
       width: 1.0,
       height: 30,
       margin: 0,
     });
+    return true;
+  }
+
+  componentDidMount() {
+    this.toJsBarcode();
   }
 
   render() {
@@ -72,23 +89,32 @@ export default function DetailDom({ config, data }) {
   };
   let children = null;
   switch (config.fieldType) {
-    case '-2': // 条形码
+    case '-2':
       children = <BarCode value={data}/>;
       break;
     case '-1': // 常量
       children = normalTextRender(config.content, config);
       break;
-    case '0': // 文字
-      children = normalTextRender(data, config);
+    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': // 时间
-      children = normalTextRender(config.content, config);
+      let time = data;
+      time = moment(time).format(config.fieldPattern || 'YYYY-MM-DD');
+      children = normalTextRender(time, config);
       break;
-    case '2': // 照片
-      children = normalTextRender(config.content, config);
+    case '2': // 照片 图章
+      children = imageRender(data);
       break;
     default:
-      children = normalTextRender(config.content, config);
+      console.error('未知的打印数据类型,无法渲染');
+      children = null;
       break;
   }
   return outSideDom(children);

zyd_private/DragAndPrint/ViewPrint/index.js

@@ -16,7 +16,7 @@ export default class ViewPrint extends Component {
       configAll: null,
       viewData: null,
       loading: false,
-      minHeight: 700,
+      minHeight: 0,
       showWindowPrint: false,
     };
     this.getConfigInfo = queryConfig.bind(this);
@@ -50,6 +50,7 @@ export default class ViewPrint extends Component {
           if (!viewData || !viewData.length) {
             message.warning('未查询到可打印的奖状数据');
             console.error(`${x.queryUrl}接口报错或者没有返回数据`);
+            return false;
           }
           this.setState({
             viewData,
@@ -68,8 +69,8 @@ export default class ViewPrint extends Component {
       configAll: { config },
     } = this.state;
     const res = [];
-    for (let item of config) {
-      if (item.fieldCode && data[item.fieldCode]) {
+    console.log(config);
+    for (const item of config) {
         res.push(
           DetailDom({
             config: item,
@@ -77,7 +78,6 @@ export default class ViewPrint extends Component {
           }),
         );
     }
-    }
     return res;
   };
 
@@ -118,7 +118,11 @@ export default class ViewPrint extends Component {
       showWindowPrint,
       minHeight,
     } = this.state;
-    if (!configAll) {
+    if (!viewData || !minHeight) {
+      return null;
+    }
+    if(!configAll.backgroundUrl){
+      console.error('没有设置模版图片无法使用');
       return null;
     }
     const { hasPrintBackground, backgroundUrl } = configAll;
@@ -188,7 +192,7 @@ export default class ViewPrint extends Component {
                     className={styles.outSideDivPrint}
                     key={`${index}divKey`}
                     style={{
-                      minHeight,
+                      minHeight: minHeight || 700,
                     }}>
                     {hasPrintBackground ? (
                       <img

zyd_private/DragAndPrint/index.js

@@ -60,6 +60,7 @@ export default class Index extends Component {
 		if (!configAll || !configAll.backgroundUrl) {
 			return null;
 		}
+		console.log(configAll);
 		return (
 			<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
 				<div style={{ height: '54px', padding: '12px 0 24px 12px' }}>

zyd_private/DragAndPrint/services.js

@@ -20,8 +20,12 @@ export const queryConfig = function() {
         return false;
       }
       x.config = x.config.filter((y) => { // 过滤不显示的字段.
-        return y.hasHidden === false;
+        return y.hasHidden !== true;
       });
+      if(!x.config.length){
+        console.error('没有有效的配置项');
+        return false;
+      }
       this.setState({
         configAll: x,
       });