tianyunperfect
/
layer_ui_admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!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, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="../../static/css/font.css"/>
    <link rel="stylesheet" href="../../static/css/weadmin.css"/>

</head>


<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
				<a href="javascript:;">首页</a> <a href="javascript:;">日志分析</a>
				<a href="javascript:;"> <cite>字段查询</cite></a>
			</span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
       href="javascript:location.replace(location.href);"
       title="刷新">
        <i class="layui-icon layui-icon-refresh"></i>
        <!-- <i class="layui-icon" style="line-height:30px">&#x1002;</i> -->
    </a>
</div>

<div class="weadmin-body" id="app">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 we-search">
            <div class="layui-inline">
                <input class="layui-input" placeholder="日期范围" name="start" id="dateRange"
                       autocomplete="off"/>
            </div>
            <div class="layui-inline">
                <input type="text" name="username" placeholder="问题" class="layui-input" id="question"/>
            </div>

            <div class="layui-inline">
                <select name="app_key" id="app_key" lay-filter="app_key" lay-search>
                </select>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <a class="layui-btn" id="search"><i class="layui-icon"></i>查询</a>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="weadmin-block">
                <button class="layui-btn layui-btn-danger" onclick="deleteAll()">
                    <i class="layui-icon layui-icon-delete"></i>批量删除
                </button>
                <button class="layui-btn" onclick="WeAdminShow('添加用户','./add.html',600,400)">
                    <i class="layui-icon layui-icon-add-circle-fine"></i>添加
                </button>
                <span class="fr" style="line-height:40px">共有数据：<span id="total">0</span> 条</span>
            </div>
            <!--表格-->
            <table class="layui-hide" id="table" lay-filter="test"></table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">详情</a>
            </script>
        </div>
    </div>
</div>
<script src="../../static/js/axios.min.js"></script>
<script src="../../lib/layui/layui.all.js" charset="utf-8"></script>
<script src="../../static/js/eleDel.js"></script>

<script src="../../config/app.js"></script>

</body>
<script>
    let $ = layui.jquery;
    let table = layui.table;
    let queryData = {
        question: "",
        app_key: "",
        beginDate: "",
        endDate: "",
    }

    function getParam() {
        /**
         * 日期
         */
        let rangeArray = $("#dateRange").val().split(' - ');
        if (rangeArray.length === 2) {
            queryData.beginDate = rangeArray[0];
            queryData.endDate = rangeArray[1];
        } else {
            queryData.beginDate = "1997-01-01";
            queryData.endDate = "2999-01-01";
        }

        queryData.question = $("#question").val();
        return queryData;
    }


    /**
     * 渲染
     */
    layui.laydate.render({
        elem: "#dateRange",
        range: true,
    });

    /**
     *  绑定select和事件
     */
    axios.get(
        app.baseUrl + "/api/log/getField?fieldName=app_key"
    ).then(res => {
        let dom = $("#app_key");
        dom.html("");
        dom.append(`<option value=''>--请选择---</option>`);
        for (let i = 0; i < res.data.length; i++) {
            const item = res.data[i];
            dom.append("<option value='" + item.id + "'>" + item.name + "</option>")
        }
        layui.form.on('select(app_key)', function (data) {
            queryData.app_key = data.value;
        });
        layui.form.render();
    });


    /**
     * 初始化查询表格
     */
    table.render({
        elem: '#table',
        id: "id" // 单行唯一标识
        , height: "auto"
        , url: app.baseUrl + "/api/log/query" //数据接口
        , where: getParam()
        , method: "post"
        , contentType: 'application/json'
        , title: '用户表'
        , page: true //开启分页
        , cols: [[ //表头
            {type: 'checkbox', fixed: 'left',field: 'id'}
            , {
                field: 'app_key', title: 'app_key', width: 150, sort: true, fixed: 'left',
                templet: '<div><span title="{{d.app_key}}">{{d.app_key}}</span></div>'
            }
            , {
                field: 'question',
                title: 'question',
                width: 280,
                templet: '<div><span title="{{d.question}}">{{d.question}}</span></div>'
            }
            , {field: 'scenario', title: 'scenario', width: 180, sort: true}
            , {field: 'style', title: 'style', width: 110, sort: true}
            , {field: 'wakeup_word', title: 'wakeup_word', width: 120}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ]]
        , parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.rows //解析数据列表
            };
        },
        done: (res, curr, count) => {
            $("#total").html(count);
        }
    });

    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        let data = obj.data; //获得当前行数据
        let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

        console.log(data);
        if(layEvent === 'detail'){ //查看
            //do something
        } else if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                layer.close(index);
                //向服务端发送删除指令
            });
        } else if(layEvent === 'edit'){ //编辑
            //do something
            WeAdminEdit('编辑', '../member/edit.html', 1, 600, 400);
        }
    });

    $("#search").click(function () {
        getParam()
        table.reload({
            where: queryData
            , page: {
                curr: 1
            }
        });
        return false;
    });

    function deleteAll() {
        let checkStatus = table.checkStatus('id');
        console.log(checkStatus);
    }

</script>
</html>