You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
42 KiB
188 lines
42 KiB
10 months ago
|
$(document).ready(function () {
|
||
|
|
const initCRF = function () {
|
||
|
|
|
||
|
|
let plugin = null;
|
||
|
|
let index = 0
|
||
|
|
|
||
|
|
// 初始化签字笔
|
||
|
|
const initPlugin = function () {
|
||
|
|
index++
|
||
|
|
if (!!plugin) {
|
||
|
|
plugin.DestroyPlugin();
|
||
|
|
}
|
||
|
|
plugin = new PluginNSV();
|
||
|
|
plugin.InitPlugin(function (state) {
|
||
|
|
if (state === 1) {
|
||
|
|
//set pen size
|
||
|
|
plugin.setPenSizeRange(1, 5, null);
|
||
|
|
//set pen color
|
||
|
|
plugin.setPenColor(0, 0, 0, null);
|
||
|
|
plugin.setDisplayMapMode(1, 0, 0, null)
|
||
|
|
console.log('succeeded')
|
||
|
|
} else {
|
||
|
|
console.log('fails')
|
||
|
|
}
|
||
|
|
});
|
||
|
|
/*confirm event*/
|
||
|
|
plugin.onConfirm = function () {
|
||
|
|
saveSignToBase64();
|
||
|
|
endSign();
|
||
|
|
plugin.mouseControl(false, null);
|
||
|
|
};
|
||
|
|
/*clear event*/
|
||
|
|
plugin.onClear = function () {
|
||
|
|
clearSign();
|
||
|
|
};
|
||
|
|
/*cancel event*/
|
||
|
|
plugin.onCancel = function () {
|
||
|
|
endSign();
|
||
|
|
};
|
||
|
|
// 监听插件连接服务的状态
|
||
|
|
plugin.onStateChange = function (state) {
|
||
|
|
if (state === 1) {
|
||
|
|
// 连接服务成功
|
||
|
|
} else {
|
||
|
|
// 连接服务断开
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 第一次启动时判断
|
||
|
|
if (index === 1) {
|
||
|
|
// 设备是否连接--use是否插上
|
||
|
|
plugin.onDevNotifyEvent = (item) => {
|
||
|
|
if (item === 1) {
|
||
|
|
alert('签字笔已插入')
|
||
|
|
} else {
|
||
|
|
alert('签字笔已拔出')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
initPlugin()
|
||
|
|
|
||
|
|
// 点击手签按钮事件
|
||
|
|
$('.shouqian').on('click', function () {
|
||
|
|
// console.log($(this)[0].id);
|
||
|
|
const buttonNodeIdName = {
|
||
|
|
name: $(this)[0].id,
|
||
|
|
isImgClick: false,
|
||
|
|
type: 1 // 1手签 2自动获取
|
||
|
|
}
|
||
|
|
$(this).parent().addClass("shouqian-buttons")
|
||
|
|
window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(buttonNodeIdName))
|
||
|
|
// 开始签字
|
||
|
|
beginSign()
|
||
|
|
})
|
||
|
|
|
||
|
|
// 手签图片点击事件
|
||
|
|
$('.shouqian-img').on('click', function () {
|
||
|
|
// console.log($(this)[0].id);
|
||
|
|
const imgNodeName = {
|
||
|
|
name: $(this)[0].id,
|
||
|
|
isImgClick: true,
|
||
|
|
type: 1 // 1手签 2自动获取
|
||
|
|
}
|
||
|
|
window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(imgNodeName))
|
||
|
|
// 开始签字
|
||
|
|
beginSign()
|
||
|
|
})
|
||
|
|
|
||
|
|
// 点击自动获取按钮
|
||
|
|
$('.auto-import').on('click', function () {
|
||
|
|
console.log('自动获取');
|
||
|
|
// console.log($(this)[0].id);
|
||
|
|
const buttonNodeIdName = {
|
||
|
|
name: $(this)[0].id,
|
||
|
|
isImgClick: false,
|
||
|
|
type: 2 // 1手签 2自动获取
|
||
|
|
}
|
||
|
|
$(this).parent().addClass("auto-import-buttons")
|
||
|
|
window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(buttonNodeIdName))
|
||
|
|
setAutoImport()
|
||
|
|
})
|
||
|
|
|
||
|
|
// 开始签名
|
||
|
|
const beginSign = function () {
|
||
|
|
if (!!plugin) {
|
||
|
|
plugin.beginSign(function (state, args) { });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 清空签名
|
||
|
|
const clearSign = function () {
|
||
|
|
if (!!plugin) {
|
||
|
|
plugin.clearSign(function (state, args) { });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 结束签名
|
||
|
|
function endSign() {
|
||
|
|
if (!!plugin) {
|
||
|
|
/* plugin.endSign(null);*/
|
||
|
|
plugin.endSign(function (state, args) { });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存返回的base64图片
|
||
|
|
function saveSignToBase64() {
|
||
|
|
if (!!plugin) {
|
||
|
|
//Get the plugin's signature image data.
|
||
|
|
plugin.saveSignToBase64(/*615, 272*/0, 0, function (state, args) {
|
||
|
|
if (state) {
|
||
|
|
const img_base64_data = args[0];
|
||
|
|
const nodeIdName = JSON.parse(window.sessionStorage.getItem('sign-nodeIdName'))
|
||
|
|
const img_base64 = "data:image/png;base64," + img_base64_data;
|
||
|
|
// 没有图片时如果点击的是按钮
|
||
|
|
if (!nodeIdName.isImgClick) {
|
||
|
|
let img = `<img id="${nodeIdName.name}-img" class="shouqian-img" style="width:40px;height:30px;margin: 0 auto;" src="${img_base64}" ></img>`
|
||
|
|
// 动态插入img
|
||
|
|
$(`#${nodeIdName.name}`).after(img)
|
||
|
|
// 当前父级p标签margn设置为0
|
||
|
|
$(`#${nodeIdName.name}`).parent()[0].style.margin = '0px'
|
||
|
|
// 图片显示后按钮设置为隐藏
|
||
|
|
$(`#${nodeIdName.name}`).parent().next().css({ "display": "none" }) // 兄弟节点按钮隐藏
|
||
|
|
$(`#${nodeIdName.name}`).css({ "display": "none" }) // 当前节点按钮隐藏
|
||
|
|
// 有了图片后添加图片的点击事件
|
||
|
|
$('.shouqian-img').on('click', function () {
|
||
|
|
// console.log($(this)[0].id);
|
||
|
|
const imgNodeName = {
|
||
|
|
name: $(this)[0].id,
|
||
|
|
isImgClick: true
|
||
|
|
}
|
||
|
|
window.sessionStorage.setItem('sign-nodeIdName', JSON.stringify(imgNodeName))
|
||
|
|
// 开始签字
|
||
|
|
beginSign()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 有图片后如果点击的是图片
|
||
|
|
else {
|
||
|
|
// 给img动态设置src
|
||
|
|
// console.log($(`.${nodeIdName.name}`)[0].src);
|
||
|
|
$(`#${nodeIdName.name}`)[0].src = img_base64;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 自动获取图片
|
||
|
|
function setAutoImport() {
|
||
|
|
console.log(123);
|
||
|
|
const nodeIdName = JSON.parse(window.sessionStorage.getItem('sign-nodeIdName'))
|
||
|
|
const img_base64 = 'data:image/png;base64,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
|
||
|
|
// 调取接口
|
||
|
|
let img = `<img id="${nodeIdName.name}-img" class="shouqian-img" style="width:40px;height:30px;margin: 0 auto;" src="${img_base64}" ></img>`
|
||
|
|
// 动态插入img
|
||
|
|
$(`#${nodeIdName.name}`).after(img)
|
||
|
|
// 当前父级p标签margn设置为0
|
||
|
|
$(`#${nodeIdName.name}`).parent()[0].style.margin = '0px'
|
||
|
|
// 图片显示后按钮设置为隐藏
|
||
|
|
$(`#${nodeIdName.name}`).parent().prev().css({ "display": "none" }) // 兄弟节点按钮隐藏
|
||
|
|
$(`#${nodeIdName.name}`).css({ "display": "none" }) // 当前节点按钮隐藏
|
||
|
|
}
|
||
|
|
}
|
||
|
|
initCRF()
|
||
|
|
})
|