xiaoben-as2-php/protected/views/feedback/index.php

<style>
    .fr{
        float: right;
    }
    .filter {
        font-size: 0;
        margin-top:10px;
        width: 96%;
        margin:10px auto 0 auto;
    }

    .filter * {
        font-size: 14px;

    }

    .filter label {
        font-weight: bold;
    }

    .filter select {
        height: 36px;
        font-size: 14px;
        margin-left: 10px;
    }

    .filter select:nth-child(2) {
        width: 82px;
    }

    .filter select:nth-child(3) {
        width: 110px;
    }

    .filter button {
        border: none;
        background: #2977ff;
        width: 111px;
        height: 36px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin-left: 10px;
    }
    .showClassInfo{
        cursor: pointer;
    }
    .list table {
        width: 96%;
        margin-top: 20px;
        text-align: center;
        border-right: 1px solid #ccc;
        margin:20px auto 0 auto;
    }

    .list table th {
        background: #f2f2f2;
        border: 1px solid #ccc;
        border-right: none;
        padding: 12px 15px;
    }

    .list table td {
        border: 1px solid #ccc;
        border-right: none;
        border-top: none;
        padding: 12px 15px;
        font-weight: bold;
    }

    .list table tr:nth-child(even) {
        background: #f2f2f2;
    }

    .list .tl {
        text-align: left;
    }

    .list .red {
        color: #cc3400;
    }

    .list .green {
        color: #2977ff;
    }

    .icon {
        display: inline-block;
        background: center/contain no-repeat;
        width: 25px;
        height: 25px;
        cursor: pointer;
        vertical-align: middle;
    }

    .icon-edit {
        background-image: url("/images/edit.png")
    }

    .icon-eye-close {
        background-image: url("/images/eye_close.png")
    }

    .icon-download {
        background-image: url("/images/download_cylet.png")
    }

    .icon-xunhuan {
        background-image: url("/images/xunhuan.png")
    }
    .icon-add {
        background-image: url("/images/add.png");
        width: 20px;
        height: 20px;
    }

    .list .subjects {
        line-height: 22px;
        font-size: 0;
    }
    .list .icon{
        margin: 0 4px;
    }
    .list .subjects span {
        display: inline-block;
        font-size: 16px;
        word-break: keep-all;
        margin: 0 4px;
    }

    .confirmbox {
        background: #fff;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding: 40px 40px 30px;
        text-align: center;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
    }

    .confirmbox-mask {
        background: rgba(0, 0, 0, .7);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 99;
        position: fixed;
    }
    button {
        border: none;
        background: #2977ff;
        width: 111px;
        height: 36px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;
        outline: none;
        cursor: pointer;
    }

    button.save {
        display: block;
        margin: 40px auto;
    }
    .confirmbox .confirmbox-btns {
        margin-top: 40px;
    }
    .icon-close{
        background-image: url("/images/close.png")
    }
    .class-modal {
        width: 700px;
        min-height: 400px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }

    .class-modal-head {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .class-modal-body {
        margin-top: 20px;
        max-height: 300px;
        overflow: auto;
    }

    .class-modal-body .classes {
        margin-bottom: 10px;

    }

    .class-modal-body .classes > div {
        display: inline-block;
        max-width: 640px;
        vertical-align: top;
    }

    .class-modal-body .classes a {
        text-decoration: none;
        display: inline-block;
        margin: 0 5px 5px;
        color: #136bfb;
        font-size: 14px;
    }

    .class-modal-body .classes a.active {
        color: #fc091b
    }
    .class-modal .icon-close{
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .c-red {
        color: #CC3300
    }
    .subject-name {
        display: inline-block;
        padding: 3px 8px;
        background: #ff9900;
        border-radius: 3px;
        color: #ffffff;
        font-size: 12px;
    }
    /* menu */
    .banner-menu{
        /*font-size: 0;*/
    }
    .banner-menu .menu-msg{
        display: inline-block;
        font-size: 14px;
        padding: 4px 22px;
        cursor: pointer;
    }
    .banner-menu .menu-msg.selected{
        border-bottom: 3px solid #2977ff;
    }
    .banner-menu a{
        color:#000;
    }
    .armor_search{
        border:1px solid #ccc;
        padding:5px;
    }
    .armor_search select{
        height:28px;
        width:150px;
    }
    .armor_search button{
        height:28px;
    }
    .armor_search input{
        padding:3px;
    }
    .armor_search label{
        margin:0 10px;
    }
    /* 弹层样式 */
    .need-pop{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    .need-pop-con{
        background: #fff;
        width: 510px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .need-pop-top{
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        padding: 6px 12px;
    }
    .npt-close{
        font-size: 30px;
        cursor: pointer;
        line-height: 28px;
    }
    .need-pop-list{
        margin: 10px 0;
        line-height: 30px;
    }
    .need-pop-menu{
        width: 110px;
        text-align: right;
        margin-right: 4px;
    }
    .need-pop-menu b{
        color: red;
        font-weight: bold;
    }
    .gray-bg{
        background: #F0F0F0;
    }
    .need-pop-detail{
        width: 370px;
        line-height: 26px;
    }
    .need-pop-detail input,.need-pop-detail textarea{
        border: 1px solid #ccc;
        width: 100%;
    }
    .need-pop-detail input{
        height: 26px;
    }
    .prev-class{
        position: relative;
    }
    .inp-text {
        position: relative;
        text-indent: 10px;
        width: 100%;
        height: 100%;
        line-height: 30px;
        border: 1px solid #D8D8D8;
        cursor: pointer;
    }
    .select-con {
        display: none;
        border: 1px solid #ccc;
        border-top: none;
        position: absolute;
        background: #fff;
        z-index: 10;
        width: 100%;
        text-indent: 10px;
        line-height: 28px;
    }
    .select-con li {
        list-style: none;
    }
    .select-con li:hover{background: #2977ff;color: #fff;cursor: pointer;}
    .inp-text:after {
        content: '';
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #676767;
        position: absolute;
        right: 10px;
        bottom: 12px;
    }

    .list-half{
        width: 49%;
    }
    .list-half .need-pop-detail{
        width: 120px;
    }
    .need-pop-sub{
        display: block;
        margin: 20px auto 30px;
        color: #fff;
        background: #2977ff;
        padding: 2px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .gray-font{
        color: rgb(153, 153, 153);
    }
    .need-warn-con{
        font-size: 12px;
        padding-left: 20px;
    }
    .add-file{
        cursor: pointer;
        font-size: 14px;
    }
    .vtm{
        vertical-align: middle;
    }


    /* 开发计划 */

    .search-propose-man{
        background: #2977ff;
        color: #fff;
        width: 80px;
        height: 24px;
        text-align: center;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        margin-right: 10px;
    }


</style>
<?php
    if(isset($query_nav)){
        $query_nav='&'.$query_nav;
    }else{
        $query_nav='';
    }
?>
<script src="/js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" href="/css/jquery.datetimepicker.css" />
<div class="filter">
    <div>
        <ul class="banner-menu">
            <li class="menu-msg <?php if(isset($pageType) && $pageType==1){ echo 'selected';}?>" ><a href="?pagetype=1">新需求</a></li>
            <li class="menu-msg <?php if(isset($pageType) && $pageType==2){ echo 'selected';}?>"><a href="?pagetype=2">进行中</a></li>
            <li class="menu-msg <?php if(isset($pageType) && $pageType==3){ echo 'selected';}?>"><a href="?pagetype=3">排队中</a></li>
            <li class="menu-msg <?php if(isset($pageType) && $pageType==4){ echo 'selected';}?>"><a href="?pagetype=4">不采纳</a></li>
            <li class="menu-msg <?php if(isset($pageType) && $pageType==5){ echo 'selected';}?>"><a href="?pagetype=5">已完成</a></li>
            <!--<li class="fr "><input type="button" class="search-propose-man" value="开发计划"></li>-->
        </ul>

    </div>

    <div class="armor_search">
        <form action="" method="get" id="armor">
            <label>优先级：</label>
            <select name="priority" id="priority">
                <option value="-1" <?php if(isset($param['priority']) && $param['priority']==-1){ echo 'selected';}?> >全部</option>
                <option value="0" <?php if(isset($param['priority']) && $param['priority']==0){ echo 'selected';}?> >普通</option>
                <option value="1" <?php if(isset($param['priority']) && $param['priority']==1){ echo 'selected';}?> >紧急</option>
                <option value="2" <?php if(isset($param['priority']) && $param['priority']==2){ echo 'selected';}?> >非常紧急</option>
            </select>
            <label>类型：</label>
            <select name="type" id="type">
                <option value="-1" <?php if(isset($param['type']) && $param['type']==-1){ echo 'selected';}?> >全部</option>
                <option value="0" <?php if(isset($param['type']) && $param['type']==0){ echo 'selected';}?> >个人建议</option>
                <option value="1" <?php if(isset($param['type']) && $param['type']==1){ echo 'selected';}?> >市场反馈</option>
                <option value="2" <?php if(isset($param['type']) && $param['type']==2){ echo 'selected';}?> >公司决策</option>
            </select>
            <label>状态：</label>
            <select name="readStatus" id="readStatus">
                <option value="-1" <?php if(isset($param['readStatus']) && $param['readStatus']==-1){ echo 'selected';}?>>全部</option>
                <option value="0" <?php if(isset($param['readStatus']) && $param['readStatus']==0){ echo 'selected';}?>>未读</option>
                <option value="1" <?php if(isset($param['readStatus']) && $param['readStatus']==1){ echo 'selected';}?>>已读</option>
            </select>
            <label>提出人：</label>
            <input type="text" name="origin" value="<?php if(isset($param['origin'])){echo $param['origin'];}?>">
            <button type="button" name="search_btn">搜索</button>
            <!--
            <button type="button" class="fr add_exam" style="margin-right:10px;">
                <i class="icon icon-add"></i>
                <span  style="display: inline-block;vertical-align: middle">提需求</span>
            </button>
            -->
        </form>
    </div>
</div>
<div class="list">
    <table cellspacing="0" cellpadding="0" >
        <thead>
            <tr>
                <th >序号</th>
                <th >需求标题</th>
                <th >提出人</th>
                <th >类型</th>
                <th width="12%">优先级</th>
                <th>提出日期</th>
                <th >期待上线时间</th>
                <th >点赞数</th>
                <th width="12%">状态</th>
            </tr>
            </thead>
            <tbody>
            <?php
            if(isset($list)){
                $i=1;
                foreach ($list as $item){
            ?>
                    <tr>
                        <td><?php echo $i;?></td>
                        <td><a href="<?php echo $this->createUrl('feedback/reply?id='.$item['id'].'&status=0')?>"><?php echo $item['title'];?></a></td>
                        <td><?php echo $item['origin'];?></td>
                        <td>
                        <?php
                        if($item['type']===0){
                            echo '个人建议';
                        }elseif($item['type']==1){
                            echo '市场反馈';
                        }elseif($item['type']==2){
                            echo '公司决策';
                        }

                        ?>
                        </td>
                        <td>
                        <?php
                            if($item['priority']==0){
                                echo '普通';
                            }elseif($item['priority']==1){
                                echo '紧急';
                            }elseif($item['priority']==2){
                                echo '非常紧急';
                            }
                        ?>
                        </td>
                        <td><?php if($item['createTime']) echo date('Y/m/d',strtotime($item['createTime']));?></td>
                        <td><?php if($item['releaseTime']) echo date('Y/m/d',strtotime($item['releaseTime']));?></td>
                        <td><?php echo $item['likesNum'];?></td>
                        <td><?php if($item['readStatus']==1){ echo '已读';}else{echo '未读';};?></td>
                    </tr>
            <?php
                    $i++;
                }
            }
        ?>
        <tr>
            <td colspan="12" class="page">
                <?php
                if(isset($pageTotal) && $pageTotal>1){
                $StartPage=$page-5;
                $EndPage=$page+5;
                if($StartPage<1){
                    $StartPage=1;
                }
                if($EndPage>$pageTotal){
                    $EndPage=$pageTotal;
                }
                ?>
                <div class="row" style="padding-top:10px;">
                    <div class="col-xs-7">
                        &nbsp;
                    </div>
                    <div class="col-xs-5" style="font-size: 16px">
                        <div class="dataTables_paginate paging_simple_numbers" style="vertical-align:sub;">
                            <ul id="yw0" class="yiiPager">
                                <?php
                                if(isset($query_page)){
                                    $query_page='&'.$query_page;
                                }else{
                                    $query_page='';
                                }
                                if($page>1){
                                    echo '<li class="previous"><a href="'.$this->createUrl('feedback/index').'?page='.($page-1).$query_page.'">上一页</a></li>';
                                }
                                for($i=$StartPage;$i<=$EndPage;$i++){
                                    $url=$this->createUrl('feedback/index')."?page=".$i.$query_page;
                                    if($page==$i){
                                        echo '<li class="page selected"><a href="#">'.$i.'</a></li>';
                                    }else{
                                        echo '<li class="page"><a href="'.$url.'">'.$i.'</a></li>';
                                    }
                                }
                                if($page<$pageTotal){
                                    echo '<li class="next"><a href="'.$this->createUrl('feedback/index').'?page='.($page+1).$query_page.'">下一页</a></li>';
                                }
                                }
                                ?>
            </td>
        </tr>
        </tbody>
    </table>


</div>

<!--新需求弹层-->
<div class="need-pop " style="display:none">
    <form name="new_armor" id="uploadForm" method="post" enctype="multipart/form-data" action="">
    <div class="need-pop-con">
        <div class="need-pop-top clearfix">
            <div class="npt-title fl">提需求</div>
            <div class="npt-close fr">×</div>
        </div>
        <div class="need-pop-form">
            <div class="clearfix need-pop-list">
                <div class="fl need-pop-menu"><b>*</b>需求标题：</div>
                <div class="fl need-pop-detail">
                    <input type="text" name="title" class="gray-bg">
                </div>
            </div>
            <div class="clearfix need-pop-list">
                <div class="clearfix fl list-half">
                    <div class="fl need-pop-menu"><b>*</b>类型：</div>
                    <div class="fl need-pop-detail">
                        <div class="prev-class">
                            <select name="types" id="type_add">
                                <option value="0">个人建议</option>
                                <option value="1">市场反馈</option>
                                <option value="2">公司决策</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="clearfix fl list-half">
                    <div class="fl need-pop-menu"><b>*</b>优先级：</div>
                    <div class="fl need-pop-detail">
                        <div class="prev-class">
                            <select name="priority" id="priority_add">
                                <option value="0">普通</option>
                                <option value="1">紧急</option>
                                <option value="2">非常紧急</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix need-pop-list">
                <div class="fl need-pop-menu"><b>*</b>问题：</div>
                <div class="fl need-pop-detail">
                    <textarea name="question" id="question" cols="30" rows="5" class="gray-bg" placeholder=""></textarea>
                </div>
            </div>
            <div class="clearfix need-pop-list">
                <div class="fl need-pop-menu"><b>*</b>建议：</div>
                <div class="fl need-pop-detail">
                    <textarea name="target" id="target" cols="30" rows="5" class="gray-bg" placeholder=""></textarea>
                </div>
            </div>
            <div class="clearfix need-pop-list">
                <div class="fl need-pop-menu"><b>*</b>期待上线时间：</div>
                <div class="fl need-pop-detail">
                    <input type="text" class="gray-bg datetimepicker8" readonly name="releaseTime" placeholder="yyyy/mm/dd">
                </div>
            </div>
            <div class="need-warn-con">
                <a class="add-file vtm"><span class="gray-font"><img src="/images/upload.jpg" class="upload-icon" alt=""></span>添加附件</a><span class="gray-font vtm">（如果三言两语表达不了心中的想法，可以整理成文档发给我们，感谢）</span>
                <div id="imgPreview"></div>
                <input type="file" name="uploadfile" id="fileImg" style="display:none">
                <input type="hidden" name="filePath" value="">
            </div>
        </div>
        <input type="button" value="提交" class="need-pop-sub" id="save_armor_btn">
    </form>
    </div>
</div>
<script>
    $('.datetimepicker8').datetimepicker({
        onGenerate:function( ct ){

            $(this).find('.xdsoft_date').toggleClass('xdsoft_disabled');
            $(this).find('.xdsoft_today').removeClass('xdsoft_disabled');
        },
        format:'Y-m-d',
        formatDate:'Y-m-d',
        //minDate:'-1970/01/2',
        maxDate:'+1970/01/2',
        todayBtn : true,
        minDate: '-<?php echo date('Y-m-d', strtotime('Yesterday')); ?>',
        timepicker:false
    });
    $('button[name="search_btn"]').click(function() {
        $('#armor').submit();
    });
    $('.npt-close').click(function () {
        $('.need-pop').hide();
    });

    $('.add_exam').click(function(){
        showNeedPop();
    });

    function showNeedPop(){
        $('.need-pop').show();
    }
    // 下拉列表模拟
    $('.inp-text').click(function(){
        if ($(this).next().is(':hidden')){
            $(this).next().show();
        } else {
            $(this).next().hide();
        }
    });
    // 点下拉列表选项
    $('.select-con li').click(function(){
        $(this).closest('.select-con').hide();
        for (var i = 0; i < $('.hid-class-msg').length; i++) {
            if ($(this).attr("id") == $('.hid-class-msg').eq(i).val()){
                $(this).closest('.prev-class').find('.inp-text').text('选择要转移班级');
                return;
            }
        }
        $(this).closest('.prev-class').find('.inp-text').text($(this).text());
        $(this).closest('.prev-class').find('.hid-class-msg').val($(this).attr("id"));
    });
    // 点击空白处下拉列表消失
    $(document).click(function(e){
        var targetNode =  $(e.target).closest(".inp-text");
        if (targetNode.length>0){
            return;
        }else{
            $(".select-con").hide();
        }
    });
    $('#save_armor_btn').click(function(){
        var title=$('input[name=title]').val();
        var type=$('#type_add').val();
        var priority=$('#priority_add').val();
        var question=$('#question').val();
        var target=$('#target').val();
        var releaseTime=$('input[name=releaseTime]').val();
        var urlList=$('input[name=filePath]').val();

        if(title==''){
            layer.msg('需求标题不能为空');
            return false;
        }
        if(type==''){
            layer.msg('请选择需求类型');
            return false;
        }
        if(priority==''){
            layer.msg('请选择需求紧急程度');
            return false;
        }
        if(question==''){
            layer.msg('需求问题内容不能为空');
            return false;
        }
        if(target==''){
            layer.msg('需求建议内容不能为空');
            return false;
        }
        if(releaseTime==''){
            layer.msg('请填写期待上线时间');
            return false;
        }
        $.ajax({
            url:'<?php echo $this->createUrl('feedback/add')?>',
            type:'POST',
            dataType:'json',
            data:{'title':title,'type':type,'priority':priority,'question':question,'target':target,'releaseTime':releaseTime,'urlList':urlList},
            success:function(res){
                if(res.status==1){
                    layer.msg('新需求发布成功');
                    location.reload();
                    /*
                    $('.need-pop').hide();
                    $('input[name=title]').val('');
                    $('#question').val('');
                    $('#target').val('');
                    $('input[name=releaseTime]').val('');
                    $('input[name=filePath]').val('');
                    */
                }else{
                    layer.msg(res.msg);
                }
            }
        });
    });


    // 添加图片
    $("#fileImg").on("change", function () {

        var formData = new FormData();
        formData.append('uploadFile', document.getElementById('fileImg').files[0]);
        var basic = "<?php echo $basic;?>";
        if(document.getElementById('fileImg').files[0]==undefined){
            return false;
        }
        $.ajax({
            url: "<?php echo $uploadUrl;?>",
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function (req) {
                req.setRequestHeader("Authorization", basic);
            },
            success: function (data) {
                console.log(data);
                if (data.errCode == '00') {
                    $('input[name=filePath]').val(data.data.url);
                    $('#imgPreview').html('上传成功');
                } else {
                    layer.msg(data.errMsg);
                }
            }
        });
    });
    $('.add-file').click(function(){
        $('#fileImg').click();
    });
    $('.search-propose-man').click(function(){
        window.location.href='<?php echo $this->createUrl('feedback/plan')?>';
    });
</script>