kylx365
/
miaoguo_system_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分数线纠错管理</title>
    <link rel="stylesheet" href="../mg/common.css">
    <style type="text/css">

        .container {
            margin: 0 10px 0 10px;
            font-size: 18px;
            color:#1e1e1e;

        }
        .table{
            width:100%;
            margin-top: 10px;
        }

        .list{
            width:100%;
            border-bottom: 1px solid #999;
        }

        .list1{
            color:#999;
            background-color: #eee;
        }

        .list2{
            text-decoration: line-through;
            background-color: #ddd;
            color:#bbb;
        }

        .itemHeader{
            background-color: #999;
            color:#fff;
            font-weight: bold;
            text-align: center;
        }

        .tdID{
            min-height:40px;
        }

        .item0{
            width:60px;
            line-height: 40px;
            padding-left: 20px;
        }

        .item1{
            width:200px;
            line-height: 40px;
        }

        .item2{
            width:120px;
            line-height: 40px;
        }

        .item3{
            width:220px;
            line-height: 40px;
            justify-content: flex-start;
        }

        .item4{
            min-width: 600px;
            flex:1;
            justify-content: flex-start;
        }
        .item4H{
            line-height: 40px;
        }


        .content{
            margin: 5px 10px;
            text-align: left;
        }

        .img{
            width:24.5%;
            flex:1;
            margin: 10px 0;
        }
        .mainNull{
            width:100%;
            text-align: center;
            margin-top: 100px;
            font-size: 24px;
            color:#aaa;
        }

        .btn{
            margin-right: 5px;
        }

        .panelFooter{
            font-size:16px;
            color:#999;
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }

    </style>
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm;
        $(document).ready(function () {
            vm = new Vue({
                el: '#app',
                data: {
                    ListMain:[],
                },
                methods: {
                    getList: function (event) {
                        $.get("/api/GetMPSFeedbackList", function (data) {
                            var list=data.result;
                            vm.ListMain = list;
                        });
                    },
                    showImage:function (event) {
                        var id=event.currentTarget.id.substr(11);
                        $("#panelImage"+id).show();
                        $("#tdImageShow"+id).hide();
                        $("#tdImageHide"+id).show();
                    },
                    hideImage:function (event) {
                        var id=event.currentTarget.id.substr(11);
                        $("#panelImage"+id).hide();
                        $("#tdImageShow"+id).show();
                        $("#tdImageHide"+id).hide();
                    },
                    UpdateFeedback: function (event) {
                        var id=event.currentTarget.dataset.id;
                        var flag=event.currentTarget.dataset.flag;
                        $.get("/api/UpdateMPSFeedback?ID="+id+"&Flag="+flag, function (data) {
                            if (flag==1) {
                                $("#tr_" + id).css("background-color", "#eee");
                                $("#tr_"+id).css("color","#999");
                                $("#tr_"+id).css("text-decoration","none");
                                $("#btnOK"+id).hide();
                                $("#btnCancel"+id).hide();
                                $("#btnReturn"+id).show();
                            }
                            else if (flag==2){
                                $("#tr_"+id).css("background-color","#ddd");
                                $("#tr_"+id).css("color","#bbb");
                                $("#tr_"+id).css("text-decoration","line-through");
                                $("#btnOK"+id).hide();
                                $("#btnCancel"+id).hide();
                                $("#btnReturn"+id).show();
                            }
                            else if (flag==0) {
                                $("#tr_" + id).css("background-color", "#fff");
                                $("#tr_"+id).css("color","#1e1e1e");
                                $("#tr_"+id).css("text-decoration","none");
                                $("#btnOK"+id).show();
                                $("#btnCancel"+id).show();
                                $("#btnReturn"+id).hide();
                            }

                        });
                    },
                }
            });

            vm.getList();

        });
    </script>
</head>
<body class="container FlexColumn">
<div id="app" >
    <div class="table">
        <div class="mainNull" v-if="ListMain.length==0">无数据</div>
        <div class="mainHeight FlexColumn" v-if="ListMain.length>0">
            <div class="list FlexRow">
                <div class="itemHeader item0">编号</div>
                <div class="itemHeader item1">时间</div>
                <div class="itemHeader item0">用户</div>
                <div class="itemHeader item1">类型</div>
                <div class="itemHeader item3">联系</div>
                <div class="itemHeader item4 item4H">内容</div>
                <div class="itemHeader item0">图片</div>
                <div class="itemHeader item2">状态</div>
            </div>
            <template v-for="(item, index) in ListMain">
                <div :id=" 'tr_'+item.ID " :class="'list list'+item.Flag +' FlexRow'" >
                    <div class="tdID item0 item2Center" :id=" 'tdID_'+index ">{{item.ID}}</div>
                    <div class="tdID item1">{{item.CreateTime}}</div>
                    <div class="tdID item0">{{item.UserID}}</div>
                    <div class="tdID item1">{{item.FeedbackType}}</div>
                    <div class="tdID item3">
                        <div class="content">{{item.ContactTa}}</div>
                    </div>

                    <div class="tdID item4 FlexRow">
                        <div class="content">{{item.Content}}</div>
                    </div>
                    <div class="tdID item0">
                        <a href="#" @click="showImage" :id=" 'tdImageShow'+item.ID " v-if=" item.ImageUrl1 || item.ImageUrl2  || item.ImageUrl3  || item.ImageUrl4 ">查看</a>
                        <a href="#" @click="hideImage" :id=" 'tdImageHide'+item.ID " style="display: none;" v-if=" item.ImageUrl1 || item.ImageUrl2  || item.ImageUrl3  || item.ImageUrl4 ">收起</a>
                    </div>
                    <div class="tdID item2 FlexRow">
                        <button :id="'btnOK'+item.ID " class="btn" :hidden="item.Flag!=0" :data-id="item.ID" data-flag="1" @click="UpdateFeedback">确认</button>
                        <button :id="'btnCancel'+item.ID" :hidden="item.Flag!=0" :data-id="item.ID" data-flag="2" @click="UpdateFeedback">忽略</button>
                        <button :id="'btnReturn'+item.ID" :hidden="item.Flag==0" :data-id="item.ID" data-flag="0" @click="UpdateFeedback">恢复</button>
                    </div>
                </div>
                <div :id=" 'panelImage'+item.ID " class="list" style="display: none;">
                    <div class="tdImage"  >
                        <img class="img" :src="item.ImageUrl1" />
                        <img class="img" :src="item.ImageUrl2" />
                        <img class="img" :src="item.ImageUrl3" />
                        <img class="img" :src="item.ImageUrl4" />
                    </div>
                </div>
            </template>
            </div>
        </div>

    </div>
</div>
<div class="panelFooter">说明：“确认”表示建议或纠错已经完成。“忽略”表示本条没有价值。“恢复”表示可以重新确认。本列表只显示最近200条。</div>

</body>
</html>