YwxAppThink/addon/iot/view/backend/admin/auth.html

<div class="layui-container">
    <div class="admin-title">认证账号</div>
    <div class="layui-text" style="margin-bottom:10px;color:#999;">
        当"允许匿名连接"关闭时，客户端必须使用此处账号连接；超级用户跳过 ACL 校验。
    </div>
    <div style="margin-bottom:10px;">
        <button class="layui-btn layui-btn-sm" onclick="editAuth()">+ 新增账号</button>
    </div>
    <table id="authTable" lay-filter="authTable"></table>
</div>

<!-- 行操作按钮模板 -->
<script type="text/html" id="barAuth">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script>
layui.use(['layer', 'jquery', 'form', 'table', 'http', 'ywxapp'], function(){
    var http = layui.http;
    var $ = layui.jquery, layer = layui.layer, table = layui.table;
    function esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
    function reload(){ table.reload('authTable'); }
    function ok(res, then){ if((res.code===0)||(res.code===1)){ then(); } else { layer.msg(res.message||'操作失败'); } }

    // ================= 表格 =================
    table.render({
        elem: '#authTable',
        url: '/iot/backend/authTable',
        page: true,
        limit: 20,
        limits: [10, 20, 50, 100],
        parseData: function (res) {
            return {
                code: res.code,
                msg: res.message || res.msg || '',
                count: (res.data && res.data.count) || 0,
                data: (res.data && res.data.list) || []
            };
        },
        cols: [[
            { field: 'id', title: 'ID', width: 70, align: 'center' },
            { field: 'username', title: '用户名', minWidth: 140 },
            { field: 'is_superuser', title: '超级用户', width: 100, align: 'center', templet: function (d) {
                    return d.is_superuser ? '<span class="layui-badge layui-bg-orange">是</span>' : '否';
                } },
            { field: 'member_id', title: '会员', width: 100, align: 'center', templet: function (d) {
                    return d.member_id ? '<span class="layui-badge layui-bg-blue">M' + d.member_id + '</span>' : '<span style="color:#aaa;">—</span>';
                } },
            { field: 'status', title: '状态', width: 90, align: 'center', templet: function (d) {
                    return d.status ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge">禁用</span>';
                } },
            { field: 'remark', title: '备注', minWidth: 160 },
            { title: '操作', width: 150, align: 'center', toolbar: '#barAuth' }
        ]]
    });

    table.on('tool(authTable)', function (obj) {
        if (obj.event === 'edit') { editAuth(obj.data); }
        else if (obj.event === 'del') { delAuth(obj.data.id); }
    });

    // ================= 新增 / 编辑 =================
    window.editAuth = function(row){
        row = row || {};
        var html = '<form class="layui-form" style="padding:20px;" lay-filter="authForm">'
          + '<input type="hidden" name="id" value="'+(row.id||'')+'">'
          + '<div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline"><input name="username" class="layui-input" value="'+esc(row.username)+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input name="password" class="layui-input" placeholder="'+(row.id?'留空表示不修改':'必填')+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">超级用户</label><div class="layui-input-inline"><select name="is_superuser"><option value="0" '+(!row.is_superuser?'selected':'')+'>否</option><option value="1" '+(row.is_superuser==1?'selected':'')+'>是</option></select></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-inline"><select name="status"><option value="1" '+(row.status!=0?'selected':'')+'>启用</option><option value="0" '+(row.status==0?'selected':'')+'>禁用</option></select></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">备注</label><div class="layui-input-inline"><input name="remark" class="layui-input" value="'+esc(row.remark)+'"></div></div>'
          + '</form>';
        layer.open({type:1, title:(row.id?'编辑':'新增')+'账号', area:['480px','auto'], content:html, btn:['保存','取消'],
            success:function(){ layui.form.render(); },
            yes:function(idx){
                var data = {};
                $('[lay-filter=authForm]').serializeArray().forEach(function(i){ data[i.name]=i.value; });
                http.post('/iot/backend/saveAuth', data).then(function(res){
                    layer.msg(res.message||res.msg||'ok');
                    ok(res, function(){ layer.close(idx); setTimeout(reload, 600); });
                });
            }
        });
    };

    // ================= 删除 =================
    window.delAuth = function(id){
        layer.confirm('确认删除该账号？', function(idx){
            http.post('/iot/backend/deleteAuth', {id:id}).then(function(res){
                layer.msg(res.message||'已删除');
                setTimeout(reload, 600);
            });
            layer.close(idx);
        });
    };
});
</script>