caipan_shop_admin/public/static/manager/js/member.js

layui.use(['laytpl', 'table','jquery', 'form', 'miniTab', 'tree'], function () {
    let $ = layui.jquery,
        form = layui.form,
        table = layui.table,
        layer = layui.layer,
        tree = layui.tree,
        miniTab = layui.miniTab;

    let modifyUrl = $('#row-modify').data('url');

    /**** index begin ***/
    //index页面
    if ($('.location-index-page').length > 0) {
        miniTab.listen();

        // 渲染表格
        let listUrl = $('#table-container').data('url');
        let insTb = table.render({
            elem: '#table-container',
            toolbar: '#toolbar-tpl',
            defaultToolbar: [{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '搜索'
                ,layEvent: 'search'
                ,icon: 'layui-icon-search'
            }],
            url: listUrl,
            method: 'post',
            even: true,
            request: {
                pageName: 'page',
                limitName: 'size',
            },
            parseData: function(res){
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            page: true,
            cols: [[
                {type: 'checkbox'},
                {field: 'username', minWidth: 200, title: '用户名'},
                {field: 'nickname', minWidth: 200, title: '昵称'},
                {field: 'mobile', minWidth: 200, title: '手机号'},
                {templet: '#row-status',field: 'status', minWidth: 180,align: 'center', title: '状态'},
                {templet: '#row-operate', minWidth: 200, fixed: 'right', align: 'center', title: '操作'}
            ]],
            done: function () {
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('table-container', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: data.field
                }
            }, 'data');

            return false;
        });

        //监听单元格编辑
        table.on('edit(table-container)', function(obj){
            $.post(modifyUrl, {id: obj.data.id, field: obj.field, value: obj.value}, function (res) {
                layer.msg(res.msg)
                if (res.code === 0) {
                    insTb.reload();
                }
            })
        });

        //监听状态改变
        form.on('switch(changeStatus)', function(obj){
            let val = obj.elem.checked ? 1 : 0;
            $.post(modifyUrl, {id: this.value, field: this.name, value: val}, function (res) {
                layer.msg(res.msg)
                if (res.code === 0) {
                    setTimeout(function () {
                        insTb.reload();
                    }, 1000)
                }
            })
        });

        //监听工具条 注意区别toolbar和tool  toolbar是表头上的工具条 tool是行中的工具条
        table.on('toolbar(table-container)', function (obj) {
            let layEvent = obj.event;

            // 删除
            if (layEvent === 'del') {
                let checkStatus = table.checkStatus('table-container');
                if (checkStatus.data.length <= 0) {
                    layer.msg('请先选择数据');
                    return false;
                }
                let selected = checkStatus.data;
                let ids = [];
                let url = $($(this).context).data('href')
                $.each(selected, function (index, val) {
                    ids.push(val.id);
                })

                del(url, ids);
                return false;
            }

            // 刷新
            if (layEvent === 'refresh') {
                insTb.reload();
                return false;
            }

            // 搜索
            if (layEvent === 'search') {
                if ($('.table-search-fieldset').hasClass('div-show')) {
                    $('.table-search-fieldset').css('display', 'none').removeClass('div-show');
                } else {
                    $('.table-search-fieldset').css('display', 'block').addClass('div-show');
                }
                return false;
            }

            // 添加
            if (layEvent === 'add') {
                let url = $($(this).context).data('href')
                let title = $($(this).context).data('title')
                openLayer(url, title);
                return false;
            }
        });

        //删除
        function del(url, ids) {
            let index = layer.confirm('确认删除吗？', {
                btn: ['确认','取消'], //按钮
                title: '操作提示',
            }, function() {
                $.post(url, {ids: ids}, function (res) {
                    layer.msg(res.msg)
                    if (res.code === 0) {
                        insTb.reload();
                    }
                })
            }, function(){
                layer.close(index)
                return false;
            });
        }

        //监听工具条
        table.on('tool(table-container)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            let url = $($(this).context).data('href');
            let title = $($(this).context).data('title');

            if (layEvent === 'del') {
                let ids = [data.id];
                del(url, ids);
                return false;
            }

            if (layEvent === 'edit') {
                openLayer(url, title);
                return false;
            }

            if (layEvent === 'auth') {
                openLayer(url, title);
                return false;
            }

            if (layEvent === 'password') {
                openLayer(url, title);
                return false;
            }
        });
    }
    /*** index end ***/

    if ($('.location-operate-page').length > 0) {
        // 角色树列表
        let data = $('#role-tree').data('role');
        let inst1 = tree.render({
            elem: '#role-tree'  //绑定元素
            ,data: data
            ,id: 'roleTree'
            ,showCheckbox: true
            ,onlyIconControl: true
        });

        //监听提交
        form.on('submit(saveMember)', function (data) {
            let url = $(data.elem).data('url');
            let ids = [];//角色ID列表
            let checkData = tree.getChecked('roleTree');
            $.each(checkData, function (index, val) {
                ids.push(val.id);
            })
            data.field.roles = ids;
            $.post(url, data.field, function (res) {
                layer.msg(res.msg);
                if (res.code === 0) {
                    //刷新父级列表
                    parent.layui.$('[data-table-refresh]').trigger("click");
                    setTimeout(function () {
                        //关闭当前弹出层
                        let iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }, 1000)
                }
            });
            return false;
        });
    }
});