提交 dc1c42d4 authored 作者: 钟是志's avatar 钟是志

打印调试.所见及所得

上级 2b51aa31
...@@ -3,6 +3,7 @@ import JsBarcode from 'jsbarcode'; ...@@ -3,6 +3,7 @@ import JsBarcode from 'jsbarcode';
import styles from '../index.less'; import styles from '../index.less';
import moment from 'moment'; import moment from 'moment';
import { styleCount } from './config'; import { styleCount } from './config';
/** /**
* -2 条形码 * -2 条形码
* -1 常量 * -1 常量
...@@ -16,48 +17,39 @@ const normalTextRender = (text, config) => { ...@@ -16,48 +17,39 @@ const normalTextRender = (text, config) => {
if (!text || text === 'undefined' || typeof text === 'undefined') { if (!text || text === 'undefined' || typeof text === 'undefined') {
return null; return null;
} }
const width = config.wide ? config.wide + 'px' : 'auto';
const height = config.high ? config.high + 'px' : 'auto';
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; let length = text.length;
return <span style={styleCount(config)}> return text.map((x, index) => {
{text.map((x, index) => { return <div
return <p
key={x} key={x}
style={{ style={{
...styleCount(config),
marginBottom: '0', marginBottom: '0',
width: `${config.wide}cm` || 'auto', width,
textAlign: 'right', textAlign: 'right',
}}> }}>
{x}{length > index + 1 ? config.mark : ''} {x}{length > index + 1 ? config.mark : ''}
</p>; </div>;
})} });
</span>;
} }
return ( return (
<div style={{ <div style={{
textAlign: 'justify', ...styleCount(config),
textAlignLast: 'justify',
}}>
<p style={{
/* float:'left',
textAlign:'justify',
textJustify:'inter-word',
textJustify:'inter-ideograph',*/
marginBottom: '0', marginBottom: '0',
width: `${config.wide}cm` || 'auto', width,
height,
lineHeight: height,
textAlign: 'right', textAlign: 'right',
letterSpacing: '2px', letterSpacing: '2px',
height: `${config.high}cm` || 'auto',
...styleCount(config),
lineHeight: `${config.high}cm` || 'auto',
}}> }}>
{text} {text}
</p>
<div></div>
</div> </div>
) )
; ;
}; };
const imageRender = (imageUrl) => { const imageRender = (imageUrl) => {
......
...@@ -25,34 +25,16 @@ export default class ViewPrint extends Component { ...@@ -25,34 +25,16 @@ export default class ViewPrint extends Component {
configAll: null, configAll: null,
viewData: null, viewData: null,
loading: true, loading: true,
minHeight: 0,
printIndex: 0, printIndex: 0,
showWindowPrint: false, showWindowPrint: false,
}; };
this.getConfigInfo = queryConfig.bind(this); 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 = () => { 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();
if (x && x.queryUrl) { if (x && x.queryUrl) {
getInfo( getInfo(
{ {
...@@ -65,15 +47,14 @@ export default class ViewPrint extends Component { ...@@ -65,15 +47,14 @@ export default class ViewPrint extends Component {
console.error(`${x.queryUrl}接口报错或者没有返回数据`); console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false; return false;
} }
let i = 0; // let i = 0;
for (const item of viewData) { for (const item of viewData) {
item.name = ['钟是志', '张浩', '古力娜扎', '买买提·阿布扎比','古丽尼帕尔·阿布都黑利力'][i] || '钟是志'; // item.name = ['张浩', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
i++; // i++;
for (let z in item) { for (let z in item) {
if (item[z] === null || item[z] === 'null') { if (item[z] === null || item[z] === 'null') {
item[z] = ''; item[z] = '';
} }
//if(item[])
} }
} }
this.setState({ this.setState({
...@@ -112,29 +93,19 @@ export default class ViewPrint extends Component { ...@@ -112,29 +93,19 @@ export default class ViewPrint extends Component {
}; };
printOne = () => { printOne = () => {
const { printIndex, configAll } = this.state; const { printIndex, configAll, viewData } = this.state;
const { backgroundUrl, wide, high } = configAll; const { wide, high } = configAll;
let LODOPObj = window.LODOP; let LODOPObj = window.LODOP;
let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML; let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
strHTML = strHTML.replace('break-after: page;', 'page-break-after: always;'); strHTML = strHTML.replace('break-after: page;', 'page-break-after: always;');
strHTML = `<!DOCTYPE html>${strHTML}`;
LODOPObj.PRINT_INIT(`printDomId_${printIndex}`); LODOPObj.PRINT_INIT(`printDomId_${printIndex}`);
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能'); // window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
LODOPObj.ADD_PRINT_HTM(0, 0, `${wide}cm`, `${high}cm`, strHTML); // 打印的宽高和 html LODOPObj.ADD_PRINT_HTM(0, 0, `${wide + 0.1}cm`, `${high + 0.1}cm`, strHTML); // 打印的宽高和 html
LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印 LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印
LODOPObj.PREVIEW(); LODOPObj.PREVIEW();
// LODOPObj.PRINT_SETUP();
}; const { length } = viewData;
printOneByOne = () => { // 按队列打印
const { configAll, viewData, printIndex } = this.state;
if (viewData && viewData.length) {
this.printOne();
} else {
console.error('暂无数据无法打印');
}
const length = viewData.length;
const LODOPObj = window.LODOP;
LODOPObj.On_Return = (TaskId, Value) => { LODOPObj.On_Return = (TaskId, Value) => {
console.log(TaskId, Value === 1 || Value === '1' ? '已发出实际打印命令!' : '放弃打印!'); console.log(TaskId, Value === 1 || Value === '1' ? '已发出实际打印命令!' : '放弃打印!');
this.setState({ this.setState({
...@@ -142,11 +113,24 @@ export default class ViewPrint extends Component { ...@@ -142,11 +113,24 @@ export default class ViewPrint extends Component {
}, () => { }, () => {
if (this.state.printIndex < length) { if (this.state.printIndex < length) {
this.printOne(); this.printOne();
} else {
this.setState({
loading: false,
});
} }
}); });
}; };
}; };
printOneByOne = () => { // 按队列打印
const { configAll, viewData, printIndex } = this.state;
if (viewData && viewData.length) {
this.printOne();
} else {
console.error('暂无数据无法打印');
}
};
printByLodop = () => { printByLodop = () => {
if (!window.LODOP || !window.LODOP.PRINT_INIT) { if (!window.LODOP || !window.LODOP.PRINT_INIT) {
console.error('打印服务未启动'); console.error('打印服务未启动');
...@@ -165,8 +149,8 @@ export default class ViewPrint extends Component { ...@@ -165,8 +149,8 @@ export default class ViewPrint extends Component {
}; };
render() { render() {
const { configAll, viewData, showWindowPrint, minHeight } = this.state; const { configAll, viewData, showWindowPrint, loading } = this.state;
if (!viewData || !minHeight) { if (!viewData) {
return null; return null;
} }
if (!configAll.backgroundUrl) { if (!configAll.backgroundUrl) {
...@@ -182,7 +166,10 @@ export default class ViewPrint extends Component { ...@@ -182,7 +166,10 @@ export default class ViewPrint extends Component {
<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' }}>
<ButtonDiy name={'打印'} handleClick={this.printByLodop}/> <ButtonDiy name={'打印'}
handleClick={this.printByLodop}
loading={loading}
/>
<ButtonDiy <ButtonDiy
name={'返回'} name={'返回'}
handleClick={() => { handleClick={() => {
...@@ -241,8 +228,6 @@ export default class ViewPrint extends Component { ...@@ -241,8 +228,6 @@ export default class ViewPrint extends Component {
draggable={false} draggable={false}
alt={'背景图'} alt={'背景图'}
style={{ style={{
height: 'auto',
overflow: 'auto',
zIndex: 1, zIndex: 1,
...imageStyleAll, ...imageStyleAll,
}} }}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论