lijian541x
/
ema_project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户表单</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <style>
        body { padding: 20px; }
        .layui-form-item { margin-bottom: 20px; }
    </style>
</head>
<body>
    <form class="layui-form" lay-filter="userForm" id="userForm">
        <input type="hidden" name="id" id="userId">
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>用户账号</label>
            <div class="layui-input-block">
                <input type="text" name="account" lay-verify="required" placeholder="请输入用户账号" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span id="pwdLabel"><span class="required">*</span>密码</span></label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" placeholder="请输入密码" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入手机号" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" placeholder="请输入邮箱" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <input type="text" name="avatar" placeholder="请输入头像URL" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="正常" checked>
                <input type="radio" name="status" value="0" title="停用">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>角色</label>
            <div class="layui-input-block" id="roleCheckboxes" style="width: 400px;">
                <!-- 角色选项将通过JS动态加载 -->
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea" style="width: 400px; height: 80px;"></textarea>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/config.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        layui.use(['form', 'layer'], function() {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            
            var id = Common.getQueryString('id');
            var isEdit = !!id;
            
            // 编辑时隐藏密码必填
            if (isEdit) {
                $('#pwdLabel').html('密码');
                $('#password').attr('placeholder', '留空则不修改密码');
            }
            
            // 加载角色列表
            loadRoles();
            
            // 加载用户数据
            if (isEdit) {
                loadUserData(id);
            }
            
            function loadRoles() {
                Common.get(Config.api.role.list, function(res) {
                    if (res.code === 200) {
                        var roles = res.data || [];
                        var html = '';
                        roles.forEach(function(role) {
                            html += '<input type="checkbox" name="roleIds" value="' + role.id + '" title="' + role.roleName + '" lay-skin="primary">';
                        });
                        $('#roleCheckboxes').html(html);
                        form.render('checkbox');
                    }
                });
            }
            
            function loadUserData(userId) {
                Common.get(Config.api.user.getInfo + '/' + userId, function(res) {
                    if (res.code === 200) {
                        var data = res.data;
                        form.val('userForm', {
                            id: data.id,
                            account: data.account,
                            name: data.name,
                            phone: data.phone,
                            email: data.email,
                            avatar: data.avatar,
                            status: data.status,
                            remark: data.remark
                        });
                        
                        // 回显角色
                        if (data.roles) {
                            data.roles.forEach(function(role) {
                                $('input[name="roleIds"][value="' + role.id + '"]').prop('checked', true);
                            });
                            form.render('checkbox');
                        }
                    }
                });
            }
            
            // 提交表单
            form.on('submit(submitForm)', function(data) {
                var fieldData = data.field;
                
                // 获取选中的角色
                var roleIds = [];
                $('input[name="roleIds"]:checked').each(function() {
                    roleIds.push($(this).val());
                });
                fieldData.roleIds = roleIds;
                
                // 如果是编辑且密码为空，删除密码字段
                if (isEdit && !fieldData.password) {
                    delete fieldData.password;
                }
                
                var url = isEdit ? Config.api.user.update : Config.api.user.save;
                
                Common.ajax({
                    url: url,
                    type: isEdit ? 'PUT' : 'POST',
                    data: fieldData,
                    success: function(res) {
                        Common.success(isEdit ? '修改成功' : '添加成功', function() {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.table.reload('tableList');
                        });
                    }
                });
                
                return false;
            });
        });
    </script>
    
    <style>
        .required { color: #ff5722; margin-right: 3px; }
    </style>
</body>
</html>