info.blade.php 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @extends('admin.layouts')
  2. @section('css')
  3. <link href="/assets/global/vendor/multi-select/multi-select.min.css" type="text/css" rel="stylesheet">
  4. @endsection
  5. @section('content')
  6. <div class="page-content container">
  7. <div class="panel">
  8. <div class="panel-heading">
  9. <h2 class="panel-title">@isset($userGroup)编辑@else添加@endisset用戶分组</h2>
  10. <div class="panel-actions">
  11. <a href="{{route('admin.user.group.index')}}" class="btn btn-danger">返 回</a>
  12. </div>
  13. </div>
  14. @if (Session::has('successMsg'))
  15. <x-alert type="success" :message="Session::get('successMsg')"/>
  16. @endif
  17. @if($errors->any())
  18. <x-alert type="danger" :message="$errors->all()"/>
  19. @endif
  20. <div class="panel-body">
  21. <form action="@isset($userGroup){{route('admin.user.group.update',$userGroup)}}@else{{route('admin.user.group.store')}}@endisset" method="POST"
  22. enctype="multipart/form-data"
  23. class="form-horizontal">
  24. @isset($userGroup)@method('PUT')@endisset
  25. @csrf
  26. <div class="form-group row">
  27. <label class="col-md-2 col-sm-3 col-form-label" for="name">分组名称</label>
  28. <div class="col-md-9 col-sm-9">
  29. <input type="text" class="form-control" name="name" id="name"/>
  30. </div>
  31. </div>
  32. <div class="form-group row">
  33. <label class="col-md-2 col-sm-3 col-form-label" for="nodes">选择节点</label>
  34. <div class="col-md-9 col-sm-9">
  35. <div class="btn-group mb-20">
  36. <button type="button" class="btn btn-primary" id="select-all">全 选</button>
  37. <button type="button" class="btn btn-danger" id="deselect-all">清 空</button>
  38. </div>
  39. <select class="form-control" name="nodes[]" id="nodes" data-plugin="multiSelect" multiple>
  40. @foreach($nodeList as $node)
  41. <option value="{{$node->id}}">{{$node->id . ' - ' . $node->name}}</option>
  42. @endforeach
  43. </select>
  44. </div>
  45. </div>
  46. <div class="form-actions text-right">
  47. <button type="submit" class="btn btn-success">提 交</button>
  48. </div>
  49. </form>
  50. </div>
  51. </div>
  52. </div>
  53. @endsection
  54. @section('javascript')
  55. <script src="/assets/global/vendor/multi-select/jquery.multi-select.js" type="text/javascript"></script>
  56. <script src="/assets/global/js/Plugin/multi-select.js"></script>
  57. <script src="/assets/global/js/jquery.quicksearch.js" type="text/javascript"></script>
  58. <script type="text/javascript">
  59. @isset($userGroup)
  60. $(document).ready(function() {
  61. $('#name').val('{{$userGroup->name}}');
  62. $('#nodes').multiSelect('select',@json($userGroup->nodes));
  63. });
  64. @endisset
  65. // 权限列表
  66. $('#nodes').multiSelect({
  67. selectableHeader: '<input type=\'text\' class=\'search-input form-control\' autocomplete=\'off\' placeholder=\'待分配规则,此处可搜索\'>',
  68. selectionHeader: '<input type=\'text\' class=\'search-input form-control\' autocomplete=\'off\' placeholder=\'已分配规则,此处可搜索\'>',
  69. afterInit: function() {
  70. const that = this,
  71. $selectableSearch = that.$selectableUl.prev(),
  72. $selectionSearch = that.$selectionUl.prev(),
  73. selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
  74. selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
  75. that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on('keydown', function(e) {
  76. if (e.which === 40) {
  77. that.$selectableUl.focus();
  78. return false;
  79. }
  80. });
  81. that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on('keydown', function(e) {
  82. if (e.which === 40) {
  83. that.$selectionUl.focus();
  84. return false;
  85. }
  86. });
  87. },
  88. afterSelect: function() {
  89. this.qs1.cache();
  90. this.qs2.cache();
  91. },
  92. afterDeselect: function() {
  93. this.qs1.cache();
  94. this.qs2.cache();
  95. },
  96. });
  97. // 全选
  98. $('#select-all').click(function() {
  99. $('#node').multiSelect('select_all');
  100. return false;
  101. });
  102. // 反选
  103. $('#deselect-all').click(function() {
  104. $('#node').multiSelect('deselect_all');
  105. return false;
  106. });
  107. </script>
  108. @endsection