25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

195 lines
7.6KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>自定义书签</title>
  5. <meta charset="UTF-8">
  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. #bookmark {
  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. #bk_select {
  34. width: 100%;
  35. padding-left: 5%;
  36. }
  37. .def_control {
  38. height: 65%;
  39. width: 100%;
  40. font-size: 18px;
  41. }
  42. .btn_box {
  43. width: 12%;
  44. float: left;
  45. line-height: 3.3em;
  46. margin-left: 2%;
  47. }
  48. .btn_box:last-of-type {
  49. float: right;
  50. margin-right: 2%;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div id="bookmark">
  56. <div class="row" style="height:20%;padding-top: 3%;">
  57. <div id="bk_select">
  58. <span>书签名称:</span>
  59. <select class="def_control" style="width: 80%;" v-model="bookItem" @change="vm.getBookMark()">
  60. <option value="-1">请选择书签</option>
  61. <option v-for="(item,index) in bookmarks" :value="index" :key="index">{{item.bookmarkname}}</option>
  62. </select>
  63. </div>
  64. </div>
  65. <div class="row" style="height: 65%;padding-top: 3%;">
  66. <p id="showResult">请先从上方的下拉列表中选择指定书签后,再进行添加或删除操作!</p>
  67. </div>
  68. <div class="row clear" style="height: 15%;">
  69. <div class="btn_box">
  70. <button class="def_control" type="button" disabled="disabled" id="add" @click="vm.addBookMark()">添加</button>
  71. </div>
  72. <div class="btn_box">
  73. <button class="def_control" type="button" disabled="disabled" id="del" @click="vm.delBookMark()">删除</button>
  74. </div>
  75. <div class="btn_box">
  76. <button class="def_control" type="button" @click="vm.cancel()">取消</button>
  77. </div>
  78. </div>
  79. </div>
  80. </body>
  81. </html>
  82. <script>
  83. var vm = new Vue({
  84. el: "#bookmark",
  85. data: {
  86. bookmarks: [], // 书签下拉框数据
  87. bookItem: -1, // 选中的书签下标
  88. bookmarksign: "", // 书签对象
  89. bookmarkname: "", // 书签名称
  90. },
  91. methods: {
  92. cancel: function () { // 取消按钮
  93. window.close();
  94. wps.OAAssist.ShellExecute("ksowebstartupwps://"); // 将WPS程序置前
  95. },
  96. getAllBookMark: function () { // 加载下拉框数据
  97. var doc = wps.WpsApplication().ActiveDocument;
  98. var bookmarkData = GetDocParamsValue(doc, "bookmarkData");
  99. if (typeof (bookmarkData) == undefined || bookmarkData == null || bookmarkData == "") {
  100. // alert("未传入有效的书签数据,下拉框加载失败!");
  101. // return;
  102. bookmarkData=[{
  103. bookmarksign:'bookmark1',
  104. bookmarkname:"我是测试书签1"
  105. },{
  106. bookmarksign:'bookmark2',
  107. bookmarkname:"我是测试书签2"
  108. }]
  109. }
  110. this.bookmarks = bookmarkData; // 书签列表赋值
  111. console.log("数据:" + vm.bookmarks);
  112. },
  113. getBookMark: function () { // 获取选中书签的信息并保存在vue中
  114. // var _this = this;
  115. var bookmarkindex = vm.bookItem; // 获取选中下拉框的坐标
  116. if (bookmarkindex == -1) {
  117. $("#showResult").html("请先从上方的下拉列表中选择指定书签后,再进行添加或删除操作!");
  118. $("#add").attr('disabled', true);
  119. $("#del").attr('disabled', true);
  120. return;
  121. }
  122. vm.bookmarksign = vm.bookmarks[bookmarkindex].bookmarksign; // 选中书签对象的书签名
  123. vm.bookmarkname = vm.bookmarks[bookmarkindex].bookmarkname; // 选中书签对象的内容
  124. $("#showResult").html(""); // 隐藏文本
  125. if (vm.bookmarksign != "" || vm.bookmarkname != "") { // 打开添加及删除按钮
  126. $("#add").attr('disabled', false);
  127. $("#del").attr('disabled', false);
  128. }
  129. },
  130. addBookMark: function () { // 添加书签到文档中
  131. if (vm.bookmarksign == "" || vm.bookmarkname == "") {
  132. alert("书签不存在,操作失败");
  133. return;
  134. }
  135. // 插入文字型窗体域
  136. var wpsApp = wps.WpsApplication();
  137. var doc = wpsApp.ActiveDocument;
  138. var selection = wpsApp.ActiveWindow.Selection;
  139. var range = selection.Range;
  140. var fields = doc.FormFields;
  141. fields.Shaded = true; // 显示底纹
  142. var formField = fields.Add(range, wps.Enum&&wps.Enum.wdFieldFormTextInput||70);//枚举值兼容性写法,70为枚举表中wps.Enum.wdFieldFormTextInput的值
  143. formField.Name = vm.bookmarksign; // 书签名称设置
  144. formField.Result = vm.bookmarkname; // 窗体域的显示结果设置
  145. //选中,主动触发刷新
  146. wps.WpsApplication().ActiveDocument.Range(selection.Start,selection.Start).Select()
  147. // 添加成功给予提示
  148. $("#showResult").html("书签【" + vm.bookmarksign + "】添加成功!");
  149. },
  150. delBookMark: function () { // 删除书签
  151. if (vm.bookmarksign == "") {
  152. alert("书签标记不存在,操作失误");
  153. return;
  154. }
  155. // 删除指定窗体域
  156. var doc = wps.WpsApplication().ActiveDocument;
  157. var fields = doc.FormFields;
  158. var flag = false;
  159. if (fields.Count > 0) {
  160. for (var i = 1; i <= fields.Count; i++) {
  161. var formField = fields.Item(i);
  162. if (formField.Name == vm.bookmarksign) {
  163. flag = true;
  164. formField.Delete();
  165. //选中,主动触发刷新
  166. wps.WpsApplication().ActiveDocument.Range(selection.Start,selection.Start).Select()
  167. }
  168. }
  169. }
  170. if (flag) {
  171. $("#showResult").html("书签【" + vm.bookmarksign + "】删除成功!");
  172. } else {
  173. alert("此书签不存在,请重新选择要删除的书签!");
  174. }
  175. }
  176. },
  177. created: function () {
  178. this.getAllBookMark();
  179. }
  180. });
  181. </script>