pfhwyigou/backend/web/js/menu.js

layui.use([ 'laypage', 'layer', 'table',  'element','form','treetable'], function(){

    var laypage = layui.laypage //分页
        ,$ = layui.jquery
        ,layer = layui.layer //弹层
        ,table = layui.table //表格
        ,treetable = layui.treetable //treetable表格
        ,element = layui.element //元素操作
        ,form = layui.form;
    //第一个实例
    if($('#menulist').attr('lay-filter') == 'menulist'){
        var renderTable = function (wheres = {}) {
            layer.load(2);
            treetable.render({
                treeColIndex:2,
                treeSpid:0,
                treeIdName: 'id',
                treePidName: 'pid',
                treeDefaultClose: true,
                treeLinkage: false,
                elem: '#menulist',
                url: '/menu/indexfrom',
                page: false,
                where:wheres,
                id:'tablerReload'
                , cols: [[ //表头
                    {type: 'numbers', title: '序号'}
                    , {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'}
                    , {field: 'name', title: '菜单名称', align: 'center'}
                    , {field: 'url', title: '地址', width: 300, align: 'center'}
                    , {field: 'icon', title: '图标', width: 120, align: 'center'}
                    //,{field: 'sort', title: '排序', width:100,align:'center'}
                    , {field: 'sort', title: '排序', width: 80, edit: 'text', align: 'center', sort: true, templet: "#sortBox"}
                    , {field: 'level', title: '菜单级别', width: 120, align: 'center'}
                    , {
                        field: 'status', title: '审核', align: 'center', width: 100,templet:function(d){
                            // console.log(d)
                            switch (d.status){
                                case '2':
                                    return  '<input type="checkbox"  value="'+d.id+'" res="1" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
                                    break;
                                case '1':
                                    return  '<input type="checkbox" checked  value="'+d.id+'" res="2" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
                                    break;
                            }
                        }
                    }
                    , {fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#operate'}

                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };
        renderTable();
    }

    // table.render({
    //     elem: '#menulist'
    //     ,url: '/menu/indexfrom' //数据接口
    //     ,where:{token:csrfToken}
    //     ,method:'post'
    //     ,id:'tablerReload'
    //     ,page: true //开启分页
    //     ,text:'数据加载中'
    //     ,cols: [[ //表头
    //         {type:'numbers',title:'序号'}
    //         ,{field: 'id', title: 'ID', width:80, sort: true, align:'center'}
    //         ,{field: 'name', title: '菜单名称', align:'center'}
    //         ,{field: 'url', title: '地址', width:300,align:'center'}
    //         ,{field: 'icon', title: '图标', width:120,align:'center'}
    //         ,{field: 'sort', title: '排序', width:100,align:'center'}
    //         ,{field: 'level', title: '菜单级别', width:120,align:'center'}
    //         ,{field: 'status', title: '状态', width:80,align:'center',templet:function(d){
    //                 // console.log(d)
    //                 switch (d.status){
    //                     case '2':
    //                         return  '<input type="checkbox"  value="'+d.id+'" res="1" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
    //                         break;
    //                     case '1':
    //                         return  '<input type="checkbox" checked  value="'+d.id+'" res="2" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
    //                         break;
    //                 }
    //             }}
    //         ,{fixed: 'right',title:'操作', width: 165, align:'center', toolbar: '#operate'}
    //
    //     ]]
    // });
    // table.reload('tablerReload');        //重新加载
    //列表操作
    table.on('tool(menulist)', function(obj){
        var layEvent = obj.event,
            data = obj.data;
        if(layEvent === 'edit'){
            layer.open({
                type: 2,
                title: '添加菜单',
                closeBtn: 1, //不显示关闭按钮
                // shade: [0],
                area: ['600px', '500px'],
                anim: 2,
                content: ['/menu/edit?id='+data.id, 'yes'], //iframe的url，no代表不显示滚动条
            });
        } else if(layEvent === 'del') {
            $.post('/menu/delmenu',{'id':data.id},function (data) {
                if(data.code == 200)
                {
                    layer.msg(data.msg);
                   table.reload('menulist');
                } else if(data.code == 300 ) {
                    layer.msg(data.msg);
                }
            })
        }


    });

    var $ = layui.$, active = {
        addData: function(){ //获取选中数据

                layer.open({
                    type: 2,
                    title: '添加菜单',
                    closeBtn: 1, //不显示关闭按钮
                    // shade: [0],
                    area: ['600px', '500px'],
                    anim: 2,
                    content: ['/menu/create.html', 'no'] //iframe的url，no代表不显示滚动条
                    // end: function(){ //此处用于演示
                    //     layer.open({
                    //         type: 2,
                    //         title: '很多时候，我们想最大化看，比如像这个页面。',
                    //         shadeClose: true,
                    //         shade: false,
                    //         maxmin: true, //开启最大化最小化按钮
                    //         area: ['893px', '600px'],
                    //         content: '//fly.layui.com/'
                    //     });
                    // }
                });

            // var checkStatus = table.checkStatus('idTest')
            //     ,data = checkStatus.data;
            // layer.alert(JSON.stringify(data));
        }
    };
    //监听指定开关
    form.on('switch(switchTest)', function(data){
        var status_id = $(data.elem).val();
        var status_res = $(data.elem).attr('res');
        layer.confirm('您确定要修改当前状态吗？',{btn:['确认','取消']},function(index){
            editMenuStatus(status_id,status_res)
            table.reload('tablerReload');
            layer.close(index)
        },function(index){
            table.reload('tablerReload');
            layer.close(index)
        })
        return false;

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

    form.on('submit(editMenu)', function(data){
        $.post('/menu/editfrom',{'data':data.field},function (data) {
                    if(data.code == 200)
                    {
                        layer.msg('修改成功');
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.layui.table.reload('menulist');
                        },1000)
                    } else if(data.code == 300 ) {
                        layer.msg('修改失败');
                    }
        })
        return false;
    });

    form.on('submit(addmenu)', function(data){
        $.post('/menu/createfrom',{'data':data.field},function (data) {
            if(data.code == 200)
            {
                layer.msg('修改成功');
                parent.layui.table.reload('menulist');
               TableClose();
            } else if(data.code == 300 ) {
                layer.msg('修改失败');
            }
        })
        return false;
    });
    //修改菜单状态
    function editMenuStatus(id,res){
        $.post("/menu/menustatus",{menuid: id,res:res},function(res){
            if(res.code == 200 ){
                layer.msg('修改成功');
                renderTable();
            }else{
                layer.msg('网络延时');
            }
        },'json')
    }
//排序
    table.on('edit(menulist)', function(obj){
        var data = obj.data;
        $.post('/menu/menusortedit',{id:data.id,sort:data.sort},function (data) {
            if(data.code == 200)
            {
                layer.msg(data.msg);
            } else if(data.code == 300 ) {
                layer.msg(data.msg);
            }
        })
    })
});