hust-epi/whepi-ui/templates/admin/user.ftl

<#assign title="用户管理">
<#include "/admin/head.ftl">
<section class="vbox">
    <section class="scrollable wrapper">

        <div class="panel panel-default">
            <div class="panel-body">
                <form id="theform" name="theform" onsubmit="return false;" style="padding-bottom: 15px;">
                    <div id="toolbar">
                        <button id="addUser" type="button" class="btn btn-success btn-s-xs">添加角色</button>
                        <button id="addBind" type="button" class="btn btn-primary btn-s-xs">添加一级分销</button>
                    </div>
                </form>
                <table id="thetable"></table>
            </div>
        </div>

    </section>
</section>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="panel-body">
                        <input type="hidden" name="userId"/>
                        <input type="hidden" name="beActive"/>

                        <div class="form-group">
                            <label for="loginName" class="col-sm-2 control-label">登录名</label>

                            <div class="col-sm-10">
                                <input type="text" id="loginName" name="loginName" class="form-control"
                                       autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="staffName" class="col-sm-2 control-label">姓名</label>

                            <div class="col-sm-10">
                                <input type="text" id="staffName" name="staffName" class="form-control"
                                       autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="userType" class="col-sm-2 control-label">角色</label>

                            <div class="col-sm-10">
                                <select id="userType" name="userType" class="form-control">
                                    <option value="">请选择</option>
                                    <option value="1">一级分销</option>
                                    <option value="2">二级分销</option>
                                    <option value="C">收银员</option>
                                    <option value="A">管理员</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="placeId" class="col-sm-2 control-label">场地</label>

                            <div class="col-sm-10">
                                <select id="placeId" name="placeId" class="form-control">
                                    <option value="">请选择</option>
                                    <option value="1">场地一</option>
                                    <option value="2">场地二</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveForm();">保存</button>
                <button type="button" class="btn btn-warning" onclick="saveForm();">重置密码</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="bindModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="panel-body">
                        <input type="hidden" name="userId"/>
                        <input type="hidden" name="loginName"/>
                        <input type="hidden" name="beActive"/>

                        <div class="form-group">
                            <label for="placeId1" class="col-sm-2 control-label">场地</label>

                            <div class="col-sm-10">
                                <select id="placeId1" name="placeId1" class="form-control">
                                    <option value="">请选择</option>
                                    <option value="1">场地一</option>
                                    <option value="2">场地二</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="choosedPlace();">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<#include "/admin/foot.ftl">
