Skip to content

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

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

上级 ef296829
隐藏空白字符变更
内嵌 并排
正在显示 包含 223 行增加 和 221 行删除
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @ bfd24016
......@@ -9,6 +9,8 @@
import React, { Fragment, Component } from 'react';
import styles from './index.less';
import { imageStyleAll, A4Height, A4Width } from './ViewPrint/config';
export default class Index extends Component {
constructor(props) {
......@@ -124,8 +126,8 @@ export default class Index extends Component {
} = this.props;
const imageStyle = {
height: high || '902px',
width: wide || 'auto',
height: `${high}cm` || A4Height,
width: `${wide}cm` || A4Width,
};
return (
......@@ -143,10 +145,7 @@ export default class Index extends Component {
id={'dropZone'}
draggable={false}
className={styles.bgimage}
style={{
width: 'auto',
height: '100%',
}}
style={imageStyleAll}
alt={'背景图'}
/>
{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';
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);
}
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,
});
};
};
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,
});
});
}
});
};
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,
});
});
}
});
};
componentDidMount() {
this.getViewData();
}
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;
};
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,
});
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);
});
}
});
};
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;
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 || '902px',
width: wide || 'auto',
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={{
width: 'auto',
height: '100%',
}}
/>
{this.detailDom(info)}
</div>
);
})}
</div>
) : null}
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 ? '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={{
width: 'auto',
height: '100%',
}}/>
) : 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>
);
}
{this.detailDom(info)}
</div>
);
})}
</div>
) : null}
</Fragment>
);
}
}
zyd_private/DragAndPrint/index.less
浏览文件 @ bfd24016
......@@ -25,7 +25,7 @@
.outSideDivPrint{
position: relative;
width: auto;
margin-bottom: 10px;
//margin-bottom: 10px;
page-break-after: always;
.bgimagePrint{
height: auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论