Skip to content

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

打印效果修改

上级 c8378d7f
隐藏空白字符变更
内嵌 并排
正在显示 包含 315 行增加 和 304 行删除
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ 9934afe4
...@@ -15,334 +15,345 @@ import { isJSON } from '@/webPublic/one_stop_public/copy'; ...@@ -15,334 +15,345 @@ import { isJSON } from '@/webPublic/one_stop_public/copy';
const Authorized = RenderAuthorized(getAuthority()); const Authorized = RenderAuthorized(getAuthority());
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: true, loading: true,
printIndex: 0, printIndex: 0,
showWindowPrint: false, showWindowPrint: false,
}; preaparePrint: false,
this.getConfigInfo = queryConfig.bind(this); };
} this.getConfigInfo = queryConfig.bind(this);
}
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) => {
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;
} }
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] = '';
} }
} }
} }
this.setState({ this.setState({
viewData, viewData,
}); });
}); });
} }
}); });
}; };
componentDidMount() { componentDidMount() {
this.getViewData(); this.getViewData();
getCLodopFuncJS().then((response) => { getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function() { window.On_CLodop_Opened = function() {
console.log('打印插件准备就绪,随时可以打印'); console.log('打印插件准备就绪,随时可以打印');
window.On_CLodop_Opened = null; window.On_CLodop_Opened = null;
}; };
if (response) { if (response) {
this.setState({ this.setState({
loading: false, loading: false,
}); });
} }
}); });
} }
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;
}; };
printOne = (optionType = 0) => { printOne = (optionType = 0) => {
const { printIndex, configAll, viewData } = this.state; const { printIndex, configAll, viewData } = this.state;
let { info } = configAll; let { info } = configAll;
if(isJSON(info)){ if (isJSON(info)) {
info = JSON.parse(info); info = JSON.parse(info);
}else{ } else {
info = defaultConfigInfo; info = defaultConfigInfo;
}
console.log(info);
const { printMeth } = configAll;
const { wide, high } = configAll;
const { LODOP } = window;
let dom = document.getElementById(`printDomId-${printIndex}`);
if (optionType >= 1) {
dom = document.getElementById('printDomId-0');
} }
const { printMeth } = configAll; if (!dom) {
const { wide, high } = configAll; console.error('dom节点没找到');
const { LODOP } = window; return false;
let dom = document.getElementById(`printDomId-${printIndex}`); }
if (optionType >= 1) { const strHTML = dom.innerHTML;
dom = document.getElementById('printDomId-0');
}
if (!dom) {
console.error('dom节点没找到');
return false;
}
console.log(wide, high);
const strHTML = dom.innerHTML;
LODOP.SET_SHOW_MODE('LANGUAGE', 0); LODOP.SET_SHOW_MODE('LANGUAGE', 0);
LODOP.SET_LICENSES('成都市知用科技有限公司', '649677881727389907689190562356', '', ''); LODOP.SET_LICENSES('成都市知用科技有限公司', '649677881727389907689190562356', '', '');
LODOP.PRINT_INITA(0, 0, `${wide}cm`, `${high}cm`, `printDomId${printIndex}`); // LODOP.PRINT_INITA(0, 0, `${wide}cm`, `${high}cm`, `printDomId${printIndex}`);
LODOP.SET_PRINT_PAGESIZE(printMeth, info.paperWidth, info.paperHeight, 'CreateCustomPage'); // 打印方向 纸张大小. LODOP.PRINT_INIT(`${Math.random() * 10000 + 'test'}`);
LODOP.ADD_PRINT_HTML(0, 0, '100%', '100%', strHTML); // HTML 打印 LODOP.SET_PRINT_MODE('RESELECT_PAGESIZE', true);
switch (optionType) { LODOP.SET_PRINT_PAGESIZE(printMeth, info.paperWidth, info.paperHeight, 'CreateCustomPage'); // 打印方向 纸张大小.
case 1: LODOP.ADD_PRINT_HTML(0, 0, '100%', '100%', strHTML); // HTML 打印
LODOP.PREVIEW(); // 打印预览 switch (optionType) {
break; case 1:
case 2: LODOP.PREVIEW(); // 打印预览
LODOP.PRINT_DESIGN(); // 打印设计 break;
break; case 2:
case 0: LODOP.PRINT_DESIGN(); // 打印设计
LODOP.PRINT(); // 打印 break;
break; case 0:
default: LODOP.PRINT(); // 打印
break; break;
} default:
}; break;
}
printPreview = () => { };
// 打印预览
this.printOne(1);
};
printSetUp = () => { printPreview = () => {
this.printOne(2); // 打印预览
}; this.printOne(1);
};
printedDataSave = (index) => { printSetUp = () => {
const { selectedRows } = this.props; this.printOne(2);
const { configAll } = this.state; };
if (!selectedRows[index] || !selectedRows[index].id) {
console.error('printedDataSave 没有正确的id 无法保存打印信息到后台');
return false;
}
const ids = selectedRows[index].id;
getInfo({ ids }, configAll.callUrl).then((x) => {
if (x) {
console.log(`${ids}的打印信息已保存到后台`);
return true;
} else {
return false;
}
});
};
printOneByOne = () => { printedDataSave = (index) => {
// 按队列打印 const { selectedRows } = this.props;
const { viewData, printIndex } = this.state; const { configAll } = this.state;
if (viewData && viewData.length) { if (!selectedRows[index] || !selectedRows[index].id) {
this.printOne(); console.error('printedDataSave 没有正确的id 无法保存打印信息到后台');
const { length } = viewData; return false;
let LODOPObj = window.LODOP; }
LODOPObj.On_Return_Remain = true; const ids = selectedRows[index].id;
LODOPObj.On_Return = (TaskId, Value) => { getInfo({ ids }, configAll.callUrl).then((x) => {
if (Number(Value) === 1) { if (x) {
message.info(`正在打印第${printIndex + 1}张, 共${viewData.length}张`); console.log(`${ids}的打印信息已保存到后台`);
this.printedDataSave(printIndex); return true;
} } else {
this.setState({ printIndex: this.state.printIndex + 1 }, () => { return false;
if (this.state.printIndex < length) { }
this.printOne(); });
} else { };
this.setState({
loading: false,
});
}
});
};
} else {
console.error('暂无任何数据无法打印');
}
};
printByLodop = () => { printOneByOne = () => {
if (!window.LODOP || !window.LODOP.PRINT_INIT) { // 按队列打印
console.error('打印服务未启动'); const { viewData, printIndex } = this.state;
ModalInfo('打印服务未启动'); if (viewData && viewData.length) {
return false; this.printOne();
} const { length } = viewData;
this.setState( let LODOPObj = window.LODOP;
{ LODOPObj.On_Return_Remain = true;
showWindowPrint: true, LODOPObj.On_Return = (TaskId, Value) => {
printIndex: 0, if (Number(Value) === 1) {
loading: true, message.info(`正在打印第${printIndex + 1}张, 共${viewData.length}张`);
}, this.printedDataSave(printIndex);
() => { }
this.printOneByOne(); this.setState({ printIndex: this.state.printIndex + 1 }, () => {
}, if (this.state.printIndex < length) {
); this.printOne();
}; } else {
this.setState({
loading: false,
});
}
});
};
} else {
console.error('暂无任何数据无法打印');
}
};
render() { printByLodop = () => {
const { configAll, viewData, showWindowPrint, loading } = this.state; if (!window.LODOP || !window.LODOP.PRINT_INIT) {
if (!viewData) { console.error('打印服务未启动');
return ( ModalInfo('打印服务未启动');
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}> return false;
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}> }
<ButtonDiy this.setState(
name={'返回'} {
handleClick={() => { showWindowPrint: true,
router.goBack(); printIndex: 0,
}} loading: true,
/> },
</div> () => {
</Shell> this.printOneByOne();
); },
} );
if (!configAll.backgroundUrl) { };
console.error('没有设置模版图片无法使用');
return null;
}
const { wide, high } = configAll;
const imageStyle = {
height: high ? `${high}cm` : A4Height,
width: wide ? `${wide}cm` : A4Width,
textAlign: 'center',
};
const { pathname } = this.props.location;
const templateInfo = templateCode.find((x) => {
return x.path === pathname;
});
if (!templateInfo) {
console.error('未找到templateInfo', pathname);
}
return (
<Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy
name={'打印设备选择'}
handleClick={() => {
window.LODOP.SELECT_PRINTER();
}}
loading={loading}
/>
<ButtonDiy
name={'打印'}
handleClick={() => {
this.printByLodop();
}}
loading={loading}
/>
<ButtonDiy render() {
name={'返回'} const { configAll, viewData, showWindowPrint, loading, preaparePrint } = this.state;
handleClick={() => { if (!viewData) {
router.goBack(); return (
}} <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
/> <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy
name={'返回'}
handleClick={() => {
router.goBack();
}}
/>
</div>
</Shell>
);
}
if (!configAll.backgroundUrl) {
console.error('没有设置模版图片无法使用');
return null;
}
const { wide, high } = configAll;
const imageStyle = {
height: high ? `${high}cm` : A4Height,
width: wide ? `${wide}cm` : A4Width,
textAlign: 'center',
};
const { pathname } = this.props.location;
const templateInfo = templateCode.find((x) => {
return x.path === pathname;
});
if (!templateInfo) {
console.error('未找到templateInfo', pathname);
}
return (
<Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy
name={'打印设备选择'}
handleClick={() => {
window.LODOP.SELECT_PRINTER();
this.setState({
preaparePrint: true,
});
}}
loading={loading}
/>
<ButtonDiy
name={'打印预览'}
handleClick={() => {
if (!preaparePrint) {
message.warning('请先选择打印设备');
return false;
}
this.printPreview();
}}
loading={loading}
/>
<ButtonDiy
name={'打印'}
handleClick={() => {
if (!preaparePrint) {
message.warning('请先选择打印设备');
return false;
}
this.printByLodop();
}}
loading={loading}
/>
<Authorized authority={'/jc/setting/PrintPositionSetting'}> <span style={{ float: 'right' }}>
<span style={{ float: 'right' }}> <ButtonDiy
<ButtonDiy name={'返回'}
name={'打印调试模式(实施)'} handleClick={() => {
handleClick={() => { router.goBack();
this.printSetUp(); }}
}} />
loading={loading} </span>
/>
</span>
</Authorized>
<Authorized authority={'/jc/setting/PrintPositionSetting'}> <Authorized authority={'/jc/setting/PrintPositionSetting'}>
<span style={{ float: 'right' }}> <span style={{ float: 'right' }}>
<ButtonDiy <ButtonDiy
name={'打印预览(实施)'} name={'打印调试模式(实施)'}
handleClick={() => { handleClick={() => {
this.printPreview(); this.printSetUp();
}} }}
loading={loading} loading={loading}
/> />
</span> </span>
</Authorized> </Authorized>
<Authorized authority={'/jc/setting/PrintPositionSetting'}> <Authorized authority={'/jc/setting/PrintPositionSetting'}>
<span style={{ float: 'right' }}> <span style={{ float: 'right' }}>
<ButtonDiy <ButtonDiy
name={'打印模版设置(实施)'} name={'打印模版设置(实施)'}
handleClick={() => { handleClick={() => {
router.push({ router.push({
pathname: '/jc/setting/PrintConfig', pathname: '/jc/setting/PrintConfig',
state: { code: templateInfo.code }, state: { code: templateInfo.code },
}); });
}} }}
/> />
</span> </span>
</Authorized> </Authorized>
<Authorized authority={'/jc/setting/PrintPositionSetting'}> <Authorized authority={'/jc/setting/PrintPositionSetting'}>
<span style={{ float: 'right' }}> <span style={{ float: 'right' }}>
<ButtonDiy <ButtonDiy
name={'字段位置设置(实施)'} name={'字段位置设置(实施)'}
handleClick={() => { handleClick={() => {
router.push({ router.push({
pathname: '/xg/xg_hard/AwardSet/printSetting', pathname: '/xg/xg_hard/AwardSet/printSetting',
state: { code: templateInfo.code }, state: { code: templateInfo.code },
}); });
}} }}
/> />
</span> </span>
</Authorized> </Authorized>
</div> </div>
</Shell> </Shell>
{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 key={`${index}divKey`} id={`printDomId-${index}`} style={{ <div key={`${index}divKey`} id={`printDomId-${index}`} style={{
marginBottom: '10px', marginBottom: '10px',
}}> }}>
<div <div
style={{ style={{
position: 'relative', position: 'relative',
// pageBreakAfter: 'always', pageBreakAfter: 'avoid',
...imageStyle, ...imageStyle,
backgroundColor: '#fff', backgroundColor: '#fff',
}}> }}>
{this.detailDom(info)} {this.detailDom(info)}
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
) : null} ) : null}
</Fragment> </Fragment>
); );
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论