wuyebaoxiuapi/views/api/list.html

<div class="layui-layout layui-layout-admin" style="padding-left: 20px;">
    <div class="layui-row" style="margin-top: 20px;">
        <div class="layui-col-xs6">
            <div class="layui-btn-group">
              <button class="layui-btn" id="add_api">增加</button>
              <button class="layui-btn" id="add_audit">提交审核</button>
              <button class="layui-btn" id="audit">审核通过</button>
            </div>
            <!-- <a class="layui-btn" data-type="tabAdd" href="/api/add">新增</a>  -->
            <!-- <a href="javascript:;" id="add_api" class="layui-btn"> 新增接口 </a>  
            <a href="javascript:;" id="add_audit" class="layui-btn layui-btn-primary"> 提交审核 </a> -->
        </div>
        <div class="layui-col-xs6 search_text">
            <form class="layui-form" action="" onsubmit="javascript:return false;">
                <div class="demoTable">
                    <div class="layui-inline" style="width: 40%">
                        <input class="layui-input" name="apiName" id="apiName" autocomplete="off" placeholder="接口名称" >
                    </div>
                    <div class="layui-inline" style="width: 20%;text-align: left;">
                        <select name="status" id="status" lay-verify="required"  lay-search="">
                            <option value="-1">全部状态</option>
                            {{range $index,$elem := .auditStatus}}
                            <option value="{{$index}}"> {{$elem}}</option>
                            {{end}}
                        </select>
                    </div>
                    <button class="layui-btn" data-type="reload" id="reload">查询</button>
                </div>
            </form>
        </div>

        {{/*<div class="col-5 f-l text text-r">背景图(必须):</div>*/}}
        {{/*<div class="img-box">*/}}
            {{/*<label>*/}}
                {{/*<span class="copy-btn Hui-iconfont">&#xe679;</span>*/}}
                {{/*<input type="file" class="up-file">*/}}
            {{/*</label>*/}}
        {{/*</div>*/}}
        {{/*<div class="img-file col-offset-5">*/}}
            {{/*<img src="" id="img1"/>*/}}
            {{/*<input type="button" id="add1" value="add" >*/}}

        {{/*</div>*/}}

    </div>

    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>

    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详细</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="audit">审核</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">启|停</a>

    </script>
</div>
<script>

    layui.use(['table','form','element'], function(){
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;

        //方法级渲染
        table.render({
            elem: '#table_list'
            ,url: '/api/table'
            ,cols: [[
                {checkbox: true, fixed: true},
                {field:'id', title: 'ID', align:'center',sort: true, width:50}
                ,{field:'api_name',title: '接口名称'}
                ,{field:'api_url',title: '接口地址'}
                ,{field:'method',title: '请求方式'}
                ,{field:'source_name',title: '所属资源'}
                ,{field:'status_text',title: '接口状态'}
                ,{field:'create_time', title: '创建时间'}
                ,{field:'update_time', title: '修改时间'}
                ,{fixed: 'right', width:260, align:'center', toolbar: '#bar'}
            ]]
            ,id: 'listReload'
            ,page: true
            ,height: "full-130"
        });

        var $ = layui.$, active = {
            reload: function(){
                table.reload('listReload', {
                    where: {
                        apiName: $('#apiName').val(),
                        status:$("#status").val()
                    }
                });
            }
        };

        // //读取图片
        // function loadImg(){
        //     //获取文件
        //     var file = $(".up-file")[0].files[0];
        //     //创建读取文件的对象
        //     var reader = new FileReader();
        //     //创建文件读取相关的变量
        //     var imgFile;
        //     //为文件读取成功设置事件
        //     reader.onload=function(e) {
        //         var e=window.event||e;
        //         imgFile = e.target.result;
        //         console.log(imgFile);
        //         $('#img1').attr("src",imgFile)
        //
        //     };
        //
        //     //正式读取文件
        //     reader.readAsDataURL(file);
        //
        // }
        //
        //
        // function addData(){
        //     loadImg()
        //     var url=$('#img1').attr("src")
        //     var data1={"name":"url","value":url};
        //     $.ajax({
        //         url:"/uploadimg",
        //         data:data1,
        //         type:"post",
        //         ContentType:"application/json",
        //         success:function(resp){
        //
        //         }
        //     });
        // }
        //
        // $("#add1").on("click",function() {
        //     addData()
        // })
        $("#add_api").on("click",function() {
            window.location.href="/api/add"
        })

        //提交审核
        $("#add_audit").on("click",function() {
            var checkStatus = table.checkStatus('listReload');
            var ids = ""; 
            $.each(checkStatus["data"],function(k,v){
                if (v.status==1) {
                    ids += v.id+",";
                }
            })

            ids = (ids.substring(ids.length-1)==',')?ids.substring(0,ids.length-1):ids;

            if (!ids) {
                layer.msg("请选择状态为正在开发的数据")
                return false;
            }

            layer.confirm("确定要选中的接口提交审核吗？", function(){
                var add_audit_data = {"ids":ids,"status":1}
                $.post('{{urlfor "ApiController.AjaxChangeStatus"}}', add_audit_data, function (out) {
                    if (out.status == 0) {
                        layer.msg("操作成功",{icon: 1},function () {
                            $("#reload").click();
                        })
                    } else {
                        layer.msg(out.message)
                    }
                }, "json");        
                return false;
            });       
        })

        //批量审核
        $("#audit").on("click",function() {
            var checkStatus = table.checkStatus('listReload');
            var ids = ""; 
            $.each(checkStatus["data"],function(k,v){
                if (v.status==2) {
                    ids += v.id+",";
                }
            })

            ids = (ids.substring(ids.length-1)==',')?ids.substring(0,ids.length-1):ids;

            if (!ids) {
                layer.msg("请选择状态为正在审核的数据")
                return false;
            }

            layer.confirm("确定要选中的接口审核通过吗？", function(){
                var add_audit_data = {"ids":ids,"status":3}
                $.post('{{urlfor "ApiController.AjaxChangeStatus"}}', add_audit_data, function (out) {
                    if (out.status == 0) {
                        layer.msg("操作成功",{icon: 1},function () {
                            $("#reload").click();
                        })
                    } else {
                        layer.msg(out.message)
                    }
                }, "json");        
                return false;
            });       
        })

        //监听工具条
        table.on('tool(table_filter)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                window.location.href="/api/edit?id="+data.id
            } else if(obj.event === 'del'){
                var msg = "";
                if(data.status==0){
                    msg = '真的启用【'+data.api_name+'】么';
                }else{
                    msg = '真的停用【'+data.api_name+'】么';
                }

                layer.confirm(msg, function(){
                    var del_data = {"id":data.id}
                    $.post('{{urlfor "ApiController.AjaxDel"}}', del_data, function (out) {
                        if (out.status == 0) {
                            layer.msg("操作成功",{icon: 1},function () {
                                $("#reload").click();
                            })
                        } else {
                            layer.msg(out.message)
                        }
                    }, "json");        
                    return false;
                });
                return false;
                
            }else if(obj.event === 'detail'){
                window.location.href="/api/detail?id="+data.id
            }else if(obj.event === 'audit'){
                window.location.href="/api/audit?id="+data.id
            }else{
                layer.msg('操作不存在');
            }
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>