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';
const Authorized = RenderAuthorized(getAuthority());
export default class ViewPrint extends Component {
constructor(props) {
super(props);
this.state = {
configAll: null,
viewData: null,
loading: true,
printIndex: 0,
showWindowPrint: false,
};
this.getConfigInfo = queryConfig.bind(this);
}
constructor(props) {
super(props);
this.state = {
configAll: null,
viewData: null,
loading: true,
printIndex: 0,
showWindowPrint: false,
preaparePrint: false,
};
this.getConfigInfo = queryConfig.bind(this);
}
getViewData = () => {
const { selectedRows } = this.props;
const ids = selectedRows.map((x) => x.id);
this.getConfigInfo().then((x) => {
if (x && x.queryUrl) {
getInfo(
{
ids: ids.join(','),
},
x.queryUrl,
).then((viewData) => {
if (!viewData || !viewData.length) {
message.warning('未查询到可打印的奖状数据');
console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false;
}
let i = 0;
for (const item of viewData) {
// item.name = ['黎处', '王昊楠', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
i++;
for (let z in item) {
if (item[z] === null || item[z] === 'null') {
item[z] = '';
}
}
}
this.setState({
viewData,
});
});
}
});
};
getViewData = () => {
const { selectedRows } = this.props;
const ids = selectedRows.map((x) => x.id);
this.getConfigInfo().then((x) => {
if (x && x.queryUrl) {
getInfo(
{
ids: ids.join(','),
},
x.queryUrl,
).then((viewData) => {
if (!viewData || !viewData.length) {
message.warning('未查询到可打印的奖状数据');
console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false;
}
let i = 0;
for (const item of viewData) {
// item.name = ['黎处', '王昊楠', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
i++;
for (let z in item) {
if (item[z] === null || item[z] === 'null') {
item[z] = '';
}
}
}
this.setState({
viewData,
});
});
}
});
};
componentDidMount() {
this.getViewData();
getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function() {
console.log('打印插件准备就绪,随时可以打印');
window.On_CLodop_Opened = null;
};
if (response) {
this.setState({
loading: false,
});
}
});
}
componentDidMount() {
this.getViewData();
getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function() {
console.log('打印插件准备就绪,随时可以打印');
window.On_CLodop_Opened = null;
};
if (response) {
this.setState({
loading: false,
});
}
});
}
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;
};
printOne = (optionType = 0) => {
const { printIndex, configAll, viewData } = this.state;
let { info } = configAll;
if(isJSON(info)){
info = JSON.parse(info);
}else{
info = defaultConfigInfo;
printOne = (optionType = 0) => {
const { printIndex, configAll, viewData } = this.state;
let { info } = configAll;
if (isJSON(info)) {
info = JSON.parse(info);
} else {
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;
const { wide, high } = configAll;
const { LODOP } = window;
let dom = document.getElementById(`printDomId-${printIndex}`);
if (optionType >= 1) {
dom = document.getElementById('printDomId-0');
}
if (!dom) {
console.error('dom节点没找到');
return false;
}
console.log(wide, high);
const strHTML = dom.innerHTML;
if (!dom) {
console.error('dom节点没找到');
return false;
}
const strHTML = dom.innerHTML;
LODOP.SET_SHOW_MODE('LANGUAGE', 0);
LODOP.SET_LICENSES('成都市知用科技有限公司', '649677881727389907689190562356', '', '');
LODOP.PRINT_INITA(0, 0, `${wide}cm`, `${high}cm`, `printDomId${printIndex}`);
LODOP.SET_PRINT_PAGESIZE(printMeth, info.paperWidth, info.paperHeight, 'CreateCustomPage'); // 打印方向 纸张大小.
LODOP.ADD_PRINT_HTML(0, 0, '100%', '100%', strHTML); // HTML 打印
switch (optionType) {
case 1:
LODOP.PREVIEW(); // 打印预览
break;
case 2:
LODOP.PRINT_DESIGN(); // 打印设计
break;
case 0:
LODOP.PRINT(); // 打印
break;
default:
break;
}
};
printPreview = () => {
// 打印预览
this.printOne(1);
};
// LODOP.PRINT_INITA(0, 0, `${wide}cm`, `${high}cm`, `printDomId${printIndex}`);
LODOP.PRINT_INIT(`${Math.random() * 10000 + 'test'}`);
LODOP.SET_PRINT_MODE('RESELECT_PAGESIZE', true);
LODOP.SET_PRINT_PAGESIZE(printMeth, info.paperWidth, info.paperHeight, 'CreateCustomPage'); // 打印方向 纸张大小.
LODOP.ADD_PRINT_HTML(0, 0, '100%', '100%', strHTML); // HTML 打印
switch (optionType) {
case 1:
LODOP.PREVIEW(); // 打印预览
break;
case 2:
LODOP.PRINT_DESIGN(); // 打印设计
break;
case 0:
LODOP.PRINT(); // 打印
break;
default:
break;
}
};
printSetUp = () => {
this.printOne(2);
};
printPreview = () => {
// 打印预览
this.printOne(1);
};
printedDataSave = (index) => {
const { selectedRows } = this.props;
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;
}
});
};
printSetUp = () => {
this.printOne(2);
};
printOneByOne = () => {
// 按队列打印
const { viewData, printIndex } = this.state;
if (viewData && viewData.length) {
this.printOne();
const { length } = viewData;
let LODOPObj = window.LODOP;
LODOPObj.On_Return_Remain = true;
LODOPObj.On_Return = (TaskId, Value) => {
if (Number(Value) === 1) {
message.info(`正在打印第${printIndex + 1}张, 共${viewData.length}张`);
this.printedDataSave(printIndex);
}
this.setState({ printIndex: this.state.printIndex + 1 }, () => {
if (this.state.printIndex < length) {
this.printOne();
} else {
this.setState({
loading: false,
});
}
});
};
} else {
console.error('暂无任何数据无法打印');
}
};
printedDataSave = (index) => {
const { selectedRows } = this.props;
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;
}
});
};
printByLodop = () => {
if (!window.LODOP || !window.LODOP.PRINT_INIT) {
console.error('打印服务未启动');
ModalInfo('打印服务未启动');
return false;
}
this.setState(
{
showWindowPrint: true,
printIndex: 0,
loading: true,
},
() => {
this.printOneByOne();
},
);
};
printOneByOne = () => {
// 按队列打印
const { viewData, printIndex } = this.state;
if (viewData && viewData.length) {
this.printOne();
const { length } = viewData;
let LODOPObj = window.LODOP;
LODOPObj.On_Return_Remain = true;
LODOPObj.On_Return = (TaskId, Value) => {
if (Number(Value) === 1) {
message.info(`正在打印第${printIndex + 1}张, 共${viewData.length}张`);
this.printedDataSave(printIndex);
}
this.setState({ printIndex: this.state.printIndex + 1 }, () => {
if (this.state.printIndex < length) {
this.printOne();
} else {
this.setState({
loading: false,
});
}
});
};
} else {
console.error('暂无任何数据无法打印');
}
};
render() {
const { configAll, viewData, showWindowPrint, loading } = this.state;
if (!viewData) {
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();
}}
loading={loading}
/>
<ButtonDiy
name={'打印'}
handleClick={() => {
this.printByLodop();
}}
loading={loading}
/>
printByLodop = () => {
if (!window.LODOP || !window.LODOP.PRINT_INIT) {
console.error('打印服务未启动');
ModalInfo('打印服务未启动');
return false;
}
this.setState(
{
showWindowPrint: true,
printIndex: 0,
loading: true,
},
() => {
this.printOneByOne();
},
);
};
<ButtonDiy
name={'返回'}
handleClick={() => {
router.goBack();
}}
/>
render() {
const { configAll, viewData, showWindowPrint, loading, preaparePrint } = this.state;
if (!viewData) {
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' }}>
<ButtonDiy
name={'打印调试模式(实施)'}
handleClick={() => {
this.printSetUp();
}}
loading={loading}
/>
</span>
</Authorized>
<span style={{ float: 'right' }}>
<ButtonDiy
name={'返回'}
handleClick={() => {
router.goBack();
}}
/>
</span>
<Authorized authority={'/jc/setting/PrintPositionSetting'}>
<Authorized authority={'/jc/setting/PrintPositionSetting'}>
<span style={{ float: 'right' }}>
<ButtonDiy
name={'打印预览(实施)'}
handleClick={() => {
this.printPreview();
}}
loading={loading}
/>
name={'打印调试模式(实施)'}
handleClick={() => {
this.printSetUp();
}}
loading={loading}
/>
</span>
</Authorized>
<Authorized authority={'/jc/setting/PrintPositionSetting'}>
</Authorized>
<Authorized authority={'/jc/setting/PrintPositionSetting'}>
<span style={{ float: 'right' }}>
<ButtonDiy
name={'打印模版设置(实施)'}
handleClick={() => {
router.push({
pathname: '/jc/setting/PrintConfig',
state: { code: templateInfo.code },
});
}}
/>
name={'打印模版设置(实施)'}
handleClick={() => {
router.push({
pathname: '/jc/setting/PrintConfig',
state: { code: templateInfo.code },
});
}}
/>
</span>
</Authorized>
</Authorized>
<Authorized authority={'/jc/setting/PrintPositionSetting'}>
<Authorized authority={'/jc/setting/PrintPositionSetting'}>
<span style={{ float: 'right' }}>
<ButtonDiy
name={'字段位置设置(实施)'}
handleClick={() => {
router.push({
pathname: '/xg/xg_hard/AwardSet/printSetting',
state: { code: templateInfo.code },
});
}}
/>
name={'字段位置设置(实施)'}
handleClick={() => {
router.push({
pathname: '/xg/xg_hard/AwardSet/printSetting',
state: { code: templateInfo.code },
});
}}
/>
</span>
</Authorized>
</div>
</Shell>
{viewData && viewData.length ? (
<div
ref={(node) => (this.content = node)}
style={{
display: showWindowPrint || true ? 'block' : 'none',
}}>
{viewData.map((info, index) => {
return (
<div key={`${index}divKey`} id={`printDomId-${index}`} style={{
marginBottom: '10px',
</Authorized>
</div>
</Shell>
{viewData && viewData.length ? (
<div
ref={(node) => (this.content = node)}
style={{
display: showWindowPrint || true ? 'block' : 'none',
}}>
{viewData.map((info, index) => {
return (
<div key={`${index}divKey`} id={`printDomId-${index}`} style={{
marginBottom: '10px',
}}>
<div
style={{
position: 'relative',
// pageBreakAfter: 'always',
...imageStyle,
backgroundColor: '#fff',
}}>
{this.detailDom(info)}
</div>
</div>
);
})}
</div>
) : null}
</Fragment>
);
}
<div
style={{
position: 'relative',
pageBreakAfter: 'avoid',
...imageStyle,
backgroundColor: '#fff',
}}>
{this.detailDom(info)}
</div>
</div>
);
})}
</div>
) : null}
</Fragment>
);
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论