提交 6d53a504 authored 作者: 徐立's avatar 徐立
...@@ -14,8 +14,13 @@ function dataURLtoFile (dataurl, filename) { ...@@ -14,8 +14,13 @@ function dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(','), var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1], mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), bstr = atob(arr[1]),
n = bstr.length, n = bstr.length
u8arr = new Uint8Array(n);
if(n<=2220){
message.error('请进行签名');
return null;
}
var u8arr = new Uint8Array(n);
while (n--) { while (n--) {
u8arr[n] = bstr.charCodeAt(n); u8arr[n] = bstr.charCodeAt(n);
} }
...@@ -61,7 +66,12 @@ export default class index extends Component { ...@@ -61,7 +66,12 @@ export default class index extends Component {
} }
trim=()=>{ trim=()=>{
const formData = new FormData() const formData = new FormData()
formData.append('file',dataURLtoFile(this.sigCanvas.toDataURL('image/png'),"sign.png")) const file = dataURLtoFile(this.sigCanvas.toDataURL('image/png'))
if(file==null){
return
}
formData.append('file',file,"sign.png")
reqwest({ reqwest({
url: config.uploadUrl, url: config.uploadUrl,
method: 'post', method: 'post',
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
* 在up 的时候 更新元素dom的新位置到props * 在up 的时候 更新元素dom的新位置到props
* */ * */
import React, { Fragment, Component } from 'react'; import React, { Component } from 'react';
import styles from './index.less'; import styles from './index.less';
import { imageStyleAll, A4Height, A4Width } from './ViewPrint/config'; import { imageStyleAll, A4Height, A4Width } from './ViewPrint/config';
......
...@@ -68,12 +68,13 @@ const normalTextRender = (text, config) => { ...@@ -68,12 +68,13 @@ const normalTextRender = (text, config) => {
}; };
if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符 if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符
text = text.split(config.mark); text = text.split(config.mark);
let length = text.length;
return <span style={style}> return <span style={style}>
{text.map((x) => { {text.map((x, index) => {
return <p return <p
key={x} key={x}
style={{ marginBottom: '0' }}> style={{ marginBottom: '0' }}>
{x} {x} {length > index + 1 ? config.mark : ''}
</p>; </p>;
})} })}
</span>; </span>;
......
...@@ -11,226 +11,247 @@ import DetailDom from './DetailDom'; ...@@ -11,226 +11,247 @@ import DetailDom from './DetailDom';
import { imageStyleAll, A4Width, A4Height } from './config'; import { imageStyleAll, A4Width, A4Height } from './config';
export default class ViewPrint extends Component { export default class ViewPrint extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
configAll: null, configAll: null,
viewData: null, viewData: null,
loading: false, loading: false,
minHeight: 0, minHeight: 0,
showWindowPrint: false, showWindowPrint: false,
}; };
this.getConfigInfo = queryConfig.bind(this); this.getConfigInfo = queryConfig.bind(this);
} }
countImageHeight = () => { countImageHeight = () => {
if (!this.state.configAll) { if (!this.state.configAll) {
return false; return false;
} }
const { const {
configAll: { backgroundUrl }, configAll: { backgroundUrl },
} = this.state; } = this.state;
const img = new Image(); const img = new Image();
img.src = backgroundUrl; img.src = backgroundUrl;
img.onload = () => { img.onload = () => {
this.setState({ this.setState({
minHeight: img.height, minHeight: img.height,
}); });
}; };
}; };
getViewData = () => { getViewData = () => {
const { selectedRows } = this.props; const { selectedRows } = this.props;
const ids = selectedRows.map((x) => x.id); const ids = selectedRows.map((x) => x.id);
this.getConfigInfo().then((x) => { this.getConfigInfo().then((x) => {
this.countImageHeight(); this.countImageHeight();
if (x && x.queryUrl) { if (x && x.queryUrl) {
getInfo( getInfo(
{ {
ids: ids.join(','), ids: ids.join(','),
}, },
x.queryUrl, x.queryUrl,
).then((viewData) => { ).then((viewData) => {
if (!viewData || !viewData.length) { if (!viewData || !viewData.length) {
message.warning('未查询到可打印的奖状数据'); message.warning('未查询到可打印的奖状数据');
console.error(`${x.queryUrl}接口报错或者没有返回数据`); console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false; return false;
} }
for (let item of viewData) { for (let item of viewData) {
for (let x in item) { for (let x in item) {
if (item[x] === null || item[x] === 'null') { if (item[x] === null || item[x] === 'null') {
item[x] = ''; item[x] = '';
} }
} }
} }
this.setState({ this.setState({
viewData, viewData,
}); });
}); });
} }
}); });
}; };
componentDidMount() {
this.getViewData(); beforePrint = () => {
} console.log('beforePrint');
};
detailDom = (data) => {
const { afterPrint = () => {
configAll: { config }, console.log('afterPrint');
} = this.state; };
const res = [];
for (const item of config) { componentDidMount() {
res.push( this.getViewData();
DetailDom({ if (window.matchMedia) {
config: item, const mediaQueryList = window.matchMedia('print');
data: data[item.fieldCode], console.log(mediaQueryList);
}), mediaQueryList.addListener(function(mql) {
); if (mql.matches) {
} this.beforePrint();
return res; } else {
}; this.afterPrint();
}
onBeforeGetContent = () => { });
this.setState({
loading: true, }
}); }
return new Promise((resolve, reject) => { detailDom = (data) => {
const { selectedRows } = this.props; const {
const { configAll } = this.state; configAll: { config },
const ids = selectedRows.map((x) => { } = this.state;
return x.id; const res = [];
}); for (const item of config) {
if (configAll.callUrl && false) { res.push(
// 暂时关闭调用这个接口 不通知后台是否打印了 DetailDom({
getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => { config: item,
if (x) { data: data[item.fieldCode],
this.setState({ showWindowPrint: true }, () => { }),
resolve(true); );
}); }
} else { return res;
resolve(true); };
}
}); onBeforeGetContent = () => {
} else { this.setState({
this.setState({ showWindowPrint: true }, () => { loading: true,
resolve(true); });
});
} return new Promise((resolve, reject) => {
}); const { selectedRows } = this.props;
}; const { configAll } = this.state;
const ids = selectedRows.map((x) => {
render() { return x.id;
const { });
loading, if (configAll.callUrl && false) {
configAll, // 暂时关闭调用这个接口 不通知后台是否打印了
viewData, getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => {
showWindowPrint, if (x) {
minHeight, this.setState({ showWindowPrint: true }, () => {
} = this.state; resolve(true);
if (!viewData || !minHeight) { });
return null; } else {
} resolve(true);
if (!configAll.backgroundUrl) { }
console.error('没有设置模版图片无法使用'); });
return null; } else {
} this.setState({ showWindowPrint: true }, () => {
const { hasPrintBackground, backgroundUrl, wide, high } = configAll; 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 = { const imageStyle = {
height: `${high}cm` || A4Height, height: `${high}cm` || A4Height,
width: `${wide}cm` || A4Width, width: `${wide}cm` || A4Width,
}; };
return ( return (
<Fragment> <Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}> <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}> <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ReactToPrint <ReactToPrint
trigger={() => ( trigger={() => (
<Button <Button
shape="round" shape="round"
type="primary" type="primary"
loading={loading} loading={loading}
style={{ marginRight: '20px' }}> style={{ marginRight: '20px' }}>
打印 打印
</Button> </Button>
)} )}
content={() => this.content} content={() => this.content}
onBeforeGetContent={this.onBeforeGetContent} onBeforeGetContent={this.onBeforeGetContent}
onAfterPrint={() => { onAfterPrint={() => {
this.setState({ this.setState({
showWindowPrint: false, showWindowPrint: false,
loading: false, loading: false,
}); });
}} }}
/> />
<ButtonDiy <ButtonDiy
name={'返回'} name={'返回'}
handleClick={() => { handleClick={() => {
router.goBack(); router.goBack();
}} }}
/> />
</div> </div>
</Shell> </Shell>
{/** 预览的dom **/} {/** 预览的dom **/}
{viewData && viewData.length ? ( {viewData && viewData.length ? (
<div> <div>
{viewData.map((info, index) => { {viewData.map((info, index) => {
return ( return (
<div <div
className={styles.outSideDivPrint} className={styles.outSideDivPrint}
key={index + 'divKey'} key={index + 'divKey'}
style={{ style={{
...imageStyle, ...imageStyle,
}}> }}>
<img <img
src={backgroundUrl} src={backgroundUrl}
draggable={false} draggable={false}
className={styles.bgimagePrint} className={styles.bgimagePrint}
alt={'背景图'} alt={'背景图'}
style={imageStyleAll} style={imageStyleAll}
/> />
{this.detailDom(info)} {this.detailDom(info)}
</div> </div>
); );
})} })}
</div> </div>
) : null} ) : null}
{/** 打印的dom */} {/** 打印的dom */}
{viewData && viewData.length ? ( {viewData && viewData.length ? (
<div <div
ref={(node) => (this.content = node)} ref={(node) => (this.content = node)}
style={{ style={{
display: showWindowPrint /*|| true*/ ? 'block' : 'none', display: showWindowPrint /*|| true*/ ? 'block' : 'none',
}}> }}>
{viewData.map((info, index) => { {viewData.map((info, index) => {
return ( return (
<div <div
className={styles.outSideDivPrint} className={styles.outSideDivPrint}
key={`${index}divKey`} key={`${index}divKey`}
style={{ style={{
...imageStyle, ...imageStyle,
}}> }}>
{hasPrintBackground ? ( {hasPrintBackground ? (
<img <img
src={backgroundUrl} src={backgroundUrl}
draggable={false} draggable={false}
className={styles.bgimagePrint} className={styles.bgimagePrint}
alt={'背景图'} alt={'背景图'}
style={imageStyleAll} style={imageStyleAll}
/> />
) : null} ) : null}
{this.detailDom(info)} {this.detailDom(info)}
</div> </div>
); );
})} })}
</div> </div>
) : null} ) : null}
</Fragment> </Fragment>
); );
} }
} }
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论