Skip to content

W
WebPublic
提交 f75ef826 authored 作者: wanyielin's avatar wanyielin
浏览文件
操作

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

上级 78ae0673 cae64dbb
隐藏空白字符变更
内嵌 并排
正在显示 包含 181 行增加 和 149 行删除
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @ f75ef826
...@@ -7,174 +7,205 @@ ...@@ -7,174 +7,205 @@
* 在up 的时候 更新元素dom的新位置到props * 在up 的时候 更新元素dom的新位置到props
* */ * */
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import styles from './index.less'; import styles from './index.less';
import { InputNumber } from 'antd';
import { imageStyleAll, A4Height, A4Width, styleCount } from './ViewPrint/config'; import { imageStyleAll, A4Height, A4Width, styleCount } from './ViewPrint/config';
let domIdTemp = '';
const HandleDetailFunction = ({ isDownObj }) => {
for (let item in isDownObj) {
if (isDownObj[item]) {
domIdTemp = item;
}
}
if (!domIdTemp) {
return null;
}
const dom = document.getElementById(domIdTemp);
const x = dom.style.left;
const y = dom.style.top;
return <Fragment >
<span dangerouslySetInnerHTML={{ __html: dom.innerHTML }} />
<InputNumber precision={0}
min={0}
value={x}/>
<InputNumber precision={0}
min={0}
value={y}/>
</Fragment>;
};
export default class Index extends Component { export default class Index extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.time1 = new Date().getTime(); this.time1 = new Date().getTime();
this.state = { this.state = {
isDownObj: {}, isDownObj: {},
drag: { drag: {
objX: '0px', objX: '0px',
objY: '0px', objY: '0px',
mouseY: 0, mouseY: 0,
mouseX: 0, mouseX: 0,
}, },
}; };
} }
handleOnMouseDown = (e, id) => { handleOnMouseDown = (e, id) => { // 鼠标按钮 按下
const div = document.getElementById(id); const div = document.getElementById(id);
const { isDownObj } = this.state; const { isDownObj } = this.state;
const newDrag = { const newDrag = {
objX: div.style.left, objX: div.style.left,
objY: div.style.top, objY: div.style.top,
mouseX: e.clientX, mouseX: e.clientX,
mouseY: e.clientY, mouseY: e.clientY,
}; };
for (let item in isDownObj) { for (let item in isDownObj) {
isDownObj[item] = false; isDownObj[item] = false;
} }
isDownObj[id] = true; isDownObj[id] = true;
this.setState({ this.setState({
drag: newDrag, drag: newDrag,
isDownObj, isDownObj,
}); });
}; };
handleOnMouseMove = (e) => { handleOnMouseMove = (e) => { // 鼠标 移动
const { drag, isDownObj } = this.state; const { drag, isDownObj } = this.state;
if (new Date().getTime() - this.time1 < 17) { if (new Date().getTime() - this.time1 < 17) {
this.time1 = new Date().getTime(); this.time1 = new Date().getTime();
return false; return false;
} }
let id = ''; let id = '';
for (let item in isDownObj) { for (let item in isDownObj) {
if (isDownObj[item]) { if (isDownObj[item]) {
id = item; id = item;
} }
} }
if (!id) { if (!id) {
return false; return false;
} }
let { mouseX, mouseY, objX, objY } = drag; let { mouseX, mouseY, objX, objY } = drag;
const div = document.getElementById(id); const div = document.getElementById(id);
let x = e.clientX; let x = e.clientX;
let y = e.clientY; let y = e.clientY;
if (isDownObj && isDownObj[id]) { if (isDownObj && isDownObj[id]) {
const styleLeft = const styleLeft =
parseInt(objX, 10) + parseInt(x, 10) - parseInt(mouseX, 10); // 计算偏移量 parseInt(objX, 10) + parseInt(x, 10) - parseInt(mouseX, 10); // 计算偏移量
const styleTop = const styleTop =
parseInt(objY, 10) + parseInt(y, 10) - parseInt(mouseY, 10); // 计算偏移量 parseInt(objY, 10) + parseInt(y, 10) - parseInt(mouseY, 10); // 计算偏移量
const dropZone = document.getElementById('dropZone'); const dropZone = document.getElementById('dropZone');
if ( // 阻止拖拽到图片外部 if ( // 阻止拖拽到图片外部
styleLeft > dropZone.width - 15 styleLeft > dropZone.width - 15
|| (styleLeft < 15) || (styleLeft < 15)
|| (styleTop > dropZone.height - 15) || (styleTop > dropZone.height - 15)
|| styleTop < 15 || styleTop < 15
) { ) {
console.error('拖拽到了图片区域外部,不能进行拖拽'); console.error('拖拽到了图片区域外部,不能进行拖拽');
return false; return false;
} }
div.style.left = styleLeft + 'px'; div.style.left = styleLeft + 'px';
div.style.top = styleTop + 'px'; div.style.top = styleTop + 'px';
} }
}; };
handleOnMouseUp = (e, id) => {
const { drag, isDownObj } = this.state;
let { mouseX, mouseY, objX, objY } = drag;
if (isDownObj[id]) {
let x = e.clientX;
let y = e.clientY;
let div = document.getElementById(id);
const styleLeft = parseInt(x, 10) - parseInt(mouseX, 10) + parseInt(objX, 10);
const styleTop = parseInt(y, 10) - parseInt(mouseY, 10) + parseInt(objY, 10);
div.style.left = `${styleLeft}px`;
div.style.top = `${styleTop}px`;
mouseX = x;
mouseY = y;
const { updateConfig } = this.props;
updateConfig({ handleOnMouseUp = (e, id) => { // 鼠标 按钮 收起
id: id.replace('dragKey-', ''), const { drag, isDownObj } = this.state;
x: styleLeft, let { mouseX, mouseY, objX, objY } = drag;
y: styleTop, if (isDownObj[id]) {
}); let x = e.clientX;
this.setState({ let y = e.clientY;
drag: { let div = document.getElementById(id);
mouseX, const styleLeft = parseInt(x, 10) - parseInt(mouseX, 10) + parseInt(objX, 10);
mouseY, const styleTop = parseInt(y, 10) - parseInt(mouseY, 10) + parseInt(objY, 10);
objX, div.style.left = `${styleLeft}px`;
objY, div.style.top = `${styleTop}px`;
}, mouseX = x;
isDownObj: {}, mouseY = y;
}); const { updateConfig } = this.props;
}
};
render() { updateConfig({
const { id: id.replace('dragKey-', ''),
backgroundUrl, x: styleLeft,
configAll: { config, wide, high, }, y: styleTop,
} = this.props; });
this.setState({
drag: {
mouseX,
mouseY,
objX,
objY,
},
isDownObj: {},
});
}
};
render() {
const {
backgroundUrl,
configAll: { config, wide, high },
} = this.props;
const { isDownObj } = this.state;
const imageStyle = { const imageStyle = {
height: `${high}cm` || A4Height, height: `${high}cm` || A4Height,
width: `${wide}cm` || A4Width, width: `${wide}cm` || A4Width,
}; };
console.log(imageStyle); return (
return ( <div className={styles.outSideDiv}>
<div className={styles.outSideDiv}> {/* <div style={{ marginLeft: '45%', height: '100px' }}>
<div <HandleDetailFunction isDownObj={isDownObj}/>
onMouseMove={(e) => { </div>*/}
this.handleOnMouseMove(e); <div
}} onMouseMove={(e) => {
style={{ this.handleOnMouseMove(e);
}}
style={{
...imageStyle, ...imageStyle,
}}> }}>
<img <img
src={backgroundUrl} src={backgroundUrl}
id={'dropZone'} id={'dropZone'}
draggable={false} draggable={false}
className={styles.bgimage} className={styles.bgimage}
style={imageStyleAll} style={imageStyleAll}
alt={'背景图'} alt={'背景图'}
/> />
{config.map((item, index) => { {config.map((item, index) => {
const domId = `dragKey-${item.id}`; const domId = `dragKey-${item.id}`;
return ( return (
<div <div
draggable={false} draggable={false}
className={styles.inSideItem} className={styles.inSideItem}
key={item.id} key={item.id}
onMouseDown={(e) => { onMouseDown={(e) => {
this.handleOnMouseDown(e, domId); this.handleOnMouseDown(e, domId);
}} console.log(domId);
onMouseUp={(e) => { }}
this.handleOnMouseUp(e, domId); onMouseUp={(e) => {
}} this.handleOnMouseUp(e, domId);
id={domId} }}
style={{ id={domId}
top: `${item.y || 20 + index * 40}px`,
left: `${item.x || 20}px`, style={{
}}> top: `${item.y || 20 + index * 40}px`,
left: `${item.x || 20}px`,
}}>
<span style={{ <span style={{
...styleCount(item), ...styleCount(item),
fontWeight: 'bold', fontWeight: 'bold',
}}> }}>
{item.title} {item.title}
</span> </span>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
); );
} }
} }
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ f75ef826
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { queryConfig } from '../services'; import { queryConfig } from '../services';
import { getInfo } from '@/highOrderComponent/Service'; import { getInfo } from '@/highOrderComponent/Service';
import { message, Button } from 'antd'; import { message } from 'antd';
import Shell from '@/baseComponent/Shell'; import Shell from '@/baseComponent/Shell';
import ButtonDiy from '@/baseComponent/ButtonDiy'; import ButtonDiy from '@/baseComponent/ButtonDiy';
import router from 'umi/router'; import router from 'umi/router';
...@@ -101,9 +101,7 @@ export default class ViewPrint extends Component { ...@@ -101,9 +101,7 @@ export default class ViewPrint extends Component {
} else { } else {
info = defaultConfigInfo; info = defaultConfigInfo;
} }
console.log(info);
const { printMeth } = configAll; const { printMeth } = configAll;
const { wide, high } = configAll;
const { LODOP } = window; const { LODOP } = window;
let dom = document.getElementById(`printDomId-${printIndex}`); let dom = document.getElementById(`printDomId-${printIndex}`);
if (optionType >= 1) { if (optionType >= 1) {
...@@ -114,8 +112,11 @@ export default class ViewPrint extends Component { ...@@ -114,8 +112,11 @@ export default class ViewPrint extends Component {
return false; return false;
} }
const strHTML = dom.innerHTML; const strHTML = dom.innerHTML;
LODOP.SET_SHOW_MODE('LANGUAGE', 0); if(!LODOP.PageDataEx || !LODOP.PageDataEx.companyname || !LODOP.PageDataEx.license){
LODOP.SET_LICENSES('成都市知用科技有限公司', '649677881727389907689190562356', '', ''); console.log(LODOP.PageDataEx, 'license未注入成功,正在重新注册');
LODOP.SET_SHOW_MODE('LANGUAGE', 0);
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.PRINT_INIT(`${Math.random() * 10000 + 'test'}`); LODOP.PRINT_INIT(`${Math.random() * 10000 + 'test'}`);
LODOP.SET_PRINT_MODE('RESELECT_PAGESIZE', true); LODOP.SET_PRINT_MODE('RESELECT_PAGESIZE', true);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论