zhoufan
/
XYS12345_UI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../js/huayi.load.js"></script>
    <title>黑白名单</title>
    <style>
        .toolBar {
            padding: 15px 0;
            border-bottom: 1px solid #ccc;
        }

            .toolBar select {
                width: 150px;
                padding: 2px 2px 2px 10px;
                height: 32px;
                border: 1px solid rgb(204, 204, 204);
            }

        .tool_downs {
            display: flex;
            justify-content: center;
        }

            .tool_downs span {
                display: block;
                width: 100%;
                height: 100%;
                text-align: center;
            }

            .tool_downs a {
                display: block;
                list-style: none;
                float: left;
                padding-left: 10px;
            }
    </style>
    <script>
        $(document).ready(function () {
            initTable();

            $(".searchGo").click(function () {
                initTable();
            });

            $(".addBtn").click(function () {
                layer.open({
                    type: 2,
                    content: "./BlackWhiteAdd.html", //iframe的url，no代表不显示滚动条
                    title: "黑白名单",
                    area: ["500px", "600px"], //宽高
                });
            });
        });

        function initTable() {
            //先销毁表格
            $("#tableList").bootstrapTable("destroy");
            //初始化表格,动态从服务器加载数据
            $("#tableList").bootstrapTable({
                method: "post", //使用get请求到服务器获取数据
                url: huayi.config.callcenter_url + "SystemApi/GetBlackWhiteList", //获取数据的Servlet地址
                contentType: "application/x-www-form-urlencoded",
                striped: true, //表格显示条纹
                pagination: true, //启动分页
                pageSize: 10, //每页显示的记录数
                pageNumber: 1, //当前第几页
                pageList: [10, 20, 50, 100], //记录数可选列表
                search: false, //是否启用查询
                showColumns: false, //显示下拉框勾选要显示的列
                showRefresh: false, //显示刷新按钮
                sidePagination: "server", //表示服务端请求
                //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                //设置为limit可以获取limit, offset, search, sort, order
                queryParamsType: "undefined",
                queryParams: function queryParams(params) {
                    //设置查询参数
                    var param = {
                        currentPage: params.pageNumber,
                        pageSize: params.pageSize,
                        mobile: $("#keyvalue").val(),
                        type: $("#type").val()
                    };
                    return param;
                },
                onLoadSuccess: function () {
                    //加载成功时执行
                    //layer.msg("加载成功");
                },
                onLoadError: function () {
                    //加载失败时执行
                    //layer.msg("加载数据失败", { time: 1500, icon: 2 });
                },
            });
        }

        function operation(val, row) {
            return (
                '<div class="tool_downs">' +
                '<a href="javascript:;" class="aBtn" authorize="yes" onclick="editBtn(' +
                row.mobile +
                ')" title="编辑">编辑</a>' +
                '<a href="javascript:;" class="aBtn" authorize="yes" onclick="deleteBtn(' +
                row.mobile +
                ')" title="删除">删除</a>' +
                "</div>"
            );
        }

        function typename(val) {
            var name = '未知';
            switch (val + '') {
                case '1': name = '黑名单'; break;
                case '2': name = '白名单'; break;
            }
            return name;
        }


        function editBtn(id) {
            layer.open({
                type: 2,
                content: "./BlackWhiteAdd.html?id=" + id, //iframe的url，no代表不显示滚动条
                title: "黑白名单",
                area: ["500px", "600px"], //宽高
            });
        }

        function deleteBtn(id) {
            layer.confirm('确定删除吗？', {
                btn: ['是', '否'] //按钮
            }, function () {
                $.getJSON(huayi.config.callcenter_url + "SystemApi/DeleteBlackWhite", {
                    mobile: id
                }, function (result) {
                    if (result.state.toLowerCase() == "success") {
                        layer.msg("删除成功");
                        initTable();
                    }
                })
            });
        }
    </script>
</head>

<body class="gray-bg">
    <div class="container-fluid wrapper-content animated fadeInRight">
        <div class="toolBar clearfix">
            <div class="toolRight">
                <span>
                    手机号：
                    <input id="keyvalue" type="text" class="">

                    类型：
                    <select id="type" >
                        <option value="0">全部</option>
                        <option value="1">黑名单</option>
                        <option value="2">白名单</option>
                    </select>
                </span>
                <button class="btns searchGo">搜索</button>
                <button class="btns addBtn">添加</button>
            </div>
        </div>
        <div class="treeTable clearfix">

            <div class="tableCon col-md-12">
                <table id="tableList" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
                    <thead>
                        <tr>
                            <th data-field="mobile" data-align="center">手机号</th>
                            <th data-field="type" data-formatter="typename" data-align="center">类型</th>
                            <th data-field="startTime" data-align="center">开始时间</th>
                            <th data-field="endTime" data-align="center">结束时间</th>
                            <th data-field="remark" data-align="center">描述</th>
                            <th data-align="center" data-formatter="operation" data-width="150">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>