-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathuser_add.html
137 lines (132 loc) · 5.79 KB
/
user_add.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理员添加</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="text/css" rel="stylesheet" href="static/layui/css/layui.css" />
<link type="text/css" rel="stylesheet" href="static/scrollbar/jquery.scrollbar.css" />
<link type="text/css" rel="stylesheet" href="static/admin/css/page-item.css" />
<style>
.tjxz{color:green;}
.scxz{color:black;transition: all .2s;}
.scxz:hover{color:red;}
.xzjs{height: 40px;margin-bottom:5px;}
.xzjs .layui-form-select{width: calc(100% - 30px);display: inline-block;}
.xzjs i{float:right;line-height:40px;cursor:pointer;font-size: 20px;}
.layui-form-item .layui-form-label{width: 3em;}
.layui-form-item .layui-input-inline{margin-left: calc(3em + 30px);margin-bottom: 0;}
</style>
</head>
<body>
<div class="page-main scrollbar-inner">
<div class="page-container">
<div class="layui-form" lay-filter="layer_form" id="layer_form">
<div class="layui-form-item">
<label class="layui-form-label">管理员</label>
<div class="layui-input-inline">
<input type="text" name="uName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="text" name="tel" lay-verify="phone" placeholder="请输入号码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="pwd" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-inline" id="roles"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="checkbox" value="1" lay-filter="switch" name="status" lay-skin="switch" lay-text="可用|禁用">
</div>
</div>
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="layer_submit" id="layer_submit" value="确认">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="static/jquery/jquery-3.4.1.js"></script>
<script type="text/javascript" src="static/scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script>
//角色列表
var roles = [
{role_name : '网站管理员', role_id : 2},
{role_name : '文章管理员', role_id : 3}
];
layui.use(['form','layer'], function(){
form = layui.form;
layer = layui.layer;
/* 自定义验证规则 */
form.verify({
password: [/(.+){6,18}$/, '密码必须6到18位']
});
add_role(1); //添加角色
//添加角色
function add_role(n){
var div = $("<div>").addClass('xzjs');
var select = $('<select>').addClass('jsxz').attr('name' , 'role[]').attr('lay-filter' , 'pdcf');
select.append($('<option>').text('请选择').val(""));
//角色列表选项
$.each(roles , function (i , item) {
let option = $('<option>').attr('value' , item.role_id).text(item.role_name);
select.append(option);
});
if(n){ //添加按钮
var active = $('<i>').addClass('layui-icon layui-icon-add-1 tjxz').attr('title' , '添加');
active.click(function () {
var length = $(this).parent().siblings().length + 1;
if(length >= 3){
layer.msg('最多3个角色', {icon: 5});
return;
}
add_role(); //添加角色
});
}else{
var active = $('<i>').addClass('layui-icon layui-icon-close scxz').attr('title' , '删除');
active.click(function () { //删除此角色
$(this).parent().remove();
});
}
div.append(select).append(active);
$("#roles").append(div);
form.render(); //表单重新渲染
}
//角色选择判断
form.on('select(pdcf)',function (data) {
var status = [];
$.each($(".jsxz"),function (i , item) {
if(item.value){
if(status.indexOf(item.value) > -1){
layer.msg('角色不能重复', {icon: 5});
$(item).val("");
form.render();
return;
}
status.push(item.value);
}
});
});
//滚动条
jQuery(".page-main").scrollbar();
});
</script>
</body>
</html>