xiaoben-as2-php/protected/views/help/selfHelp.php

<style>
    /**
     *
     * @authors Your Name (you@example.org)
     * @date    2018-09-12 10:32:37
     * @version $Id$
     */
    .information-inquiry{

        width: 800px;
        margin: 0 auto;
        border: 1px solid #f1f1f1;
        /*box-shadow:4px 4px 10px #7c7c7c;*/
    }
    .information-inquiry .title{
        padding: 0 16px;
        height: 50px;
        line-height: 50px;
        background-color: #1BBF7B;
    }
    .information-inquiry .title .title-text{
        font-size: 18px;
        color: #fff;
        font-weight: 650;
    }
    .information-inquiry .title .title-tag{
        display: inline-block;
        margin-right: 20px;
        margin-top: 10px;
        padding: 6px 12px;
        height: 30px;
        line-height: 16px;
        color: #fff;
        border: 1px solid #F8F8FA;
        border-radius: 4px;
        background-color: #1BBF7B;
        cursor: pointer;
    }

    .btn-closes{
        display: inline-block;
        margin-top: 10px;
        line-height: 30px;
        cursor: pointer;
    }
    .dialog-box{
        width: 544px;
        border-right: 1px solid #ccc;
    }
    .information-inquiry .content-box .chat-box{
        padding: 0 18px 18px 18px;
        height: 380px;
        border-bottom: 1px solid #ccc;
        overflow: auto;
    }
    .information-inquiry .content-box .head-portrait{
        display: inline-block;
        width: 34px;
        height: 34px;
    }
    .chat-msg-left .head-portrait{
        margin-right: 18px;
    }
    .chat-msg-right .head-portrait{
        margin-left: 18px;
    }
    .head-portrait img{
        width: 34px;
        height: 34px;
        border-radius: 50%;
    }
    .information-inquiry .content-box .chat-msg{
        margin-top: 24px;
    }
    .chat-msg-text{
        display: inline-block;
        padding: 0 10px;
        line-height: 34px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fbfbfb;
    }

    .hot-problem{
        display: inline-block;
        margin-top: 12px;
        line-height: 30px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fbfbfb;
    }
    .hot-problem .hot-problem-title{
        padding: 0 10px;
        color: #000;
        border-bottom: 1px solid #ccc;
        font-weight: 650;
    }
    .hot-problem .hot-problem-list{
        padding: 0 10px;
    }
    .hot-problem .hot-problem-list a{
        display: block;
        color: #0066ff;
        cursor: pointer;
    }
    .hot-problem .hot-problem-list a:before{
        content: "";
        display: inline-block;
        width: 8px;
        height:8px;
        border-radius: 4px;
        background-color: #ccc;
        margin-right: 4px;
    }
    .reply{
        display: inline-block;
        max-width: 433px;
        min-width: 280px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fbfbfb;
    }
    .reply-text{
        padding: 8px;
        border-bottom: 1px solid #ccc;
    }
    .reply-confirm{
        padding: 6px;
    }
    .reply-confirm span{
        display: inline-block;
        width: 49%;
        height: 38px;
        line-height: 38px;
        text-align: center;
        cursor: pointer;
    }
    .reply-confirm img{
        vertical-align: middle;
        margin-right: 10px;
    }
    .reply-btn{
        border-right: 1px solid #ccc;
    }

    .reply-confirm .reply-btn-dissatisfied-show, .reply-confirm .reply-btn-show{
        display: none;
        color: #14ae68;
    }
    .diss{
        display: none;
        padding: 0 14px 12px 12px;
    }
    .diss input{
        padding: 0 4px;
        width: 98%;
        height: 36px;
        outline:none;
    }
    .input-box{
        padding-bottom: 18px;
    }
    .input-box textarea{
        margin: 10px;
        border: none;
        outline:none;
        resize:none;
    }

    .btn-send-msg{
        margin-right: 44px;
        width: 70px;
        height: 32px;
        line-height: 32px;
        color: #fff;
        background-color: #00af65;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .right-box{
        width: 254px;
    }

    .msg{
        height: 230px;
        overflow: auto;
        border-bottom: 1px solid #ccc;
    }
    .msg .msg-title{
        padding:0 10px;
        height: 34px;
        line-height: 34px;
        background-color: #e4e4e4;
    }
    .msg .msg-title img,.faqs-title img{
        vertical-align: middle;
        margin-right: 8px;
    }
    .msg-time{
        font-weight: 650;
    }
    .msg-text{
        padding: 6px;
    }
    .msg-text p{
        margin-bottom: 12px;
    }

    .faqs-title{
        padding:0 10px;
        height: 34px;
        line-height: 34px;
        background-color: #e4e4e4;
        font-weight: 650;
        border-bottom: 1px solid #ccc;
    }
    .faqs-list{
        height: 290px;
        overflow: auto;

    }
    .faqs-list li{
        padding:0 10px;
        border-bottom: 1px solid #ccc;
    }
    .faqs-list li>p{
        width: 234px;
        height: 38px;
        line-height: 38px;
        color: #666;
        font-weight: 600;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .faqs-reply{
        display: none;
        font-size: 13px;
        color: #666;
    }
    .classified-service{
        width: 1200px;
        height: 698px;
        margin: 0 auto;
        border: 1px solid #ccc;
        background: #fff;

        position: absolute;
        left: 20%;
        top: 2%;
    }
    .classified-service-menu{
        width: 238px;
    }
    .classified-service-menu-title{
        height: 52px;
        line-height: 52px;
        font-size: 18px;
        font-weight: 650;
        color: #333;
        background-color: #f2f2f2;
        text-indent: 8px;
    }
    .classified-service-menu-box{
        margin-top: 24px;
        padding: 0 20px;
    }
    .classified-service-menu-box>ul>li{
        padding-left: 17px;
        cursor: pointer;
    }
    .classified-service-menu-box .isfather{
        padding-left: 0;
    }
    .classified-service-menu-box .isfather:before {
        content:url(/images/icon-selected_down.png);
        margin-right: 8px;
        display: inline-block;
        width: 9px;
        height:9px;
    }
    .classified-service-menu-box .child-menu{
        display: none;
        padding-left: 30px;
    }
    .classified-service-content{
        width: 960px;
        height: 100%;
        border-left: 1px solid #ccc;
    }
    .btn-close{
        display: inline-block;
        margin-top: 10px;
        margin-right: 10px;
        padding: 12px 16px;
        /*height: 16px;*/
        line-height: 16px;
        border-radius: 4px;
        background-color: #f2f2f2;;
        cursor: pointer;
    }
    .problem-box{
        margin-top: 52px;
        padding: 0 10px;
    }
    .problem-box .problem-title{
        color: #333;
        font-weight: 650;

    }
    .problem-box tr{
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
    .problem-box tr td:nth-child(1){
        width: 640px;
        text-indent: 36px;
    }
    .problem-box tr td:nth-child(2){
        width: 200px;
        text-align: center;
    }
    .problem-box tr td:nth-child(3){
        width: 100px;
    }
    .problem-box .btn-look{
        display: inline-block;
        width: 30px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border: 1px solid #000;
        background-color: #f2f2f2;
        cursor: pointer;
    }

    .look-box{
        display: none;
        /*width: 760px;*/
        /*height: 720px;*/
        background: #fff;
        /*border:1px solid #ccc;*/
        /*overflow: hidden;*/
    }
    .look-box .look-title{
        padding-left: 10px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
        /*background-color: #f2f2f2;*/
    }
    .look-box .btn-close{
        display: inline-block;
        width: 40px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #000;
        background-color: #f2f2f2;
    }
    .look-box-con{
        padding: 16px;
    }
    .look-box-con-problem{
        line-height: 40px;
    }
    .look-box-con-problem img{
        vertical-align: middle;
    }
    .look-box-con-problem .btn-edit{
        display: inline-block;
        margin-top: 10px;
        width: 112px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #000;
        background-color: #f2f2f2;
        cursor: pointer;
    }
    .look-box-con-answer{
        width: 720px;
        margin-top: 30px;
        border: 1px solid #ccc;
        /*overflow: auto;*/
    }
    .look-box-con-answer textarea{
        margin: 10px;
        border: none;
        outline:none;
        resize:none;
    }
    .helper{
        padding:8px;
        position: absolute;
        left: 0;
        /*bottom: 40px;*/
        cursor: pointer;
        background:rgba(255,255,255,1);
        border-radius:3px;
        border:1px solid #eee;
    }
    .helper img{width:32px;}
    .chat-msg-box{
        word-wrap:break-word;
        overflow: hidden;
    }
    .chat-msg-box img{
        max-width: 410px;
    }

    .relation-problem-list{
        padding: 0 10px;
        color: #000;
        border-bottom: 1px solid #ccc;
        font-weight: 600;
    }

    .relation-problem-list a{
        display: block;
        color: #0066ff;
        font-weight:normal;
        line-height:28px;
        cursor: pointer;
    }
    .relation-problem-list a:before{
        content: "";
        display: inline-block;
        width: 8px;
        height:8px;
        border-radius: 4px;
        background-color: #ccc;
        margin-right: 4px;
    }
    .faqs-problem{
        cursor: pointer;
    }
</style>
<!--自助查询-->
<div class="classified-service clearfix">
    <div class="classified-service-menu fl">
        <div class="classified-service-menu-title">分类目录</div>
        <div class="classified-service-menu-box">
            <ul id="ismenu">
                <li class="isfather">试卷管理
                    <ul class="child-menu">
                        <li>打印试卷</li>
                        <li>下载钻石纠错本</li>
                        <li>下载个性化学习宝</li>
                        <li>导出报告</li>
                    </ul>
                </li>
                <li class="isfather">教学管理
                    <ul class="child-menu">
                        <li>打印试卷</li>
                        <li>下载钻石纠错本</li>
                        <li>下载个性化学习宝</li>
                        <li>导出报告</li>
                    </ul>
                </li>
                <li>安装于登录</li>
                <li>扫描上传</li>
            </ul>
        </div>
    </div>
    <div class="classified-service-content fr">
       <!-- <span class="btn-close fr">关闭</span>-->
        <div class="problem-box">
            <table>
                <tr class="problem-title">
                    <td>问题</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>

            </table>
        </div>
    </div>
</div>
<div class="look-box">
    <div class="look-box-con">
        <div class="look-box-con-problem">
            <div class="question">第三方试卷如何切换模版</div>
            <div class="type">所属分类：试卷管理>第三方试卷>第三方试卷如何切换模版</div>
            <div class="alike">关联问题：第三方试卷有哪几个模版</div>
            <input type="hidden" name="help_answer_id" value="0">
            <div>
                <img src="/images/icon-answer.png">
                <span>答案</span>
                <span class="btn-edit fr">帮助编辑</span>
            </div>
        </div>
        <div class="look-box-con-answer">
            <!--<textarea id="look-answer_val"  rows="26" cols="86" readonly="readonly"></textarea>-->
            <script id="container" name="content" type="text/plain"></script>
        </div>
    </div>
</div>
<!--自助结束-->
<script type="text/javascript" src="/js/ueditor1_4_3_3-utf8-php/ueditor.config.js"></script>
<script type="text/javascript" src="/js/ueditor1_4_3_3-utf8-php/ueditor.all.js"></script>
<script>
    var nowTypeId=0;
    var nowPage=1;
    var ue = UE.getEditor('container',{
        toolbars: [
            [ 'bold','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify']
        ],
        wordCount:false,
        //关闭elementPath
        elementPathEnabled:false,
        initialFrameHeight:450,
        scaleEnabled:true
    });

    init();
    //自主查询
    function init() {

        index=layer.msg('加载中，请稍候',{time: 0});
        $.ajax({
            url:'<?php echo $this->createUrl('help/list') ?>',
            method:'POST',
            dataType:'json',
            success:function(res){
                if(res.status==1){
                    var tree=res.data.tree;
                    var treeHtml='';
                    for(var i=0;i<tree.length;i++){

                        if(tree[i]['children']!='undefined' && tree[i]['children'].length>0){
                            treeHtml+='<li  class="isfather">'+tree[i]['ptName'];
                            treeHtml+='<ul class="child-menu">';
                            for(var j=0;j<tree[i]['children'].length;j++){
                                if(tree[i]['children'][j]['children']!=undefined){
                                    treeHtml+='<li class="show_list" id="'+tree[i]['children'][j]['ptId']+'">'+tree[i]['children'][j]['ptName'];
                                    treeHtml+='<ul class="child-menu">';
                                    secondTree=tree[i]['children'][j]['children'];
                                    for(var k=0;k<secondTree.length;k++){
                                        treeHtml+='<li class="show_list" id="'+secondTree[k]['ptId']+'">'+secondTree[k]['ptName']+'</li>';
                                    }
                                    treeHtml+='</ul></li>';
                                }else{
                                    treeHtml+='<li class="show_list" id="'+tree[i]['children'][j]['ptId']+'">'+tree[i]['children'][j]['ptName']+'</li>';
                                }

                            }
                            treeHtml+='</ul></li>';

                        }else{
                            treeHtml+='<li class="show_list" id="'+tree[i]['ptId']+'">'+tree[i]['ptName']+'</li>';
                        }
                    }
                    $('#ismenu').html(treeHtml);
                    var listHtml='<tr class="problem-title"><td>问题</td><td>创建时间</td><td>操作</td></tr>';
                    var listData=res.data.list;
                    if(listData['total']>0){
                        for(var i=0;i<listData['list'].length;i++){
                            listHtml+='<tr>';
                            listHtml+='<td>'+listData['list'][i]['hpName']+'</td>';
                            listHtml+='<td>'+listData['list'][i]['createTime']+'</td>';
                            listHtml+='<td><span rel="'+listData['list'][i]['hpId']+'" class="btn-look">查看</span></td>';
                            listHtml+='</tr>';
                        }
                        listHtml+='<tr><td colspan="3">';
                        if(listData['pageNum']>1){
                            listHtml+='<a href="#" typeId="'+nowTypeId+'" rel="'+listData['pageNum']+'" class="prevPage">上一页</a>';
                        }
                        if(listData['pageNum']<listData['pages']){
                            listHtml+='<a href="#" typeId="'+nowTypeId+'" rel="'+listData['pageNum']+'" class="nextPage">下一页</a>';
                        }


                        listHtml+='</td></tr>';
                    }

                    $('.problem-box table').html(listHtml);
                    layer.closeAll();
                    // $('.information-inquiry').hide();
                    // $('.classified-service').show();
                }

            }
        });
    }

    $("#ismenu")
        .on("click",'li',function(e){
            // $(this).find('.child-menu').show(500);
            e.stopPropagation();
            $(this).children('.child-menu').slideToggle("slow");
        })
        .on('click','.show_list',function(){
            showList(nowPage,$(this).attr('id'))
        });
    var noRepeatSubmit=0;
    $('.btn-edit').click(function(){
        if($(this).hasClass('saveAnswer') && noRepeatSubmit==0){
            noRepeatSubmit=1;
            var obj=$(this);
            var name=$('.question').html();
            var hpId=$('input[name=help_answer_id]').val();
            var suggest= ue.getPlainTxt();
            $.ajax({
                url:'<?php echo $this->createUrl('help/add') ?>',
                method:'POST',
                dataType:'json',
                data:{'name':name,'id':hpId,'suggest':suggest},
                success:function(res){
                    if(res.status==1){
                        layer.msg('提交成功');
                        obj.html('帮助编辑');
                        $('#look-answer_val').attr('readonly',true);
                        $('.btn-edit').removeClass('saveAnswer');

                    }
                }
            });
        }else{
            ue.setEnabled();
            $(this).addClass('saveAnswer');
            $(this).html('保存编辑');
            noRepeatSubmit=0;
        }


    });
    $('.problem-box')
        .on('click','.btn-look',function(){
            id=$(this).attr('rel');
            console.log(ue);
            $('.look-box-con').find('.alike').html('');
            $('.look-box-con').find('.question').html('');
            $('.look-box-con').find('.type').html('');
            $.ajax({
                url:'<?php echo $this->createUrl('help/view') ?>',
                method:'POST',
                dataType:'json',
                data:{'id':id},
                success:function(res){
                    if(res.status==1){
                        $('.look-box-con').find('.question').html(res.data.hpName);
                        var relProblem='';
                        if(res.data.relProblem.length>0){
                            for(var i=0;i<res.data.relProblem.length;i++){
                                relProblem=relProblem+(i+1)+'、'+res.data.relProblem[i]['hpName']+'; '
                            }
                        }
                        if(relProblem!=''){
                            $('.look-box-con').find('.alike').html('关联问题：'+relProblem);
                        }
                        $('.look-box-con').find('.type').html('所属分类：'+res.data.typeName);
                        $('input[name=help_answer_id]').val(id);

                        setTimeout(function(){ ue.setContent(res.data.hpAnswer);ue.setDisabled(); }, 100);  //奇怪的赋值方法
                        layer.open({
                            type: 1,
                            area: ['760px', '790px'],
                            shadeClose: false, //点击遮罩关闭
                            content: $(".look-box"),
                            cancel: function(index, layero){
                                //console.log(guanbi)
                                $('.btn-edit').html('帮助编辑');
                                $('#look-answer_val').attr('readonly',true);
                                $('.btn-edit').removeClass('saveAnswer');
                            }
                        });
                    }
                }

            });

        })
        .on('click','.nextPage',function(){
            var pageNum=parseInt($(this).attr('rel'))+1;
            var typeId=$(this).attr('typeId');
            nowPage=pageNum;
            showList(pageNum,typeId);
        })
        .on('click','.prevPage',function(){
            var pageNum=parseInt($(this).attr('rel'))-1;
            var typeId=$(this).attr('typeId');
            nowPage=pageNum;
            showList(pageNum,typeId);
        });

    function showList(pageNum,typeId){
        console.log(typeId);
        $.ajax({
            url:'<?php echo $this->createUrl('help/question') ?>',
            method:'POST',
            dataType:'json',
            data:{'pnum':pageNum,'typeId':typeId},
            success:function (res) {
                if(res.status==1){
                    var listHtml='<tr class="problem-title"><td>问题</td><td>创建时间</td><td>操作</td></tr>';
                    var listData=res.data;
                    if(listData['total']>0){
                        for(var i=0;i<listData['list'].length;i++){
                            listHtml+='<tr>';
                            listHtml+='<td>'+listData['list'][i]['hpName']+'</td>';
                            listHtml+='<td>'+listData['list'][i]['createTime']+'</td>';
                            listHtml+='<td><span rel="'+listData['list'][i]['hpId']+'" class="btn-look">查看</span></td>';
                            listHtml+='</tr>';
                        }
                        listHtml+='<tr><td colspan="3">';
                        if(listData['pageNum']>1){
                            listHtml+='<a href="#" typeId="'+nowTypeId+'" rel="'+listData['pageNum']+'" class="prevPage">上一页</a>';
                        }
                        if(listData['pageNum']<listData['pages']){
                            listHtml+='<a href="#" typeId="'+nowTypeId+'" rel="'+listData['pageNum']+'" class="nextPage">下一页</a>';
                        }


                        listHtml+='</td></tr>';
                    }
                    $('.problem-box table').html(listHtml);
                }
            }
        });
    }
</script>