Explorar el Código

分步表单增加js步骤离开和显示事件监听方法

jqh hace 5 años
padre
commit
7f4149336f
Se han modificado 3 ficheros con 136 adiciones y 0 borrados
  1. 62 0
      resources/views/form/steps.blade.php
  2. 36 0
      src/Form/StepBuilder.php
  3. 38 0
      src/Form/StepForm.php

+ 62 - 0
resources/views/form/steps.blade.php

@@ -126,10 +126,69 @@ LA.ready(function () {
             removeDoneStepOnNavigateBack: true,
             enableAnchorOnDoneStep: false,
         },
+    }).on('leaveStep', function (e, tab, idx, direction) {
+        @if ($leaving = $steps->getOption('leaving'))
+
+        var callbacks = [];
+
+        @foreach($leaving as $fun)
+            callbacks.push({!! $fun !!});
+        @endforeach
+
+        return call_listeners(callbacks, build_args(e, tab, idx, direction));
+        @endif
+
+    }).on('showStep', function (e, tab, idx, direction) {
+        @if ($shown = $steps->getOption('shown'))
+
+        var callbacks = [];
+
+        @foreach($shown as $fun)
+        callbacks.push({!! $fun !!});
+        @endforeach
+
+        return call_listeners(callbacks, build_args(e, tab, idx, direction));
+        @endif
     });
 
+    @if ($steps->getOption('leaving') || $steps->getOption('shown'))
+
+    // 执行回调函数
+    function call_listeners(func, args) {
+        for (var i in func) {
+            if (func[i](args) === false) {
+                return false;
+            }
+        }
+    }
+
+    // 获取步骤表单
+    function get_form(idx) {
+        return box.find('.la-step-form [data-toggle="validator"]').eq(idx);
+    }
+
+    // 构建参数
+    function build_args(e, tab, idx, direction) {
+        return {
+            event: e,
+            tab: tab,
+            index: idx,
+            direction: direction,
+            form: get_form(idx),
+            getFrom: function (idx) {
+                return get_form(idx)
+            },
+            formArray: get_form(idx).formToArray(),
+            getFormArray: function (idx) {
+                return get_form(idx).formToArray();
+            }
+        };
+    }
+    @endif
+
     smartWizard = smartWizard.data('smartWizard');
 
+    // 上一步
     var prev = box.find('.sw-btn-prev').click(function (e) {
         e.preventDefault();
         if (smartWizard.steps.index(this) !== smartWizard.current_index) {
@@ -139,6 +198,7 @@ LA.ready(function () {
         toggle_btn();
     });
 
+    // 下一步
     var next = box.find('.sw-btn-next').click(function (e) {
         e.preventDefault();
 
@@ -175,6 +235,7 @@ LA.ready(function () {
         });
     });
 
+    // 提交表单
     function submit(after) {
         LA.Form({
             $form: form,
@@ -188,6 +249,7 @@ LA.ready(function () {
         });
     }
 
+    // 按钮显示隐藏切换
     function toggle_btn() {
         var last = {{ $lastStep->getIndex() }},
             sbm = box.find('.step-submit-btn');

+ 36 - 0
src/Form/StepBuilder.php

@@ -33,6 +33,8 @@ class StepBuilder
         'selected' => 0,
         'width'    => '1000px',
         'remember' => false,
+        'shown'    => [],
+        'leaving'  => [],
     ];
 
     public function __construct(Form $form)
@@ -286,4 +288,38 @@ class StepBuilder
         return $html;
     }
 
+    /**
+     * @param string $script
+     * @return $this
+     */
+    public function shown($script)
+    {
+        $script = value($script);
+
+        $this->options['shown'][] = <<<JS
+function (args) {
+    {$script}
+}
+JS;
+
+        return $this;
+    }
+
+    /**
+     * @param string $script
+     * @return $this
+     */
+    public function leaving($script)
+    {
+        $script = value($script);
+
+        $this->options['leaving'][] = <<<JS
+function (args) {
+    {$script}
+}
+JS;
+
+        return $this;
+    }
+
 }

+ 38 - 0
src/Form/StepForm.php

@@ -153,4 +153,42 @@ HTML;
         return parent::render(); // TODO: Change the autogenerated stub
     }
 
+    /**
+     * @param string $script
+     * @return $this
+     */
+    public function leaving($script)
+    {
+        $script = value($script);
+
+        $this->parent->leaving(
+            <<<JS
+if (args.index == {$this->index}) {
+    {$script}
+}
+JS
+        );
+
+        return $this;
+    }
+
+    /**
+     * @param string $script
+     * @return $this
+     */
+    public function shown($script)
+    {
+        $script = value($script);
+
+        $this->parent->shown(
+            <<<JS
+if (args.index == {$this->index}) {
+    {$script}
+}
+JS
+        );
+
+        return $this;
+    }
+
 }