Skip to content

W
WebPublic
提交 1e9edc31 authored 作者: 徐立's avatar 徐立
浏览文件
操作

Merge branch 'master' of http://scjoyedu.eicp.net:9121/front-team/webPublic

上级 a397373d dc1c42d4
显示空白字符变更
内嵌 并排
正在显示 包含 158 行增加 和 177 行删除
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @ 1e9edc31
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import styles from './index.less'; import styles from './index.less';
import { imageStyleAll, A4Height, A4Width } from './ViewPrint/config'; import { imageStyleAll, A4Height, A4Width, styleCount } from './ViewPrint/config';
export default class Index extends Component { export default class Index extends Component {
constructor(props) { constructor(props) {
...@@ -137,7 +136,6 @@ export default class Index extends Component { ...@@ -137,7 +136,6 @@ export default class Index extends Component {
this.handleOnMouseMove(e); this.handleOnMouseMove(e);
}} }}
style={{ style={{
padding: '12px',
...imageStyle, ...imageStyle,
}}> }}>
<img <img
...@@ -166,7 +164,10 @@ export default class Index extends Component { ...@@ -166,7 +164,10 @@ export default class Index extends Component {
top: `${item.y || 20 + index * 40}px`, top: `${item.y || 20 + index * 40}px`,
left: `${item.x || 20}px`, left: `${item.x || 20}px`,
}}> }}>
<span style={{ marginLeft: '10px', marginRight: '10px' }}> <span style={{
...styleCount(item),
fontWeight: 'bold',
}}>
{item.title} {item.title}
</span> </span>
</div> </div>
......
zyd_private/DragAndPrint/ViewPrint/DetailDom.js
浏览文件 @ 1e9edc31
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import JsBarcode from 'jsbarcode'; 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';
/** /**
* -2 条形码 * -2 条形码
...@@ -11,77 +12,44 @@ import moment from 'moment'; ...@@ -11,77 +12,44 @@ import moment from 'moment';
* 2 照片 * 2 照片
* */ * */
export const fieldTypeList = [
{
key: '-2',
name: '条形码',
},
{
key: '-1',
name: '常量',
},
{
key: '0',
name: '文字',
},
{
key: '1',
name: '时间',
},
{
key: '2',
name: '照片',
},
];
export const fontFamilyList = [
{
key: '宋体',
name: '宋体',
},
{
key: '楷体',
name: '楷体',
},
{
key: '黑体',
name: '黑体',
},
{
key: '隶书',
name: '隶书',
},
{
key: '微软雅黑',
name: '微软雅黑',
},
];
const normalTextRender = (text, config) => { const normalTextRender = (text, config) => {
if (!text || text === 'undefined' || typeof text === 'undefined') { if (!text || text === 'undefined' || typeof text === 'undefined') {
return null; return null;
} }
const style = { const width = config.wide ? config.wide + 'px' : 'auto';
fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px const height = config.high ? config.high + 'px' : 'auto';
fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
};
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={style}> return text.map((x, index) => {
{text.map((x, index) => { return <div
return <p
key={x} key={x}
style={{ marginBottom: '0' }}> style={{
{x} {length > index + 1 ? config.mark : ''} ...styleCount(config),
</p>; marginBottom: '0',
})} width,
</span>; textAlign: 'right',
}}>
{x}{length > index + 1 ? config.mark : ''}
</div>;
});
} }
return <span style={style}>
return (
<div style={{
...styleCount(config),
marginBottom: '0',
width,
height,
lineHeight: height,
textAlign: 'right',
letterSpacing: '2px',
}}>
{text} {text}
</span>; </div>
)
;
}; };
const imageRender = (imageUrl) => { const imageRender = (imageUrl) => {
...@@ -141,8 +109,6 @@ export default function DetailDom({ config, data }) { ...@@ -141,8 +109,6 @@ export default function DetailDom({ config, data }) {
style={{ style={{
position: 'absolute', position: 'absolute',
zIndex: 10, zIndex: 10,
paddingLeft: '10px',
paddingRight: '10px',
fontWeight: 'bold', fontWeight: 'bold',
left: x + 'px', left: x + 'px',
top: y + 'px', top: y + 'px',
......
zyd_private/DragAndPrint/ViewPrint/config.js
浏览文件 @ 1e9edc31
...@@ -9,8 +9,8 @@ export const imageStyleAll = { ...@@ -9,8 +9,8 @@ export const imageStyleAll = {
}; };
export function getCLodopFuncJS() { export function getCLodopFuncJS() {
return new Promise((resolve, reject) =>{ return new Promise((resolve, reject) => {
if(window.LODOP){ if (window.LODOP) {
console.log('打印插件加载成功'); console.log('打印插件加载成功');
resolve(true); resolve(true);
return true; return true;
...@@ -19,6 +19,7 @@ export function getCLodopFuncJS() { ...@@ -19,6 +19,7 @@ export function getCLodopFuncJS() {
sc.src = `http://localhost:18000/CLodopFuncs.js`; sc.src = `http://localhost:18000/CLodopFuncs.js`;
document.querySelector('body').appendChild(sc); document.querySelector('body').appendChild(sc);
sc.onload = function() { sc.onload = function() {
// window.LODOP = window.getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
resolve(true); resolve(true);
console.log('打印插件加载成功'); console.log('打印插件加载成功');
}; };
...@@ -35,3 +36,58 @@ export function getCLodopFuncJS() { ...@@ -35,3 +36,58 @@ export function getCLodopFuncJS() {
}); });
} }
export const fieldTypeList = [
{
key: '-2',
name: '条形码',
},
{
key: '-1',
name: '常量',
},
{
key: '0',
name: '文字',
},
{
key: '1',
name: '时间',
},
{
key: '2',
name: '照片',
},
];
export const fontFamilyList = [
{
key: '宋体',
name: '宋体',
},
{
key: '楷体',
name: '楷体',
},
{
key: '黑体',
name: '黑体',
},
{
key: '隶书',
name: '隶书',
},
{
key: '微软雅黑',
name: '微软雅黑',
},
];
export const styleCount = (config) => {
const style = {
fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px
fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
lineHeight: `${config.fieldFontSize || 16}px`,
};
return style;
};
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ 1e9edc31
...@@ -9,6 +9,14 @@ import router from 'umi/router'; ...@@ -9,6 +9,14 @@ 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, getCLodopFuncJS } from './config'; import { imageStyleAll, A4Width, A4Height, getCLodopFuncJS } from './config';
import RenderAuthorized from '@/components/Authorized';
import { getAuthority } from '@/utils/authority';
const Authorized = RenderAuthorized(getAuthority());
const { check } = Authorized;
import { ModalInfo } from '@/baseComponent/Modal';
import replace from '../../../../../config/zydxg/routes/studentAffairs/replace';
export default class ViewPrint extends Component { export default class ViewPrint extends Component {
constructor(props) { constructor(props) {
...@@ -17,33 +25,16 @@ export default class ViewPrint extends Component { ...@@ -17,33 +25,16 @@ export default class ViewPrint extends Component {
configAll: null, configAll: null,
viewData: null, viewData: null,
loading: true, loading: true,
minHeight: 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(
{ {
...@@ -56,7 +47,10 @@ export default class ViewPrint extends Component { ...@@ -56,7 +47,10 @@ export default class ViewPrint extends Component {
console.error(`${x.queryUrl}接口报错或者没有返回数据`); console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false; return false;
} }
// let i = 0;
for (const item of viewData) { for (const item of viewData) {
// item.name = ['张浩', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][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] = '';
...@@ -71,15 +65,6 @@ export default class ViewPrint extends Component { ...@@ -71,15 +65,6 @@ export default class ViewPrint extends Component {
}); });
}; };
beforePrint = () => {
console.log('beforePrint');
};
afterPrint = () => {
console.log('afterPrint');
};
componentDidMount() { componentDidMount() {
this.getViewData(); this.getViewData();
getCLodopFuncJS().then((response) => { getCLodopFuncJS().then((response) => {
...@@ -107,71 +92,65 @@ export default class ViewPrint extends Component { ...@@ -107,71 +92,65 @@ export default class ViewPrint extends Component {
return res; return res;
}; };
onBeforeGetContent = () => { printOne = () => {
const { printIndex, configAll, viewData } = this.state;
const { wide, high } = configAll;
let LODOPObj = window.LODOP;
let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
strHTML = strHTML.replace('break-after: page;', 'page-break-after: always;');
strHTML = `<!DOCTYPE html>${strHTML}`;
LODOPObj.PRINT_INIT(`printDomId_${printIndex}`);
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
LODOPObj.ADD_PRINT_HTM(0, 0, `${wide + 0.1}cm`, `${high + 0.1}cm`, strHTML); // 打印的宽高和 html
LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印
LODOPObj.PREVIEW();
// LODOPObj.PRINT_SETUP();
const { length } = viewData;
LODOPObj.On_Return = (TaskId, Value) => {
console.log(TaskId, Value === 1 || Value === '1' ? '已发出实际打印命令！' : '放弃打印！');
this.setState({ this.setState({
loading: true, printIndex: this.state.printIndex + 1,
}); }, () => {
if (this.state.printIndex < length) {
return new Promise((resolve, reject) => { this.printOne();
const { selectedRows } = this.props;
const { configAll } = this.state;
if (configAll.callUrl && false) {
const ids = selectedRows.map((x) => {
return x.id;
});
// 暂时关闭调用这个接口 不通知后台是否打印了
getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => {
if (x) {
this.setState({ showWindowPrint: true }, () => {
resolve(true);
});
} else { } else {
resolve(true); this.setState({
loading: false,
});
} }
}); });
};
};
printOneByOne = () => { // 按队列打印
const { configAll, viewData, printIndex } = this.state;
if (viewData && viewData.length) {
this.printOne();
} else { } else {
this.setState({ showWindowPrint: true }, () => { console.error('暂无数据无法打印');
resolve(true);
});
} }
});
}; };
printByLodop = () => { printByLodop = () => {
const { configAll } = this.state; if (!window.LODOP || !window.LODOP.PRINT_INIT) {
const { hasPrintBackground, backgroundUrl, wide, high } = configAll; console.error('打印服务未启动');
ModalInfo('打印服务未启动');
this.setState({ return false;
showWindowPrint: true,
}, () => {
let strHTML = this.content.innerHTML;
window.LODOP.PRINT_INIT('');
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
// window.LODOP.ADD_PRINT_TEXT(10, 60, 300, 200, '这是测试的纯文本，下面是超文本:');
window.LODOP.ADD_PRINT_HTM(0, 0, `${wide}cm`, `${high}cm`, strHTML);
window.LODOP.PREVIEW();
window.LODOP.On_Return = function(TaskId, Value) {
console.log(TaskId, Value);
if (Value === '1' || Value === 1) {
alert('已发出实际打印命令！');
}
else {
alert('放弃打印！');
} }
}; this.setState(
}); {
showWindowPrint: true,
printIndex: 0,
},
() => {
this.printOneByOne();
},
);
}; };
render() { render() {
const { const { configAll, viewData, showWindowPrint, loading } = this.state;
loading, if (!viewData) {
configAll,
viewData,
showWindowPrint,
minHeight,
} = this.state;
if (!viewData || !minHeight) {
return null; return null;
} }
if (!configAll.backgroundUrl) { if (!configAll.backgroundUrl) {
...@@ -179,37 +158,18 @@ export default class ViewPrint extends Component { ...@@ -179,37 +158,18 @@ export default class ViewPrint extends Component {
return null; return null;
} }
const { hasPrintBackground, backgroundUrl, wide, high } = configAll; const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
const imageStyle = { let imageStyle = {
height: `${high}cm` || A4Height, height: `${high}cm` || A4Height,
width: `${wide}cm` || A4Width, width: `${wide}cm` || A4Width,
}; };
return ( return (
<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={'打印'} <ButtonDiy name={'打印'}
handleClick={this.printByLodop} handleClick={this.printByLodop}
/>
{/* <ReactToPrint
trigger={() => (
<Button
shape="round"
type="primary"
loading={loading} loading={loading}
style={{ marginRight: '20px' }}> />
打印
</Button>
)}
content={() => this.content}
onBeforeGetContent={this.onBeforeGetContent}
onAfterPrint={() => {
this.setState({
showWindowPrint: false,
loading: false,
});
}}
/>*/}
<ButtonDiy <ButtonDiy
name={'返回'} name={'返回'}
handleClick={() => { handleClick={() => {
...@@ -219,7 +179,7 @@ export default class ViewPrint extends Component { ...@@ -219,7 +179,7 @@ export default class ViewPrint extends Component {
</div> </div>
</Shell> </Shell>
{/** 预览的dom **/} {/** 预览的dom */}
{viewData && viewData.length ? ( {viewData && viewData.length ? (
<div> <div>
{viewData.map((info, index) => { {viewData.map((info, index) => {
...@@ -249,32 +209,30 @@ export default class ViewPrint extends Component { ...@@ -249,32 +209,30 @@ export default class ViewPrint extends Component {
<div <div
ref={(node) => (this.content = node)} ref={(node) => (this.content = node)}
style={{ style={{
display: showWindowPrint ? 'block' : 'none', display: showWindowPrint && false ? 'block' : 'none',
}}> }}>
{viewData.map((info, index) => { {viewData.map((info, index) => {
return ( return (
<div <div
key={`${index}divKey`} key={`${index}divKey`}
id={`printDomId_${index}`}
style={{ style={{
position: 'relative', position: 'relative',
width: 'auto', width: 'auto',
pageBreakAfter: 'always', pageBreakAfter: 'always',
...imageStyle, ...imageStyle,
}}> }}>
{hasPrintBackground && false ? ( {hasPrintBackground || true ? (
<img <img
src={backgroundUrl} src={backgroundUrl}
draggable={false} draggable={false}
alt={'背景图'} alt={'背景图'}
style={{ style={{
height: 'auto',
overflow: 'auto',
zIndex: 1, zIndex: 1,
...imageStyleAll, ...imageStyleAll,
}} }}
/> />
) : null} ) : null}
{this.detailDom(info)} {this.detailDom(info)}
</div> </div>
); );
......
zyd_private/DragAndPrint/index.less
浏览文件 @ 1e9edc31
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
position: absolute; position: absolute;
cursor: move; cursor: move;
z-index: 10; z-index: 10;
color: #000; // color: #000;
user-select: none; user-select: none;
// padding-left: 10px; // padding-left: 10px;
// padding-right: 10px; // padding-right: 10px;
font-size: 14px; // font-size: 14px;
// line-height: 28px; // line-height: 28px;
border: 1px solid gray; border: 1px solid gray;
background-color: #CCC; // background-color: #CCC;
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论