SealTemplateWrap.js
13.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React,{PropTypes} from 'react';
import cx from 'classnames';
import {
message,
} from 'antd';
class SealTemplateWrap extends React.Component {
constructor(props) {
super(props)
this.setSeal = this.setSeal.bind(this);
this.js_getDPI = this.js_getDPI.bind(this);
this.px2pt = this.px2pt.bind(this);
this.changePXY = this.changePXY.bind(this);
this.state = {
}
}
static propTypes = {
template: PropTypes.string,
onChange:PropTypes.func,
sealImg:PropTypes.string
}
static defaultProps = {
template:'<p class="f14 t2 lh26 s-c666 mt10" style="font-family: tahoma, 微软雅黑; margin-top: 10px !important; font-size: 14px !important; text-indent: 2em !important; color: rgb(102, 102, 102) !important;">离职证明</p><p class="f14 t2 lh26 s-c666 mt10" style="font-family: tahoma, 微软雅黑; margin-top: 10px !important; font-size: 14px !important; text-indent: 2em !important; color: rgb(102, 102, 102) !important;">某某先生/女士/小姐自XX年01月01日入职我公司担任人力资源部人力资源助理职务，至2011年07月31日因个人原因申请离职，在此间无不良表现，经公司研究决定，同意其离职，已办理离职手续。</p><p class="f14 t2 lh26 s-c666 mt10" style="font-family: tahoma, 微软雅黑; margin-top: 10px !important; font-size: 14px !important; text-indent: 2em !important; color: rgb(102, 102, 102) !important;">因未签订相关保密协议，遵从择业自由。</p><p class="f14 t2 lh26 s-c666 mt10" style="font-family: tahoma, 微软雅黑; margin-top: 10px !important; font-size: 14px !important; text-indent: 2em !important; color: rgb(102, 102, 102) !important;">特此证明</p><p class="f14 t2 lh26 s-c666 mt10" style="font-family: tahoma, 微软雅黑; margin-top: 10px !important; font-size: 14px !important; text-indent: 2em !important; color: rgb(102, 102, 102) !important;">公司名称(加盖<a class="custom_field_seal" data-field="签章位置" data-field-type="seal" data-field-system="1" data-field-owner="1" style="background-color: rgb(255, 255, 255); font-family: BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px;"> </a><span style="text-indent: 2em;">公章)</span></p><p class="f14 t2 lh26 s-c666 mt10" style="font-family: tahoma, 微软雅黑; margin-top: 10px !important; font-size: 14px !important; text-indent: 2em !important; color: rgb(102, 102, 102) !important;">2011年07月31日</p>',
sealImg:'data:image/png;base64,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',
onChange:(top,bottom,left,page)=>{
console.log(top,bottom,left,page);
}
}
componentDidUpdate(){
$('.custom_field_seal', $('#seal_template_wrap')).addClass("hidden_template_seal");
}
js_getDPI(){
const arrDPI = new Array();
if (window.screen.deviceXDPI != undefined) {
arrDPI[0] = window.screen.deviceXDPI;
arrDPI[1] = window.screen.deviceYDPI;
}
else {
const tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.offsetWidth);
arrDPI[1] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
}
return arrDPI[0];
}
px2pt(px){
const pt = px*72/this.js_getDPI();
return pt;
}
changePXY(top,left){
const arrA4 = new Array();
const tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "width:210mm;height:297mm;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrA4[0] = parseInt(tmpNode.offsetWidth);
arrA4[1] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
const page = parseInt(top/arrA4[1]);
const pageTop = page==0?top:top-arrA4[1]*page;
const pageBottom = arrA4[1]-pageTop;
return {
pageBottom:this.px2pt(pageBottom),
pageTop:this.px2pt(pageTop),
pageLeft:this.px2pt(left),
page:page+1
}
}
setSeal(){
const { sealImg,onChange } = this.props;
let templateOffset='';
if($('.custom_field_seal',$('#seal_template_wrap'))){
templateOffset = $('.custom_field_seal',$('#seal_template_wrap')).offset();
}else{
return message.error('该证明模板未设置签章位置');
}
const sealOffset = $('#seal_template_wrap').offset();
const top = templateOffset.top-sealOffset.top;
const left = templateOffset.left-sealOffset.left;
const {pageBottom,page,pageTop,pageLeft} = this.changePXY(top,left);
const sealTemplate = `<img id="seal-one" style="width: 4.3cm;position: absolute;transform: translate(-50%, -50%);top:${top}px;left:${left}px;" src="${sealImg}">`;
$('#seal-one',$('#seal_template_wrap')).remove();
$('#seal_template_wrap').append(sealTemplate);
// console.log($('.custom_field_seal',$('#seal_template_wrap')).offset());
// console.log($('#seal_template_wrap').offset());
onChange(pageTop,pageBottom,pageLeft,page);
}
render() {
const { template } = this.props;
return (
<div id={'seal_template_wrap'} dangerouslySetInnerHTML={{__html: `${template}`}} >
</div>
)
}
}
export default SealTemplateWrap;