data_validation/src/web/templates/user/user_list.html

{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small></small>
        </h1>
        <ol class="breadcrumb">
            {{if .T.stype}}
                <li><a href="/front/group"><i class="fa fa-dashboard"></i> 用户组管理</a></li>
                <li><a href="#"><i class="fa fa-dashboard"></i> 用户列表</a></li>
            {{else}}
                <li><a href="#"><i class="fa fa-dashboard"></i> 用户列表</a></li>
            {{end}}
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">

                        <div class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <a class="btn btn-sm btn-success margin" onclick="newMethod()"><i class="fa fa-fw fa-plus fa-lg"></i>新建用户</a>
                                    <a class="btn btn-sm btn-default margin" onclick="bulkSetup(true)">批量开启</a>
                                    <a class="btn btn-sm btn-default margin" onclick="bulkSetup(false)">批量关闭</a>
                                </div>
                            </div>
                        </div>

                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th><input type="checkbox" onclick="allSelect(this)" id="allCheckbox"></th>
                                <th>用户账号</th>
                                <th>用户姓名</th>
                                <th>用户权限</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</div>
{{include "com/footer.html"}}

<div class="modal fade" id="modal-modify-user" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 40%">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="edit-info">
                        <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
                        <span class="h4">修改用户信息</span>
                    </div>
                    <div class="edit-form">
                        <hr>
                        <form class="form-horizontal">
                            <div class="form-group margin-bottom">
                                <input type="text" class="form-control" id="user-id" placeholder="用户账号" style="display: none">
                                <label class="col-sm-3 control-label">用户账号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="user-login" placeholder="用户账号" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group margin-bottom">
                                <label class="col-sm-3 control-label">用户名称</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="user-name" placeholder="用户名称">
                                </div>
                            </div>
                            <div class="form-group margin-bottom">
                                <label class="col-sm-3 control-label">联系方式</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="user-contract" placeholder="电话/邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">登陆密码</label>
                                <div class="col-sm-5">
                                    <input type="password" id="user-pwd" readonly="readonly" class="form-control">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" onclick="modifySave()" class="btn btn-primary saveBtn" value="保存">
                <input type="button" onclick="cancelModel()" class="btn btn-default" value="取消">
            </div>
        </div>
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="modal-new-user" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 40%">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="edit-info">
                        <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
                        <span class="h4">新增用户信息</span>
                    </div>
                    <div class="edit-form">
                        <hr>
                        <form class="form-horizontal">
                            <div class="form-group margin-bottom">
                                <label class="col-sm-3 control-label"><span style="color:red;">* </span>用户账号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="user-new-login" placeholder="质检员/普通用户" readonly>
                                </div>
                            </div>
                            <div class="form-group margin-bottom" id="user-new-role">
                                <label class="col-sm-3 control-label">用户组权限</label>
                                <div class="col-sm-8 radio">
                                    <label class="margin-r-5" id="jy-admin">
                                        <input type="radio" name="role" value="1">系统管理员
                                    </label>
                                    <label class="margin-r-5">
                                        <input type="radio" name="role" value="3">质检员
                                    </label>
                                    <label>
                                        <input type="radio" name="role" value="4" checked>普通用户
                                    </label>
                                </div>
                            </div>
                            <div class="form-group margin-bottom" id="jy-account">
                                <label class="col-sm-3 control-label"><span style="color:red;">* </span>账号个数</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" id="user-num" value="1"
                                           required oninput="if(value>50)value=50;if(value.length>2)value=value.slice(0,2);if(value<0)value=0">
                                </div>
                            </div>
                            <div class="form-group margin-bottom">
                                <label class="col-sm-3 control-label">用户名称</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="user-new-name" placeholder="用户名称">
                                </div>
                            </div>
                            <div class="form-group margin-bottom">
                                <label class="col-sm-3 control-label">联系方式</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="user-new-contract" placeholder="电话/邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span style="color:red;">* </span>登陆密码</label>
                                <div class="col-sm-8">
                                    <input type="password" id="user-new-pwd" readonly="readonly" class="form-control">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" onclick="newSave()" class="btn btn-primary saveBtn" value="保存">
                <input type="button" onclick="cancelModel()" class="btn btn-default" value="取消">
            </div>
        </div>
    </div><!-- /.modal -->
</div>

<script>

    let gid = {{ .T.gid }}
    let selectIndex = [];               //选中的编号
    let keyTableChecked = false;        //关键词表格数据是否有选中
    let keyTableAllChecked = true;      //表单数据是否被全选中

    let stype = {{ .T.stype }}          //页面入口 group: 组，
    if (stype === "group") {
        menuActive("group");
    }else {
        menuActive("/front/user");
    }
    $(function () {
        ttable = $('#dataTable').dataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "serverSide": true,
            "ajax": {
                "url": "/front/user",
                "type": "post",
                "data": {"gid": gid}
            },
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "fnDrawCallback": function () {
                $("ul.pagination").prepend("&nbsp;&nbsp;&nbsp;转到第 <input type='text' id='changePage'   style='width:20px;'> 页    <a type='text' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>GO</a>");
                $('#dataTable-btn').click(function (e) {
                    var redirectpage = 0
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    }
                    ttable.api().page(redirectpage).draw(false);
                });
                // this.api().column(0).nodes().each(function(cell, i) {
                //     cell.innerHTML = i + 1;
                // });
            },
            "columns": [
                {"data": "", width: "1%", render: function() {
                        return `<input type="checkbox" name="ckb-keyid" onclick="singleSelect(this)" style="text-align: center">`
                    }},
                {"data": "s_login", width: "9%"},
                {"data": "s_name", width: "9%"},
                {"data": "i_role", width:"9%", render: function (val) {
                        if (val === "0") {
                            return "超级管理员"
                        }else if (val === "1") {
                            return "系统管理员"
                        }else if (val === "2") {
                            return "管理员"
                        }else if (val === "3") {
                            return "质检员"
                        }else {
                            return "普通用户"
                        }
                    }},
                {"data": "i_state", render: function (val, a, row) {
                        tmp = ""
                        if(val){
                            tmp="<a href='#' title='停用' onclick='setupState(\""+row._id+"\",false)'><i class='fa fa-fw fa-circle text-green'></i></a>已启用"
                        }else{
                            tmp="<a href='#' title='启用' onclick='setupState(\""+row._id+"\",true)'><i class='fa fa-fw fa-circle text-red'></i></a>未启用"
                        }
                        return tmp
                    }, width: "10%" },
                {"data": "i_createtime",width:"9%", render: function (val) {
                        var dt = new Date()
                        dt.setTime(parseInt(val) * 1000);
                        return dt.format("yyyy-MM-dd ")
                    }},
                {"data": "i_updatetime",width:"9%", render: function (val) {
                        var dt = new Date()
                        dt.setTime(parseInt(val) * 1000);
                        return dt.format("yyyy-MM-dd")
                    }},
                {"data": "_id", width:"11%",render: function (val, a, row, pos) {
                        tmp = '<div>' +
                            '<a class="btn btn-sm btn-primary" onclick="modifyInfo(\''+pos.row+'\')">设置</a>&nbsp;&nbsp;'+
                            '<a class="btn btn-sm btn-danger" onclick="del(\''+val+'\')">删除</a>'+
                            '</div>';
                        return tmp
                    }}
            ]
        });

        $("input[name=role]").click(function(){
            let v = $(this).val();
            if (v === "1") {
                $('#user-new-login').removeAttr('readonly').attr('placeholder', '用户账号')
                $('#user-new-pwd').removeAttr('readonly').val('')
                $('#jy-account').hide()
            }else {
                $('#user-new-login').attr('readonly', 'readonly').attr('placeholder', '质检员/普通用户')
                $('#user-new-pwd').attr('readonly', 'readonly').val('****')
                $('#jy-account').show()
                if (v === "3") {
                    if ($('#user-num').val() > "30") {
                        $('#user-num').val('30')
                    }
                    $('#user-num').attr('oninput', 'if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0')
                }else {
                    $('#user-num').attr('oninput', 'if(value>50)value=50;if(value.length>2)value=value.slice(0,2);if(value<0)value=0')
                }
            }
        });
    });

    function setupState(id, v) {
        showConfirm("确定修改当前状态？", function() {
            $.ajax({
                url: "/front/group/user/state",
                type: 'POST',
                data: {"id": id, "state": v},
                success: function (r) {
                    if (r.rep) {
                        ttable.ajax.reload();
                    } else {
                        showTip("状态修改失败");
                    }
                }
            })
        })
    }

    //表格全选
    function allSelect(obj) {
        if ($(obj).is(':checked')) {
            selectIndex.length = 0;
            keyTableChecked = true;
            keyTableAllChecked = true;
            $('input[name="ckb-keyid"]').each(function () {
                this.checked = true;
                selectIndex.push(ttable.fnGetData()[$(this).parents("tr").index()]["_id"]);
            })
        } else {
            selectIndex.length = 0;
            keyTableChecked = false;
            keyTableAllChecked = false;
            $('input[name="ckb-keyid"]').each(function () {
                this.checked = false;
            })
        }
    }

    //表格单个选中
    function singleSelect(obj) {
        let tag = true;
        selectIndex.length = 0;
        $('input[name="ckb-keyid"]').each(function () {
            if (this.checked) {
                keyTableChecked = true;
                selectIndex.push(ttable.fnGetData()[$(this).parents("tr").index()]["_id"]);
            }else {
                tag = false
            }
        });
        if (tag) {
            keyTableAllChecked = true;
            $('#allCheckbox').prop("checked", true);
        } else {
            keyTableAllChecked = false;
            $('#allCheckbox').prop("checked", false);
        }
    }

    function modifyInfo(v) {
        let tmp = ttable.fnGetData()[v]
        $("#user-id").val(tmp["_id"])
        $("#user-login").val(tmp["s_login"])
        $("#user-pwd").val(tmp["s_password"])
        $("#user-name").val(tmp["s_name"])
        $("#user-contract").val(tmp["s_phone"])
        $('#modal-modify-user').modal("show")

    }

    function modifySave() {
        let id = $("#user-id").val()
        let name = $("#user-name").val()
        let phone = $("#user-contract").val()
        if (name !== "" || phone !== "") {
            $.ajax({
                url: "/front/group/user/modify",
                type: 'POST',
                data: {"id": id, "s_name": name, "s_phone": phone},
                success: function (r) {
                    if (r.rep) {
                        $('#modal-modify-user').modal('hide')
                        ttable.api().ajax.reload()
                    } else {
                        showTip("保存失败");
                    }
                }
            })
        }
    }

    function del(id) {
        showConfirm("确定删除该用户组？", function() {
            $.ajax({
                url: "front/group/user/del",
                type: 'POST',
                data: {"id": id},
                success: function (r) {
                    if (r.rep) {
                        ttable.ajax.reload();
                    } else {
                        showTip("状态修改失败");
                    }
                }
            })
        })
    }

    function bulkSetup(val) {
        showConfirm("确定修改全部状态吗？", function (){
            $.ajax({
                url: "/front/user/bulks_setup",
                type: 'POST',
                data: {"ids": selectIndex.toString(), "state": val},
                success: function (r) {
                    if (r.rep) {
                        $("#allCheckbox").prop("checked", false)
                        ttable.api().ajax.reload()
                    } else {
                        showTip("状态修改失败");
                    }
                }
            })
        })
    }

    function cancelModel() {
        $('#modal-modify-user').modal('hide')
        $('#modal-new-user').modal('hide')
    }

    function newMethod() {
        $('#modal-new-user').modal('show')
        if (stype === "group") {
            // $('#user-new-role').show()
            $('#user-new-pwd').val('****')
            $('#jy-admin').hide()
        }else {
            let role = {{(session "user").i_role}}
            if (role === "0" || role === "1") {
                // $('#user-new-login').removeAttr('readonly').attr('placeholder', '用户账号')
                // $('#user-new-pwd').removeAttr('readonly')
                // $('#user-new-role').hide()
                $('#user-new-pwd').val('****')
                $('#jy-admin').show()
            }else {
                $('#jy-admin').hide()
                $('#user-new-pwd').val('****')
            }

        }
    }

    function newSave() {
        let login = $("#user-new-login").val()
        let name = $("#user-new-name").val()
        let phone = $("#user-new-contract").val()
        let pwd = $('#user-new-pwd').val()
        let size = $('#user-num').val()
        let s_role = $("input[name='role']:checked").val()
        if (stype === "group") {
            if (size === "") {
                showTip("账号数量不能为空")
                return;
            }
        }else {
            if (s_role === "1") {
                if (login === "" || pwd === "") {
                    showTip("账号或密码不能为空")
                    return
                }
            }
        }
        $.ajax({
            url: "/front/group/user/new",
            type: "POST",
            data: {"login": login,
                "gid": gid,
                "name": name,
                "phone": phone,
                "pwd": pwd,
                "i_role": s_role,
                "size": size,
                "stype": stype},
            success: function (r) {
                if (r.rep) {
                    $('#modal-new-user').modal('hide')
                    ttable.api().ajax.reload()
                }else {
                    showMsg(r.msg)
                }
            }
        })
    }

</script>