newICSS/src/components/PreviewBody/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import { normalVal } from '@utils/tools';
import $ from "jquery";

(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();
  }
})($);

import {filterDataArr} from '@utils/tools'
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()
  }
    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:'23%'}}><span style={{color:item.abnormal != '0' ?"red":null}}>{val.value}</span> { val.labelSuffix}</td>
                }
            })
        }else{ 
            return <td style={{width:'23%'}}><span style={{color:(val.maxValue || val.minValue)?(val.value > val.maxValue || val.value < val.minValue?"red":null):null}}>{val.value}</span> { val.labelSuffix}</td>
        }
    }
    render() {
        const { show, preInfo, dataJson, dataStr,baseObj } = this.props;

        return <div className={style['content']}>
            <div className={style['contents']} id="content" style={{margin:"0 auto"}}>
                <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: '25%' }}>卡号：{baseObj?baseObj.patientIdNo:JSON.stringify(preInfo) == '{}'?'':preInfo.patientIdNo}</td>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>姓名：{baseObj?baseObj.patientName:JSON.stringify(preInfo) == '{}'?'':preInfo.patientName}</td>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>年龄：{baseObj?baseObj.patientAge:JSON.stringify(preInfo) == '{}'?'':preInfo.patientAge}</td>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>性别：{baseObj?baseObj.patientSex:JSON.stringify(preInfo) == '{}'?'':preInfo.patientSex}</td>
                    </tr>
                    <tr>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>就诊时间：{baseObj?baseObj.inquiryDate:(JSON.stringify(preInfo) == '{}'?'':preInfo.systemTime.split(' ')[0])}</td>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>科室：{baseObj?baseObj.hospitalDeptName:(JSON.stringify(preInfo) == '{}'?'':preInfo.hospitalDeptName)}</td>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>医生：{baseObj?baseObj.doctorName:(JSON.stringify(preInfo) == '{}'?'':preInfo.doctorName)}</td>
                        <td style={{ border: '1px solid #aaa', padding: '8px 10px', width: '25%' }}>门诊号：{baseObj?baseObj.inquiryCode:(JSON.stringify(preInfo) == '{}'?'':preInfo.recordId)}</td>
                    </tr>
                </table>
                <table style={{width:"100%"}}>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>主诉：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',lineHeight:'18px' }}>
                            {
                                filterDataArr(JSON.parse(dataStr.chief))
                            }
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>现病史：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',lineHeight:'18px'  }}>
                            {
                                filterDataArr(JSON.parse(dataStr.present))
                            }
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>其他史：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',lineHeight:'18px'  }}>
                            {
                                filterDataArr(JSON.parse(dataStr.other))
                            }
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>查体：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',lineHeight:'18px'  }}>
                            {
                                filterDataArr(JSON.parse(dataStr.vital))
                            }
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top',width:'100%',overflow:"hidden" }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>化验：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',maxWidth:'650px'}}>
                            {/* <table style={{ width: '100%' }}> */}
                                {
                                    dataJson.lis.getExcelDataList && dataJson.lis.getExcelDataList.map((items)=>{
                                        return items.lisExcelRes && items.lisExcelRes.map((item)=>{
                                            return <table style={{margin:'8px 0',width:'100%',fontSize:'12px'}}>
                                                <tr style={{fontSize:'14px',lineHeight:'1.5'}}>{item.menus}</tr>
                                                {
                                                    item.lisExcelItem && item.lisExcelItem.map((value)=>{
                                                        return <tr style={{lineHeight:'1.5',maxWidth:'650px'}}>
                                                            <td style={{width:'25%',fontSize:'12px'}}>{value.itemName}</td>
                                                            <td style={{width:'23%',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):'化验时间: '+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%'}}>
                                                <tr style={{fontSize:'14px',lineHeight:'1.5'}}>{item.name}</tr>
                                                {
                                                    item.details.map((val)=>{
                                                        if(val.value && val.value != ''){
                                                            return <tr style={{lineHeight:'1.5',width:'100%',fontSize:'12px'}}>
                                                                <td style={{width:'25%'}}>{val.name}</td>
                                                                {this.showDetails(val)}
                                                                
                                                                <td style={{width:'24%'}}>
                                                                    {normalVal(val.minValue,val.maxValue)}
                                                                </td>
                                                                <td style={{width:'28%'}}>{'化验时间:'+item.time}</td>
                                                            </tr>
                                                        }
                                                    })
                                                }
                                            </table>
                                        }
                                    })
                                }
                            {/* </table> */}
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>辅检：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',lineHeight:'18px' }}>
                            {
                                dataStr.pacs && dataStr.pacs != '' && dataStr.pacs.split(';').map((item)=>{
                                    return <div style={{ fontSize: '14px' }}>{item}</div>
                                })
                            }
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>诊断：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px',lineHeight:'18px' }}>
                            {
                                dataStr.diag && dataStr.diag != '' && dataStr.diag.split(';').map((item)=>{
                                    return <div style={{ fontSize: '14px'}}>{item}</div>
                                })
                            }
                        </td>
                    </tr>
                    <tr style={{ verticalAlign: 'top' }}>
                        <td style={{ width: 70, textAlign: 'right', padding: '0px 5px 16px 0px', fontSize: '14px' }}>医嘱：</td>
                        <td style={{ fontSize: '14px', padding: '0px 0px 16px 0px' }}>
                            {
                                dataJson.advice.assay && dataJson.advice.assay.length > 0 || dataJson.advice.check && dataJson.advice.check.length > 0 ? <p style={{fontSize:'14px',marginBottom:"8px"}}>开单项目</p> : ''
                            }
                            {
                                dataJson.advice.assay && <div style={{ fontSize: '12px', padding: '0px 0px 5px 0px' }}>{dataJson.advice.assay}</div>
                            }
                            {
                                dataJson.advice.check && <div style={{ fontSize: '12px', padding: '0px 0px 5px 0px' }}>{dataJson.advice.check}</div>
                            }
                            {dataJson.advice.scheme && dataJson.advice.scheme.length > 0  && <p style={{fontSize:'14px', marginBottom: '8px',marginTop:'8px'}}>治疗方案</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={{ fontSize: '12px', padding: '0px 0px 5px 0px' }}>{ it.treatmentStr }</div>: '')
                                    })}</p>
                                  })
                            }
                        </td>
                    </tr>
                </table>
                <table style={{ marginTop: '10px',marginBottom:'30px',display: show ? 'block' : 'none' }}>
                    <tr style={{position:'absolute',right:'0px',verticalAlign: 'top'}}>
                        <td>医生签名：</td>
                        <td style={{
                          minWidth:'50px',
                          padding:'0 5px 2px 5px',
                          borderBottom:'1px solid #333',
                        }}>{baseObj?baseObj.doctorName:(JSON.stringify(preInfo) == '{}'?'':preInfo.doctorName)}</td>
                    </tr>
                </table>
            </div>
            
            <div onClick={()=>{this.onPrint()}} 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;