18292…

zyd_private/DragAndPrint/index.js

@@ -7,12 +7,10 @@
  * 后续可以会应用于其他学校的其他 打印.
  * */
 import React, { Component } from 'react';
-import { getInfo } from '@/highOrderComponent/Service';
 import PropTypes from 'prop-types';
 import DragSetting from './DragSetting';
 import Shell from '@/baseComponent/Shell';
 import ButtonDiy from '@/baseComponent/ButtonDiy';
-import router from 'umi/router';
 import { message } from 'antd';
 import { saveConfig, queryConfig } from './services';
 

zyd_public/components/DraggableSetting/RefactoringOld.js

+/**
+ * 钟是志
+ * 2021年5月9日 10:50:02
+ * 重构拖拽字段组件old.js. 适用于宝鸡录取通知书打印
+ * */
+import React, { Fragment, Component, useRef, useState, useEffect } from 'react';
+import styles from './index.less';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+import Shell from '@/baseComponent/Shell';
+import { ModalConfirm } from '@/baseComponent/Modal';
+
+let time1 = new Date().getTime();
+
+export default function NewDraggableSetting(props) {
+  const {
+    bgImage, // 背景图url 字符串
+    formatSettingObject, // 字段配置信息 数组
+    saveConfig, // 保存 方法
+    initConfig, // 初始化配置项 方法
+    updateFormatSettingObject, // 更新格式化 方法
+    id, //  'printDom' 字符串
+  } = props;
+  const [drag, setDrag] = useState({
+    objX: '0px',
+    objY: '0px',
+    mouseY: 0,
+    mouseX: 0,
+  });
+  const [isDownObj, setIsDownObj] = useState({});
+
+  const configInfo = Object.keys(formatSettingObject);
+
+  function initInfoThis() {
+    ModalConfirm('您确定初始化打印录取通知书格式吗?', {
+      onOk: () => {
+        initConfig();
+      },
+    });
+  }
+
+  function handleOnMouseDown(e){ // 鼠标按钮 按下
+    const id = e.target.id;
+    const div = document.getElementById(id);
+    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;
+    setDrag(newDrag);
+    setIsDownObj(isDownObj);
+  }
+
+  function handleOnMouseUp(e){ // 鼠标 按钮 收起 更新数据到props
+    const id = e.target.id;
+    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;
+      updateFormatSettingObject(id, styleLeft, styleTop); // 更新 偏移量 left  top 和 元素
+      setDrag({
+        mouseX,
+        mouseY,
+        objX,
+        objY,
+      })
+      setIsDownObj({});
+    }
+  }
+
+  function handleOnMouseMove(e){ // 鼠标 移动
+    if (new Date().getTime() - time1 < 17) { // 每17毫秒进行一次移动的计算.
+      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');
+      // console.log('styleLeft', styleLeft, 'dropW', dropZone.width);
+      // console.log('styleTop', styleTop, dropZone.height);
+      if ( // 阻止拖拽到图片外部
+        styleLeft > dropZone.width - 50
+        || (styleLeft < 15)
+        || (styleTop > dropZone.height - 50)
+        || styleTop < 15
+      ) {
+        console.error('拖拽到了图片区域外部,不能进行拖拽');
+        return false;
+      }
+      div.style.left = styleLeft + 'px';
+      div.style.top = styleTop + 'px';
+    }
+  }
+  return (<Fragment>
+    <Shell styleShell={{
+      marginTop: '0',
+      marginBottom: '20px',
+    }}>
+      <div style={{
+        height: '54px',
+        padding: '12px 0 12px 12px',
+      }}>
+        <ButtonDiy name="保存"
+                   className="primary"
+                   handleClick={saveConfig}
+        />
+        <ButtonDiy name={'初始化格式'}
+                   handleClick={initInfoThis}
+        />
+      </div>
+    </Shell>
+    <div className={styles.outSideDiv}
+         onMouseMove={handleOnMouseMove}
+    >
+      <div>
+        <img src={bgImage}
+             id={'dropZone'}
+             draggable={false}
+             className={styles.bgimage}
+             alt={'背景图'}
+        />
+        {configInfo.map((x) => {
+          return (
+            <div
+                 className={styles.inSideItem}
+                 key={x}
+                 onMouseDown={handleOnMouseDown}
+                 onMouseUp={handleOnMouseUp}
+                 id={x}
+                 style={formatSettingObject[x].style}
+            >
+              {formatSettingObject[x].title}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  </Fragment>);
+}

zyd_public/components/DraggableSetting/index.js

@@ -3,6 +3,7 @@
  * 一站式请勿使用此组件
  * 2020年5月9日 拖拽组件
  * 钟是志
+ * 黔南的 录取通知书打印 位置设置
  * */
 
 import React, { Fragment, Component } from 'react';

zyd_public/components/DraggableSetting/index.less

@@ -18,5 +18,6 @@
     line-height: 28px;
     border: 1px solid gray;
     background-color: #CCC;
+    user-select: none;
   }
 }

zyd_public/components/DraggableSetting/old.js

@@ -10,8 +10,14 @@ import styles from './index.less';
 import ButtonDiy from '@/baseComponent/ButtonDiy';
 import Shell from '@/baseComponent/Shell';
 import { ModalConfirm } from '@/baseComponent/Modal';
+import RefactorOld from './RefactoringOld';
+export default RefactorOld;
 
-export default class FormatSetting extends Component {
+
+
+
+
+class FormatSetting extends Component {
 
   dragEventList = () => {
     const { formatSettingObject, updateFormatSettingObject } = this.props;
@@ -44,7 +50,7 @@ export default class FormatSetting extends Component {
           return false;
         }
         const top = event.offsetY;
-        updateFormatSettingObject(draggedRef.id, left, top);
+        updateFormatSettingObject(draggedRef.id, left, top); // 更新 偏移量 left  top 和 元素
         draggedRef.style.left = left; // `${left}px`;
         draggedRef.style.top = top; // `${top}px`;
       }
@@ -59,7 +65,7 @@ export default class FormatSetting extends Component {
 
   initConfig = () => {
     ModalConfirm('您确定初始化打印录取通知书格式吗?',{
-      onOk: ()=>{
+      onOk: () => {
         this.props.initConfig();
       },
     });
@@ -91,7 +97,7 @@ export default class FormatSetting extends Component {
           />
           {configInfo.map((x) => {
             return (
-              <div draggable={true}
+              <div draggable={true} // 支持拖拽的dom
                    className={styles.inSideItem}
                    key={x}
                    id={x}
@@ -101,13 +107,10 @@ export default class FormatSetting extends Component {
               </div>
             );
           })}
-
         </div>
-
-
       </div>
     </Fragment>
-      ;
+
   }
 }
 /***