<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电åç¾å生æˆå›¾ç‰‡</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="./js/jSignature.js"></script>
<script src="../../js/vue/vue.js"></script>
<script src="../../js/vue/axios/dist/axios.min.js"></script>
<script src="../../js/vue/element-ui/lib/index.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/myelement.js"></script>
<script src="../../js/vue/page.js"></script>
<link href="../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<link href="../../css/myelement.css" rel="stylesheet">
<link href="../../css/iconfont.css" rel="stylesheet">
<link href="../../css/page.css" rel="stylesheet">
<link href="//at.alicdn.com/t/font_2374495_mkoo966o0uo.css" rel="stylesheet">
</head>
<body>
<div id="vbody">
<div id="page_root">
<div ref="popup_body" style="width: 100vw; height: 100vh;">
<div class="el-dialog__header">
<div class="dialog-title">
<span>{{title}}</span>
<div style="float: right;">
<el-button-group style="margin-left: 3px;">
<el-button type="primary" @click="saveImg">ä¿ å˜</el-button>
<el-button type="default" @click="saveAfter">å– æ¶ˆ</el-button>
</el-button-group>
</div>
</div>
</div>
<div class="versionNo" >
<div id="writers" >
<div id='signature' style='background-color: #d2d2e8;'></div>
<!-- <div>
<el-image
v-if="isSignature"
style="height: 300px; width: 100%;"
:src="file_img"
fit="contain">
</el-image>
</div> -->
<div style="width: 100%; padding: 5px;" align="center">
<el-button @click="rewrite">é‡ å†™</el-button>
<el-button @click="confirm">预 览</el-button>
</div>
<div id="someelement" ><img :src="file_img" id="images"></div>
</div>
</div>
</div>
</div>
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
<div class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
</div>
</div>
<script>
new Vue({
el: "#vbody",
data: {
title: localStorage.getItem("emp_name") + "ç¾å",
popupParames: {},
conversions: null,
isSignature:false,
file_img:"",
},
created() {
this.popupParames = clone(Root.popupParames);
this.initData();
},
mounted() {
this.$nextTick(() => { // 以æœåŠ¡çš„æ–¹å¼è°ƒç”¨çš„ Loading 需è¦å¼‚æ¥å…³é—
document.getElementById('page_root').style.display = "block";
document.getElementById('page_loading').style.display = "none";
this.initJSignature();
//é‡æ–°è®¾ç½®å¼¹çª—宽高
this.$nextTick(function() {
let w_ = this.$refs.popup_body.offsetWidth + "px";
let h_ = this.$refs.popup_body.offsetHeight + "px";
Root.setPopupWH(w_, h_);
})
});
},
methods: {
closeDialog() {
if (this.popupParames.totab){
Root.tab.removeItem(Root.tab.selected);
Root.tab.open(me.popupParames.parentOption, false);
}
else {
Root.hidePopup();
}
},
initData() {
var param_ = {
isClientMode: false,
dataname:"user",
filter:"id = '" + localStorage.getItem("id") + "'"
};
let me = this;
Server.call("root/data/getEntity", param_, function(result) {
if (result && result.success) {
if (result.data.entity.signature) {
me.isSignature = true;
me.getPDF(result.data.entity.signature);
} else{
me.isSignature = false;
}
} else{
Root.message({
type:"warning",
message:"查询ç¾åä¿¡æ¯å¤±è´¥"
})
}
});
},
getPDF(fileid) {
var me =this;
getDownloadFileUrl(fileid, true, function(result_) {
if (result_.data && result_.data.path) {
var file_img_ = "";
var path_ = result_.data.path;
if (path_.substring(0, 5) == "root/") {
file_img_ = window.top.RootSetting.url_file + path_.substring(5);
}
me.file_img = file_img_;
}
});
},
saveAfter() {
var me = this;
if(this.popupParames.callback) {
let obj = {
signature: this.isSignature
}
this.popupParames.callback(obj, function() {
if (me.popupParames.totab){
Root.tab.removeItem(Root.tab.selected);
Root.tab.open(me.popupParames.parentOption, false);
}
else {
Root.hidePopup();
}
});
}
else {
alert("该按键事件缺失ï¼")
}
},
saveImg() {
var me = this;
this.confirm();
var formData = new FormData();
formData.append("upfile", this.conversions,"image.png");
me.uploadFile(me, formData, result_ => {
var ids = result_.data.data.ids;
var paramObj = {};
paramObj.id = localStorage.getItem("id");
paramObj.signature = ids[0];
var param_ = paramObj;
Server.call("root/data/updateEntity/" + "user", param_, function(result) {
console.log(result);
Root.message({
type: 'success',
message: 'å·²ä¿å˜'
});
me.isSignature = true;
me.saveAfter();
});
})
},
uploadFile(vue, formData, callback, error_callback) {
var user_id = localStorage.getItem("id");
uploadAxios.post(baseUrl +'file/exec?userId=' + user_id, formData).then(data_ => {
vue.$message({
showClose: true,
message: 'ä¸Šä¼ æˆåŠŸï¼',
type: 'success'
});
if (callback) {
callback(data_);
}
}).catch(error => {
vue.$message({
showClose: true,
message: ':请求出现错误:' + error,
type: 'error'
});
console.error(error);
if (error_callback) {
error_callback(error);
}
});
},
//åˆå§‹åŒ–æ’件
initJSignature() {
var arguments = {
width: '100%',
signatureLine: false,//去除默认画布上那æ¡æ¨ªçº¿
lineWidth: '5'
};
$("#signature").jSignature(arguments);
},
//é‡ç½®ç”»å¸ƒï¼Œå¯ä»¥è¿›è¡Œé‡æ–°ä½œç”»
rewrite() {
this.file_img = ""
$("#signature").jSignature("reset");
$("#images").attr('src','');
},
//点击确定按钮,把ç¾å的转æˆå›¾ç‰‡,然åŽæŠŠæ•°æ®æ”¾è¿›å›¾ç‰‡ä¸,最åŽæŠŠå›¾ç‰‡ä¸çš„æ•°æ®ä¼ 到åŽå°
confirm() {
//将画布内容转æ¢ä¸ºå›¾ç‰‡
var $signature = $("#signature")
var datapair = $signature.jSignature("getData", "image");
$("#images").attr('src','data:' + datapair[0] + "," + datapair[1]);
var file = $("#images").attr('src');//拿到图片ä¸çš„src，这就是我们需è¦çš„base64
console.info(file);
//let file = img.src; // 把整个base64给file
var filename = localStorage.getItem("emp_name") + "ç¾å";
let name = filename + ".png"; // 定义文件åå—（例如：cober.png）
var type = "image/png"; // 定义图片类型（canvas转的图片一般都是png，也å¯ä»¥æŒ‡å®šå…¶ä»–类型）
this.conversions = this.base64ToBlob(file, type); // 调用base64转图片方法
},
// conversions 就是转化之åŽçš„图片文件，
base64ToBlob(urlData, type) {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1] || type;
// 去掉url的头，并转化为byte
let bytes = window.atob(arr[1]);
// 处ç†å¼‚常,å°†asciiç å°äºŽ0的转æ¢ä¸ºå¤§äºŽ0
let ab = new ArrayBuffer(bytes.length);
// 生æˆè§†å›¾ï¼ˆç›´æŽ¥é’ˆå¯¹å†…å˜ï¼‰ï¼š8ä½æ— 符å·æ•´æ•°ï¼Œé•¿åº¦1个å—节
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
},
}
});
</script>
</body>
</html>