23cm/views/site/users.php

<!--<link href="//unpkg.com/layui@2.13.3/dist/css/layui.css" rel="stylesheet">-->

<table class="layui-hide" id="ID-treeTable-demo"></table>
<script type="text/html" id="TPL-treeTable-demo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="create">新增用户</button>
    </div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
    <div class="layui-btn-container">
<!--        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="editPassword">修改密码</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
    </div>
</script>
<script>
    layui.use(function(){
        var treeTable = layui.treeTable;
        var layer = layui.layer;
        var dropdown = layui.dropdown;
        // 渲染

        var inst = treeTable.render({
            elem: '#ID-treeTable-demo',
            url: '/api/user/index', // 此处为静态模拟数据，实际使用时需换成真实接口
            tree: {
                /*
                // 异步加载子节点
                async: {
                  enable: true,
                  url: '/static/json/2/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                  autoParam: ["parentId=id"]
                }
                */
            },
            maxHeight: '501px',
            toolbar: '#TPL-treeTable-demo',
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'username', title: '用户名', fixed: 'left'},
                {field: 'role', title: '权限', fixed: 'left', templet: function(d) {
                    if(d.role === 'ADMIN'){
                        return '管理员';
                    } else {
                        return '子账户';
                    }
                }},
                {field: 'advertiser_status', title: '绑定账户', fixed: 'left'},
                {field: 'status', title: '状态', fixed: 'left', templet: function(d) {
                        if(d.status == '10'){
                            return '正常';
                        } else {
                            return '已关闭';
                        }
                    }},
                {field: 'created_at', title: '创建时间', fixed: 'left'},
                {fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools"}
            ]],
            page: true
        });
        // 表头工具栏工具事件
        treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
            var config = obj.config;
            var tableId = config.id;
            var status = treeTable.checkStatus(tableId);

            // 获取选中行
            if (obj.event === "getChecked") {
                if(!status.data.length) return layer.msg('无选中数据');
                console.log(status);
                layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
            }

            if (obj.event === 'create') {
                layer.open({
                    type: 2,
                    title: '新增后台账户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '80%'],
                    content: 'usercreate'
                });
            }
        });
        // 单元格工具事件
        treeTable.on('tool('+ inst.config.id +')', function (obj) {
            var layEvent = obj.event; // 获得 lay-event 对应的值
            var trElem = obj.tr;
            var trData = obj.data;
            var tableId = obj.config.id;

            if (layEvent === 'editPassword') {
                layer.open({
                    type: 2,
                    title: '修改密码',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '80%'],
                    content: 'usereditpasswprd?id=' + obj.data.id
                });
            }

            if (layEvent === "detail") {
                layer.msg("查看操作：" + trData.name);
            } else if (layEvent === "addChild") {
                var data = { id: Date.now(), name: "新节点" };
                var newNode2 = treeTable.addNodes(tableId, {
                    parentIndex: trData["LAY_DATA_INDEX"],
                    index: -1,
                    data: data
                });
            } else if (layEvent === "more") {
                // 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    align: "right", // 右对齐弹出
                    data: [
                        {
                            title: "编辑",
                            id: "edit"
                        },
                        {
                            title: "修改密码",
                            id: "editPassword"
                        }
                    ],
                    click: function (menudata) {
                        if (menudata.id === 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['380px', '80%'],
                                content: 'useredit?id=' + obj.data.id
                            });
                        }
                        if (menudata.id === "del") {
                            layer.confirm("真的删除行么", function (index) {
                                obj.del(); // 等效如下
                                // treeTable.removeNode(tableId, trElem.attr('data-index'))
                                layer.close(index);
                            });
                        } else if (menudata.id === "editPassword") {
                            console.log(obj)
                            layer.prompt({
                                value: trData.experience,
                                title: "输入新的密码"
                            }, function (value, index) {
                                obj.update({ experience: value }); // 等效如下
                                var loadIndex = layer.load();
                                $.ajax({
                                    url: '/api/user/reset-password',
                                    data: {
                                        password: value,
                                        id: obj.data.id
                                    },
                                    dataType: "json",
                                    type: "post",
                                    success: function (res) {
                                        layer.msg(res.message);
                                        // layer.close(loading);
                                        // if (res.code) {
                                        //     return layui.popup.failure(res.msg);
                                        // }
                                        // return layui.popup.success("操作成功", refreshTable);
                                        layer.closeAll();
                                    }
                                })
                                // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});

                            });
                        }
                    }
                });
            }
        });
    });
</script>