签章移动相关功能

app/controller/report_controller.js

@@ -1636,6 +1636,12 @@ async function mergeStampSignature(ctx, status, pageData, singleRoleRel, rpt_ids
                                                 dupPicPaths.push(stampPath);
                                                 // await _chkRawPicSizeOSS(ctx, stampPath);
                                             }
+                                            // 保存在签字信息中的签章信息
+                                            let signatureArea;
+                                            if (role_rel.areaData && role_rel.areaData[signType]) {
+                                                signatureArea = role_rel.areaData[signType];
+                                            }
+
                                             const newStampCell = {
                                                 signature_name: JV.SIGNATURE_NAME_DUMMY,
                                                 control: sCell.control,
@@ -1644,7 +1650,10 @@ async function mergeStampSignature(ctx, status, pageData, singleRoleRel, rpt_ids
                                                 isStamp: true,
                                                 maxRect,
                                                 orgArea: sCell.area,
-                                                area: createStampArea(sCell, _page[JV.NODE_CONTROL_COLLECTION], maxRect),
+                                                area: signatureArea || createStampArea(sCell, _page[JV.NODE_CONTROL_COLLECTION], maxRect), // 有签章信息就直接取，没有的话就走原来的逻辑
+                                                signatureName: role_rel.signature_name, // 节点名称
+                                                signType, // 签章信息
+                                                isSaveSignature: !!signatureArea, // 是否有签章位置信息
                                             };
                                             newStampCells.push(newStampCell);
                                             break;

app/public/css/main.css

@@ -2060,4 +2060,18 @@ animation:shake 1s .2s ease both;}
   position: absolute;
   right: 10px;
   top: 10px;
+}
+.signatureMoving{
+  cursor: move;
+}
+.signatureRptBar{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: transparent;
+  left: 0;
+  right: 0;
+}
+.signatureCavans{
+  background: transparent!important;
 }

app/public/report/js/jpc_output.js

@@ -12,7 +12,7 @@ let JpcCanvasOutput = {
         ctx.clearRect(0,0, canvas.width, canvas.height);
         ctx.restore();
     },
