打印功能易用性修改

zyd_private/DragAndPrint/DragSetting.js

@@ -14,7 +14,7 @@ import { imageStyleAll, A4Height, A4Width, styleCount } from './ViewPrint/config
 
 let domIdTemp = '';
 
-const HandleDetailFunction = ({ isDownObj }) => {
+const HandleDetailFunction = ({ isDownObj, updateOnePostion, config }) => {
   for (let item in isDownObj) {
     if (isDownObj[item]) {
       domIdTemp = item;
@@ -23,16 +23,25 @@ const HandleDetailFunction = ({ isDownObj }) => {
   if (!domIdTemp) {
     return null;
   }
+  const id = domIdTemp.replace('dragKey-', '');
+  const itemConfig = config.find((y) => {
+    return y.id + '' === id;
+  });
   const dom = document.getElementById(domIdTemp);
-  const x = dom.style.left;
-  const y = dom.style.top;
-  return <Fragment >
-    <span dangerouslySetInnerHTML={{ __html: dom.innerHTML }} />
+  const x = itemConfig.x;
+  const y = itemConfig.y;
+  return <Fragment>
+    <span dangerouslySetInnerHTML={{ __html: dom.innerHTML }}/>
+    <span>  偏移量(x,y)</span>
     <InputNumber precision={0}
-                 min={0}
+                 onChange={(value) => {
+                   updateOnePostion({ id, x: value, y });
+                 }}
                  value={x}/>
     <InputNumber precision={0}
-                 min={0}
+                 onChange={(value) => {
+                   updateOnePostion({ id, y: value, x });
+                 }}
                  value={y}/>
   </Fragment>;
 };
@@ -113,7 +122,16 @@ export default class Index extends Component {
     }
   };
 
-  handleOnMouseUp = (e, id) => { // 鼠标 按钮 收起
+  updateOnePostion = ({ id, x, y }) => {
+    const { updateConfig } = this.props;
+    updateConfig({
+      id,
+      x,
+      y,
+    });
+  };
+
+  handleOnMouseUp = (e, id) => { // 鼠标 按钮 收起 更新数据到props
     const { drag, isDownObj } = this.state;
     let { mouseX, mouseY, objX, objY } = drag;
     if (isDownObj[id]) {
@@ -127,7 +145,6 @@ export default class Index extends Component {
       mouseX = x;
       mouseY = y;
       const { updateConfig } = this.props;
-
       updateConfig({
         id: id.replace('dragKey-', ''),
         x: styleLeft,
@@ -157,15 +174,19 @@ export default class Index extends Component {
     };
     return (
       <div className={styles.outSideDiv}>
-       {/* <div style={{ marginLeft: '45%', height: '100px' }}>
-          <HandleDetailFunction isDownObj={isDownObj}/>
-        </div>*/}
+        <div style={{ marginLeft: '45%', height: '100px' }}>
+          <HandleDetailFunction isDownObj={isDownObj}
+                                config={config}
+                                updateOnePostion={this.updateOnePostion}
+          />
+        </div>
         <div
           onMouseMove={(e) => {
             this.handleOnMouseMove(e);
           }}
           style={{
             ...imageStyle,
+            position: 'relative',
           }}>
           <img
             src={backgroundUrl}

zyd_private/DragAndPrint/ViewPrint/DetailDom.js

@@ -18,11 +18,28 @@ const normalTextRender = (text, config) => {
   if (!text || text === 'undefined' || typeof text === 'undefined') {
     return null;
   }
-
-  const configTextStyle = config.info && isJSON(config.info) && JSON.parse(config.info).textStyle || {};
+  const configInfoJSON = ( config.info && isJSON(config.info) && JSON.parse(config.info) ) || {} ;
+  const configTextStyle = configInfoJSON.textStyle || {}; // 文本的样式
+  const configTextBreakLength = configInfoJSON.textBreakLength || undefined; // 字数过宽换行
 
   const width = config.wide ? config.wide + 'px' : 'auto';
   const height = config.high ? config.high + 'px' : 'auto';
+  if(configTextBreakLength && text.length > configTextBreakLength) {
+    text = [text.substr(0, configTextBreakLength), text.substr(configTextBreakLength)];
+    return text.map((x, index) => {
+      return <div
+        key={x}
+        style={{
+          ...styleCount(config),
+          marginBottom: '0',
+          width,
+          textAlign: 'right',
+          ...configTextStyle,
+        }}>
+        {x}
+      </div>;
+    });
+  }
   if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符
     text = text.split(config.mark);
     let length = text.length;