locky
/
AnsjerUIDManage


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/admin.js"></script>
    <script type="text/javascript" src="./js/jquery_cookie_min.js"></script>
    <script type="text/javascript" src="./js/jqhttpsdk.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">UID管理</a>
        <a>
          <cite>管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="开始日" name="start" id="start">
            <input class="layui-input" placeholder="截止日" name="end" id="end">
            <div class="layui-input-inline">
                <label class="layui-inline">
                    <select lay-filter="is_use_select" id="status_use_id">
                        <option value="">状态</option>
                        <option value="0">未占用</option>
                        <option value="1">待占用</option>
                        <option value="2">已占用</option>
                    </select>

                </label>
            </div>

            <div class="layui-input-inline">
                <label class="layui-inline">
                    <select lay-filter="is_area_select" id="status_area_id">
                        <option value="">地区</option>
                        <option value="0">国内</option>
                        <option value="1">国外</option>
                    </select>

                </label>
            </div>

            <div class="layui-inline x-right">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="请输入搜索的uid"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger delAll_btn"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn layui-btn-normal history_btn">转为历史</button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','./order-add.html')" style="display: none;"><i class="layui-icon"></i>添加
        </button>
        <a class="layui-btn layui-btn-normal distribute_btn" style="display: none;">开启分发</a>
        <button type="button" class="layui-btn" id="imuidlist" style="display: none;">
            <i class="layui-icon">&#xe67c;</i>导入
        </button>
    </xblock>
    <table id="uidlisttab" lay-filter="uidlisttab"></table>
