shenkun
/
web

<!DOCTYPE html>
<html lang="en">

<head>
    <title>自定义书签</title>
    <meta charset="UTF-8">
    <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,
        #bookmark {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .row {
            width: 100%;
            border-top: 2px solid #e7e7e7;
        }

        .row>div {
            height: 100%;
        }

        #bk_select {
            width: 100%;
            padding-left: 5%;
        }

        .def_control {
            height: 65%;
            width: 100%;
            font-size: 18px;
        }

        .btn_box {
            width: 12%;
            float: left;
            line-height: 3.3em;
            margin-left: 2%;
        }

        .btn_box:last-of-type {
            float: right;
            margin-right: 2%;
        }
    </style>
</head>

<body>

    <div id="bookmark">
        <div class="row" style="height:20%;padding-top: 3%;">
            <div id="bk_select">
                <span>书签名称：</span>
                <select class="def_control" style="width: 80%;" v-model="bookItem" @change="vm.getBookMark()">
                    <option value="-1">请选择书签</option>
                    <option v-for="(item,index) in bookmarks" :value="index" :key="index">{{item.bookmarkname}}</option>
                </select>
            </div>
        </div>
        <div class="row" style="height: 65%;padding-top: 3%;">
            <p id="showResult">请先从上方的下拉列表中选择指定书签后，再进行添加或删除操作！</p>
        </div>
        <div class="row clear" style="height: 15%;">
            <div class="btn_box">
                <button class="def_control" type="button" disabled="disabled" id="add" @click="vm.addBookMark()">添加</button>
            </div>
            <div class="btn_box">
                <button class="def_control" type="button" disabled="disabled" id="del" @click="vm.delBookMark()">删除</button>
            </div>
            <div class="btn_box">
                <button class="def_control" type="button" @click="vm.cancel()">取消</button>
            </div>
        </div>
    </div>

</body>

</html>
<script>
    var vm = new Vue({
        el: "#bookmark",
        data: {
            bookmarks: [],      // 书签下拉框数据
            bookItem: -1,      // 选中的书签下标
            bookmarksign: "",   // 书签对象
            bookmarkname: "",   // 书签名称
        },
        methods: {
            cancel: function () {  // 取消按钮
                window.close();
                wps.OAAssist.ShellExecute("ksowebstartupwps://");   // 将WPS程序置前
            },
            getAllBookMark: function () {  // 加载下拉框数据
                var doc = wps.WpsApplication().ActiveDocument;
                var bookmarkData = GetDocParamsValue(doc, "bookmarkData");
                if (typeof (bookmarkData) == undefined || bookmarkData == null || bookmarkData == "") {
                    // alert("未传入有效的书签数据,下拉框加载失败!");
                    // return;
                    bookmarkData=[{
                        bookmarksign:'bookmark1',
                        bookmarkname:"我是测试书签1"
                    },{
                        bookmarksign:'bookmark2',
                        bookmarkname:"我是测试书签2"
                    }]
                }
                this.bookmarks = bookmarkData;    // 书签列表赋值
                console.log("数据：" + vm.bookmarks);
            },
            getBookMark: function () {  // 获取选中书签的信息并保存在vue中
                // var _this = this;
                var bookmarkindex = vm.bookItem;    // 获取选中下拉框的坐标
                if (bookmarkindex == -1) {
                    $("#showResult").html("请先从上方的下拉列表中选择指定书签后，再进行添加或删除操作！");
                    $("#add").attr('disabled', true);
                    $("#del").attr('disabled', true);
                    return;
                }
                vm.bookmarksign = vm.bookmarks[bookmarkindex].bookmarksign; // 选中书签对象的书签名
                vm.bookmarkname = vm.bookmarks[bookmarkindex].bookmarkname; // 选中书签对象的内容
                $("#showResult").html(""); // 隐藏文本
                if (vm.bookmarksign != "" || vm.bookmarkname != "") {   // 打开添加及删除按钮
                    $("#add").attr('disabled', false);
                    $("#del").attr('disabled', false);
                }
            },
            addBookMark: function () {   // 添加书签到文档中
                if (vm.bookmarksign == "" || vm.bookmarkname == "") {
                    alert("书签不存在,操作失败");
                    return;
                }
                // 插入文字型窗体域
                var wpsApp = wps.WpsApplication();
                var doc = wpsApp.ActiveDocument;
                var selection = wpsApp.ActiveWindow.Selection;
                var range = selection.Range;
                var fields = doc.FormFields;
                fields.Shaded = true; // 显示底纹

                var formField = fields.Add(range, wps.Enum&&wps.Enum.wdFieldFormTextInput||70);//枚举值兼容性写法，70为枚举表中wps.Enum.wdFieldFormTextInput的值
                formField.Name = vm.bookmarksign; // 书签名称设置
                formField.Result = vm.bookmarkname; // 窗体域的显示结果设置
                //选中，主动触发刷新
                wps.WpsApplication().ActiveDocument.Range(selection.Start,selection.Start).Select()
                // 添加成功给予提示
                $("#showResult").html("书签【" + vm.bookmarksign + "】添加成功！");
            },
            delBookMark: function () {   // 删除书签
                if (vm.bookmarksign == "") {
                    alert("书签标记不存在,操作失误");
                    return;
                }
                // 删除指定窗体域
                var doc = wps.WpsApplication().ActiveDocument;
                var fields = doc.FormFields;
                var flag = false;
                if (fields.Count > 0) {
                    for (var i = 1; i <= fields.Count; i++) {
                        var formField = fields.Item(i);
                        if (formField.Name == vm.bookmarksign) {
                            flag = true;
                            formField.Delete();
                            //选中，主动触发刷新
                            wps.WpsApplication().ActiveDocument.Range(selection.Start,selection.Start).Select()
                        }
                    }
                }
                if (flag) {
                    $("#showResult").html("书签【" + vm.bookmarksign + "】删除成功！");
                } else {
                    alert("此书签不存在，请重新选择要删除的书签！");
                }
            }
        },
        created: function () {
            this.getAllBookMark();
        }
    });
</script>