修改系统用户界面

app/admin/controller/User.php

@@ -42,8 +42,19 @@ class User extends Controller
     public function index()
     {
         $this->title = '系统用户管理';
-        $query = $this->_query($this->table)->like('username,phone,mail')->equal('status');
-        $query->dateBetween('login_at,create_at')->where(['is_deleted' => '0'])->order('sort desc,id desc')->page();
+        $query = $this->_query($this->table)->like('username,phone,mail');
+        $query->equal('status')->dateBetween('login_at,create_at');
+        // 加载对应数据列表
+        $this->template = $this->request->get('type', 'index');
+        if ($this->template === 'index') {
+            $query->where(['is_deleted' => '0', 'status' => '1']);
+        } elseif ($this->template === 'recycle') {
+            $query->where(['is_deleted' => '0', 'status' => '0']);
+        } else {
+            $this->error("无法加载{$this->template}数据列表！");
+        }
+        // 列表排序并显示
+        $query->order('sort desc,id desc')->page(true, true, false, 0, $this->template);
     }
 
     /**

app/admin/view/user/index.html

@@ -6,86 +6,79 @@
 <button data-modal='{:url("add")}' data-title="添加用户" class='layui-btn layui-btn-sm layui-btn-primary'>添加用户</button>
 {/if}
 
-{if auth("remove")}
-<button data-action='{:url("remove")}' data-rule="id#{key}" data-csrf="{:systoken('remove')}" data-confirm="确定要删除这些用户吗？" class='layui-btn layui-btn-sm layui-btn-primary'>删除用户</button>
+{if auth("state")}
+<a data-confirm="确定要启用该用户吗？" data-action="{:url('state')}" data-rule="id#{key};status#0" data-csrf="{:systoken('state')}" class='layui-btn layui-btn-sm layui-btn-primary'>批量禁用</a>
 {/if}
 
 {/block}
 
 {block name="content"}
-<div class="think-box-shadow">
-    {include file='user/index_search'}
-    <table class="layui-table margin-top-10" lay-skin="line">
-        {notempty name='list'}
-        <thead>
-        <tr>
-            <th class='list-table-check-td think-checkbox'>
-                <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
-            </th>
-            <th class='list-table-sort-td'>
-                <button type="button" data-reload class="layui-btn layui-btn-xs">刷 新</button>
-            </th>
-            <th class='text-left nowrap' width="25%">账号信息</th>
-            <th class='text-left nowrap'>账号状态</th>
-            <th></th>
-        </tr>
-        </thead>
-        {/notempty}
-        <tbody>
-        {foreach $list as $key=>$vo}
-        <tr data-dbclick>
-            <td class='list-table-check-td think-checkbox'>
-                <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
-            </td>
-            <td class='list-table-sort-td'>
-                <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
-            </td>
-            <td class='text-left nowrap'>
-                <img alt="img" width="40px" height="40px" class="text-top margin-right-10" data-tips-image src="{$vo.headimg|default=''}">
-                <div class="inline-block">
-                    用户账号 <b class="color-blue">{$vo.username|default=''}</b>，账号昵称 <b class="color-blue">{$vo.nickname|default='<span class="color-desc">未配置账号昵称</span>'|raw}</b><br>
-                    联系手机 <span class="color-blue">{$vo.contact_phone|default='<i class="color-desc">未配置联系手机</i>'|raw}</span>，
-                    联系邮箱 <span class="color-blue">{$vo.contact_mail|default='<i class="color-desc">未配置联系邮箱</i>'|raw}</span>。
-                </div>
-            </td>
-            <td class='text-left nowrap'>
-                账号创建于 <span class="color-blue">{$vo.create_at|format_datetime}</span>，共登录了 <span class="color-blue">{$vo.login_num|default=0}</span> 次<br>
-                {if $vo.login_at}
-                最近于 <span class="color-blue">{$vo.login_at|format_datetime}</span> 通过 <span class="color-blue">{$vo.login_ip|default='--'}</span> 登录，{else}
-                <span class="color-desc">该账号还没有登录过哦，登录之后才会有记录！</span>
-                {/if}
-                {eq name='vo.status' value='0'}<b class="color-red">已禁用</b>{else}<b class="color-green">使用中</b>{/eq}
-            </td>
-            <td class='text-left nowrap'>
+<div class="layui-tab layui-tab-card think-bg-white">
+    {include file='user/index_tab'}
+    <div class="layui-tab-content think-box-shadow">
+        {include file='user/index_search'}
+        <table class="layui-table margin-top-10" lay-skin="line">
+            {notempty name='list'}
+            <thead>
+            <tr>
+                <th class='list-table-check-td think-checkbox'>
+                    <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
+                </th>
+                <th class='list-table-sort-td'>
+                    <button type="button" data-reload class="layui-btn layui-btn-xs">刷 新</button>
+                </th>
+                <th class='text-left nowrap' width="25%">账号信息</th>
+                <th class='text-left nowrap'>账号状态</th>
+                <th></th>
+            </tr>
+            </thead>
+            {/notempty}
+            <tbody>
+            {foreach $list as $key=>$vo}
+            <tr data-dbclick>
+                <td class='list-table-check-td think-checkbox'>
+                    <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
+                </td>
+                <td class='list-table-sort-td'>
+                    <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
+                </td>
+                <td class='text-left nowrap'>
+                    <img alt="img" width="40px" height="40px" class="text-top margin-right-10" data-tips-image src="{$vo.headimg|default=''}">
+                    <div class="inline-block sub-span-blue">
+                        用户账号 <span><b>{$vo.username|default=''}</b></span> 用户昵称 <span><b>{$vo.nickname|default='-'|raw}</b></span><br>
+                        联系手机 <span>{$vo.contact_phone|default='<i class="color-desc">未配置</i>'|raw}</span>，
+                        联系邮箱 <span>{$vo.contact_mail|default='<i class="color-desc">未配置</i>'|raw}</span>
+                    </div>
+                </td>
+                <td class='text-left nowrap sub-span-blue'>
+                    账号创建于 <span>{$vo.create_at|format_datetime}</span> 共登录了 <span>{$vo.login_num|default=0}</span> 次<br>
+                    {if $vo.login_at}
+                    最近于 <span>{$vo.login_at|format_datetime}</span> 通过 <span>{$vo.login_ip|default='--'}</span> 登录，{else}
+                    <span class="color-desc">该账号还没有登录过哦，登录之后才会有记录！</span>
+                    {/if}
+                    {eq name='vo.status' value='0'}<b class="color-red">已禁用</b>{else}<b class="color-green">使用中</b>{/eq}
+                </td>
+                <td class='text-left nowrap'>
 
-                {if auth("pass")}
-                <a class="layui-btn layui-btn-sm layui-btn-normal" data-title="设置密码" data-modal='{:url("pass")}?id={$vo.id}'>密 码</a>
-                {/if}
+                    {if auth("pass")}
+                    <a class="layui-btn layui-btn-sm layui-btn-normal" data-modal='{:url("pass")}?id={$vo.id}'>设置密码</a>
+                    {/if}
 
-                {if auth("edit")}
-                <a data-dbclick class="layui-btn layui-btn-sm" data-title="编辑用户资料" data-modal='{:url("edit")}?id={$vo.id}'>编 辑</a>
-                {/if}
+                    {if auth("edit")}
+                    <a data-dbclick class="layui-btn layui-btn-sm" data-modal='{:url("edit")}?id={$vo.id}'>编辑资料</a>
+                    {/if}
 
-                {if auth("state") and $vo.status eq 1}
-                <a class="layui-btn layui-btn-sm layui-btn-warm" data-confirm="确定要禁用该用户吗?" data-action="{:url('state')}" data-value="id#{$vo.id};status#0" data-csrf="{:systoken('state')}">禁 用</a>
-                {/if}
+                    {if auth("state") and $vo.status eq 1}
+                    <a class="layui-btn layui-btn-sm layui-btn-warm" data-confirm="确定要禁用该禁用账号吗?" data-action="{:url('state')}" data-value="id#{$vo.id};status#0" data-csrf="{:systoken('state')}">禁用账号</a>
+                    {/if}
 
-                {if auth("state") and $vo.status eq 0}
-                <a class="layui-btn layui-btn-sm layui-btn-warm" data-confirm="确定要启用该用户吗？" data-action="{:url('state')}" data-value="id#{$vo.id};status#1" data-csrf="{:systoken('state')}">启 用</a>
-                {/if}
-
-                {if auth("remove")}
-                <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要删除该用户吗？" data-action="{:url('remove')}" data-value="id#{$vo.id}" data-csrf="{:systoken('remove')}">删 除</a>
-                {/if}
-
-            </td>
-        </tr>
-        {/foreach}
-        </tbody>
-    </table>
-
-    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
+                </td>
+            </tr>
+            {/foreach}
+            </tbody>
+        </table>
 
+        {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
+    </div>
 </div>
-
 {/block}

app/admin/view/user/index_search.html

@@ -26,21 +26,6 @@
         </div>
 
         <div class="layui-form-item layui-inline">
-            <label class="layui-form-label">使用状态</label>
-            <div class="layui-input-inline">
-                <select class="layui-select" name="status">
-                    {foreach [''=>'-- 全部状态 --','0'=>'已禁用的账号','1'=>'使用中的账号'] as $k=>$v}
-                    {if input('get.status') eq $k.""}
-                    <option selected value="{$k}">{$v}</option>
-                    {else}
-                    <option value="{$k}">{$v}</option>
-                    {/if}
-                    {/foreach}
-                </select>
-            </div>
-        </div>
-
-        <div class="layui-form-item layui-inline">
             <label class="layui-form-label">登录时间</label>
             <div class="layui-input-inline">
                 <input data-date-range name="login_at" value="{:input('get.login_at')}" placeholder="请选择登录时间" class="layui-input">

app/admin/view/user/index_tab.html

@@ -0,0 +1,13 @@
+<ul class="layui-tab-title">
+    {foreach ['index'=>'用户账号','recycle'=>'回收站'] as $k=>$v}
+    {if $template eq $k}
+    <li data-open="{:url('index')}?type={$k}" class="layui-this">{$v}</li>
+    {else}
+    <li data-open="{:url('index')}?type={$k}">{$v}</li>
+    {/if}
+    {/foreach}
+</ul>
+
+<style>
+    body{min-width:1000}
+</style>

app/admin/view/user/pass.html

@@ -38,7 +38,7 @@
         <div class="layui-form-item">
             <label class="relative block">
                 <span class="color-green font-w7">重复登录密码</span>
-                <span class="color-desc margin-left-5">Retype Password</span>
+                <span class="color-desc margin-left-5">Repeat Password</span>
                 <input type="password" name="repassword" maxlength="32" pattern="^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,32}$" required placeholder="请重复输入登录密码" class="layui-input">
             </label>
             <p class="color-desc">密码必需包含大小写字母、数字、符号的任意两者组合。</p>

app/admin/view/user/recycle.html

@@ -0,0 +1,81 @@
+{extend name='main'}
+
+{block name="button"}
+
+{if auth("state")}
+<a data-confirm="确定要恢复这些账号吗？" data-action="{:url('state')}" data-rule="id#{key};status#1" data-csrf="{:systoken('state')}" class='layui-btn layui-btn-sm layui-btn-primary'>批量恢复</a>
+{/if}
+
+
+{if auth("remove")}
+<a data-confirm="确定要永久删除这些账号吗？" data-action='{:url("remove")}' data-rule="id#{key}" data-csrf="{:systoken('remove')}" class='layui-btn layui-btn-sm layui-btn-primary'>批量删除</a>
+{/if}
+
+{/block}
+
+{block name="content"}
+<div class="layui-tab layui-tab-card think-bg-white">
+    {include file='user/index_tab'}
+    <div class="layui-tab-content think-box-shadow">
+        {include file='user/index_search'}
+        <table class="layui-table margin-top-10" lay-skin="line">
+            {notempty name='list'}
+            <thead>
+            <tr>
+                <th class='list-table-check-td think-checkbox'>
+                    <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
+                </th>
+                <th class='list-table-sort-td'>
+                    <button type="button" data-reload class="layui-btn layui-btn-xs">刷 新</button>
+                </th>
+                <th class='text-left nowrap' width="25%">账号信息</th>
+                <th class='text-left nowrap'>账号状态</th>
+                <th></th>
+            </tr>
+            </thead>
+            {/notempty}
+            <tbody>
+            {foreach $list as $key=>$vo}
+            <tr data-dbclick>
+                <td class='list-table-check-td think-checkbox'>
+                    <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
+                </td>
+                <td class='list-table-sort-td'>
+                    <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
+                </td>
+                <td class='text-left nowrap'>
+                    <img alt="img" width="40px" height="40px" class="text-top margin-right-10" data-tips-image src="{$vo.headimg|default=''}">
+                    <div class="inline-block sub-span-blue">
+                        用户账号 <span><b>{$vo.username|default=''}</b></span> 用户昵称 <span><b>{$vo.nickname|default='-'|raw}</b></span><br>
+                        联系手机 <span>{$vo.contact_phone|default='<i class="color-desc">未配置</i>'|raw}</span>，
+                        联系邮箱 <span>{$vo.contact_mail|default='<i class="color-desc">未配置</i>'|raw}</span>
+                    </div>
+                </td>
+                <td class='text-left nowrap sub-span-blue'>
+                    账号创建于 <span>{$vo.create_at|format_datetime}</span> 共登录了 <span>{$vo.login_num|default=0}</span> 次<br>
+                    {if $vo.login_at}
+                    最近于 <span>{$vo.login_at|format_datetime}</span> 通过 <span>{$vo.login_ip|default='--'}</span> 登录，{else}
+                    <span class="color-desc">该账号还没有登录过哦，登录之后才会有记录！</span>
+                    {/if}
+                    {eq name='vo.status' value='0'}<b class="color-red">已禁用</b>{else}<b class="color-green">使用中</b>{/eq}
+                </td>
+                <td class='text-left nowrap'>
+
+                    {if auth("state") and $vo.status eq 0}
+                    <a class="layui-btn layui-btn-sm layui-btn-warm" data-confirm="确定要恢复该账号吗？" data-action="{:url('state')}" data-value="id#{$vo.id};status#1" data-csrf="{:systoken('state')}">恢复账号</a>
+                    {/if}
+
+                    {if auth("remove")}
+                    <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要永久删除此账号吗？" data-action="{:url('remove')}" data-value="id#{$vo.id}" data-csrf="{:systoken('remove')}">永久删除</a>
+                    {/if}
+
+                </td>
+            </tr>
+            {/foreach}
+            </tbody>
+        </table>
+
+        {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
+    </div>
+</div>
+{/block}