newICSS/src/components/PreviewBody/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import { normalVal, filterDataArr, filterOtherDataArr,timestampToTime } from '@utils/tools';
import Notify from '@commonComp/Notify';
import $ from "jquery";
import { relative } from "path";

(function ($) {
  var opt;

  $.fn.jqprint = function (options) {
    opt = $.extend({}, $.fn.jqprint.defaults, options);

    var $element = (this instanceof $) ? this : $(this);

    if (opt.operaSupport && $.browser.opera) {
      var tab = window.open("", "jqPrint-preview");
      tab.document.open();

      var doc = tab.document;
    }
    else {
      var $iframe = $("<iframe  />");

      if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-300px", top: "-300px" }); }

      $iframe.appendTo("body");
      var doc = $iframe[0].contentWindow.document;
    }

    if (opt.importCSS) {
      if ($("link[media=print]").length > 0) {
        $("link[media=print]").each(function () {
          doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
        });
      }
      else {
        $("link").each(function () {
          doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
        });
      }
    }

    if (opt.printContainer) { doc.write($element.outer()); }
    else { $element.each(function () { doc.write($(this).html()); }); }

    doc.close();

    (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
    setTimeout(function () { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
  }

  $.fn.jqprint.defaults = {
    debug: false,
    importCSS: true,
    printContainer: true,
    operaSupport: true
  };

  $.fn.outer = function () {
    return $($('<div></div>').html(this.clone())).html();
  }
})($);

class PreviewBody extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dateTime: "",
    }
    this.$content = React.createRef();
    this.getCurrentDate = this.getCurrentDate.bind(this);
    this.onPrint = this.onPrint.bind(this);
  }
  componentDidMount() {
    this.getCurrentDate();
  }
  componentWillReceiveProps() {
    $(this.$content.current)[0].scrollIntoView(true);
  }
  onPrint() {
    $("#content").jqprint({
      debug: false,
      importCSS: true,
      printContainer: true,
      operaSupport: false,
    });
    this.props.onClose()
  }

  surePrint(jsonStr) {
    if (filterDataArr(JSON.parse(jsonStr.chief)) == '') {
      Notify.info('主诉不能为空');
      return false;
    } else if (!jsonStr.diag || jsonStr.diag.trim().length < 1) {
      Notify.info('诊断不能为空');
      return false;
    } else {
      this.onPrint();
      this.props.save(true)
    }
    // if(filterDataArr(JSON.parse(jsonStr.chief)) == ''){
    //   Notify.info('主诉不能为空');
    //     return false;
    // }else if(!jsonStr.diag || jsonStr.diag.trim().length < 1){
    //     Notify.info('诊断不能为空');
    //     return false;
    // }else{
    //     this.onPrint();
    //     this.props.save(true)
    // }
  }
  getCurrentDate() {
    let myDate = new Date();
    let year = myDate.getFullYear();       //获取完整的年份(4位,1970-????)
    let mon = myDate.getMonth() - 0 + 1;       //获取当前月份(0-11,0代表1月)
    let day = myDate.getDate();            //获取当前日(1-31)
    let date = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day);
    this.setState({ dateTime: date })
  }
  showDetails(val) {
    if (val.questionDetailList.length > 0) {
      return val.questionDetailList.map((item) => {
        if (val.value == item.name) {
          return <td style={{ width: '16%', fontSize: '12px' }}><span style={{ color: item.abnormal != '0' ? "red" : null }}>{val.value}</span> {val.labelSuffix}</td>
        }
      })
    } else {
      return <td style={{ width: '16%', fontSize: '12px' }}><span style={{ color: (val.value - 0).toString() == 'NaN' ? "red" : (val.maxValue || val.minValue) ? (val.value > val.maxValue || val.value < val.minValue ? "red" : null) : null }}>{val.value}</span> {val.labelSuffix}</td>
    }
  }

  toTime(time){
    let tmpTim = time.split(',').join('')-0
    if(time && tmpTim.toString() != 'NaN'){
      let date = new Date('1900-01-01');
      let dateTim = date.getTime();
      let times = (tmpTim-2)*24*60*60*1000;
      let result = timestampToTime(dateTim+times).split(' ')[0]
      return result;
    }else{
      return time;
    }
  }
  render() {
    const { show, preInfo, dataJson, dataStr, baseObj, flg } = this.props;
    const other_yjs = filterOtherDataArr(JSON.parse(dataStr.other),dataJson.other);
    return <div className={style['content']} style={{ width: flg ? '700' : '820' }}>
      <div className={style['contents']} id="content" style={{ margin: "0 auto", maxWidth: "600px" }}>
        <div ref={this.$content} style={{ clear: 'both', fontSize: '24px', margin: '0px 0px 30px 0px', textAlign: 'center' }}>{preInfo.hospitalName}</div>
        <table className={style['patInfo']} style={{ margin: '0px 0px 30px 0px', borderCollapse: 'collapse', width: "100%" }}>
          <tr>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '31%', fontSize: "14px" }}>卡号：{baseObj ? baseObj.patientIdNo : JSON.stringify(preInfo) == '{}' ? '' : preInfo.patientIdNo}</td>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '23%', fontSize: "14px" }}>姓名：{baseObj ? baseObj.patientName : JSON.stringify(preInfo) == '{}' ? '' : preInfo.patientName}</td>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '23%', fontSize: "14px" }}>年龄：{baseObj ? baseObj.patientAge : JSON.stringify(preInfo) == '{}' ? '' : preInfo.patientAge}</td>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '23%', fontSize: "14px" }}>性别：{baseObj ? baseObj.patientSex : JSON.stringify(preInfo) == '{}' ? '' : preInfo.patientSex}</td>
          </tr>
          <tr>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '31%', fontSize: "14px" }}>就诊时间：{baseObj ? baseObj.inquiryDate : (JSON.stringify(preInfo) == '{}' ? '' : preInfo.systemTime.split(' ')[0])}</td>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '23%', fontSize: "14px" }}>科室：{baseObj ? baseObj.hospitalDeptName : (JSON.stringify(preInfo) == '{}' ? '' : preInfo.hospitalDeptName)}</td>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '23%', fontSize: "14px" }}>医生：{baseObj ? baseObj.doctorName : (JSON.stringify(preInfo) == '{}' ? '' : preInfo.doctorName)}</td>
            <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '23%', fontSize: "14px" }}>门诊号：{baseObj ? baseObj.inquiryCode : (JSON.stringify(preInfo) == '{}' ? '' : preInfo.recordId)}</td>
          </tr>
        </table>
        <table style={{ width: "100%", borderCollapse: 'collapse' }}>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>主诉：</td>
            <td style={{ fontSize: '14px', padding: '9px 0px 8px 0px', lineHeight: '20px',wordBreak:"break-all" }}>
              {
                filterDataArr(JSON.parse(dataStr.chief))
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>现病史：</td>
            <td style={{ fontSize: '14px', padding: '9px 0px 8px 0px', lineHeight: '20px',wordBreak:"break-all" }}>
              {
                filterDataArr(JSON.parse(dataStr.present))
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>其他史：</td>
            <td style={{ fontSize: '14px', padding: '9px 0px 8px 0px', lineHeight: '20px',wordBreak:"break-all" }}>
              {
                other_yjs.str1
              }
              {dataJson['yjs_1']||dataJson['yjs_2']||dataJson['yjs_3']||dataJson['yjs_4']?<table style={{textAlign:'center',verticalAlign: 'middle',display:'inline-block'}}>
                <tr>
                  <td rowSpan='2' style={{verticalAlign: 'middle'}}>月经史：（</td>
                  <td rowSpan='2' style={{verticalAlign: 'middle'}}>{dataJson['yjs_1']||'初潮年龄'}</td>
                  <td style={{borderBottom:'1px solid #000'}}>{dataJson['yjs_2']||'行经天数'}</td>
                  <td rowSpan='2' style={{verticalAlign: 'middle'}}>{dataJson['yjs_4']||'停经时间'}）</td>
                </tr>
                <tr>
                  <td style={{textAlign:'center'}}>{dataJson['yjs_3']||'周期'}</td>
                </tr>
              </table>:''}
              {
                other_yjs.str2
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>查体：</td>
            <td style={{ fontSize: '14px', padding: '9px 0px 8px 0px', lineHeight: '20px',wordBreak:"break-all" }}>
              {
                filterDataArr(JSON.parse(dataStr.vital))
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ width: 70, textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>化验：</td>
            <td style={{ fontSize: '14px', padding: '4px 0px 8px 0px', lineHeight: '20px', maxWidth: '650px',wordBreak:"break-all" }}>
              {
                dataJson.lis.getExcelDataList && dataJson.lis.getExcelDataList.map((items) => {
                  return items.lisExcelRes && items.lisExcelRes.map((item) => {
                    return <table style={{ marginBottom: '10px', width: '100%', fontSize: '12px' }}>
                      <tr style={{ fontSize: '14px', lineHeight: '1.5' }}><td><span style={{ borderBottom: '1px solid #666666' }}>{item.menus}</span></td></tr>
                      {
                        item.lisExcelItem && item.lisExcelItem.map((value) => {
                          return <tr style={{ lineHeight: '1.5', maxWidth: '650px' }}>
                            <td style={{ width: '32%', fontSize: '12px' }}>{value.itemName}</td>
                            <td style={{ width: '16%', fontSize: '12px' }}><span style={{ fontSize: '12px', color: value.type == 1 ? "red" : null }}>{value.value}</span> {value.unit}</td>
                            <td style={{ width: '24%', fontSize: '12px' }}>
                              {normalVal(value.min, value.max)}
                            </td>
                            <td style={{ width: '28%', fontSize: '12px' }}>{value.time == '' ? ('导入时间: ' + this.state.dateTime) : '化验时间: ' + this.toTime(value.time)
                          }</td>
                          </tr>
                        })
                      }
                    </table>
                  })
                })
              }
              {
                dataJson.lis.labelList && dataJson.lis.labelList.map((item, idx) => {
                  // if (item.show) {
                    return <table style={{ margin: '8px 0', width: '100%' }}>
                      {
                        item.show?<tr style={{ fontSize: '14px', lineHeight: '1.5' }}><td><span style={{ borderBottom: '1px solid #666666' }}> {item.name} </span></td></tr>:
                        <tr style={{ fontSize: '14px', lineHeight: '1.5' }}><td><span style={{ color: '#767676',position:'relative',left:'-10px' }}>「{item.name}」</span></td></tr>
                      }
                      {
                        item.details.map((val) => {
                          if (val.value && val.value != '') {
                            return <tr style={{ lineHeight: '1.5', width: '100%', fontSize: '12px' }}>
                              <td style={{ width: '32%', fontSize: '12px' }}>{val.name}</td>
                              {this.showDetails(val)}
                              <td style={{ width: '24%', fontSize: '12px' }}>
                                {normalVal(val.minValue, val.maxValue)}
                              </td>
                              <td style={{ width: '28%', fontSize: '12px' }}>{'化验时间:' + item.time}</td>
                            </tr>
                          }
                        })
                      }
                    </table>
                  // }
                })
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>辅检：</td>
            <td style={{ fontSize: '14px', padding: '9px 0px 8px 0px', lineHeight: '20px' }}>
              {
                dataStr.pacs && dataStr.pacs != '' && dataStr.pacs.split(';').map((item) => {
                  return <div style={{ fontSize: '14px',wordBreak:"break-all" }}>{item}</div>
                })
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>诊断：</td>
            <td style={{ fontSize: '14px', padding: '9px 0px 8px 0px', lineHeight: '20px' }}>
              {
                dataStr.diag && dataStr.diag != '' && dataStr.diag.split(';').map((item) => {
                  return <div style={{ fontSize: '14px' }}>{item}</div>
                })
              }
            </td>
          </tr>
          <tr style={{ verticalAlign: 'top', borderBottom: "1px solid #e2e4e6" }}>
            <td style={{ textAlign: 'right', padding: '9px 5px 8px 0px', fontSize: '14px',width:'70px' }}>医嘱：</td>
            <td style={{ fontSize: '14px', padding: '1px 0px 8px 0px', lineHeight: '20px' }}>
              {dataJson.advice.commontreatment && dataJson.advice.commontreatment.length > 0 && <p style={{ fontSize: '14px', marginBottom: '8px', marginTop: '8px' }}><span>一般治疗</span></p>}
              {
                dataJson.advice.commontreatment && <div style={{ padding: '0px 0px 5px 0px',wordBreak:"break-all" }}>{dataJson.advice.commontreatment}</div>
              }
              {dataJson.advice.scheme && dataJson.advice.scheme.length > 0 && <p style={{ fontSize: '14px', marginBottom: '8px', marginTop: '8px' }}><span>治疗方案</span></p>}
              {
                dataJson.advice.scheme && dataJson.advice.scheme.map((item, index) => {
                  return <p>{item.treatment.map((it, ii) => {
                    return (it.treatmentStr && it.treatmentStr.length > 0 ?
                      <div style={{ padding: '0px 0px 5px 0px' }}>{it.treatmentStr}</div> : '')
                    })}</p>
                  })
              }
              {
                dataJson.advice.adviceInput && <div style={{ padding: '0px 0px 5px 0px',wordBreak:"break-all" }}>{dataJson.advice.adviceInput}</div>
              }
            </td>
          </tr>
        </table>
        <p style={{textAlign:'right',marginTop:'15px'}}>医生签名：<span style={{minWidth: '60px',padding: '0 5px 2px 5px',borderBottom: '1px solid #333',}}>{baseObj ? baseObj.doctorName : (JSON.stringify(preInfo) == '{}' ? '' : preInfo.doctorName)}</span></p>
      </div>

      <div onClick={() => { this.surePrint(dataStr) }} style={{
        display: show ? 'inline-block' : 'none',
        padding: '10px 20px',
        float: 'right',
        marginTop: '15px',
        background: '#3B9ED0',
        color: '#fff',
        borderRadius: '4px',
        cursor: 'pointer',
        position: 'absolute',
        right: '40px'
      }}>打印</div>
    </div>
  }
}

export default PreviewBody;