newICSS/src/components/PreviewBody/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import $ from "jquery";
import {filterDataArr} from '@utils/tools'
(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: "200px", 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.onPrint = this.onPrint.bind(this);
        this.normalVal = this.normalVal.bind(this);
        this.getCurrentDate = this.getCurrentDate.bind(this);
    }
    componentDidMount(){
        this.getCurrentDate();
    }
    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})
    }
    onPrint() {
        $("#content").jqprint({
            debug: false,
            importCSS: true,
            printContainer: true,
            operaSupport: false
        });
        this.props.onClose()
    }
    normalVal(min,max){
        if((min-0) && (max-0)){
            return `正常值: (${min}~${max})`
        }else if((min-0) && !(max-0)){
            return `正常值: (>=${min})`
        }else if(!(min-0) && (max-0)){
            if(min == '' || min == null){
                return `正常值: (<=${max})`
            }else{
                return `正常值: (${min}~${max})`
            }
        }else{
            return null;
        }
    }
    showDetails(val){
        if(val.questionDetailList.length > 0){
            return val.questionDetailList.map((item)=>{
                if(val.value == item.name){
                    return <td style={{width:'23%'}}><span className={item.abnormal != '0' ?"red":'' }>{val.value}</span> { val.labelSuffix}</td>
                }
            })
        }else{
            return <td style={{width:'23%'}}><span className={val.value > val.maxValue || val.value < val.minValue?"red":''}>{val.value}</span> { val.labelSuffix}</td>
        }
    }
    render() {
        const { show, preInfo, dataJson, dataStr,baseObj } = this.props;
        return <div className={style['content']}>
            <div style={{ clear: 'both', fontSize: '24px', margin: '0px 0px 30px 0px',textAlign:'center' }}>{preInfo.hospitalName}</div>
            <table className={style['patInfo']} style={{ margin: '0px 15px 30px 0px', borderCollapse: 'collapse', width: "100%",fontSize:'12px' }}>
                <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>
                <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',width:'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',width:'650px'}}>
                                                        <td style={{width:'23%',fontSize:'12px'}}>{value.itemName}</td>
                                                        <td style={{width:'23%',fontSize:'12px'}}><span className={value.type == 1?'red':null} style={{fontSize:'12px'}}>{value.value}</span> {value.unit}</td>
                                                        <td style={{width:'24%',fontSize:'12px'}}>
                                                            {this.normalVal(value.min,value.max)}
                                                        </td>
                                                        <td style={{width:'30%',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:'23%'}}>{val.name}</td>
                                                            {/* <td style={{width:'23%'}} className={item.abnormal != '0' ?"red":'' }>{val.value} { val.labelSuffix}</td> */}
                                                            {this.showDetails(val)}
                                                            
                                                            <td style={{width:'24%'}}>
                                                                {this.normalVal(val.minValue,val.maxValue)}
                                                            </td>
                                                            <td style={{width:'30%'}}>{'化验时间:'+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 className={style.partTtable} style={{ marginTop: '10px',display: show ? 'block' : 'none' }}>
                <tr className={style.verticalT}>
                    <td style={{ width: 70, textAlign: 'right',verticalAlign:'top', padding: '0px 5px 16px 0px', fontSize: '14px' }}>签名：</td>
                    <td style={{ width: '220px',
                        height: '60px',
                        textAlign: 'center',
                        lineHeight: '60px',
                        cursor:'default',
                        color: '#cbc7c7',
                        border: '1px solid #cbc7c7',
                        paddingBottom: '0'
                    }}>此处签名</td>
                </tr>
            </table>
        </div>
    }
}

export default PreviewBody;