From e816d5cae399ed15c9224b5d81b0a93c3365b22a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= <zoujingli@qq.com>
Date: Sun, 25 Jul 2021 23:14:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=94=A8=E6=88=B7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin/controller/User.php  |   4 +-
 app/admin/view/auth/index.html |  21 +++--
 app/admin/view/user/index.html | 166 +++++++++++++++++----------------
 3 files changed, 103 insertions(+), 88 deletions(-)

diff --git a/app/admin/controller/User.php b/app/admin/controller/User.php
index 52d8dc913..cfec6e093 100644
--- a/app/admin/controller/User.php
+++ b/app/admin/controller/User.php
@@ -68,7 +68,7 @@ class User extends Controller
         }
         // 列表排序并显示
         $query->equal('status')->like('username,contact_phone#phone,contact_mail#mail');
-        $query->dateBetween('login_at,create_at')->order('sort desc,id desc')->page();
+        $query->dateBetween('login_at,create_at')->layTable();
     }
 
     /**
@@ -165,7 +165,6 @@ class User extends Controller
     public function state()
     {
         $this->_checkInput();
-        $this->_applyFormToken();
         $this->_save($this->table, $this->_vali([
             'status.in:0,1'  => '状态值范围异常！',
             'status.require' => '状态值不能为空！',
@@ -180,7 +179,6 @@ class User extends Controller
     public function remove()
     {
         $this->_checkInput();
-        $this->_applyFormToken();
         $this->_delete($this->table);
     }
 
diff --git a/app/admin/view/auth/index.html b/app/admin/view/auth/index.html
index 6bfe7d04a..038a8296c 100644
--- a/app/admin/view/auth/index.html
+++ b/app/admin/view/auth/index.html
@@ -20,13 +20,14 @@
 {block name='script'}
 <script>
     $(function () {
-        $('#RoleData').layTable({
-            sort: {field: 'sort desc,id', type: 'desc'},
+        // 初始化表格组件
+        var $table = $('#RoleData').layTable({
             even: true,
+            sort: {field: 'sort desc,id', type: 'desc'},
             cols: [[
                 {checkbox: true, fixed: true},
-                {field: 'sort', title: '排序权重', width: 100, align: 'center', sort: true, templet: '#SortInputTpl', fixed: true},
-                {field: 'title', title: '权限名称', minWidth: 140, align: 'center', sort: false, fixed: true},
+                {field: 'sort', title: '排序权重', width: 100, align: 'center', sort: true, templet: '#SortInputTpl'},
+                {field: 'title', title: '权限名称', minWidth: 140, align: 'center', sort: false},
                 {
                     field: 'desc', title: '权限描述', align: 'center', sort: false, templet: function (d) {
                         return d.desc || '<span class="color-desc">未填写权限描述</span>'
@@ -36,11 +37,19 @@
                 {field: 'status', title: '权限状态', align: 'center', minWidth: 110, fixed: 'right', templet: '#StatusSwitchTpl'},
                 {toolbar: '#toolbar', align: 'center', minWidth: 200, title: '权限操作', fixed: 'right'},
             ]]
-        }).trigger('setFullHeight');
+        });
+
+        // 设置表格最大高度
+        $table.trigger('setFullHeight');
+
         // 数据状态切换操作
         layui.form.on('switch(StatusSwitch)', function (obj) {
             $.form.load("{:url('state')}", {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0}, 'post', function (ret) {
-                if (ret.code > 0) return false;
+                if (ret.code < 1) $.msg.error(ret.info, 3, function () {
+                    // 操作异常时重载数据
+                    $table.trigger('reload');
+                });
+                return false;
             }, false);
         });
     });
diff --git a/app/admin/view/user/index.html b/app/admin/view/user/index.html
index ea2c2076a..3414cb226 100644
--- a/app/admin/view/user/index.html
+++ b/app/admin/view/user/index.html
@@ -1,4 +1,4 @@
-{extend name='main'}
+{extend name="../../admin/view/table"}
 
 {block name="button"}
 {if isset($type) and $type eq 'all'}
@@ -6,20 +6,20 @@
 <button data-modal='{:url("add")}' data-title="添加用户" class='layui-btn layui-btn-sm layui-btn-primary'>添加用户</button>
 <!--{/if}-->
 <!--{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>
+<a data-confirm="确定要启用该用户吗？" data-table-id="UserData" data-action="{:url('state')}" data-rule="id#{key};status#0" class='layui-btn layui-btn-sm layui-btn-primary'>批量禁用</a>
 <!--{/if}-->
 {else}
 <!--{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>
+<a data-confirm="确定要恢复这些账号吗？" data-table-id="UserData" data-action="{:url('state')}" data-rule="id#{key};status#1" 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>
+<a data-confirm="确定永久删除这些账号吗？" data-table-id="UserData" data-action='{:url("remove")}' data-rule="id#{key}" class='layui-btn layui-btn-sm layui-btn-primary'>批量删除</a>
 <!--{/if}-->
 {/if}
 {/block}
 
 {block name="content"}
-<div class="layui-tab layui-tab-card think-bg-white">
+<div class="layui-tab layui-tab-card">
     <ul class="layui-tab-title">
         {foreach ['all'=>'系统用户','recycle'=>'回 收 站'] as $k=>$v}{if isset($type) and $type eq $k}
         <li data-open="{:url('index')}?type={$k}" class="layui-this">{$v}</li>
@@ -27,81 +27,89 @@
         <li data-open="{:url('index')}?type={$k}">{$v}</li>
         {/if}{/foreach}
     </ul>
-    <div class="layui-tab-content think-box-shadow">
+    <div class="layui-tab-content">
         {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'></th>
-                <th class='text-left nowrap'></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="{:sysuri()}" 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'>
-                    <div class="headimg" data-tips-image data-lazy-src="{$vo.headimg|default=''}"></div>
-                    <div class="inline-block sub-span-blue">
-                        登录账号：<span><b>{$vo.username|default=''}</b></span><br>
-                        用户昵称：<span><b>{$vo.nickname|default='-'}</b></span><br>
-                    </div>
-                </td>
-                <td class='text-left nowrap'>
-                    联系手机：<span class="color-blue">{$vo.contact_phone|default='<i class="color-desc">未配置手机</i>'|raw}</span><br>
-                    联系邮箱：<span class="color-blue">{$vo.contact_mail|default='<i class="color-desc">未配置邮箱</i>'|raw}</span><br>
-                </td>
-                <td class='text-left nowrap'>
-                    创建时间：<span class="color-blue">{$vo.create_at|format_datetime}</span>（ {eq name='vo.status' value='0'}<span class="color-red">已禁用</span>{else}<span class="color-green">已激活</span>{/eq} ）<br>
-                    {if $vo.login_at}
-                    最后登录：<span class="color-blue">{$vo.login_at|format_datetime}</span>（ 已登录 <span class="color-blue">{$vo.login_num|default=0}</span> 次 ）<br>
-                    {else}
-                    <span class="color-desc">该账号还没有登录过哦，登录之后才会有记录！</span>
-                    {/if}
-                </td>
-                <td class='text-left nowrap'>
-                    {if isset($type) and $type eq 'all'}
-                    <!--{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("edit")}-->
-                    <a data-dbclick class="layui-btn layui-btn-sm" data-title="编辑用户" 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}-->
-                    {else}
-                    <!--{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("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}-->
-                    {/if}
-                </td>
-            </tr>
-            {/foreach}
-            </tbody>
-        </table>
-        {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
+        <table id="UserData" data-url="{:sysuri('index')}" data-target-search="form.form-search" class="layui-hide"></table>
     </div>
 </div>
+<script>
+    $(function () {
+        var $table = $('#UserData').layTable({
+            even: true,
+            sort: {field: 'sort desc,id', type: 'desc'},
+            where: {type: '{$type|default="all"}'},
+            cols: [[
+                {checkbox: true, fixed: true},
+                {field: 'sort', title: '排序权重', width: 100, align: 'center', sort: true, templet: '#SortInputTpl'},
+                {field: 'username', title: '登录账号', minWidth: 100, align: 'center', sort: true},
+                {field: 'nickname', title: '用户名称', align: 'center', sort: false},
+                {field: 'roles', title: '角色身份', align: 'center', sort: false},
+                {
+                    field: 'contact_phone', title: '联系电话', sort: false, templet: function (d) {
+                        return d.contact_phone || '<span class="color-desc">无联系电话</span>';
+                    }
+                },
+                {
+                    field: 'contact_mail', title: '联系邮箱', sort: false, templet: function (d) {
+                        return d.contact_mail || '<span class="color-desc">无联系邮箱</span>';
+                    }
+                },
+                {
+                    field: 'login_at', title: '最后登录', sort: true, templet: function (d) {
+                        return d.login_at || '<span class="color-desc">还未登录</span>';
+                    }
+                },
+                {field: 'create_at', title: '创建时间', align: 'center', minWidth: 160, sort: true},
+                {field: 'status', title: '权限状态', align: 'center', minWidth: 110, fixed: 'right', templet: '#StatusSwitchTpl'},
+                {toolbar: '#toolbar', title: '操作', align: 'center', minWidth: 200, fixed: 'right'}
+            ]]
+        });
+
+        // 设置表格最大高度
+        $table.trigger('setFullHeight');
+
+        // 数据状态切换操作
+        layui.form.on('switch(StatusSwitch)', function (obj) {
+            $.form.load("{:url('state')}", {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0}, 'post', function (ret) {
+                if (ret.code < 1) $.msg.error(ret.info, 3, function () {
+                    // 操作异常时重载数据
+                    $table.trigger('reload');
+                });
+                return false;
+            }, false);
+        });
+    });
+</script>
+
+<!-- 数据状态切换模板 -->
+<script type="text/html" id="StatusSwitchTpl">
+    <!--{if auth("state")}-->
+    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="已激活|已禁用" lay-filter="StatusSwitch" {{d.status>0?'checked':''}}>
+    <!--{else}-->
+    {{d.status ? '<b class="color-green">已启用</b>' : '<b class="color-red">已禁用</b>'}}
+    <!--{/if}-->
+</script>
+
+<!-- 列表排序权重模板 -->
+<script type="text/html" id="SortInputTpl">
+    <input min="0" type="number" data-blur-number="0" data-action-blur="{:sysuri()}" data-value="id#{{d.id}};action#sort;sort#{value}" data-loading="false" value="{{d.sort}}" class="layui-input text-center">
+</script>
+
+<script type="text/html" id="toolbar">
+    {if isset($type) and $type eq 'all'}
+    <!--{if auth("pass")}-->
+    <a class="layui-btn layui-btn-sm layui-btn-normal" data-title="设置密码" data-modal='{:url("pass")}?id={{d.id}}'>密 码</a>
+    <!--{/if}-->
+    <!--{if auth("edit")}-->
+    <a class="layui-btn layui-btn-sm" data-title="编辑用户" data-modal='{:url("edit")}?id={{d.id}}'>编 辑</a>
+    <!--{/if}-->
+    {else}
+    <!--{if auth("edit")}-->
+    <a class="layui-btn layui-btn-sm" data-title="编辑用户" data-modal='{:url("edit")}?id={{d.id}}'>编 辑</a>
+    <!--{/if}-->
+    <!--{if auth("remove")}-->
+    <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要永久删除此账号吗？" data-action="{:url('remove')}" data-value="id#{{d.id}}">删 除</a>
+    <!--{/if}-->
+    {/if}
+</script>
 {/block}