jy/src/web/staticres/wx_dataExport/js/keyWord.js

$(function(){

    $(".enterOne").focus(function(){
        $(".btnChoose").show();
    });
    $('.knowBtn').on('click',function(){
        $(".problemPop").hide()
    });
    $(".problem").on('click',function(){
        $(".problemPop").css("display",'flex');
    });

    function hasWords () {
        var showKeyWordLength = $(".showKeyWord ul").find('li').length;
        if(showKeyWordLength === 0){
            $(".enter.addkeyWord").show();
            $(".addKeyWord").hide();
            $(".showKeyWord").hide();
        } else {
            $(".enter.addkeyWord").hide();
            $(".showKeyWord").show();
            $(".addKeyWord").show();
        }
    }
    hasWords();

    //添加按钮
    $(".addKeyWord i").on('click',function(){
        sessionStorage.removeItem("keyWord");
        window.location.href="/jyapp/front/dataExport/keyWordInput";
    });

    // 添加keyWords检查输入框内是否有文字，如果有才能点击添加按钮
    $('.addkeyWord input.enterOne').on('input', function() {
        var buttonDOM = $(this).siblings()[1].children[0];

        if ($(this).val().length >= 1) {
            buttonDOM.style.opacity = 1;
            buttonDOM.removeAttribute("disabled");
            //
            $(this).next().find(".appended").prop("disabled", false);
            $(this).next().find(".exclude").prop("disabled", false);
        } else {
            buttonDOM.style.opacity = .5;
            buttonDOM.setAttribute("disabled", true);
            //
            $(this).next().find(".appended").prop("disabled", true);
            $(this).next().find(".exclude").prop("disabled", true);
        }
    });

    $('textarea').each(function(i,dom){
        // console.log(i,dom)
        dom.style.height = dom.scrollHeight +'px';
    });
    $("textarea").on("input", function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + "px";
    });

    // 添加 按钮的点击事件
    $('.addkeyWord .btn .save').on('click', function(){
        var keyWord = $('.addkeyWord input.enterOne').val();
        keyWord = keyWord.replace(/\s/g,"");
        if (keyWord.length > 20) {
            // var s = keyWord.slice(0,19);
            // $('.addkeyWord input.enterOne').val(s)

            weui.toast('关键词不能超过20字', {
                duration: 2000,
                className: 'text-overflow100',
                callback: function(){}
            });
            return
        }
        var keyWordHtml = "";
        var html = `
                    <li>
                        <div class="one">
                            <div>
                                <span>
                                    <strong> 关键词：</strong>
                                    <p class="key">${ keyWord }</p>
                                </span>
                            </div>
                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
                        </div>
                        <div class="modify">
                            <textarea  name=""  rows="1"  placeholder="" maxlength="">${ keyWord}</textarea>
                            <button class="addAdjunctWord">编辑 附加词</button>
                            <button class="addExclusion">添加 排除词</button>
                            <button class="deleteKey">删除</button>
                            <button class="ascertainKey">确定</button>
                        </div>
                    </li>`;
        if(sessionStorage.keyWord!==""&&sessionStorage.keyWord!==undefined){
            var keys = JSON.parse(sessionStorage.keyWord);
            for(var i in keys){
                var append = keys[i].appended;
                var exclude = keys[i].exclude;
                if(keys[i].keyWord === keyWord){
                    keyWordArr.push(keys[i]);
                    localStorage.setItem("keyWord", JSON.stringify(keyWordArr));
                    //
                    if(append !== undefined && exclude === undefined){
                        keyWordHtml += `
                    <li>
                        <div class="one">
                            <div>
                                <span>
                                    <strong> 关键词：</strong>
                                    <p class="key">${ keys[i].keyWord }</p>
                                </span>
                                <span>
                                    <strong> 附加词：</strong>
                                    <p class="addition">${ append }</p>
                                </span>
                            </div>
                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
                        </div>
                        <div class="modify">
                            <textarea  name=""  rows="1"  placeholder="" maxlength="">${ keys[i].keyWord}</textarea>
                            <button class="addAdjunctWord">编辑 附加词</button>
                            <button class="addExclusion">添加 排除词</button>
                            <button class="deleteKey">删除</button>
                            <button class="ascertainKey">确定</button>
                        </div>
                    </li>`;
                    }else if(append === undefined && exclude !== undefined){
                        keyWordHtml += `
                    <li>
                        <div class="one">
                            <div>
                                <span>
                                    <strong> 关键词：</strong>
                                    <p class="key">${ keys[i].keyWord }</p>
                                </span>
                                <span>
                                    <strong> 排除词：</strong>
                                    <p class="exclusion">${ exclude }</p>
                                </span>
                            </div>
                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
                        </div>
                        <div class="modify">
                            <textarea  name=""  rows="1"  placeholder="" maxlength="">${ keys[i].keyWord}</textarea>
                            <button class="addAdjunctWord">编辑 附加词</button>
                            <button class="addExclusion">添加 排除词</button>
                            <button class="deleteKey">删除</button>
                            <button class="ascertainKey">确定</button>
                        </div>
                    </li>`;
                    }else if(append !== undefined && exclude !== undefined){
                        keyWordHtml += `
                    <li>
                        <div class="one">
                            <div>
                                <span>
                                    <strong> 关键词：</strong>
                                    <p class="key">${ keys[i].keyWord }</p>
                                </span>
                                <span>
                                    <strong> 附加词：</strong>
                                    <p class="addition">${ append }</p>
                                </span>
                                <span>
                                    <strong> 排除词：</strong>
                                    <p class="exclusion">${ exclude }</p>
                                </span>
                            </div>
                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
                        </div>
                        <div class="modify">
                            <textarea  name=""  rows="1"  placeholder="" maxlength="">${ keys[i].keyWord}</textarea>
                            <button class="addAdjunctWord">编辑 附加词</button>
                            <button class="addExclusion">添加 排除词</button>
                            <button class="deleteKey">删除</button>
                            <button class="ascertainKey">确定</button>
                        </div>
                    </li>`;
                    }else if(append === undefined && exclude === undefined){
                        keyWordHtml += `
                    <li>
                        <div class="one">
                            <div>
                                <span>
                                    <strong> 关键词：</strong>
                                    <p class="key">${ keys[i].keyWord }</p>
                                </span>
                            </div>
                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
                        </div>
                        <div class="modify">
                            <textarea  name=""  rows="1"  placeholder="" maxlength="">${ keys[i].keyWord}</textarea>
                            <button class="addAdjunctWord">编辑 附加词</button>
                            <button class="addExclusion">添加 排除词</button>
                            <button class="deleteKey">删除</button>
                            <button class="ascertainKey">确定</button>
                        </div>
                    </li>`;
                    }
                    keyWordHtml = keyWordHtml.replace(/,/g, " ");
                    //
                    $('.showKeyWord > ul').prepend(keyWordHtml);
                    // 隐藏
                    $(".enter.addkeyWord").hide();
                    $(".showKeyWord").show();
                    $(".addKeyWord").show();
                    $('.enter.addkeyWord > input').val('');
                    var buttonDOM = $('.enter.addkeyWord .btn button')[0];
                    buttonDOM.style.opacity = .5;
                    buttonDOM.setAttribute("disabled", true);
                    return
                }
            }
        }
        var Obj = {"keyWord": keyWord};
        keyWordArr.push(Obj);
        localStorage.setItem("keyWord", JSON.stringify(keyWordArr));
        $('.showKeyWord > ul').prepend(html);
        // 隐藏
        $(".enter.addkeyWord").hide();
        $(".showKeyWord").show();
        $(".addKeyWord").show();
        $('.enter.addkeyWord > input').val('');
        var buttonDOM = $('.enter.addkeyWord .btn button')[0];
        buttonDOM.style.opacity = .5;
        buttonDOM.setAttribute("disabled", true);

    });

    // 编辑
    $(".showKeyWord").on('click', '.editKeyWord',function(e){
        let oSpan = e.target.parentNode.nextElementSibling.children[0];
        let val = $(oSpan).val();

        // alert(oSpan.documentElement.scrollTop)
        var keyWord = $(this).prev().children().find(".key").text();
        for(var i in keyWordArr){
            if(keyWordArr[i].keyWord === keyWord){
                var str = "";
                var strs = "";
                if(keyWordArr[i].appended !== undefined){
                    var appended = keyWordArr[i].appended.length;
                    if(appended < 1){
                        str =  "添加 附加词";
                    }else{
                        str = "编辑 附加词 ("+appended+")";
                    }
                }else{
                    str =  "添加 附加词";
                }
                $(this).parent().next().find(".addAdjunctWord").text(str);
                if(keyWordArr[i].exclude !== undefined){
                    var exclude = keyWordArr[i].exclude.length;
                    if(exclude < 1){
                        strs = "添加 排除词";
                    }else{
                        strs = "编辑 排除词 ("+exclude+")";
                    }
                }else{
                    strs = "添加 排除词";
                }
                $(this).parent().next().find(".addExclusion").text(strs);
            }
        }
        $(this).parent().hide();
        $(this).parent().siblings().show().parent().siblings().children('.modify').hide().siblings('.one').show()
        $(oSpan).val('').focus().val(val);
        $(".addKeyWord").hide();
    });

    // 编辑删除
    $('.showKeyWord').on('click', '.deleteKey', function(e) {
        var jQueryDOM = $(this).parents('li');
        var keyWord = $(this).parent().prev().find('.key').text();
        weui.confirm('确定要删除关键词？', {
            buttons: [{
                label: '取消',
                type: 'default',
                onClick: function(){
                }
            }, {
                label: '确定',
                type: 'primary',
                onClick: function(){
                    keyWordArr = keyWordArr.filter((e=>{return e.keyWord!==keyWord}));
                    localStorage.keyWord = JSON.stringify(keyWordArr);
                    jQueryDOM.remove();
                    sessionStorage.removeItem("keyWord");
                    $(".addKeyWord").show();
                    hasWords()
                }
            }]
        });
        // console.log('删除关键词:',$(this).parent().find('span').text())

    })
    // 编辑确定
    $('.showKeyWord').on('click', '.ascertainKey', function(e) {
        var $this = $(this);
        // var keyWord = $(this).siblings('span').text();
        var keyWord = $(this).siblings('textarea').val();
        var keyWords = $(this).parent().prev().find('.key').text();
        keyWord = keyWord.replace(/\s/g,"");
        if ($(this).parent().find("textarea").val().length < 1) {

            weui.toast('关键词不能为空', {
                duration: 2000,
                className: 'text-overflow100',
                callback: function(){

                }
            });
            return
        }else if($(this).parent().find("textarea").val().length > 20){
            // var s = $(this).parent().find("span").text().slice(0,19);
            // $(this).parent().find("span").text(s);
            weui.toast('关键词不能超过20字', {
                duration: 2000,
                className: 'text-overflow100',
                callback: function(){}
            });
            return
        }else{
            for(var i in keyWordArr){
                if(keyWordArr[i].keyWord === keyWords){
                    keyWordArr[i].keyWord = keyWord;
                }
            }
            localStorage.keyWord = JSON.stringify(keyWordArr);
            $this.parent().siblings().find('.key').text(keyWord)
            $this.parent().hide().siblings().show()
        }
        $(".addKeyWord").show();
    })

    //去空格方法
    String.prototype.trim = function(){
        return this.replace(/(^\s*)|(\s*$)/g, ' ');
    }

})