</div>
<script>
    function print(data) {
        console.log(data)
    }

    layui.use(['table', 'upload', 'layer', 'form', 'laydate'], function () {
        var table = layui.table;
        var $ = jQuery = layui.$;
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
            , done: function (value, date, endDate) {
                // console.log(Date.parse(value))
                // print(Date.parse($('#start').val())/1000)
                var starttime = $('#start').val()
                var endtime = $('#end').val()
                if (starttime) {
                    starttime = Date.parse(starttime) / 1000
                } else {
                    starttime = ''
                }
                if (endtime) {
                    endtime = Date.parse(endtime) / 1000
                } else {
                    endtime = ''
                }
                searchTable({
                    // is_use: $('#status_use_id').val(),
                    // uid: $(".searchVal").val(),
                    starttime: starttime,
                    endtime: endtime
                })
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
            , done: function (value, date, endDate) {
                var starttime = $('#start').val()
                var endtime = $('#end').val()
                if (starttime) {
                    starttime = Date.parse(starttime) / 1000
                } else {
                    starttime = ''
                }
                if (endtime) {
                    endtime = Date.parse(endtime) / 1000
                } else {
                    endtime = ''
                }
                searchTable({
                    // is_use: $('#status_use_id').val(),
                    // uid: $(".searchVal").val(),
                    starttime: starttime,
                    endtime: endtime
                })
            }
        });
        //第一个实例
        var tableIns = table.render({
            elem: '#uidlisttab',
            //height: 600,
            height: 'full',
            url: http_ip_port + '/uid/list', //数据接口
            page: true, //开启分页
            limit: 10,
            cols: [[ //表头
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'uid', title: 'UID', width: 250, sort: true,},
                {field: 'mac', title: 'mac地址', width: 250},
                {field: 'area', title: '地区', width: 80, templet: '#area'},
                {field: 'status', title: '使用状态', width: 100, templet: '#isUse'},
                {field: 'add_time', title: '添加时间', width: 250, sort: true, templet: '#add_time'},
                {field: 'update_time', title: '修改时间', width: 250, templet:'#update_time'},
                {title: '操作', templet: '#ListBar', fixed: "right", align: "center"}
            ]],
            where: {token: $.cookie('access_token')},
            parseData: function (res) {
                console.log(res)
                return {
                    "code": res['code'],
                    "msg": res['msg'],
                    "count": res['res']['count'],
                    "data": res['res']['data'],
                }
            }
        });
        //列表操作
        table.on('tool(uidlisttab)', function (obj) {
            var layEvent = obj.event,
                data = obj.data;
            if (layEvent === 'edit') { //编辑
                var url = './uid-edit.html?uid=' + data.uid + '&mac=' + data.mac + '&status=' + data.status
                    + '&add_time=' + data.add_time + '&update_time=' + data.update_time + '&area=' + data.area;

                x_admin_show('编辑', url);
            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除\r\n' + data.uid + '？', {icon: 3, title: '提示信息'}, function (index) {
                    console.log(data)
                    $.post(http_ip_port + "/uid/delete", {
                        uid: data.uid,  //将需要删除的newsId作为参数传入
                        token: $.cookie('access_token')
                    }, function (data) {
                        console.log(data)
                        tableIns.reload();
                        layer.close(index);
                    })
                });
            } else if (layEvent === 'look') { //预览
                layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问")
            }
        });
        //执行实例
        upload.render({
            elem: '#imuidlist', //绑定元素
            url: http_ip_port + '/uid/register/', //上传接口
            accept: 'file',
            data: {
                token: function () {
                    return $.cookie('access_token')
                }
            },
            done: function (res) {
                console.log(res)
                layer.msg(res['msg'])
                //上传完毕回调
                if (res['code'] == 0) {
                    tableIns.reload();
                }
            }
            , error: function () {
                //请求异常回调
            }
        });

        //批量删除
        $(".delAll_btn").click(function () {
            var checkStatus = table.checkStatus('uidlisttab'),
                data = checkStatus.data,
                uidlist = [];
            if (data.length > 0) {
                for (var i in data) {
                    uidlist.push(data[i].uid);
                }
                console.log(JSON.stringify(uidlist))
                layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
                    console.log(uidlist)
                    $.post(
                        http_ip_port + '/uid/batchDelete',

                        {
                            "uidlist": JSON.stringify(uidlist),
                            'token': $.cookie('access_token')
                        },
                        function (data) {
                            console.log(data);
                            tableIns.reload();
                            layer.close(index);
                        }
                    );
                })
            } else {
                layer.msg("请选择需要删除的数据");
            }
        });


        //批量删除
        $(".history_btn").click(function () {
            layer.confirm('确定把已占用的UID转为“历史UID”？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post(
                        http_ip_port + '/uid/history',

                        {
                            'token': $.cookie('access_token')
                        },
                        function (data) {
                            console.log(data);
                            tableIns.reload();
                            layer.close(index);
                        }
                    );
                });
        });

        function searchTable(where) {
            // where['token'] = $.cookie('access_token')
            print(where);
            table.reload("uidlisttab", {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: where
                // {
                // uid: $(".searchVal").val(),  //搜索的关键字
                // mac: $(".searchVal").val()
                // }
                , parseData: function (res) { //res 即为原始返回的数据
                    print(res);
                    console.log(res);
                    return {
                        "code": res['code'],
                        "msg": res['msg'],
                        "count": res['res']['count'],
                        "data": res['res']['data'],
                    };
                }
            });
        }

        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click", function () {
            if ($(".searchVal").val() != '') {
                searchTable({uid: $(".searchVal").val()});
            } else {
                tableIns.reload();
                layer.msg("请输入搜索的内容");
            }
        });

        // select框bind事件
        form.on('select(is_use_select)', function (data) {
            console.log(data['value']);
            var is_use = data['value'];
            // tableIns.reload()
            searchTable({
                status: is_use,
                uid: $(".searchVal").val(),
            })
        });

        form.on('select(is_area_select)', function (data) {
            console.log(data['value']);
            var area = data['value'];
            // tableIns.reload()
            searchTable({
                area: area,
                uid: $(".searchVal").val(),
            })
        });
        //开启关闭分发
        $(".distribute_btn").on("click", function () {
            var distribute;
            var thisBtn = $(this);
            if ($(".distribute_btn").hasClass('layui-btn-normal')) {
                distribute = false;
            } else if ($(".distribute_btn").hasClass('layui-btn-danger')) {
                distribute = true;
            }
            $.ajax({
                method: "post",
                url: http_ip_port + '/sys/change/',
                contentType: 'application/json',
                data: JSON.stringify({
                    "distribute": distribute,
                    "token": $.cookie('access_token')
                }),
                success: function (data) {
                    console.log(data)
                    data = JSON.parse(data)
                    if (data['code'] == 0) {
                        tableIns.reload();
                        if (data['res']['distribute']) {
                            thisBtn.removeClass('layui-btn-danger')
                            thisBtn.addClass('layui-btn-normal')
                            thisBtn.html('开启分发')
                            layer.msg('开启分发成功');
                        } else {
                            thisBtn.removeClass('layui-btn-normal')
                            thisBtn.addClass('layui-btn-danger')
                            thisBtn.html('关闭分发')
                            layer.msg('关闭分发成功');
                        }
                    } else {
                        layer.msg(data['msg']);
                    }
                },
                error: function (data) {
                    layer.msg(data['msg']);
                }
            });
        });

        //  初始化分发状态按钮
        function IndexSys() {
            /*$.ajax({
                method: "get",
                url: http_ip_port + '/sys/'+'?token='+$.cookie('access_token'),
                dataType: 'json',
                success: function (data) {
                    if (data['code'] == 0) {
                        tableIns.reload();
                        console.log(data)
                        if (data['res']['distribute']) {
                            $(".distribute_btn").removeClass('layui-btn-danger')
                            $(".distribute_btn").addClass('layui-btn-normal')
                            $(".distribute_btn").html('开启分发')
                        } else {
                            $(".distribute_btn").removeClass('layui-btn-normal')
                            $(".distribute_btn").addClass('layui-btn-danger')
                            $(".distribute_btn").html('关闭分发')
                        }
                    } else {
                        layer.msg('失败');
                    }
                }
            });*/
            //tableIns.reload();
        }

        IndexSys();
    });


</script>
<script type="text/html" id="ListBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <!--<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">预览</a>-->
</script>
<script type="text/html" id="isUse">
    {{#  if(d.status == 2){ }}
    <span class="layui-red x-red">已占用</span>
    {{#  } else if(d.status == 1){ }}
    <span class="layui-blue">待占用</span>
    {{#  } else if(d.status == 0) {}}
    <span class="layui-green">未占用</span>
    {{#  }}}
</script>

<script type="text/html" id="area">
    {{#  if(d.area == 0){ }}
    <span class="layui-red ">国内</span>
    {{#  } else if(d.area == 1){ }}
    <span class="layui-blue">国外</span>
    {{#  }}}
</script>


<script type="text/html" id="add_time">
    {{#
    var fun = function formatDate(date) {
    var date = new Date(date);
    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return YY + MM + DD +" "+hh + mm + ss;
    };
    }}
    <span class="layui-green">{{ fun(d.add_time * 1000) }}</span>
</script>

<script type="text/html" id="update_time">
    {{#
    var fun = function formatDate(date) {
    var date = new Date(date);
    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return YY + MM + DD +" "+hh + mm + ss;
    };
    }}
    <span class="layui-green">{{ fun(d.update_time * 1000) }}</span>
</script>
</body>

</html>