-    drawToCanvas : function(pageObj, canvas, pageIdx) {
+    drawToCanvas : function(pageObj, canvas, pageIdx,hideSignature=false) {
         let me = this;
         let ctx = canvas.getContext("2d");
         let floatReg = /^(-?\d+)(\.\d+)?$/;
@@ -21,6 +21,8 @@ let JpcCanvasOutput = {
             strReplaceReg3 = new RegExp('\n', 'gm'),
             strReplaceReg4 = new RegExp('\r', 'gm')
         ;
+        // 新增签章移动的功能
+        const moveSignatureTool = new MoveSignatureTool(ctx,canvas,pageObj, pageIdx,this);
 
         function private_setupAreaH(area, type, fontAngle, dftFontHeight, outputPoint) {
             let lType = type;
@@ -415,7 +417,7 @@ let JpcCanvasOutput = {
             private_drawCellText(cell, fonts, controls);
             ctx.restore();
         }
-        function private_drawSignatureCell(cell, fonts, styles, controls, mergedBand) {
+        function private_drawSignatureCell(cell, fonts, styles, controls, mergedBand,moveSignatureTool) {
             ctx.save();
             ctx.translate(0.5,0.5);
             let style = styles[cell[JV.PROP_STYLE]];
@@ -426,10 +428,10 @@ let JpcCanvasOutput = {
                 private_drawLine(cell, ctx, style, JV.PROP_BOTTOM, [JV.PROP_RIGHT, JV.PROP_BOTTOM],[JV.PROP_LEFT, JV.PROP_BOTTOM], mergedBand, styles, isNeedMergeBand);
                 private_drawLine(cell, ctx, style, JV.PROP_LEFT, [JV.PROP_LEFT, JV.PROP_BOTTOM],[JV.PROP_LEFT, JV.PROP_TOP], mergedBand, styles, isNeedMergeBand);
             }
-            private_drawSignatureCellText(cell, controls);
+            private_drawSignatureCellText(cell, controls,moveSignatureTool);
             ctx.restore();
         }
-        function private_drawSignatureCellText(cell, controls) {
+        function private_drawSignatureCellText(cell, controls,moveSignatureTool) {
             let control = null;
             if (typeof cell[JV.PROP_CONTROL] === "string") {
                 control = controls[cell[JV.PROP_CONTROL]];
@@ -439,12 +441,12 @@ let JpcCanvasOutput = {
             if (cell.pic) {
                 const img = new Image();
                 img.src = cell.pic;
-                // img.crossOrigin = 'anonymous';
+                img.crossOrigin = 'anonymous';
                 img.onload = function() {
                     if (cell.signature_name.indexOf(JV.SIGNATURE_NAME_DUMMY) >= 0) {
-                        private_drawImage(cell, control, img, (!!cell.isStamp), [1, 1, 1, 1]);
+                        private_drawImage(cell, control, img,moveSignatureTool, (!!cell.isStamp), [1, 1, 1, 1]);
                     } else {
-                        private_drawImage(cell, control, img);
+                        private_drawImage(cell, control, img,moveSignatureTool);
                     }
                     // private_drawImage(cell, control, img);
                 };
@@ -456,12 +458,12 @@ let JpcCanvasOutput = {
                 } else {
                     img.src = cell.path;
                 }
-                // img.crossOrigin = 'anonymous';
+                img.crossOrigin = 'anonymous';
                 img.onload = function() {
                     if (cell.signature_name.indexOf(JV.SIGNATURE_NAME_DUMMY) >= 0) {
-                        private_drawImage(cell, control, img, (!!cell.isStamp), [1, 1, 1, 1]);
+                        private_drawImage(cell, control, img,moveSignatureTool, (!!cell.isStamp), [1, 1, 1, 1]);
                     } else {
-                        private_drawImage(cell, control, img);
+                        private_drawImage(cell, control, img,moveSignatureTool);
                     }
                     // private_drawImage(cell, control, img, (!!cell.isStamp));
                 };
@@ -528,7 +530,12 @@ let JpcCanvasOutput = {
             rst[3] = rst[3] + JpcCanvasOutput.offsetY;
             return rst;
         }
-        function private_drawImage(cell, control, imageData, orgSize = false, offsetArea) {
+        function private_drawImage(cell, control, imageData,moveSignatureTool, orgSize = false, offsetArea) {
+            // 新增签章数据到移动工具中
+            if(moveSignatureTool){
+                const {Left,Right,Top,Bottom}=cell.area;
+                moveSignatureTool.setSignature(imageData, Left* JpcCanvasOutput.scaleFactor, Top* JpcCanvasOutput.scaleFactor, (Right-Left)* JpcCanvasOutput.scaleFactor, (Bottom-Top)* JpcCanvasOutput.scaleFactor ,cell.signature_name,cell.signatureName,cell.signType);
+            }  
             let area = private_getProperSignatureArea(cell, control);
             if (orgSize) {
                 area[0] = cell.area.Left + JpcCanvasOutput.offsetX; // Left
@@ -542,8 +549,12 @@ let JpcCanvasOutput = {
                 area[2] = area[2] - offsetArea[2]; // Right
                 area[3] = area[3] - offsetArea[3]; // Bottom
             }
-            ctx.drawImage(imageData, area[0] * JpcCanvasOutput.scaleFactor, area[1] * JpcCanvasOutput.scaleFactor,
-                (area[2] - area[0]) * JpcCanvasOutput.scaleFactor, (area[3] - area[1]) * JpcCanvasOutput.scaleFactor);
+            // debugger
+            if(!cell.isMoving){
+                ctx.drawImage(imageData, area[0] * JpcCanvasOutput.scaleFactor, area[1] * JpcCanvasOutput.scaleFactor,
+                    (area[2] - area[0]) * JpcCanvasOutput.scaleFactor, (area[3] - area[1]) * JpcCanvasOutput.scaleFactor);
+            }
+            
         }
         function getIniPageMergeBorder(mergedBand) {
             let rst = {};
@@ -576,14 +587,19 @@ let JpcCanvasOutput = {
             }
             //电子签名
             if (page.signature_cells && page.signature_cells.length > 0) {
-                for (let k = 0; k < page.signature_cells.length; k++) {
+              
+               
+               for (let k = 0; k < page.signature_cells.length; k++) {
                     let cell = page.signature_cells[k];
                     if (PAGE_SHOW['isTextSignature'] === 0 || cell.signature_name.indexOf(JV.SIGNATURE_NAME_DUMMY) >= 0) {
                         // 如果是非文本签名或草图，才显示图片(文本签名已经在后台单独处理，在cells数组内增加一个合适的cell)
-                        private_drawSignatureCell(cell, fonts, styles, controls, newPageMergeBand);
+                      if(!hideSignature)  private_drawSignatureCell(cell, fonts, styles, controls, newPageMergeBand,moveSignatureTool);
                     }
-                    // private_drawSignatureCell(cell, fonts, styles, controls, newPageMergeBand);
+                    private_drawSignatureCell(cell, fonts, styles, controls, newPageMergeBand);
                 }
+              
+                moveSignatureTool.domAddEventListener(canvas);
+               
             }
             //水印
             if (PAGE_SHOW['closeWatermark'] === 0) {

app/public/report/js/rpt_move_signature.js

@@ -0,0 +1,191 @@
+
+class MoveSignatureTool {
+    constructor(ctx, canvas, pageObj, pageIdx, jpcOutput) {
+        this.signatureList = [];
+        this.ctx = ctx;
+        // 被选中的签章
+        this.activeImg = undefined;
+        //鼠标位减图形位
+        this.subPos = null;
+        //图形是否被选择
+        this.selected = false;
+        // 上一个被选中的签章属性
+        this.lastPosition = { x: 0, y: 0, width: 0, height: 0 };
+        //canvas的dom对象
+        this.canvas = canvas;
+        this.pageObj = pageObj;
+        this.pageIdx = pageIdx;
+        this.jpcOutput = jpcOutput;
+        this.signatureCanvas = document.getElementById("rptSignatureCanvas");
+    }
+
+    setSignature(obj, x, y, width, height, signature_name, signatureName, signType) {
+        this.signatureList.push({
+            obj,
+            x,
+            y,
+            width,
+            height,
+            crossOrigin: 'Anonymous',
+            signature_name,
+            signatureName,
+            signType
+        })
+    }
+    //获取鼠标在canvas中的位置
+    getMousePos(event, me) {
+        //获取鼠标位置
+        const { clientX, clientY } = event;
+        //获取canvas 边界位置
+        const { top, left } = me.canvas.getBoundingClientRect();
+        //计算鼠标在canvas 中的位置
+        const x = clientX - left;
+        const y = clientY - top;
+        return { x, y };
+    }
+
+    //判断点是否在图形中
+    containPoint(data, mousePos) {
+        //解构图形位置和尺寸
+        const { x, y, width, height } = data;
+        //解构鼠标位置
+        const { x: mx, y: my } = mousePos;
+        //计算鼠标和图形上、下、左、右边界的关系
+        const l = mx > x;
+        const r = mx < x + width;
+        const t = my > y;
+        const b = my < y + height;
+
+        return l && r && t && b;
+    }
+
+    mousedownFn(event, me) {
+        //鼠标位置
+        const mousePos = me.getMousePos(event, me);
+
+        // 找到相应的对象
+        const target = me.signatureList.find((item) => me.containPoint(item, mousePos));
+        if (target) {
+            //先把上一次的数据记录下来
+            const { x, y, width, height } = target;
+            Object.assign(me.lastPosition, { x, y, width, height });
+
+            me.selected = true;
+            me.activeImg = target;
+            //鼠标位减图形位
+            me.subPos = {
+                x: mousePos.x - me.activeImg.x,
+                y: mousePos.y - me.activeImg.y,
+            };
+           $("#rptCanvas").addClass('signatureMoving');
+        //    const orgTargetData = this.pageObj.items[0].signature_cells.find(item => item.signatureName === target.signatureName && item.signType===target.signType);
+            // orgTargetData.isMoving=true;
+            // this.render(me);
+
+            
+            // $("#signatureRptCanvas").attr("width",$("#rptCanvas").width());
+            // $("#signatureRptCanvas").attr("height",$("#rptCanvas").height());
+            // $("#signatureRptBar").show();
+
+        
+
+        } else {
+            me.selected = false;
+            // $("#signatureRptBar").hide();
+        }
+       
+
+    }
+
+    mousemoveFn(event, me) {
+        //鼠标位置
+        const mousePos = me.getMousePos(event, me);
+        /*如果鼠标选择了图形
+         *   让图形跟着鼠标动
+         *   按需渲染
+         * */
+        if (me.selected) {
+            //先把上一次的数据记录下来
+            const { x, y, width, height } = me.activeImg;
+            Object.assign(me.lastPosition, { x, y, width, height });
+            me.activeImg.x = mousePos.x - me.subPos.x;
+            me.activeImg.y = mousePos.y - me.subPos.y;
+            // me.render(me);
+
+            // const moveCanvas = $('#signatureRptCanvas')[0].getContext('2d');
+            // const img = me.activeImg.obj;
+            // const newImg= new Image();
+            // newImg.src='#'
+            // newImg.onload = () => {
+              
+            //     moveCanvas.drawImage(newImg, x, y, width, height);
+            // }
+        }
+
+    }
+    mouseupFn(event, me) {
+        //鼠标抬起，取消拖拽
+        me.selected = false;
+        $("#rptCanvas").removeClass('signatureMoving')
+        me.render(me);
+
+        const params = {};
+        params.id = CURRENT_ROLE_REL_ID;
+        params.tender_id = TENDER_ID;
+        params.stage_id = getStageId();
+        params.rpt_id = zTreeOprObj.currentNode.refId;
+        params.rel_content = ROLE_REL_LIST;
+        const { x, y, width, height, signType, signatureName } = me.activeImg;
+        const target = ROLE_REL_LIST.find(item => item.signature_name === signatureName);
+        if (target) {
+            if (!target.areaData) target.areaData = {};
+            target.areaData[signType] = {
+                Top: y ,
+                Bottom: y + height ,
+                Left: x ,
+                Right: x + width 
+            }
+        }
+        CommonAjax.postXsrfEx("/tender/report_api/updateRoleRelationship", params, 10000, true, getCookie('csrfToken_j'),
+            async function (result) {
+                console.log(result);
+            }
+        )
+
+    }
+
+
+    render(me, isHideSignature = false) {
+        let target;
+        // 因为只有一页，所以就默认取是一个数据
+        for (const signature of me.pageObj.items[0].signature_cells) {
+            //找到要移动的签章
+            if (signature.signature_name&&me.activeImg.signature_name.includes(signature.signature_name)) {
+                target = signature;
+            }
+        }
+        Object.assign(target.area, {
+            Top: me.activeImg.y,
+            Bottom: me.activeImg.y + me.activeImg.height ,
+            Left: me.activeImg.x,
+            Right: me.activeImg.x + me.activeImg.width,
+        })
+        me.jpcOutput.cleanCanvas(me.canvas);
+        me.jpcOutput.drawPageBorder(me.pageObj, me.canvas, getScreenDPI())
+        me.jpcOutput.drawToCanvas(me.pageObj, me.canvas, me.pageIdx, isHideSignature);
+    }
+    domAddEventListener(canvas) {
+        //点击事件
+        $("#rptCanvas").unbind('mousedown').on('mousedown', (e) => { this.mousedownFn(e, this) });
+        //移动
+        $("#rptCanvas").unbind('mousemove').on('mousemove', (e) => {this.mousemoveFn(e, this)});
+        //鼠标抬起
+        $("#rptCanvas").unbind('mouseup').on('mouseup', (e) => { this.mouseupFn(e, this) });
+
+
+        //  //移动
+        //  $("#signatureRptCanvas").unbind('mousemove').on('mousemove', (e) => {this.mousemoveFn(e, this)});
+        //  //鼠标抬起
+        //  $("#signatureRptCanvas").unbind('mouseup').on('mouseup', (e) => { this.mouseupFn(e, this) });
+    }
+}

app/public/report/js/rpt_signature.js

@@ -759,7 +759,8 @@ let rptSignatureHelper = {
                             // { "FileSize": {"value": "2514"}, "Format": {"value": "png"}, "ImageHeight": {"value": "94"}, "ImageWidth": {"value": "94"} }
                             roleRelItem.stampFeature = stampPicFeatures[stmpIdx];
                             // 重新处理cell坐标
-                            _resetStampArea(pageData[JV.NODE_CONTROL_COLLECTION][signatureCell[JV.PROP_CONTROL]], signatureCell, roleRelItem);
+                            // 如果签章信息中存在位置信息，则不执行该方法
+                            if(!signatureCell.isSaveSignature) _resetStampArea(pageData[JV.NODE_CONTROL_COLLECTION][signatureCell[JV.PROP_CONTROL]], signatureCell, roleRelItem);
                         }
                         if (ifPushRoleRel) roleRel.push(roleRelItem);
                     }
@@ -1068,6 +1069,11 @@ function resetStampSignature(pageData, roleRelList) {
                                         if (dupPicPaths.indexOf(stampPath) < 0) {
                                             dupPicPaths.push(stampPath);
                                         }
+                                        // 签字信息中如果有签章位置信息，则直接用位置信息
+                                        let signatureArea;
+                                        if(role_rel.areaData&&role_rel.areaData[signType]){
+                                            signatureArea =  role_rel.areaData[signType]
+                                        }
                                         const newStampCell = {
                                             signature_name: JV.SIGNATURE_NAME_DUMMY,
                                             control: sCell.control,
@@ -1076,7 +1082,10 @@ function resetStampSignature(pageData, roleRelList) {
                                             isStamp: true,
                                             maxRect,
                                             orgArea: sCell.area,
-                                            area: {Left: sCell.area.Left, Right: sCell.area.Right, Top: sCell.area.Top, Bottom: sCell.area.Bottom},
+                                            area: signatureArea || {Left: sCell.area.Left, Right: sCell.area.Right, Top: sCell.area.Top, Bottom: sCell.area.Bottom},
+                                            signatureName: role_rel.signature_name, // 节点名称
+                                            signType, // 签章信息
+                                            isSaveSignature: !!signatureArea, // 是否有签章位置信息
                                         };
                                         newStampCells.push(newStampCell);
                                         break;

app/view/report/index.ejs

@@ -260,10 +260,13 @@
                         </div>
                     </div>
                     <div class="sjs-height-4">
-                        <div class="print-view form-view">
+                        <div class="print-view form-view" style="position: relative;">
                             <div class="pageContainer">
                                 <canvas id="rptCanvas" height="820" width="920"></canvas>
                             </div>
+                            <!-- <div class="pageContainer signatureRptBar"  id='signatureRptBar'  style="display: none;">
+                                <canvas class="signatureCanvas" id="signatureRptCanvas" height="820" width="920"></canvas>
+                            </div> -->
                         </div>
                     </div>
                 </div>
@@ -345,7 +348,7 @@
 <script type="text/javascript" src="/public/report/js/rpt_jspdf.js"></script>
 <script type="text/javascript" src="/public/report/js/rpt_jsexcel.js"></script>
 <script type="text/javascript" src="/public/report/js/rpt_indexDb.js"></script>
-
+<script type="text/javascript" src="/public/report/js/rpt_move_signature.js"></script>
 <!--
 <script type="text/javascript" src="/public/report/js/rpt_custom.js"></script>
 -->