您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

205 行
6.8KB

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>印章页面</title>
  6. <script type="text/javascript" src='js/main.js'></script>
  7. <script type="text/javascript" src="otherslib/lib/vue.min.js"></script>
  8. <style type="text/css">
  9. * {
  10. box-sizing: border-box;
  11. }
  12. /*清除浮动*/
  13. .clear:after {
  14. content: "";
  15. display: block;
  16. clear: both;
  17. }
  18. html,
  19. body,
  20. #seal {
  21. margin: 0;
  22. padding: 0;
  23. width: 100%;
  24. height: 100%;
  25. }
  26. .row {
  27. width: 100%;
  28. border-top: 2px solid #e7e7e7;
  29. }
  30. .row>div {
  31. height: 100%;
  32. }
  33. #seal_name,
  34. #seal_password {
  35. width: 38%;
  36. float: left;
  37. margin-left: 15px;
  38. }
  39. .seal_control {
  40. height: 60%;
  41. font-size: 16px;
  42. }
  43. #seal_load {
  44. width: 13%;
  45. float: right;
  46. margin-right: 35px;
  47. }
  48. #seal_load>button {
  49. width: 100%;
  50. }
  51. #btnBox {
  52. padding-left: 75%;
  53. line-height: 4em;
  54. }
  55. #btnBox>div {
  56. display: inline-block;
  57. width: 47%;
  58. }
  59. #btnBox button {
  60. height: 60%;
  61. width: 90%;
  62. font-size: 14px;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <div id="seal">
  68. <div class="row clear" style="height: 15%;padding-top: 2%;">
  69. <div id="seal_name">
  70. <span>印章名称:</span>
  71. <select class="seal_control" v-model="sealItem" style="width: 60%;" @change="vm.loadSeal()">
  72. <option value="-1">请选择印章</option>
  73. <option v-for="(item,index) in seals" :key="index" :value="item.signatureID">{{item.MarkName}}</option>
  74. </select>
  75. </div>
  76. <!-- <div id="seal_password">
  77. <span>密码:</span>
  78. <input class="seal_control" type="password" v-model="sealPassword" placeholder="请输入密码" />
  79. </div>
  80. <div id="seal_load">
  81. <button class="seal_control" @click="vm.loadSeal()">盖章</button>
  82. </div> -->
  83. </div>
  84. <div id="seal_preview" class="row" style="height: 70%;padding-top: 5%;overflow: auto;">
  85. <img :src="seal" v-if="visible" style="width: 50%;height: 85%;" draggable="false">
  86. </div>
  87. <div id="btnBox" class="row" style="height: 15%;">
  88. <div>
  89. <button type="button" @click="vm.doSeal()">确定</button>
  90. </div>
  91. <div>
  92. <button type="button" @click="vm.cancle()">取消</button>
  93. </div>
  94. </div>
  95. </div>
  96. </body>
  97. </html>
  98. <script>
  99. var vm = new Vue({
  100. el: "#seal",
  101. data: {
  102. seals: [], //印章下拉框数据
  103. sealItem: -1, // 选中的印章
  104. sealPassword: "", // 印章密码
  105. seal: "", // 中间区域显示的印章图片路径
  106. visible: false, // 是否显示中间区域的印章图片
  107. picPath: "" // 印章图片路径(插入文档使用)
  108. },
  109. methods: {
  110. // 取消按钮
  111. cancle: function () {
  112. window.close(); // 大概率引发WPS程序窗口最小化
  113. wps.OAAssist.ShellExecute("ksowebstartupwps://"); // 将WPS程序置前
  114. },
  115. // 获取印章下拉框数据
  116. getAllSeal: function () {
  117. var l_doc = wps.WpsApplication().ActiveDocument;
  118. var l_sealData = GetDocParamsValue(l_doc, "sealData");
  119. if (typeof (l_sealData) == undefined || l_sealData == null || l_sealData == "") {
  120. // alert("未传入有效的印章数据,下拉框加载失败!");
  121. // return;
  122. l_sealData=[{
  123. MarkName:"测试印章1",
  124. signatureID:1
  125. },{
  126. MarkName:"测试印章2",
  127. signatureID:2
  128. }]
  129. }
  130. this.seals = l_sealData;
  131. console.log("数据:",l_sealData);
  132. },
  133. loadSeal: function () {
  134. if (this.sealItem == "" || this.sealItem == -1) {
  135. this.visible = false;
  136. this.picPath = "";
  137. this.seal = "";
  138. alert("请选择印章!");
  139. return;
  140. }
  141. //静态印章
  142. this.visible = true;
  143. this.picPath = getHtmlURL("template/OA模板公章.png");
  144. this.seal = getHtmlURL("template/OA模板公章.png");
  145. //后台获取 印章
  146. // if (this.sealPassword == "") {
  147. // alert("请输入密码!");
  148. // return;
  149. // }
  150. // var doc = wps.WpsApplication().ActiveDocument;
  151. // var url = GetDocParamsValue(doc, "validatePath");//印章验证接口
  152. // if (url == "") {
  153. // alert("未传入有效的印章验证URL,盖章失败!");
  154. // return;
  155. // }
  156. // url += "&signatureID=" + this.sealItem + "&passwd=" + this.sealPassword;
  157. // this.$http.get(url).then(function (res) {
  158. // var data = res.body;
  159. // if (data.code == "0") {
  160. // this.visible = true;
  161. // this.picPath = data.url;
  162. // this.seal = this.picPath;
  163. // } else {
  164. // this.picPath = "";
  165. // this.$Message.error(data.message);
  166. // }
  167. // }, function () {
  168. // console.log("获取响应失败");
  169. // });
  170. },
  171. doSeal: function () {
  172. var l_doc = wps.WpsApplication().ActiveDocument;
  173. if (!l_doc) {
  174. return;
  175. }
  176. OnInsertPicToDoc(l_doc, this.picPath, 95, 95,()=>{
  177. window.opener = null;
  178. window.open('', '_self', '');
  179. window.close();
  180. }); // 调用插入图片函数
  181. }
  182. },
  183. mounted: function () {
  184. this.getAllSeal();
  185. }
  186. });
  187. </script>