<script>

    $(function () {
        //获取场地 角色
        getPlaceAndRole();

        initTable();
        $('#addUser').click(function () {
            $('#myModal').find('h4').html('添加用户');
            $('#myModal').find('form').formClear();

            $('#myModal').modal('toggle');
        });

        $('#addBind').click(function () {
            userBind();
        });
    });

    function responseHandler(root) {
        return { "total": root.pagination.count, "rows": root.data };
    }

    function openIdDelete(userId) {
        // $.ajax({
        //     url: '/admin/deleteOpenId.json',
        //     data: { userId: userId },
        //     type: 'post',
        //     success: function (data) {
        //         if (data.success) {
        //             layer.msg("删除成功");
        //             initTable();
        //             $('#myModal').modal('toggle');
        //
        //         } else {
        //             layer.msg(data.msg);
        //         }
        //     },
        //     error: function () {
        //         layer.msg("网络异常");
        //     }
        // });
    }

    function userBind() {
        $('#bindModal').find('h4').html('选择场地');
        $('#bindModal').find('form').formClear();
        $('#bindModal').modal('toggle');
    }

    function choosedPlace() {
        // var data = $('#bindModal').find('form').formGet();
        // top.layer.open({
        //     type: 2,
        //     title: '绑定二维码',
        //     shadeClose: false,
        //     resize: true,
        //     anim: 0,
        //     skin: 'layer-class',
        //     area: ['264px', '308px'],
        //     content: '/admin/user_bind_qr_png?placeId=' + data.placeId1
        // });
    }

    function saveForm() {
        var data = $('#myModal').find('form').formGet();
        if (!data.loginName) {
            layer.msg('登录名不能为空');
            return;
        }
        if (!data.userType) {
            layer.msg('请选择角色');
            return;
        }
        if (!data.placeId) {
            layer.msg('请选择场地');
            return;
        }

        if (!data.loginName) {
            data.loginName = data.phone;
        }

        var url;
        if ($('#myModal').find('h4').html() === '编辑用户') {
            url = '/admin/user_edit.json';
        } else {
            //添加
            url = '/admin/user_addnew.json';
        }

        // $.ajax({
        //     url: url,
        //     contentType: "application/json; charset=utf-8",
        //     data: JSON.stringify(data),
        //     type: 'post',
        //     success: function (data) {
        //         if (data.success) {
        //             layer.msg("保存成功");
        //             initTable();
        //             $('#myModal').modal('toggle');
        //
        //         } else {
        //             layer.msg(data.msg);
        //         }
        //     },
        //     error: function () {
        //         layer.msg("网络异常");
        //     }
        // });
    }

    function userEdit(row) {
        $('#myModal').find('form').formSet(row);

        $('#myModal').find('h4').html('编辑用户');
        $('#myModal').modal('toggle');
    }

    function userResetPwd(row) {

    }

    function userDisable(row) {
        var data = row;
        if (row.beActive === 'Y' || row.beActive === 'N') {
            if (row.beActive === 'Y') {
                data.beActive = 'N';
            } else if (row.beActive === 'N') {
                data.beActive = 'Y';
            }

            // $.ajax({
            //     url: '/admin/user_edit.json',
            //     contentType: "application/json; charset=utf-8",
            //     data: JSON.stringify(data),
            //     type: 'post',
            //     success: function (data) {
            //         if (data.success) {
            //             if (row.beActive === 'Y') {
            //                 layer.msg('已启用当前角色');
            //             } else if (row.beActive === 'N') {
            //                 layer.msg('已禁用当前角色');
            //             }
            //             initTable();
            //
            //         } else {
            //             layer.msg(data.msg);
            //         }
            //     },
            //     error: function () {
            //         layer.msg("网络异常");
            //     }
            // });

        }

    }

    function initTable() {
        // $('#thetable').bootstrapTable('destroy').bootstrapTable({
        //     url: '/admin/user.json',
        //     method: 'get',
        //     queryParams: function (params) {
        //         $('#theform').serializeArray().forEach(function fn(v) {
        //             params[v.name] = v.value;
        //         });
        //         return params;
        //     },
        //     responseHandler: responseHandler,
        //     idField: 'user_id',
        //     exportDataType: 'all',
        //     exportTypes: ['txt', 'excel'],
        //     dataShowExport: true,
        //     search: false,
        //     sortStable: false,
        //     sidePagination: 'server',
        //     pagination: true,
        //     columns: [
        //         {
        //             field: 'userId',
        //             title: '操作',
        //             width: '50px',
        //             formatter: function (v, row) {
        //                 row.sense_id = 'select';
        //                 var ts = [];
        //                 if (row.userType === 'A' || row.userType === 'C') {
        //                     ts.push('<button class="btn btn-sm btn-default" onclick=\'userEdit(' + JSON.stringify(row) + ')\'>编辑</button>');
        //
        //                 } else {
        //                     ts.push('<button class="btn btn-sm btn-dark" onclick="openIdDelete(\'' + row.userId + '\')">删除</button>');
        //                 }
        //                 return ts.join('\n');
        //             }
        //         }, {
        //             field: 'loginName',
        //             title: '登录名'
        //         }, {
        //             field: 'staffName',
        //             title: '员工姓名'
        //         }, {
        //             field: 'phone',
        //             title: '手机'
        //         }, {
        //             field: 'placeName',
        //             title: '场地名称'
        //         }, {
        //             field: 'userType',
        //             title: '角色',
        //             formatter: function (v, row) {
        //                 if (v === 'A') {
        //                     return '管理员';
        //                 } else if (v === 'C') {
        //                     return '收银员';
        //                 } else if (v === '1') {
        //                     return '一级分销';
        //                 } else if (v === '2') {
        //                     return '二级分销';
        //                 }
        //                 return v;
        //             }
        //         }, {
        //             field: 'beActive',
        //             title: '状态',
        //             formatter: function (v, row) {
        //                 var ts = [];
        //                 if (row.userType === 'A' || row.userType === 'C') {
        //                     if (row.beActive === 'Y') {
        //                         ts.push('<button class="btn btn-sm btn-default" onclick=\'userDisable(' + JSON.stringify(row) + ')\'>启用中</button>');
        //                     } else if (row.beActive === 'N') {
        //                         ts.push('<button class="btn btn-sm btn-dark" onclick=\'userDisable(' + JSON.stringify(row) + ')\'>已禁用</button>');
        //                     }
        //                     return ts.join('\n');
        //                 }
        //                 return '启用中';
        //             }
        //         }, {
        //             field: 'loginCount',
        //             title: '登录次数'
        //         }
        //     ]
        // });
    }

    function getPlaceAndRole() {
        // $.ajax({
        //     url: '/admin/get_place_role.json',
        //     contentType: "application/json; charset=utf-8",
        //     type: 'get',
        //     success: function (data) {
        //         if (data.success) {
        //
        //             $('#placeId').empty();
        //             $('#placeId').append($('<option value="">请选择</option>'));
        //
        //             data.data.place.forEach(function (p) {
        //                 $('#placeId').append($('<option value="' + p.placeId + '">' + p.placeName + '</option>'));
        //             });
        //
        //             $('#placeId1').empty();
        //             $('#placeId1').append($('<option value="">请选择</option>'));
        //
        //             data.data.place.forEach(function (p) {
        //                 $('#placeId1').append($('<option value="' + p.placeId + '">' + p.placeName + '</option>'));
        //             });
        //
        //             $('#userType').empty();
        //             $('#userType').append($('<option value="">请选择</option>'));
        //             data.data.role.forEach(function (p) {
        //                 $('#userType').append($('<option value="' + p.role + '">' + p.roleName + '</option>'));
        //             });
        //
        //         } else {
        //             layer.msg(data.msg);
        //         }
        //     },
        //     error: function () {
        //         layer.msg("网络异常");
        //     }
        // });
    }


</script>