coruna-lab/resources/views/admin/system/admins.blade.php

@extends('admin.content')

@section('title', '管理员')

@section('content')
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-admin-search">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
          <input type="text" name="username" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-admin-search">搜索</button>
        <button type="button" class="layui-btn layui-btn-normal" id="LAY-admin-create">新建</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <table id="LAY-admin-list" lay-filter="LAY-admin-list"></table>
    <script type="text/html" id="LAY-admin-ops">
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
      @{{# if(d.is_locked){ }}
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="unlock">解锁</a>
      @{{# } }}
      @{{# if(!d.is_self){ }}
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      @{{# } }}
    </script>
  </div>
</div>
@endsection

@push('scripts')
<script>
layui.use(['table', 'form', 'layer'], function () {
  var table = layui.table, form = layui.form, layer = layui.layer, $ = layui.$;
  var token = @json(csrf_token());

  table.render({
    elem: '#LAY-admin-list',
    id: 'LAY-admin-list',
    url: @json(route('admin.system.admins.data')),
    cols: [[
      { field: 'id', title: 'ID', width: 70, sort: true },
      { field: 'username', title: '账号', width: 140, sort: true },
      { field: 'is_super', title: '超管', width: 80, templet: function (d) {
        return Number(d.is_super) === 1 ? '<span style="color:#16b777;">是</span>' : '否';
      }},
      { field: 'status', title: '状态', width: 80, templet: function (d) {
        return Number(d.status) === 1 ? '<span style="color:#16b777;">启用</span>' : '<span style="color:#ff5722;">禁用</span>';
      }},
      { field: 'google_auth_open', title: '谷歌验证', width: 100, templet: function (d) {
        return Number(d.google_auth_open) === 1 ? '开' : '关';
      }},
      { field: 'last_ip', title: '最近登录IP', width: 140 },
      { field: 'is_locked', title: '锁定状态', width: 110, templet: function (d) {
        if (d.is_locked) {
          return '<span style="color:#ff5722;">已封锁</span><br><span style="font-size:12px;color:#999;">' + (d.locked_at || '') + '</span>';
        }
        var attempts = Number(d.login_attempts) || 0;
        if (attempts > 0) {
          return '<span style="color:#ffb800;">失败 ' + attempts + ' 次</span>';
        }
        return '<span style="color:#16b777;">正常</span>';
      }},
      { field: 'created_at', title: '创建时间', width: 170, sort: true },
      { title: '操作', width: 200, toolbar: '#LAY-admin-ops' }
    ]],
    page: true, limit: 20, limits: [10, 20, 30, 50],
    request: { pageName: 'page', limitName: 'limit' },
    response: { statusName: 'code', statusCode: 0, msgName: 'msg', countName: 'count', dataName: 'data' }
  });

  form.on('submit(LAY-admin-search)', function (data) {
    table.reload('LAY-admin-list', { where: data.field, page: { curr: 1 } });
    return false;
  });

  function openForm(title, values, creating) {
    values = values || {};
    layer.open({
      type: 1,
      title: title,
      area: ['420px', '380px'],
      content: '<form class="layui-form" style="padding:16px;" id="LAY-admin-form">' +
        '<div class="layui-form-item"><label class="layui-form-label">账号</label><div class="layui-input-block">' +
        '<input name="username" class="layui-input" ' + (creating ? '' : 'readonly') + ' value="' + (values.username || '') + '"></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block">' +
        '<input name="password" type="password" class="layui-input" placeholder="' + (creating ? '必填' : '留空不改') + '"></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">超管</label><div class="layui-input-block">' +
        '<input type="checkbox" name="is_super" lay-skin="switch" lay-text="是|否" value="1"' +
        (Number(values.is_super) === 1 ? ' checked' : '') + '></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">启用</label><div class="layui-input-block">' +
        '<input type="checkbox" name="status" lay-skin="switch" lay-text="是|否" value="1"' +
        (creating || Number(values.status) === 1 ? ' checked' : '') + '></div></div>' +
        '</form>',
      success: function () { form.render(); },
      btn: ['保存', '取消'],
      yes: function (index) {
        var data = {};
        $('#LAY-admin-form').serializeArray().forEach(function (x) { data[x.name] = x.value; });
        data.is_super = $('#LAY-admin-form input[name=is_super]').prop('checked') ? 1 : 0;
        data.status = $('#LAY-admin-form input[name=status]').prop('checked') ? 1 : 0;
        if (creating) {
          $.ajax({
            url: @json(route('admin.system.admins.store')),
            method: 'POST',
            data: Object.assign(data, { _token: token }),
            success: function (res) {
              if (res.code !== 0) return layer.msg(res.msg || '失败');
              layer.close(index);
              table.reload('LAY-admin-list');
            },
            error: function (xhr) {
              layer.msg((xhr.responseJSON && (xhr.responseJSON.message || xhr.responseJSON.msg)) || '创建失败');
            }
          });
        } else {
          $.ajax({
            url: @json(url('/admin/system/admins')) + '/' + values.id,
            method: 'POST',
            data: Object.assign(data, { _method: 'PUT', _token: token }),
            success: function (res) {
              if (res.code !== 0) return layer.msg(res.msg || '失败');
              layer.close(index);
              table.reload('LAY-admin-list');
            },
            error: function (xhr) {
              layer.msg((xhr.responseJSON && (xhr.responseJSON.message || xhr.responseJSON.msg)) || '更新失败');
            }
          });
        }
      }
    });
  }

  $('#LAY-admin-create').on('click', function () { openForm('新建管理员', {}, true); });

  table.on('tool(LAY-admin-list)', function (obj) {
    if (obj.event === 'edit') openForm('编辑管理员', obj.data, false);
    if (obj.event === 'unlock') {
      layer.confirm('确定解除管理员「' + obj.data.username + '」的封禁状态？', function (index) {
        $.ajax({
          url: @json(url('/admin/system/admins')) + '/' + obj.data.id + '/unlock',
          method: 'POST',
          data: { _token: token },
          success: function (res) {
            if (res.code !== 0) return layer.msg(res.msg || '失败');
            layer.msg(res.msg || '已解除封禁');
            layer.close(index);
            table.reload('LAY-admin-list');
          },
          error: function (xhr) {
            layer.msg((xhr.responseJSON && (xhr.responseJSON.message || xhr.responseJSON.msg)) || '解锁失败');
          }
        });
      });
    }
    if (obj.event === 'del') {
      layer.confirm('确定删除管理员「' + obj.data.username + '」？', function (index) {
        $.ajax({
          url: @json(url('/admin/system/admins')) + '/' + obj.data.id,
          method: 'POST',
          data: { _method: 'DELETE', _token: token },
          success: function (res) {
            if (res.code !== 0) return layer.msg(res.msg || '失败');
            layer.close(index);
            table.reload('LAY-admin-list');
          },
          error: function (xhr) {
            layer.msg((xhr.responseJSON && (xhr.responseJSON.message || xhr.responseJSON.msg)) || '删除失败');
          }
        });
      });
    }
  });
});
</script>
@endpush