index.js

import React from 'react';
import ViewPrint from './index2';

export default class Index extends React.Component {
	render() {
		return <ViewPrint {...this.props} />;
	}
}

// import React, { Component, Fragment } from 'react';
// import { queryConfig } from '../services';
// import { getInfo } from '@/highOrderComponent/Service';
// import { message, Button } from 'antd';
// import Shell from '@/baseComponent/Shell';
// import ReactToPrint from 'react-to-print';
// import ButtonDiy from '@/baseComponent/ButtonDiy';
// import router from 'umi/router';
// import styles from '../index.less';
// import DetailDom from './DetailDom';
// import { imageStyleAll, A4Width, A4Height } from './config';
//
// export default class ViewPrint extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       configAll: null,
//       viewData: null,
//       loading: false,
//       minHeight: 0,
//       showWindowPrint: false,
//     };
//     this.getConfigInfo = queryConfig.bind(this);
//   }
//
//   countImageHeight = () => {
//     if (!this.state.configAll) {
//       return false;
//     }
//     const {
//       configAll: { backgroundUrl },
//     } = this.state;
//     const img = new Image();
//     img.src = backgroundUrl;
//     img.onload = () => {
//       this.setState({
//         minHeight: img.height,
//       });
//     };
//   };
//
//   getViewData = () => {
//     const { selectedRows } = this.props;
//     const ids = selectedRows.map((x) => x.id);
//     this.getConfigInfo().then((x) => {
//       this.countImageHeight();
//       if (x && x.queryUrl) {
//         getInfo(
//           {
//             ids: ids.join(','),
//           },
//           x.queryUrl,
//         ).then((viewData) => {
//           if (!viewData || !viewData.length) {
//             message.warning('未查询到可打印的奖状数据');
//             console.error(`${x.queryUrl}接口报错或者没有返回数据`);
//             return false;
//           }
//           for (let item of viewData) {
//             for (let x in item) {
//               if (item[x] === null || item[x] === 'null') {
//                 item[x] = '';
//               }
//             }
//           }
//           this.setState({
//             viewData,
//           });
//         });
//       }
//     });
//   };
//
//
//   beforePrint = () => {
//     console.log('beforePrint');
//   };
//
//   afterPrint = () => {
//     console.log('afterPrint');
//   };
//
//   componentDidMount() {
//     this.getViewData();
//   }
//
//   detailDom = (data) => {
//     const {
//       configAll: { config },
//     } = this.state;
//     const res = [];
//     for (const item of config) {
//       res.push(
//         DetailDom({
//           config: item,
//           data: data[item.fieldCode],
//         }),
//       );
//     }
//     return res;
//   };
//
//   onBeforeGetContent = () => {
//     this.setState({
//       loading: true,
//     });
//
//     return new Promise((resolve, reject) => {
//       const { selectedRows } = this.props;
//       const { configAll } = this.state;
//       const ids = selectedRows.map((x) => {
//         return x.id;
//       });
//       if (configAll.callUrl && false) {
//         // 暂时关闭调用这个接口 不通知后台是否打印了
//         getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => {
//           if (x) {
//             this.setState({ showWindowPrint: true }, () => {
//               resolve(true);
//             });
//           } else {
//             resolve(true);
//           }
//         });
//       } else {
//         this.setState({ showWindowPrint: true }, () => {
//           resolve(true);
//         });
//       }
//     });
//   };
//
//   render() {
//     const {
//       loading,
//       configAll,
//       viewData,
//       showWindowPrint,
//       minHeight,
//     } = this.state;
//     if (!viewData || !minHeight) {
//       return null;
//     }
//     if (!configAll.backgroundUrl) {
//       console.error('没有设置模版图片无法使用');
//       return null;
//     }
//     const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
//     const imageStyle = {
//       height: `${high}cm` || A4Height,
//       width: `${wide}cm` || A4Width,
//     };
//
//     return (
//       <Fragment>
//         <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
//           <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
//             <ReactToPrint
//               trigger={() => (
//                 <Button
//                   shape="round"
//                   type="primary"
//                   loading={loading}
//                   style={{ marginRight: '20px' }}>
//                   打印
//                 </Button>
//               )}
//               content={() => this.content}
//               onBeforeGetContent={this.onBeforeGetContent}
//               onAfterPrint={() => {
//                 this.setState({
//                   showWindowPrint: false,
//                   loading: false,
//                 });
//               }}
//             />
//             <ButtonDiy
//               name={'返回'}
//               handleClick={() => {
//                 router.goBack();
//               }}
//             />
//           </div>
//         </Shell>
//
//         {/** 预览的dom **/}
//         {viewData && viewData.length ? (
//           <div>
//             {viewData.map((info, index) => {
//               return (
//                 <div
//                   className={styles.outSideDivPrint}
//                   key={index + 'divKey'}
//                   style={{
//                     ...imageStyle,
//                   }}>
//                   <img
//                     src={backgroundUrl}
//                     draggable={false}
//                     className={styles.bgimagePrint}
//                     alt={'背景图'}
//                     style={imageStyleAll}
//                   />
//                   {this.detailDom(info)}
//                 </div>
//               );
//             })}
//           </div>
//         ) : null}
//
//         {/**  打印的dom */}
//         {viewData && viewData.length ? (
//           <div
//             ref={(node) => (this.content = node)}
//             style={{
//               display: showWindowPrint /*|| true*/ ? 'block' : 'none',
//             }}>
//             {viewData.map((info, index) => {
//               return (
//                 <div
//                   className={styles.outSideDivPrint}
//                   key={`${index}divKey`}
//                   style={{
//                     ...imageStyle,
//                   }}>
//                   {hasPrintBackground ? (
//                     <img
//                       src={backgroundUrl}
//                       draggable={false}
//                       className={styles.bgimagePrint}
//                       alt={'背景图'}
//                       style={imageStyleAll}
//                     />
//                   ) : null}
//
//                   {this.detailDom(info)}
//                 </div>
//               );
//             })}
//           </div>
//         ) : null}
//       </Fragment>
//     );
//   }
// }