assignNode.blade.php 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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">分配节点</h2>
  10. </div>
  11. @if (Session::has('successMsg'))
  12. <div class="alert alert-success alert-dismissible">
  13. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  14. <span aria-hidden="true">×</span></button>
  15. {{Session::get('successMsg')}}
  16. </div>
  17. @endif
  18. @if($errors->any())
  19. <div class="alert alert-danger alert-dismissible">
  20. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  21. <span aria-hidden="true">×</span></button>
  22. <ul>
  23. @foreach ($errors->all() as $error)
  24. <li>{{ $error }}</li>
  25. @endforeach
  26. </ul>
  27. </div>
  28. @endif
  29. <div class="panel-body">
  30. <form action={{url('/rule/group/assign')}} method="post" enctype="multipart/form-data" class="form-horizontal">
  31. <input name="id" value="{{$ruleGroup->id}}" required hidden/>
  32. @csrf
  33. <div class="form-group row">
  34. <label class="col-md-2 col-sm-3 col-form-label" for="name">所属分组</label>
  35. <div class="col-auto">
  36. <input class="form-control" id="name" value="{{$ruleGroup->name}}" readonly/>
  37. </div>
  38. </div>
  39. <div class="form-group row">
  40. <label class="col-md-2 col-sm-3 col-form-label" for="nodes">选择节点</label>
  41. <div class="col-md-9 col-sm-9">
  42. <div class="btn-group mb-20">
  43. <button type="button" class="btn btn-primary" id="select-all">全 选</button>
  44. <button type="button" class="btn btn-danger" id="deselect-all">清 空</button>
  45. </div>
  46. <select class="form-control" name="nodes[]" id="nodes" data-plugin="multiSelect" multiple>
  47. @foreach($nodeList as $node)
  48. <option value="{{$node->id}}">{{$node->id . ' - ' . Str::limit($node->name, 30)}}</option>
  49. @endforeach
  50. </select>
  51. </div>
  52. </div>
  53. <div class="form-actions text-right">
  54. <button type="submit" class="btn btn-success">提 交</button>
  55. </div>
  56. </form>
  57. </div>
  58. </div>
  59. </div>
  60. @endsection
  61. @section('script')
  62. <script src="/assets/global/vendor/multi-select/jquery.multi-select.js" type="text/javascript"></script>
  63. <script src="/assets/global/js/Plugin/multi-select.js"></script>
  64. <script src="/assets/global/js/jquery.quicksearch.js" type="text/javascript"></script>
  65. <script type="text/javascript">
  66. $(document).ready(function () {
  67. $('#nodes').multiSelect('select',{!! json_encode(explode(',', $ruleGroup->nodes)) !!});
  68. })
  69. // 权限列表
  70. $('#nodes').multiSelect({
  71. selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='待分配节点,此处可搜索'>",
  72. selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='已分配节点,此处可搜索'>",
  73. afterInit: function () {
  74. const that = this,
  75. $selectableSearch = that.$selectableUl.prev(),
  76. $selectionSearch = that.$selectionUl.prev(),
  77. selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
  78. selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
  79. that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
  80. .on('keydown', function (e) {
  81. if (e.which === 40) {
  82. that.$selectableUl.focus();
  83. return false;
  84. }
  85. });
  86. that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
  87. .on('keydown', function (e) {
  88. if (e.which === 40) {
  89. that.$selectionUl.focus();
  90. return false;
  91. }
  92. });
  93. },
  94. afterSelect: function () {
  95. this.qs1.cache();
  96. this.qs2.cache();
  97. },
  98. afterDeselect: function () {
  99. this.qs1.cache();
  100. this.qs2.cache();
  101. }
  102. });
  103. // 全选
  104. $('#select-all').click(function () {
  105. $('#nodes').multiSelect('select_all');
  106. return false;
  107. });
  108. // 反选
  109. $('#deselect-all').click(function () {
  110. $('#nodes').multiSelect('deselect_all');
  111. return false;
  112. });
  113. </script>
  114. @endsection