Browse Source

表单tab布局优化

jqh 4 years ago
parent
commit
f6588f8262
2 changed files with 39 additions and 24 deletions
  1. 32 24
      resources/views/form/tab.blade.php
  2. 7 0
      src/Form/Tab.php

+ 32 - 24
resources/views/form/tab.blade.php

@@ -1,25 +1,33 @@
-<div>
-    <ul class="nav nav-tabs pl-1" style="margin-top: -1rem">
-        @foreach($tabObj->getTabs() as $tab)
-            <li class="nav-item">
-                <a class="nav-link {{ $tab['active'] ? 'active' : '' }}" href="#{{ $tab['id'] }}" data-toggle="tab">
-                    {!! $tab['title'] !!} &nbsp;<i class="feather icon-alert-circle has-tab-error text-danger d-none"></i>
-                </a>
-            </li>
-        @endforeach
-    </ul>
-    <div class="tab-content fields-group mt-2 pt-1 pb-1">
-        @foreach($tabObj->getTabs() as $tab)
-            <div class="tab-pane {{ $tab['active'] ? 'active' : '' }}" id="{{ $tab['id'] }}">
-                @if($tab['layout']->hasColumns())
-                    {!! $tab['layout']->build() !!}
-                @else
-                    @foreach($tab['fields'] as $field)
-                        {!! $field->render() !!}
-                    @endforeach
-                @endif
-            </div>
-        @endforeach
-
-    </div>
+<div>
+    <ul class="nav nav-tabs pl-1" style="margin-top: -1rem">
+        @foreach($tabObj->getTabs() as $tab)
+            <li class="nav-item">
+                <a class="nav-link {{ $tab['active'] ? 'active' : '' }}" href="#{{ $tab['id'] }}" data-toggle="tab">
+                    {!! $tab['title'] !!} &nbsp;<i class="feather icon-alert-circle has-tab-error text-danger d-none"></i>
+                </a>
+            </li>
+        @endforeach
+    </ul>
+    <div class="tab-content fields-group mt-2 pt-1 pb-1">
+        @foreach($tabObj->getTabs() as $tab)
+            <div class="tab-pane {{ $tab['active'] ? 'active' : '' }}" id="{{ $tab['id'] }}">
+                @if($tab['layout']->hasColumns())
+                    {!! $tab['layout']->build() !!}
+                @else
+                    @if($tabObj->hasRows)
+                    <div class="ml-2 mb-2" style="margin-top: -1rem">
+                        @foreach($tab['fields'] as $field)
+                            {!! $field->render() !!}
+                        @endforeach
+                    </div>
+                    @else
+                        @foreach($tab['fields'] as $field)
+                            {!! $field->render() !!}
+                        @endforeach
+                    @endif
+                @endif
+            </div>
+        @endforeach
+
+    </div>
 </div>

+ 7 - 0
src/Form/Tab.php

@@ -29,6 +29,11 @@ class Tab
      */
     protected $columnOffset = 0;
 
+    /**
+     * @var bool
+     */
+    public $hasRows = false;
+
     /**
      * Tab constructor.
      *
@@ -93,6 +98,8 @@ class Tab
                     $match = true;
                 }
             }
+
+            $this->hasRows = true;
         }
 
         $fields = $fields->slice($this->offset);