Skip to content

W
WebPublic
提交 bfd24016 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

打印纸张高度 宽度配置单位修改为厘米了

上级 ef296829
隐藏空白字符变更
内嵌 并排
正在显示 包含 223 行增加 和 221 行删除
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @ bfd24016
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
import React, { Fragment, Component } from 'react'; import React, { Fragment, Component } from 'react';
import styles from './index.less'; import styles from './index.less';
import { imageStyleAll, A4Height, A4Width } from './ViewPrint/config';
export default class Index extends Component { export default class Index extends Component {
constructor(props) { constructor(props) {
...@@ -124,8 +126,8 @@ export default class Index extends Component { ...@@ -124,8 +126,8 @@ export default class Index extends Component {
} = this.props; } = this.props;
const imageStyle = { const imageStyle = {
height: high || '902px', height: `${high}cm` || A4Height,
width: wide || 'auto', width: `${wide}cm` || A4Width,
}; };
return ( return (
...@@ -143,10 +145,7 @@ export default class Index extends Component { ...@@ -143,10 +145,7 @@ export default class Index extends Component {
id={'dropZone'} id={'dropZone'}
draggable={false} draggable={false}
className={styles.bgimage} className={styles.bgimage}
style={{ style={imageStyleAll}
width: 'auto',
height: '100%',
}}
alt={'背景图'} alt={'背景图'}
/> />
{config.map((item, index) => { {config.map((item, index) => {
......
zyd_private/DragAndPrint/ViewPrint/config.js 0 → 100644
浏览文件 @ bfd24016
export const A4Height = '29.6cm';
export const A4Width = '20.9cm';
export const imageStyleAll = {
width: '100%',
height: '100%',
};
zyd_private/DragAndPrint/ViewPrint/index.js
浏览文件 @ bfd24016
...@@ -8,232 +8,229 @@ import ButtonDiy from '@/baseComponent/ButtonDiy'; ...@@ -8,232 +8,229 @@ import ButtonDiy from '@/baseComponent/ButtonDiy';
import router from 'umi/router'; import router from 'umi/router';
import styles from '../index.less'; import styles from '../index.less';
import DetailDom from './DetailDom'; import DetailDom from './DetailDom';
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() { componentDidMount() {
this.getViewData(); this.getViewData();
} }
detailDom = (data) => { detailDom = (data) => {
const { const {
configAll: { config }, configAll: { config },
} = this.state; } = this.state;
const res = []; const res = [];
for (const item of config) { for (const item of config) {
res.push( res.push(
DetailDom({ DetailDom({
config: item, config: item,
data: data[item.fieldCode], data: data[item.fieldCode],
}), }),
); );
} }
return res; return res;
}; };
onBeforeGetContent = () => { onBeforeGetContent = () => {
this.setState({ this.setState({
loading: true, loading: true,
}); });
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { selectedRows } = this.props; const { selectedRows } = this.props;
const { configAll } = this.state; const { configAll } = this.state;
const ids = selectedRows.map((x) => { const ids = selectedRows.map((x) => {
return x.id; return x.id;
}); });
if (configAll.callUrl && false) { // 暂时关闭调用这个接口 不通知后台是否打印了 if (configAll.callUrl && false) {
getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => { // 暂时关闭调用这个接口 不通知后台是否打印了
if (x) { getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => {
this.setState({ showWindowPrint: true }, () => { if (x) {
resolve(true); this.setState({ showWindowPrint: true }, () => {
}); resolve(true);
} else { });
resolve(true); } else {
} resolve(true);
}); }
} else { });
this.setState({ showWindowPrint: true }, () => { } else {
resolve(true); this.setState({ showWindowPrint: true }, () => {
}); resolve(true);
} });
}); }
}; });
};
render() { render() {
const { const {
loading, loading,
configAll, configAll,
viewData, viewData,
showWindowPrint, showWindowPrint,
minHeight, minHeight,
} = this.state; } = this.state;
if (!viewData || !minHeight) { if (!viewData || !minHeight) {
return null; return null;
} }
if (!configAll.backgroundUrl) { if (!configAll.backgroundUrl) {
console.error('没有设置模版图片无法使用'); console.error('没有设置模版图片无法使用');
return null; return null;
} }
const { hasPrintBackground, backgroundUrl, wide, high } = configAll; const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
const imageStyle = { const imageStyle = {
height: high || '902px', height: `${high}cm` || A4Height,
width: wide || 'auto', 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 **/} return (
{viewData && viewData.length ? ( <Fragment>
<div> <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
{viewData.map((info, index) => { <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
return ( <ReactToPrint
<div className={styles.outSideDivPrint} trigger={() => (
key={index + 'divKey'} <Button
style={{ shape="round"
...imageStyle, type="primary"
}} loading={loading}
> style={{ marginRight: '20px' }}>
<img 打印
src={backgroundUrl} </Button>
draggable={false} )}
className={styles.bgimagePrint} content={() => this.content}
alt={'背景图'} onBeforeGetContent={this.onBeforeGetContent}
style={{ onAfterPrint={() => {
width: 'auto', this.setState({
height: '100%', showWindowPrint: false,
}} loading: false,
/> });
{this.detailDom(info)} }}
</div> />
); <ButtonDiy
})} name={'返回'}
</div> handleClick={() => {
) : null} 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 */} {/** 打印的dom */}
{viewData && viewData.length ? ( {viewData && viewData.length ? (
<div <div
ref={(node) => (this.content = node)} ref={(node) => (this.content = node)}
style={{ style={{
display: showWindowPrint ? '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={{ />
width: 'auto', ) : null}
height: '100%',
}}/>
) : null}
{this.detailDom(info)} {this.detailDom(info)}
</div> </div>
); );
})} })}
</div> </div>
) : null} ) : null}
</Fragment> </Fragment>
); );
} }
} }
zyd_private/DragAndPrint/index.less
浏览文件 @ bfd24016
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
.outSideDivPrint{ .outSideDivPrint{
position: relative; position: relative;
width: auto; width: auto;
margin-bottom: 10px; //margin-bottom: 10px;
page-break-after: always; page-break-after: always;
.bgimagePrint{ .bgimagePrint{
height: auto; height: auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论