347 lines
11 KiB
Plaintext
347 lines
11 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ page import="com.pms.common.utils.*"%>
|
|
<%@ page import="java.util.*" %>
|
|
<%@include file= "/init.jsp" %>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<style>
|
|
<%--
|
|
#signCanvas {
|
|
width: 90%; /* 캔버스의 가로 크기를 화면의 50%로 설정 */
|
|
/*height: 18%;*/ /* 높이를 자동으로 조정하여 가로세로 비율 유지 */
|
|
border: 1px solid black;
|
|
}
|
|
--%>
|
|
</style>
|
|
|
|
<title><%=Constants.SYSTEM_NAME%></title>
|
|
<script>
|
|
|
|
var _clicked = false;
|
|
var doSign = !fnc_isEmpty('${param.doSign}') || '${param.targetType}' == 'INVOICE';
|
|
|
|
$(function(){
|
|
$("#btnClose").click(function(){
|
|
self.close(0);
|
|
});
|
|
|
|
// 삭제 버튼 클릭 이벤트
|
|
$('#clearSignButton').on('click', function(event) {
|
|
// 기본 동작 방지
|
|
event.preventDefault();
|
|
// 캔버스를 클리어합니다.
|
|
fnc_clearCanvas('signCanvas');
|
|
});
|
|
|
|
/*
|
|
if (data.length > 0 && data[0].SIGN) {
|
|
drawImageOnCanvas(data[0].SIGN);
|
|
}
|
|
*/
|
|
|
|
$("#btnRegist").click(function(){
|
|
if(fn_check()){
|
|
var resultText = $("#result option:checked").text();
|
|
|
|
//240328 버튼 중복 클릭 방지
|
|
if(_clicked){
|
|
return;
|
|
}
|
|
|
|
if(doSign && !signObj.isSigned()){
|
|
alert("사인을 해주세요.");
|
|
return;
|
|
}
|
|
|
|
if(confirm(resultText+"처리 하시겠습니까?")){
|
|
|
|
_clicked = true;
|
|
|
|
var canvas = document.getElementById("signCanvas");
|
|
var sign = canvas.toDataURL("image/png");
|
|
var canvasWidth = canvas.width;
|
|
var canvasHeight = canvas.height;
|
|
//alert(sign);
|
|
//console.log("SIGN:", sign);
|
|
$("#SIGN").val(sign);
|
|
$("#SIGN_WIDTH").val(canvasWidth);
|
|
$("#SIGN_HEIGHT").val(canvasHeight);
|
|
|
|
$.ajax({
|
|
url: "/approval/approvalResultProc.do",
|
|
method: 'post',
|
|
data: $("#form1").serialize(),
|
|
dataType: 'json',
|
|
beforeSend:function(){
|
|
_startLoading("Loading");
|
|
},
|
|
complete:function(){
|
|
_endLoading();
|
|
},
|
|
success: function(result) {
|
|
alert(result.msg);
|
|
/*
|
|
var refreshUrl = "/approval/approvalDetail.do?approvalObjId="+$("#approvalObjId").val()+"&routeObjId="+$("#routeObjId").val();
|
|
//Swal.fire("refreshUrl : "+refreshUrl);
|
|
opener.document.location.href = refreshUrl;
|
|
*/
|
|
opener.openerReload();
|
|
//top.opener.window.location.reload();
|
|
self.close(0);
|
|
},
|
|
error: function(jqxhr, status, error){
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
$("#resultMessage").keyup(function(e){
|
|
var textLength = $(this).val().length;
|
|
$("#textLength").text(textLength);
|
|
});
|
|
|
|
if(doSign){
|
|
$("#trSign").show();
|
|
$("#clearSignButton").show();
|
|
window.resizeTo(570,500);
|
|
}else{
|
|
$("#trSign").hide();
|
|
$("#clearSignButton").hide();
|
|
}
|
|
|
|
// Resize the canvas to fit the window
|
|
//window.addEventListener('resize', resizeCanvas);
|
|
//resizeCanvas("signCanvas");
|
|
|
|
});
|
|
|
|
|
|
|
|
//var _signed = false;
|
|
const signObj = {
|
|
id: ""
|
|
,canvas: null
|
|
,ctx: null
|
|
,signed: false
|
|
,setId: function(id) {
|
|
this.id = id;
|
|
this.canvas = document.getElementById(id);
|
|
this.ctx = canvas.getContext("2d");
|
|
}
|
|
,setSigned: function(signed) {
|
|
this.signed = signed;
|
|
}
|
|
,isSigned : function() {
|
|
return this.signed;
|
|
}
|
|
}
|
|
|
|
function resizeCanvas(id) {
|
|
id = "signCanvas";
|
|
var canvas = document.getElementById(id);
|
|
var ctx = canvas.getContext("2d");
|
|
if(canvas && window && window.innerWidth){
|
|
//alert(window.innerWidth + ":" + window.innerHeight);
|
|
canvas.width = window.innerWidth * 0.8;
|
|
canvas.height = window.innerHeight * 0.8;
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
}
|
|
|
|
//var _isDrawing = false;
|
|
document.addEventListener("DOMContentLoaded", function(id) {
|
|
var canvas = document.getElementById("signCanvas");
|
|
var ctx = canvas.getContext("2d");
|
|
var isDrawing = false;
|
|
var lastX = 0;
|
|
var lastY = 0;
|
|
|
|
// 터치 이벤트 처리
|
|
canvas.addEventListener("touchstart", function(e) {
|
|
e.preventDefault();
|
|
isDrawing = true;
|
|
//_signed = true;
|
|
signObj.signed = true;
|
|
var touch = e.touches[0];
|
|
[lastX, lastY] = [touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop];
|
|
});
|
|
canvas.addEventListener("touchmove", function(e) {
|
|
e.preventDefault();
|
|
if (!isDrawing) return;
|
|
var touch = e.touches[0];
|
|
var x = touch.clientX - canvas.offsetLeft;
|
|
var y = touch.clientY - canvas.offsetTop;
|
|
ctx.beginPath();
|
|
ctx.moveTo(lastX, lastY);
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
[lastX, lastY] = [x, y];
|
|
});
|
|
canvas.addEventListener("touchend", function() {
|
|
isDrawing = false;
|
|
});
|
|
canvas.addEventListener("touchcancel", function() {
|
|
isDrawing = false;
|
|
});
|
|
// 마우스 이벤트 처리
|
|
canvas.addEventListener("mousedown", function(e) {
|
|
isDrawing = true;
|
|
//_signed = true;
|
|
signObj.signed = true;
|
|
ctx.beginPath();
|
|
[lastX, lastY] = [e.offsetX, e.offsetY];
|
|
});
|
|
canvas.addEventListener("mousemove", function(e) {
|
|
if (isDrawing) {
|
|
var x = e.offsetX;
|
|
var y = e.offsetY;
|
|
ctx.beginPath();
|
|
ctx.moveTo(lastX, lastY);
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
[lastX, lastY] = [x, y];
|
|
}
|
|
});
|
|
canvas.addEventListener("mouseup", function() {
|
|
isDrawing = false;
|
|
ctx.closePath();
|
|
});
|
|
canvas.addEventListener("mouseout", function() {
|
|
isDrawing = false;
|
|
ctx.closePath();
|
|
});
|
|
});
|
|
|
|
|
|
//Function to resize and draw the large canvas content onto the small canvas
|
|
function fnc_resizeAndDraw(id, imageData, originalWidth, originalHeight) {
|
|
if(originalWidth && originalWidth){
|
|
var canvas = document.getElementById(id);
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
smallCtx.clearRect(0, 0, smallCanvas.width, smallCanvas.height);
|
|
smallCtx.drawImage(img, 0, 0, originalWidth, originalHeight, 0, 0, smallCanvas.width, smallCanvas.height);
|
|
};
|
|
img.src = imageData;
|
|
}else{
|
|
fnc_drawImageOnCanvas(id, imageData);
|
|
}
|
|
}
|
|
//캔버스에 이미지를 그리는 함수
|
|
function fnc_drawImageOnCanvas(id, imageData) {
|
|
// 이미지 객체 생성
|
|
var image = new Image();
|
|
// 이미지 데이터 할당
|
|
image.src = imageData;
|
|
|
|
// 이미지가 로드된 후에 캔버스에 그리기
|
|
image.onload = function() {
|
|
var canvas = document.getElementById(id);
|
|
var ctx = canvas.getContext('2d');
|
|
// 이미지를 캔버스에 그립니다.
|
|
ctx.drawImage(image, 0, 0);
|
|
};
|
|
}
|
|
// 캔버스 초기화 함수
|
|
function fnc_clearCanvas(id) {
|
|
var canvas = document.getElementById(id);
|
|
var ctx = canvas.getContext('2d');
|
|
// 캔버스 영역을 클리어합니다.
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
function fnc_startup(id) {
|
|
const el = document.getElementById(id);
|
|
el.addEventListener("touchstart", handleStart);
|
|
el.addEventListener("touchend", handleEnd);
|
|
el.addEventListener("touchcancel", handleCancel);
|
|
el.addEventListener("touchmove", handleMove);
|
|
}
|
|
|
|
|
|
function fn_check(){
|
|
var resultMessage = $("#resultMessage").val();
|
|
if(resultMessage.length > 200){
|
|
Swal.fire("사유는 200자까지 입력 가능합니다.\n[입력글자 : "+resultMessage.length+"자]");
|
|
$("#resultMessage").focus();
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="backcolor">
|
|
<form name="form1" id="form1" action="" method="post">
|
|
<!-- //parameter -->
|
|
<input type="hidden" name="approvalObjId" id="approvalObjId" value="${param.approvalObjId}" />
|
|
<input type="hidden" name="routeObjId" id="routeObjId" value="${param.routeObjId}" />
|
|
<input type="hidden" name="approvalType" id="approvalType" value="${param.approvalType}" />
|
|
<input type="hidden" name="targetType" id="targetType" value="${param.targetType}" />
|
|
<input type="hidden" name="inboxtaskObjId" id="inboxtaskObjId" value="${param.inboxtaskObjId}" />
|
|
<input type="hidden" name="seq" id="seq" value="${param.seq}" />
|
|
<input type="hidden" name="targetUserId" id="targetUserId" value="${param.targetUserId}" />
|
|
<input type="hidden" name="approvalType" id="approvalType" value="${param.approvalType}" />
|
|
<input type="hidden" name="SIGN" id="SIGN">
|
|
<input type="hidden" name="SIGN_WIDTH" id="SIGN_WIDTH">
|
|
<input type="hidden" name="SIGN_HEIGHT" id="SIGN_HEIGHT">
|
|
|
|
<section>
|
|
<!-- 팝업창 크기 500x500 -->
|
|
<div id="businessPopupFormWrap">
|
|
<div class="form_popup_title"> 결재 승인/반려 처리</div>
|
|
<table id="approvalDetailPopupTable">
|
|
<colgroup>
|
|
<col width="15%;">
|
|
<col width="*">
|
|
</colgroup>
|
|
<tr>
|
|
<td><label for="">결과</label></td>
|
|
<td>
|
|
<select name="result" id="result">
|
|
<option value="Y">승인</option>
|
|
<option value="N">반려</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="">사유</label></td>
|
|
<td>
|
|
<textarea name="resultMessage" id="resultMessage" rows="5" cols=""></textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="align_r"><span>[200/<span id="textLength">0</span>]자</span></td>
|
|
</tr>
|
|
<tr id="trSign" style="display:none">
|
|
<td><label for="">사인</label></td>
|
|
<td>
|
|
<div class="canvas-container" style="width:%">
|
|
<canvas id="signCanvas" width="" height="" style="border:1px solid black;z-index: 4;position: relative;"></canvas>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="btn_wrap">
|
|
<div class="plm_btn_wrap_center">
|
|
<input type="button" value="사인 Clear" id="clearSignButton" class="plm_btns" style="margin-right:;position: ;top:;display:none">
|
|
<input type="button" value="저장" class="plm_btns" id="btnRegist">
|
|
<input type="button" value="닫기" class="plm_btns" id="btnClose">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="btnCenterWrap">
|
|
<center class="center_btns_wrap" >
|
|
<input type="button" value="저장" class="pdm_btns" id="btnRegist">
|
|
<input type="button" value="닫기" class="pdm_btns" id="btnClose">
|
|
</center>
|
|
</div> -->
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</body>
|
|
</html> |