DialogTable替换TableModal

resources/assets/dcat/extra/select-table.js

@@ -1,10 +1,12 @@
 (function (w) {
     function SelectTable(options) {
         options = $.extend({
-            modal: null,
+            dialog: null,
             container: null,
             input: null,
-            button: null,
+            button: '.submit-btn',
+            cancel: '.cancel-btn',
+            table: '.async-table',
             multiple: false,
             max: 0,
             values: [],
@@ -17,9 +19,7 @@
             values = options.values;
 
         self.options = options;
-        self.$modal = $(options.modal);
         self.$input = $(options.input);
-        self.$button = $(options.button);
 
         self.labels = {};
 
@@ -30,18 +30,28 @@
         // 保存临时选中的值
         self.resetSelected();
 
-        // 提交按钮
-        self.$button.on('click', function () {
-            var selected = self.getSelectedRows();
+        $(document).on('dialog:shown', options.dialog, function () {
+            self.$dialog = $(options.dialog);
+            self.$button = self.$dialog.find(options.button);
+            self.$cancel = self.$dialog.find(options.cancel);
 
-            self.setKeys(selected[1]);
+            // 提交按钮
+            self.$button.on('click', function () {
+                var selected = self.getSelectedRows();
 
-            self.render(selected[0]);
+                self.setKeys(selected[1]);
 
-            self.$modal.modal('toggle');
-        });
+                self.render(selected[0]);
+
+                self.$dialog.trigger('dialog:close');
+            });
 
-        self._bind();
+            self.$cancel.on('click', function () {
+                self.$dialog.trigger('dialog:close');
+            });
+
+            self._bind();
+        });
 
         self.render(values);
 
@@ -53,7 +63,7 @@
             let self = this, options = self.options;
 
             // 表格加载完成事件
-            self.$modal.find('.table-card').on('table:loaded', function () {
+            self.$dialog.find(options.table).on('table:loaded', function () {
                 let checkbox = self.getCheckbox();
 
                 if (! options.multiple) {
@@ -132,7 +142,7 @@
         },
 
         getCheckbox() {
-            return this.$modal.find('.checkbox-grid-column input[type="checkbox"]');
+            return this.$dialog.find('.checkbox-grid-column input[type="checkbox"]');
         },
 
         getSelectedRows() {

resources/assets/dcat/sass/components/_grid.scss

@@ -60,7 +60,7 @@
   }
 }
 
-.table-card {
+.simple-grid {
   .filter-box {
     background: transparent;
     box-shadow: none!important;
@@ -80,7 +80,7 @@
   }
 }
 
-body:not(.dark-mode) .grid-modal {
+body:not(.dark-mode) .simple-grid {
   .table-collapse .table.custom-data-table {
     padding: 5px 0 0;
   }
@@ -91,4 +91,9 @@ body:not(.dark-mode) .grid-modal {
   .table-collapse .custom-data-table.dataTable tbody td {
     height: 35px;
   }
+
+  .table-collapse {
+    box-shadow: none;
+    border: 1px solid #ededf1!important;
+  }
 }

resources/assets/dcat/sass/dcat-app.scss

@@ -28,6 +28,7 @@ html body {
   color: $font-color;
 }
 
+.body-bg,
 .content-wrapper {
   background: $body-bg;
 }

resources/assets/dcat/sass/theme/_dark.scss

@@ -22,7 +22,9 @@ body.dark-mode {
   background-color: $body-dark-bg;
   color: $body-dark-font-color;
 
-  .content-wrapper, .main-footer {
+  .body-bg,
+  .content-wrapper,
+  .main-footer {
     background: $body-dark-bg;
   }
 

resources/views/form/selecttable.blade.php

@@ -13,14 +13,10 @@
                 <input name="{{ $name }}" type="hidden" id="hidden-{{ $id }}" value="{{ implode(',', \Dcat\Admin\Support\Helper::array($value)) }}" />
             @endif
             <div class="input-group-append">
-                <div class="btn btn-{{ $style }} " data-toggle="modal" data-target="#{{ $id }}">
-                    &nbsp;<i class="feather icon-arrow-up"></i>&nbsp;
-                </div>
+                {!! $dialog !!}
             </div>
         </div>
 
-        {!! $modal !!}
-
         @include('admin::form.help-block')
 
     </div>

src/Form/Field/HasMany.php

@@ -480,7 +480,7 @@ class HasMany extends Field
          * {count} is increment number of current sub form count.
          */
         $script = <<<JS
-setTimeout(function () {
+(function () {
     var nestedIndex = 0;
     
     {$this->makeReplaceNestedIndexScript()}
@@ -500,7 +500,7 @@ $('{$this->getContainerElementSelector()}').on('click', '.remove', function () {
     $(this).closest('.has-many-{$this->column}-form').hide();
     $(this).closest('.has-many-{$this->column}-form').find('.$removeClass').val(1);
 });
-}, 1)
+})()
 JS;
 
         Admin::script($script);

src/Form/Field/MultipleSelectTable.php

@@ -33,14 +33,13 @@ class MultipleSelectTable extends SelectTable
     {
         $this->script .= <<<JS
 Dcat.grid.SelectTable({
-    modal: replaceNestedFormIndex('#{$this->modal->id()}'),
+    dialog: replaceNestedFormIndex('#{$this->dialog->id()}'),
     container: replaceNestedFormIndex('#{$this->getAttribute('id')}'),
     input: replaceNestedFormIndex('#hidden-{$this->id}'),
-    button: replaceNestedFormIndex('#{$this->getButtonId()}'),
     multiple: true,
     max: {$this->max},
     values: {$this->options},
-})
+});
 JS;
     }
 }

src/Form/Field/SelectTable.php

@@ -5,7 +5,7 @@ namespace Dcat\Admin\Form\Field;
 use Dcat\Admin\Form\Field;
 use Dcat\Admin\Grid\LazyRenderable;
 use Dcat\Admin\Support\Helper;
-use Dcat\Admin\Widgets\TableModal;
+use Dcat\Admin\Widgets\DialogTable;
 
 class SelectTable extends Field
 {
@@ -16,9 +16,9 @@ class SelectTable extends Field
     ];
 
     /**
-     * @var TableModal
+     * @var DialogTable
      */
-    protected $modal;
+    protected $dialog;
 
     protected $style = 'primary';
 
@@ -26,7 +26,7 @@ class SelectTable extends Field
     {
         parent::__construct($column, $arguments);
 
-        $this->modal = TableModal::title($this->label);
+        $this->dialog = DialogTable::make($this->label);
     }
 
     /**
@@ -38,19 +38,25 @@ class SelectTable extends Field
      */
     public function title($title)
     {
-        $this->modal->title($title);
+        $this->dialog->title($title);
 
         return $this;
     }
 
     /**
-     * 设置尺寸为 xl.
+     * 设置弹窗宽度.
+     *
+     * @example
+     *    $this->width('500px');
+     *    $this->width('50%');
+     *
+     * @param string $width
      *
      * @return $this
      */
-    public function xl()
+    public function dialogWidth(string $width)
     {
-        $this->modal->xl();
+        $this->dialog->width($width);
 
         return $this;
     }
@@ -64,7 +70,7 @@ class SelectTable extends Field
      */
     public function from(LazyRenderable $renderable)
     {
-        $this->modal->body($renderable);
+        $this->dialog->from($renderable);
 
         return $this;
     }
@@ -106,41 +112,26 @@ class SelectTable extends Field
     {
         $this->script .= <<<JS
 Dcat.grid.SelectTable({
-    modal: replaceNestedFormIndex('#{$this->modal->id()}'),
+    dialog: replaceNestedFormIndex('#{$this->dialog->id()}'),
     container: replaceNestedFormIndex('#{$this->getAttribute('id')}'),
     input: replaceNestedFormIndex('#hidden-{$this->id}'),
-    button: replaceNestedFormIndex('#{$this->getButtonId()}'),
     values: {$this->options},
 });
 JS;
     }
 
-    protected function setUpModal()
+    protected function setUpTable()
     {
-        $table = $this->modal->getTable();
-
-        $table->id('table-card-'.$this->getElementId());
-
-        $this->modal
-            ->join()
+        $this->dialog
             ->id($this->getElementId())
             ->runScript(false)
-            ->footer($this->renderFooter());
-
-        // 显示弹窗的时候异步加载表格
-        $this->modal->getModal()->onShow(
-            <<<JS
-if (! modal.table) {
-    modal.table = $(replaceNestedFormIndex('{$table->getElementSelector()}'));
-}            
-modal.table.trigger('table:load');
-JS
-        );
+            ->footer($this->renderFooter())
+            ->button($this->renderButton());
     }
 
     public function render()
     {
-        $this->setUpModal();
+        $this->setUpTable();
         $this->formatOptions();
 
         $name = $this->getElementName();
@@ -155,17 +146,26 @@ JS
             'prepend'     => $this->prepend,
             'append'      => $this->append,
             'style'       => $this->style,
-            'modal'       => $this->modal->render(),
+            'dialog'      => $this->dialog->render(),
             'placeholder' => $this->placeholder(),
         ]);
 
-        $this->script = $this->modal->getScript();
+        $this->script = $this->dialog->getScript();
 
         $this->addScript();
-//        dd($this->script);
+
         return parent::render();
     }
 
+    protected function renderButton()
+    {
+        return <<<HTML
+<div class="btn btn-{$this->style}">
+    &nbsp;<i class="feather icon-arrow-up"></i>&nbsp;
+</div>
+HTML;
+    }
+
     /**
      * 弹窗底部内容构建.
      *
@@ -177,18 +177,8 @@ JS
         $cancel = trans('admin.cancel');
 
         return <<<HTML
-<a id="{$this->getButtonId()}" class="btn btn-primary" style="color: #fff">&nbsp;{$submit}&nbsp;</a>&nbsp;
-<a onclick="$(this).parents('.modal').modal('toggle')" class="btn btn-white">&nbsp;{$cancel}&nbsp;</a>
+<button class="btn btn-primary btn-sm submit-btn" style="color: #fff">&nbsp;{$submit}&nbsp;</button>&nbsp;
+<button  class="btn btn-white btn-sm cancel-btn">&nbsp;{$cancel}&nbsp;</button>
 HTML;
     }
-
-    /**
-     * 提交按钮ID.
-     *
-     * @return string
-     */
-    public function getButtonId()
-    {
-        return 'submit-'.$this->id;
-    }
 }

src/Widgets/AsyncTable.php

@@ -3,17 +3,19 @@
 namespace Dcat\Admin\Widgets;
 
 use Dcat\Admin\Grid\LazyRenderable;
-use Dcat\Admin\Traits\AsyncRenderable;
 use Illuminate\Support\Str;
 
 class AsyncTable extends Widget
 {
-    use AsyncRenderable;
-
     public static $js = [
         '@grid-extension',
     ];
 
+    /**
+     * @var LazyRenderable
+     */
+    protected $renderable;
+
     /**
      * 设置是否自动加载.
      *
@@ -36,10 +38,29 @@ class AsyncTable extends Widget
      */
     public function __construct(LazyRenderable $renderable, bool $load = true)
     {
-        $this->setRenderable($renderable);
+        $this->from($renderable);
         $this->load($load);
 
-        $this->id('table-card-'.Str::random(8));
+        $this->class('async-table');
+        $this->id('async-table-'.Str::random(8));
+    }
+
+    /**
+     * 设置异步表格实例.
+     *
+     * @param LazyRenderable|null $renderable
+     *
+     * @return $this
+     */
+    public function from(?LazyRenderable $renderable)
+    {
+        if (! $renderable) {
+            return $this;
+        }
+
+        $this->renderable = $renderable;
+
+        return $this;
     }
 
     /**
@@ -68,7 +89,7 @@ class AsyncTable extends Widget
         $this->simple = $value;
 
         if ($value) {
-            $this->class('table-card', true);
+            $this->class('simple-grid', true);
         }
 
         return $this;
@@ -83,7 +104,7 @@ class AsyncTable extends Widget
      */
     public function onLoad(string $script)
     {
-        $this->script .= "$(replaceNestedFormIndex('{$this->getElementSelector()}')).on('table:loaded', function (event) { {$script} });";
+        $this->script .= "$('{$this->getElementSelector()}').on('table:loaded', function (event) { {$script} });";
 
         return $this;
     }
@@ -91,7 +112,7 @@ class AsyncTable extends Widget
     protected function addScript()
     {
         $this->script = <<<JS
-Dcat.grid.AsyncTable({container: replaceNestedFormIndex('{$this->getElementSelector()}')});
+Dcat.grid.AsyncTable({container: '{$this->getElementSelector()}'});
 JS;
 
         if ($this->load) {
@@ -131,7 +152,7 @@ JS;
     public function html()
     {
         $this->setHtmlAttribute([
-            'data-url' => $this->getRequestUrl(),
+            'data-url' => $this->renderable->getUrl(),
         ]);
 
         return <<<HTML

src/Widgets/DialogTable.php

@@ -0,0 +1,335 @@
+<?php
+
+namespace Dcat\Admin\Widgets;
+
+use Dcat\Admin\Grid\LazyRenderable;
+use Dcat\Admin\Support\Helper;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Support\Str;
+
+class DialogTable extends Widget
+{
+    /**
+     * @var string
+     */
+    protected $title;
+
+    /**
+     * @var AsyncTable
+     */
+    protected $table;
+
+    /**
+     * @var string
+     */
+    protected $width = '800px';
+
+    /**
+     * @var string|\Closure|Renderable
+     */
+    protected $button;
+
+    /**
+     * @var string|\Closure|Renderable
+     */
+    protected $footer;
+
+    /**
+     * @var array
+     */
+    protected $events = ['shown' => null, 'hidden' => null, 'load' => null];
+
+    public function __construct($title = null, LazyRenderable $table = null)
+    {
+        if ($title instanceof LazyRenderable) {
+            $table = $title;
+            $title = null;
+        }
+
+        $this->title($title);
+        $this->from($table);
+
+        $this->class('dialog-table');
+        $this->id('dialog-table-'.Str::random(8));
+    }
+
+    /**
+     * 设置异步表格实例.
+     *
+     * @param LazyRenderable|null $renderable
+     *
+     * @return $this
+     */
+    public function from(?LazyRenderable $renderable)
+    {
+        if (! $renderable) {
+            return $this;
+        }
+
+        $this->table = AsyncTable::make($renderable)->simple()->runScript(false);
+
+        return $this;
+    }
+
+    /**
+     * 设置弹窗标题.
+     *
+     * @param string $title
+     *
+     * @return $this
+     */
+    public function title($title)
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    /**
+     * 设置弹窗宽度.
+     *
+     * @example
+     *    $this->width('500px');
+     *    $this->width('50%');
+     *
+     * @param string $width
+     *
+     * @return $this
+     */
+    public function width($width)
+    {
+        $this->width = $width;
+
+        return $this;
+    }
+
+    /**
+     * 设置点击按钮HTML.
+     *
+     * @param string|\Closure|Renderable $button
+     *
+     * @return $this
+     */
+    public function button($button)
+    {
+        $this->button = $button;
+
+        return $this;
+    }
+
+    /**
+     * 监听弹窗打开事件.
+     *
+     * @param string $script
+     *
+     * @return $this
+     */
+    public function onShown(string $script)
+    {
+        $this->events['shown'] .= ';'.$script;
+
+        return $this;
+    }
+
+    /**
+     * 监听弹窗隐藏事件.
+     *
+     * @param string $script
+     *
+     * @return $this
+     */
+    public function onHidden(string $script)
+    {
+        $this->events['hidden'] .= ';'.$script;
+
+        return $this;
+    }
+
+    /**
+     * 监听表格加载完毕事件.
+     *
+     * @param string $script
+     *
+     * @return $this
+     */
+    public function onLoad(string $script)
+    {
+        $this->events['load'] .= ';'.$script;
+
+        return $this;
+    }
+
+    /**
+     * 设置弹窗底部内容.
+     *
+     * @param string|\Closure|Renderable $footer
+     *
+     * @return $this
+     */
+    public function footer($footer)
+    {
+        $this->footer = $footer;
+
+        return $this;
+    }
+
+    /**
+     * @return AsyncTable
+     */
+    public function getTable()
+    {
+        return $this->table;
+    }
+
+    protected function addScript()
+    {
+        if ($this->events['load']) {
+            $this->table->onLoad($this->events['load']);
+        }
+
+        $this->script = <<<JS
+(function () {
+    var id = replaceNestedFormIndex('{$this->id()}'), 
+        _id, _tempId, _btnId, _tb;
+    
+    setId(id);
+    
+    function hidden(index) {
+        {$this->events['hidden']}
+        
+        $(_id).trigger('dialog:hidden');
+    }
+    
+    function open(btn) {
+        var index = layer.open({
+          type: 1,
+          area: '{$this->width}',
+          offset: '70px',
+          maxmin: false,
+          resize: false,
+          content: $(_tempId).html(),
+          success: function(layero, index) {
+              $(_id).attr('layer', index);
+              
+              setDataId($(_id));
+              
+              {$this->events['shown']}
+              
+              setTimeout(function () {
+                  Dcat.grid.AsyncTable({container: _tb});
+                  
+                  $(_tb).trigger('table:load');
+              }, 100);
+              
+              $(_id).trigger('dialog:shown');
+              
+              $(_id).on('dialog:open', openDialog);
+              $(_id).on('dialog:close', closeDialog)
+          },
+          cancel: function (index, layero) {
+              btn && btn.removeAttr('layer');
+              
+              hidden(index)
+          }
+        });
+        
+        btn && btn.attr('layer', index);
+    }
+    
+    function setDataId(obj) {
+        if (! obj.attr('data-id')) {
+            obj.attr('data-id', id);
+        }
+    }
+    
+    function setId(val) {
+        if (! val) return;
+        
+        id = val;
+        _id = '#'+id;
+        _tempId = '#temp-'+id;
+        _btnId = '#button-'+id;
+        _tb = _id+' .async-table';
+    }
+    
+    function openDialog () {
+        setId($(this).attr('data-id'));
+        setDataId($(this));
+        
+        if (! $(this).attr('layer')) {
+            open($(this));
+        }
+    }
+    
+    function closeDialog() {
+        var index = $(this).attr('layer');
+        
+        $(_id).removeAttr('layer');
+        $(_btnId).removeAttr('layer');
+        
+        if (index) {
+            layer.close(index);
+            hidden(index);
+        }
+    }
+    
+    $(_btnId).on('click', openDialog);
+})();
+JS;
+    }
+
+    public function html()
+    {
+        $table = $this->renderTable();
+
+        $this->addScript();
+
+        return <<<HTML
+{$this->renderButton()}
+<template id="temp-{$this->id()}">
+    <div {$this->formatHtmlAttributes()}>
+        <div class="p-2 dialog-body">{$table}</div>
+        {$this->renderFooter()}
+    </div>
+</template>
+HTML;
+    }
+
+    protected function renderTable()
+    {
+        return <<<HMLT
+{$this->table->render()}
+HMLT;
+    }
+
+    protected function renderFooter()
+    {
+        $footer = Helper::render($this->footer);
+
+        if (! $footer) {
+            return;
+        }
+
+        return <<<HTML
+<div class="dialog-footer layui-layer-btn">{$footer}</div>
+HTML;
+    }
+
+    protected function renderButton()
+    {
+        if (! $this->button) {
+            return;
+        }
+
+        $button = Helper::render($this->button);
+
+        // 如果没有HTML标签则添加一个 a 标签
+        if (! preg_match('/(\<\/[\d\w]+\s*\>+)/i', $button)) {
+            $button = "<a href=\"javascript:void(0)\">{$button}</a>";
+        }
+
+        return <<<HTML
+<span style="cursor: pointer" id="button-{$this->id()}">{$button}</span>
+HTML;
+    }
+}

src/Widgets/Modal.php

@@ -208,6 +208,8 @@ class Modal extends Widget
     }
 
     /**
+     * 设置弹窗底部内容.
+     *
      * @param string|Closure|Renderable|LazyRenderable $footer
      *
      * @return $this

src/Widgets/TableModal.php

@@ -1,197 +0,0 @@
-<?php
-
-namespace Dcat\Admin\Widgets;
-
-use Dcat\Admin\Grid\LazyRenderable;
-use Illuminate\Contracts\Support\Renderable;
-
-/**
- * Class TableModal.
- *
- * @method $this title(string $title)
- * @method $this button(string|\Closure $title)
- * @method $this join(bool $value = true)
- * @method $this xl()
- * @method $this on(string $script)
- * @method $this onShown(string $script)
- * @method $this onShow(string $script)
- * @method $this onHidden(string $script)
- * @method $this onHide(string $script)
- * @method $this footer(string|\Closure|Renderable $footer)
- * @method $this getElementSelector()
- */
-class TableModal extends Widget
-{
-    /**
-     * @var Modal
-     */
-    protected $modal;
-
-    /**
-     * @var AsyncTable
-     */
-    protected $table;
-
-    /**
-     * @var array
-     */
-    protected $allowMethods = [
-        'id',
-        'title',
-        'button',
-        'join',
-        'xl',
-        'on',
-        'onShown',
-        'onShow',
-        'onHidden',
-        'onHide',
-        'getElementSelector',
-        'footer',
-    ];
-
-    /**
-     * @var string
-     */
-    protected $loadScript;
-
-    /**
-     * TableModal constructor.
-     *
-     * @param null $title
-     * @param \Dcat\Admin\Grid\LazyRenderable|null $table
-     */
-    public function __construct($title = null, LazyRenderable $table = null)
-    {
-        $this->modal = Modal::make()
-            ->lg()
-            ->class('grid-modal', true);
-
-        if ($title instanceof LazyRenderable) {
-            $table = $title;
-            $title = null;
-        }
-
-        $this->title($title);
-        $this->body($table);
-    }
-
-    /**
-     * 设置异步表格实例.
-     *
-     * @param LazyRenderable|null $renderable
-     *
-     * @return $this
-     */
-    public function body(?LazyRenderable $renderable)
-    {
-        if (! $renderable) {
-            return $this;
-        }
-
-        $this->table = AsyncTable::make($renderable, false)->simple();
-
-        $this->modal->body($this->table);
-
-        return $this;
-    }
-
-    /**
-     * 设置或获取ID.
-     *
-     * @param string|null $id
-     *
-     * @return |string
-     */
-    public function id(string $id = null)
-    {
-        $result = $this->modal->id($id);
-
-        if ($id === null) {
-            return $result;
-        }
-
-        return $this;
-    }
-
-    /**
-     * 监听弹窗异步渲染完成事件.
-     *
-     * @param string $script
-     *
-     * @return $this
-     */
-    public function onLoad(string $script)
-    {
-        $this->loadScript .= $script.';';
-
-        return $this;
-    }
-
-    /**
-     * {@inheritdoc}
-     */
-    public function html()
-    {
-        if ($this->runScript) {
-            $this->modal->onShow($this->table->getLoadScript());
-        }
-
-        if ($this->loadScript) {
-            $this->table->onLoad($this->loadScript);
-        }
-
-        $this->table->runScript($this->runScript);
-        $this->modal->runScript($this->runScript);
-
-        return $this->modal->render();
-    }
-
-    /**
-     * {@inheritdoc}
-     */
-    public function getScript()
-    {
-        return parent::getScript()
-            .$this->modal->getScript()
-            .$this->table->getScript();
-    }
-
-    /**
-     * @return Modal
-     */
-    public function getModal()
-    {
-        return $this->modal;
-    }
-
-    /**
-     * @return AsyncTable
-     */
-    public function getTable()
-    {
-        return $this->table;
-    }
-
-    public static function __callStatic($method, $arguments)
-    {
-        return static::make()->$method(...$arguments);
-    }
-
-    public function __call($method, $parameters)
-    {
-        if (in_array($method, $this->allowMethods, true)) {
-            $result = $this->modal->$method(...$parameters);
-
-            if (in_array($method, ['getElementSelector'], true)) {
-                return $result;
-            }
-
-            return $this;
-        }
-
-        throw new \Exception(
-            sprintf('Call to undefined method "%s::%s"', static::class, $method)
-        );
-    }
-}