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