add:field

css/sub.css

@@ -1,55 +1,20 @@
-@import "./common.css";
 @import "../lib/layui/css/layui.css";
-
+.ok-body{padding:10px}
-.ok-body {
+.ok-body-breadcrumb{position:relative;line-height:39px;height:32px;border-bottom:1px solid #e5e5e5}
-    padding: 10px
+.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
+.ok-body-breadcrumb .layui-btn .layui-icon{line-height:32px}
+.ok-search{margin-top:15px}
+.ok-search .layui-input{width:190px;padding-left:10px;margin-left:10px;float:left}
+.ok-search .layui-input:first-child{margin-left:0}
+.ok-search .layui-btn{margin-left:10px}
+@media screen and (max-width:768px){.ok-search .layui-input{width:100%;margin-left:0;margin-top:10px}
+    .ok-search .layui-btn{margin-left:0;margin-top:10px}
 }
+.ok-form{margin-top:10px}
+::-webkit-scrollbar{width: 8px; height: 8px;}
+::-webkit-scrollbar-button:vertical{display: none;}
+::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
+::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
+::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
+::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
 
-.ok-body-breadcrumb {
-    position: relative;
-    line-height: 39px;
-    height: 32px;
-    border-bottom: 1px solid #e5e5e5
-}
-
-.ok-body-breadcrumb .layui-btn {
-    line-height: 2.4em;
-    margin-top: 3px;
-    float: right
-}
-
-.ok-body-breadcrumb .layui-btn .layui-icon {
-    line-height: 32px
-}
-
-.ok-search {
-    margin-top: 15px;
-}
-
-.ok-search .layui-input {
-    width: 190px;
-    padding-left: 10px;
-    margin-left: 10px;
-    float: left;
-}
-
-.ok-search .layui-input:first-child {
-    margin-left: 0px;
-}
-
-.ok-search .layui-btn {
-    margin-left: 10px;
-}
-
-@media screen and (max-width: 768px) {
-    .ok-search .layui-input {
-        width: 100%;
-        margin-left: 0px;
-        margin-top: 10px;
-    }
-
-    .ok-search .layui-btn {
-        margin-left: 0px;
-        margin-top: 10px;
-    }
-}

lib/layui/lay/okmodules/okMock.js

@@ -7,7 +7,7 @@ layui.define([], function(exprots) {
                 list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
             },
             user: {
-                list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/list",
+                list: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/list",
                 list2: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/list2",
                 batchNormal: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchNormal",
                 batchStop: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchStop",

pages/member/role.html

@@ -60,7 +60,8 @@
                 {field: "name", title: "角色名", width: 100},
                 {field: "remarks", title: "备注", width: 100},
                 {field: "createUser", title: "创建者", width: 85},
-                {field: "createTime", title: "创建时间", width: 200},
+                {field: "status", title: "状态", width: 85, templet: "#statusTpl"},
+                {field: "createTime", title: "创建时间", width: 150},
                 {title: "操作", width: 200, align: "center", templet: "#operationTpl"}
             ]],
             done: function (res, curr, count) {
@@ -146,6 +147,14 @@
 	</div>
 </script>
 <!-- 行工具栏模板 -->
+<script type="text/html" id="statusTpl">
+    {{#  if(d.status == 0){ }}
+        <span class="layui-btn layui-btn-normal layui-btn-xs">启用</span>
+    {{#  } else if(d.status == 1) { }}
+        <span class="layui-btn layui-btn-warm layui-btn-xs">停用</span>
+    {{#  } }}
+</script>
+
 <script type="text/html" id="operationTpl">
     <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
     <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>

pages/member/user.html

@@ -37,22 +37,21 @@
 <script src="../../lib/layui/layui.js"></script>
 <script src="../../lib/nprogress/nprogress.js"></script>
 <script>
-    layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
+    layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
-        var element = layui.element;
         var table = layui.table;
         var form = layui.form;
-        var $ = layui.jquery;
         var laydate = layui.laydate;
         var okLayer = layui.okLayer;
         var okUtils = layui.okUtils;
+        var okMock = layui.okMock;
 
         laydate.render({elem: "#startTime", type: "datetime"});
         laydate.render({elem: "#endTime", type: "datetime"});
 
         var userTable = table.render({
             elem: '#tableId',
-            url: "../../data/user-list.json",
+            url: okMock.api.user.list,
-            limit: 10,
+            limit: 20,
             page: true,
             toolbar: true,
             toolbar: "#toolbarTpl",
@@ -60,13 +59,14 @@
             cols: [[
                 {type: "checkbox", fixed: "left"},
                 {field: "id", title: "ID", width: 80, sort: true},
-                {field: "username", title: "用户名", width: 100},
+                {field: "username", title: "账号", width: 100},
-                {field: "name", title: "姓名", width: 100},
                 {field: "password", title: "密码", width: 100},
-                {field: "status", title: "状态", width: 100, templet: "#statusTpl"},
+                {field: "reallyName", title: "姓名", width: 100},
+                {field: "nickname", title: "昵称", width: 100},
                 {field: "role", title: "角色", width: 100, templet: "#roleTpl"},
+                {field: "status", title: "状态", width: 100, templet: "#statusTpl"},
                 {field: "email", title: "邮箱", width: 200},
-                {field: "createTime", title: "创建时间", width: 200},
+                {field: "createTime", title: "创建时间", width: 150},
                 {field: "logins", title: "登陆次数", width: 100},
                 {title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
             ]],
@@ -202,13 +202,17 @@
 <!-- 启用|停用模板 -->
 <script type="text/html" id="statusTpl">
     {{#  if(d.status == 0){ }}
-    <span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>
+        <span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>
     {{#  } else if(d.status == 1) { }}
-    <span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>
+        <span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>
     {{#  } }}
 </script>
 <script type="text/html" id="roleTpl">
-    {{ d.role == 0 ? '管理员' : '普通用户    '}}
+    {{#  if(d.role == 0){ }}
+        <span class="layui-btn layui-btn-normal layui-btn-xs">超级会员</span>
+    {{#  } else if(d.role == 1) { }}
+        <span class="layui-btn layui-btn-warm layui-btn-xs">普通用户</span>
+    {{#  } }}
 </script>
 </body>
 </html>