<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>印章页面</title>
<script type="text/javascript" src='js/main.js'></script>
<script type="text/javascript" src="otherslib/lib/vue.min.js"></script>
<style type="text/css">
* {
box-sizing: border-box;
}
/*清除浮动*/
.clear:after {
content: "";
display: block;
clear: both;
}
html,
body,
#seal {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.row {
width: 100%;
border-top: 2px solid #e7e7e7;
}
.row>div {
height: 100%;
}
#seal_name,
#seal_password {
width: 38%;
float: left;
margin-left: 15px;
}
.seal_control {
height: 60%;
font-size: 16px;
}
#seal_load {
width: 13%;
float: right;
margin-right: 35px;
}
#seal_load>button {
width: 100%;
}
#btnBox {
padding-left: 75%;
line-height: 4em;
}
#btnBox>div {
display: inline-block;
width: 47%;
}
#btnBox button {
height: 60%;
width: 90%;
font-size: 14px;
}
</style>
</head>
<body>
<div id="seal">
<div class="row clear" style="height: 15%;padding-top: 2%;">
<div id="seal_name">
<span>印章名称：</span>
<select class="seal_control" v-model="sealItem" style="width: 60%;" @change="vm.loadSeal()">
<option value="-1">请选择印章</option>
<option v-for="(item,index) in seals" :key="index" :value="item.signatureID">{{item.MarkName}}</option>
</select>
</div>
<!-- <div id="seal_password">
<span>密码：</span>
<input class="seal_control" type="password" v-model="sealPassword" placeholder="请输入密码" />
</div>
<div id="seal_load">
<button class="seal_control" @click="vm.loadSeal()">盖章</button>
</div> -->
</div>
<div id="seal_preview" class="row" style="height: 70%;padding-top: 5%;overflow: auto;">
<img :src="seal" v-if="visible" style="width: 50%;height: 85%;" draggable="false">
</div>
<div id="btnBox" class="row" style="height: 15%;">
<div>
<button type="button" @click="vm.doSeal()">确定</button>
</div>
<div>
<button type="button" @click="vm.cancle()">取消</button>
</div>
</div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#seal",
data: {
seals: [], //印章下拉框数据
sealItem: -1, // 选中的印章
sealPassword: "", // 印章密码
seal: "", // 中间区域显示的印章图片路径
visible: false, // 是否显示中间区域的印章图片
picPath: "" // 印章图片路径(插入文档使用)
},
methods: {
// 取消按钮
cancle: function () {
window.close(); // 大概率引发WPS程序窗口最小化
wps.OAAssist.ShellExecute("ksowebstartupwps://"); // 将WPS程序置前
},
// 获取印章下拉框数据
getAllSeal: function () {
var l_doc = wps.WpsApplication().ActiveDocument;
var l_sealData = GetDocParamsValue(l_doc, "sealData");
if (typeof (l_sealData) == undefined || l_sealData == null || l_sealData == "") {
// alert("未传入有效的印章数据,下拉框加载失败!");
// return;
l_sealData=[{
MarkName:"测试印章1",
signatureID:1
},{
MarkName:"测试印章2",
signatureID:2
}]
}
this.seals = l_sealData;
console.log("数据：",l_sealData);
},
loadSeal: function () {
if (this.sealItem == "" || this.sealItem == -1) {
this.visible = false;
this.picPath = "";
this.seal = "";
alert("请选择印章!");
return;
}
//静态印章
this.visible = true;
this.picPath = getHtmlURL("template/OA模板公章.png");
this.seal = getHtmlURL("template/OA模板公章.png");
//后台获取 印章
// if (this.sealPassword == "") {
// alert("请输入密码!");
// return;
// }
// var doc = wps.WpsApplication().ActiveDocument;
// var url = GetDocParamsValue(doc, "validatePath");//印章验证接口
// if (url == "") {
// alert("未传入有效的印章验证URL,盖章失败!");
// return;
// }
// url += "&signatureID=" + this.sealItem + "&passwd=" + this.sealPassword;
// this.$http.get(url).then(function (res) {
// var data = res.body;
// if (data.code == "0") {
// this.visible = true;
// this.picPath = data.url;
// this.seal = this.picPath;
// } else {
// this.picPath = "";
// this.$Message.error(data.message);
// }
// }, function () {
// console.log("获取响应失败");
// });
},
doSeal: function () {
var l_doc = wps.WpsApplication().ActiveDocument;
if (!l_doc) {
return;
}
OnInsertPicToDoc(l_doc, this.picPath, 95, 95,()=>{
window.opener = null;
window.open('', '_self', '');
window.close();
}); // 调用插入图片函数
}
},
mounted: function () {
this.getAllSeal();
}
});
</script>