|
|
@@ -4,10 +4,11 @@
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="renderer" content="webkit">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<title>后台</title>
|
|
|
<link rel="stylesheet" href="../../layui/css/layui.css">
|
|
|
<link rel="stylesheet" href="../../css/common.css">
|
|
|
- <link rel="stylesheet" href="../../css/user/add.css">
|
|
|
+ <link rel="stylesheet" href="../../css/user/list.css">
|
|
|
<link rel="stylesheet" href="../../css/iconfont.css">
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
|
@@ -225,76 +226,323 @@
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
+ <div class="search-box">
|
|
|
+ 账号查询
|
|
|
+ </div>
|
|
|
<table class="layui-hide" id="tables" lay-filter="tables"></table>
|
|
|
- <!-- <div class="layui-tab-item">
|
|
|
- <div id="pageDemo"></div>
|
|
|
- </div> -->
|
|
|
+ <script type="text/html" id="bar">
|
|
|
+ <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
|
+ <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
|
+ </script>
|
|
|
+ <div class="layui-row" id="popUpdateTest" style="display:none;">
|
|
|
+ <div class="layui-col-md10">
|
|
|
+ <form class="layui-form layui-from-pane" lay-filter="formData" style="margin-top:20px">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">账号</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <input type="text" name="name" id="name" required lay-verify="required" autocomplete="off" placeholder="请输入账号" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">昵称</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <input type="text" id="nickname" name="nickname" required lay-verify="required" autocomplete="off" placeholder="请输入昵称" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">角色</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <select name="role" lay-filter="role">
|
|
|
+ <option value="0">请选择角色</option>
|
|
|
+ <option value="1">超级管理员</option>
|
|
|
+ <option value="2">管理员</option>
|
|
|
+ <option value="3">操作员</option>
|
|
|
+ <option value="4">会计</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">头像</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <span class="img-box" id="img-box">
|
|
|
+ <input type="file" id="chooseImage" accept="image/gif,image/jpeg,image/jpg,image/png" name="file" onchange="filechange(event)" />
|
|
|
+ <img src="" id="oldhead" class="oldhead">
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item" style="margin-top:40px">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="btn">确认修改</button>
|
|
|
+ <button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <script src="../../layui/layui.js"></script>
|
|
|
<script src="../../js/jquery.js"></script>
|
|
|
<script src="../../js/common.js"></script>
|
|
|
- <script>
|
|
|
+ <script src="../../layui/layui.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
//JavaScript代码区域
|
|
|
layui.use(['element'], function () {
|
|
|
var element = layui.element;
|
|
|
});
|
|
|
- layui.use(['table'], function () {
|
|
|
- var table = layui.table;
|
|
|
- // , laypage = layui.laypage
|
|
|
+ var datas = {
|
|
|
+ 'code': 0,
|
|
|
+ 'msg': '',
|
|
|
+ "count": 1000,
|
|
|
+ "data": [
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name: '哈哈哈',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ name: '哈哈哈0',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ name: '哈哈哈2',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ name: '哈哈哈3',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 4
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ // 创建表格
|
|
|
+ layui.use(['table', 'form'], function () {
|
|
|
+ var table = layui.table,
|
|
|
+ form = layui.form
|
|
|
table.render({
|
|
|
elem: '#tables',
|
|
|
- url: './data.js',
|
|
|
+ // url: datas,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name: '哈哈哈',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 1,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ name: '哈哈哈0',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 2,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ name: '哈哈哈2',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 3,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ name: '哈哈哈3',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 4,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:5,
|
|
|
+ name: '哈哈哈',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 1,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:6,
|
|
|
+ name: '哈哈哈0',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 2,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:7,
|
|
|
+ name: '哈哈哈2',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 3,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:8,
|
|
|
+ name: '哈哈哈3',
|
|
|
+ nickname: '哈哈哈哈哈',
|
|
|
+ logo: 'https://www.55128.cn/static/images/logo-1.png',
|
|
|
+ role: 4,
|
|
|
+ DateTime: '2020-04-20'
|
|
|
+ },
|
|
|
+ ],
|
|
|
title: '用户数据表',
|
|
|
+ cellMinWidth: 120,
|
|
|
cols: [[
|
|
|
- { field: 'name', title: '账号', width: 80, fixed: 'left', unresize: true, sort: true },
|
|
|
- { field: 'nickname', title: '昵称', width: 120, edit: 'text' },
|
|
|
+ { title: 'ID',align: 'center',type:'numbers'},
|
|
|
+ { field: 'name', title: '账号'},
|
|
|
+ { field: 'nickname', title: '昵称' },
|
|
|
{
|
|
|
- field: 'role', title: '角色', width: 150, edit: 'text', templet: function (res) {
|
|
|
+ field: 'role', title: '角色', templet: function (res) {
|
|
|
var str = '管理员';
|
|
|
- switch(res) {
|
|
|
- case '1':
|
|
|
+ switch (res.role) {
|
|
|
+ case 1:
|
|
|
str = '超级管理员';
|
|
|
- break;
|
|
|
- case '2':
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
str = '管理员'
|
|
|
- break;
|
|
|
- case '3':
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
str = '操作员'
|
|
|
- break;
|
|
|
- case '4':
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
str = '会计'
|
|
|
- break;
|
|
|
+ break;
|
|
|
}
|
|
|
- return '<em>' + str + '</em>'
|
|
|
+ return str
|
|
|
}
|
|
|
},
|
|
|
- { field: 'logo', title: '头像', width: 120,templet: function (res) {
|
|
|
- return "<img class='headpic' src='"+res+"'>"
|
|
|
- }
|
|
|
+ {
|
|
|
+ field: 'logo', title: '头像', templet: function (res) {
|
|
|
+ return "<img class='headpic' src='" + res.logo + "'>"
|
|
|
+ }
|
|
|
},
|
|
|
- { field: 'createTime', title: '创建时间', width: 120 },
|
|
|
- { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
|
|
|
- ]],
|
|
|
- // page: false
|
|
|
+ { field: 'DateTime', title: '创建时间' },
|
|
|
+ { fixed: 'right', title: '操作', toolbar: '#bar' }
|
|
|
+ ]],
|
|
|
+ page: true,
|
|
|
+ count: 4,
|
|
|
+ limit: 2,
|
|
|
+ id: 'testReload'
|
|
|
})
|
|
|
- //分页
|
|
|
- // laypage.render({
|
|
|
- // elem: 'pageDemo' //分页容器的id
|
|
|
- // ,count: 100 //总页数
|
|
|
- // , skin: '#1E9FFF' //自定义选中色值
|
|
|
- // //,skip: true //开启跳页
|
|
|
- // , jump: function (obj, first) {
|
|
|
- // if (!first) {
|
|
|
- // layer.msg('第' + obj.curr + '页', { offset: 'b' });
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
+
|
|
|
+ table.on('tool(tables)', function (obj) {
|
|
|
+ var data = obj.data;
|
|
|
+ if (obj.event === 'del') {
|
|
|
+ layer.confirm('真的删除行么', function (index) {
|
|
|
+ // obj.del();
|
|
|
+ $.ajax({
|
|
|
+ url:'/',
|
|
|
+ type:'get?id='+data.id,
|
|
|
+ success:function(res) {
|
|
|
+ if(res.code == 200) {
|
|
|
+ layer.msg("删除成功", {icon: 6});
|
|
|
+ }else{
|
|
|
+ layer.msg("删除失败", {icon: 5});
|
|
|
+ }
|
|
|
+ layer.close(index);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else if (obj.event === 'edit') {
|
|
|
+ layer.open({
|
|
|
+ type: 1,
|
|
|
+ title: "修改个人信息",
|
|
|
+ area: ['420px', '500px'],
|
|
|
+ shade: 0,
|
|
|
+ content: $("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
|
|
|
+ success: function (layero, index) {
|
|
|
+ //表单初始赋值
|
|
|
+ form.val('formData', data)
|
|
|
+ $("#oldhead").attr('src', data.logo)
|
|
|
+ },
|
|
|
+ cancel: function(){ //点击取消
|
|
|
+ $("#popUpdateTest").hide()
|
|
|
+ layer.closeAll()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
|
|
|
+ setFormValue(obj, data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 提交修改的数据
|
|
|
+ function setFormValue(obj, data) {
|
|
|
+ form.on('submit(btn)', function(msg) {
|
|
|
+ var uregs = /^[a-zA-Z0-9]{4,12}$/
|
|
|
+ var pregs = /^[a-zA-Z0-9]{6,12}$/
|
|
|
+ if(!uregs.test(msg.field.name)) {
|
|
|
+ layer.tips('请输入正确的账号格式',$("#name"),{
|
|
|
+ tips: [3, '#0FA6D8']
|
|
|
+ });
|
|
|
+ $("#name").focus();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(msg.field.nickname.length < 4 || msg.field.nickname.length > 12) {
|
|
|
+ layer.tips('请输入正确的昵称格式',$("#nickname"),{
|
|
|
+ tips: [3, '#0FA6D8']
|
|
|
+ });
|
|
|
+ $("#nickname").focus();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url:'', //接受修改的数据
|
|
|
+ type:'post',
|
|
|
+ dataType:'json',
|
|
|
+ data:{id:data.id,name:msg.field.name,nickname:msg.field.nickname,role:msg.field.role},
|
|
|
+ success:function (res) {
|
|
|
+ if(res.code == 200){
|
|
|
+ layer.closeAll('loading');
|
|
|
+ layer.load(2);
|
|
|
+ layer.msg("修改成功", {icon: 6});
|
|
|
+ layer.closeAll()
|
|
|
+ }else{
|
|
|
+ layer.msg("修改失败", {icon: 5});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
})
|
|
|
|
|
|
+ $("#oldhead").click(function () {
|
|
|
+ $("#chooseImage").click();
|
|
|
+ })
|
|
|
+ //上传头像
|
|
|
+ function filechange(e) {
|
|
|
+ var files = e.target.files, file;
|
|
|
+ if (files && files.length > 0) {
|
|
|
+ // 获取目前上传的文件
|
|
|
+ file = files[0];// 文件大小校验的动作
|
|
|
+ if (file.size > 1024 * 1024 * 2) {
|
|
|
+ alert('图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // 获取 window 的 URL 工具
|
|
|
+ var URL = window.URL || window.webkitURL;
|
|
|
+ // 通过 file 生成目标 url
|
|
|
+ var imgURL = URL.createObjectURL(file);
|
|
|
+ //用attr将img的src属性改成获得的url
|
|
|
+ $("#oldhead").attr("src", imgURL);
|
|
|
+ // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
|
|
|
+ // URL.revokeObjectURL(imgURL);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</script>
|
|
|
</body>
|
|
|
|
