添加tab表单布局，之前的已经作废

Author: yidalh

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=cac522b00977fe684e6c",
+    "/app.js": "/app.js?id=1e7802b8e9706be294d9",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
 }

public/mix-manifest.json

@@ -26,21 +26,20 @@
         :size="attrs.attrs.size"
         :disabled="attrs.attrs.disabled"
       >
-        <component :is="attrs.attrs.hideTab ? 'div' : 'el-tabs'">
+        <component :is="attrs.attrs.hideTab ? 'div' : 'el-tabs'" :tab-position="attrs.tabPosition">
           <component
             :is="attrs.attrs.hideTab ? 'div' : 'el-tab-pane'"
-            :label="tab"
-            v-for="tab in attrs.tabs"
-            :key="tab"
+            :label="tab.name"
+            v-for="tab in attrs.formItemLayout"
+            :key="tab.name"
           >
             <component
-              v-for="(row, index) in attrs.formItemLayout"
+              v-for="(row, index) in tab.rows"
               :key="index"
               :is="row.componentName"
               :attrs="row"
               :formData="formData"
               :formItems="attrs.formItems"
-              :tab="tab"
             />
           </component>
         </component>

resources/js/components/form/Form.vue

@@ -1,5 +1,5 @@
 <template>
-  <ItemIf v-if="tab == item.tab" :form_item="item" :form_items="formItems" :form_data="formData">
+  <div>
     <component
       v-if="item.topComponent"
       :is="item.topComponent.componentName"
@@ -19,9 +19,7 @@
         <el-col :span="item.inputWidth">
           <template v-if="item.relationName">
             <ItemDiaplsy
-              v-model="
-                            formData[item.relationName][item.relationValueKey]
-                          "
+              v-model="formData[item.relationName][item.relationValueKey]"
               :form-item="item"
               :form-items="formItems"
               :form-data="formData"
@@ -47,7 +45,7 @@
       :is="item.footerComponent.componentName"
       :attrs="item.footerComponent"
     />
-  </ItemIf>
+  </div>
 </template>
 <script>
 import ItemDiaplsy from "./ItemDiaplsy";

resources/js/components/form/FormItem.vue

@@ -14,6 +14,7 @@
 use SmallRuralDog\Admin\Form\FormActions;
 use SmallRuralDog\Admin\Form\FormAttrs;
 use SmallRuralDog\Admin\Form\FormItem;
+use SmallRuralDog\Admin\Form\FormTab;
 use SmallRuralDog\Admin\Form\HasHooks;
 use SmallRuralDog\Admin\Form\HasRef;
 use SmallRuralDog\Admin\Form\TraitFormAttrs;
@@ -43,8 +44,8 @@ class Form extends Component
     protected $formItems = [];
     protected $formItemLayout = [];
     protected $ignoreEmptyProps = [];
+    protected $tabPosition = "top";
 
-    protected $tabs = [];
 
     const MODE_EDIT = 'edit';
     const MODE_CREATE = 'create';
@@ -143,11 +144,45 @@ public function row(\Closure $closure)
     {
 
         $row = new Row();
-
         call_user_func($closure, $row, $this);
 
-        $this->formItemLayout[] = $row;
+        $this->tab("default", function (FormTab $formTab) use ($row) {
+            $formTab->row($row);
+        });
+
+        return $this;
+    }
+
+    /**
+     * 自定义tab布局
+     * @param $tabName
+     * @param \Closure $closure
+     * @return $this
+     */
+    public function tab($tabName, \Closure $closure)
+    {
+
+        $tab = collect($this->formItemLayout)->filter(function (FormTab $formTab) use ($tabName) {
+            return $formTab->getName() == $tabName;
+        })->first();
+        if (empty($tab)) {
+            $tab = new FormTab($tabName, $this);
+            call_user_func($closure, $tab, $this);
+            $this->formItemLayout[] = $tab;
+        } else {
+            call_user_func($closure, $tab, $this);
+        }
+        return $this;
+    }
 
+    /**
+     * tab位置
+     * @param $tabPosition
+     * @return $this
+     */
+    public function tabPosition($tabPosition)
+    {
+        $this->tabPosition = $tabPosition;
         return $this;
     }
 
@@ -171,10 +206,6 @@ protected function addItem($prop, $label, $field)
     protected function items($items = [])
     {
 
-        $this->tabs = collect($items)->map(function (FormItem $item) {
-            return $item->getTab();
-        })->unique()->all();
-
         $this->ignoreEmptyProps = collect($items)->filter(function (FormItem $item) {
             return $item->isIgnoreEmpty();
         })->map(function (FormItem $item) {
@@ -837,10 +868,9 @@ public function jsonSerialize()
             'dataUrl' => $this->dataUrl,
             'mode' => $this->getMode(),
             'attrs' => $this->attrs,
-            //'formItems' => $this->formItemsAttr,
             'ignoreEmptyProps' => $this->ignoreEmptyProps,
             'formItemLayout' => $this->formItemLayout,
-            'tabs' => $this->tabs,
+            'tabPosition' => $this->tabPosition,
             'defaultValues' => (object)$this->formItemsValue,
             'formRules' => (object)$this->formRules,
             'ref' => $this->ref,

src/Form.php

@@ -0,0 +1,64 @@
+<?php
+
+
+namespace SmallRuralDog\Admin\Form;
+
+
+use SmallRuralDog\Admin\Form;
+use SmallRuralDog\Admin\Layout\Row;
+use SmallRuralDog\Admin\Traits\AdminJsonBuilder;
+
+class FormTab extends AdminJsonBuilder
+{
+    protected $name;
+    protected $rows = [];
+    protected $form;
+
+    public function __construct($name,Form $form)
+    {
+        $this->name = $name;
+        $this->form = $form;
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getName()
+    {
+        return $this->name;
+    }
+
+    /**
+     * @param mixed $name
+     * @return FormTab
+     */
+    public function name($name)
+    {
+        $this->name = $name;
+        return $this;
+    }
+
+
+    /**
+     * @param Row|\Closure $closure
+     * @return $this
+     */
+    public function row($closure)
+    {
+        if ($closure instanceof \Closure) {
+            $row = new Row();
+            call_user_func($closure, $row, $this->form);
+            $this->rows = collect($this->rows)->add($row);
+        } else {
+            $this->rows = collect($this->rows)->add($closure);
+        }
+        return $this;
+    }
+
+    public function jsonSerialize()
+    {
+        return ['name' => $this->name, 'rows' => $this->rows];
+    }
+
+
+}