Bladeren bron

selectTable表单增加load以及loads方法

jqh 4 jaren geleden
bovenliggende
commit
b2d4501c67

+ 3 - 0
resources/assets/dcat/extra/select-table.js

@@ -58,16 +58,19 @@
                     self.resetSelected();
                 });
 
+                // 取消按钮
                 self.$cancel.on('click', function () {
                     self.$dialog.trigger('dialog:close');
                 });
 
+                // 绑定相关事件
                 self.bind();
 
                 // 重置已选中数据
                 self.resetSelected();
             });
 
+            // 渲染选中的数据
             self.render(values);
         },
 

+ 96 - 0
resources/assets/dcat/js/extensions/Helpers.js

@@ -263,4 +263,100 @@ export default class Helpers {
             Dcat.handleAjaxError(a, b, c);
         })
     }
+
+    /**
+     * 联动select表单
+     *
+     * @param _this
+     * @param options
+     */
+    loadField(_this, options) {
+        let target = $(_this).closest(options.group || '.fields-group').find(options.class);
+        let values = [];
+
+        if (! options.values) {
+            $(_this).find('option:selected').each(function () {
+                if (String(this.value) === '0' || this.value) {
+                    values.push(this.value)
+                }
+            });
+        } else {
+            values = options.values;
+            if (typeof values === 'string') {
+                values = [values];
+            }
+        }
+
+        if (! values.length) {
+            return;
+        }
+
+        target.find("option").remove();
+
+        Dcat.loading();
+
+        $.ajax(options.url+values).then(function (data) {
+            Dcat.loading(false);
+
+            $.map(data, function (d) {
+                target.append(new Option(d[options.textField], d[options.idField], false, false));
+            });
+            target.val(String(target.attr('data-value')).split(',')).trigger('change');
+        });
+    }
+
+    /**
+     * 联动多个字段.
+     *
+     * @param _this
+     * @param options
+     */
+    loadFields(_this, options) {
+        let refreshOptions = function(url, target) {
+            Dcat.loading();
+
+            $.ajax(url).then(function(data) {
+                Dcat.loading(false);
+                target.find("option").remove();
+                $(target).select2({
+                    data: $.map(data, function (d) {
+                        d.id = d[options.idField];
+                        d.text = d[options.textField];
+                        return d;
+                    })
+                }).val(String(target.data('value')).split(',')).trigger('change');
+            });
+        };
+
+        let promises = [],
+            values = [];
+
+        if (! options.values) {
+            $(_this).find('option:selected').each(function () {
+                if (String(this.value) === '0' || this.value) {
+                    values.push(this.value)
+                }
+            });
+        } else {
+            values = options.values;
+            if (typeof values === 'string') {
+                values = [values];
+            }
+        }
+
+        if (! values.length) {
+            return;
+        }
+
+        options.fields.forEach(function(field, index){
+            var target = $(_this).closest(options.group).find('.' + options.fields[index]);
+
+            if (! values.length) {
+                return;
+            }
+            promises.push(refreshOptions(options.urls[index] + (options.urls[index].match(/\?/)?'&':'?') + "q="+ values.join(','), target));
+        });
+
+        $.when(promises).then(function() {});
+    }
 }

+ 6 - 35
resources/views/form/select-script.blade.php

@@ -37,44 +37,15 @@
         var fields = '{!! $loads['fields'] !!}'.split('^');
         var urls = '{!! $loads['urls'] !!}'.split('^');
 
-        var refreshOptions = function(url, target) {
-            Dcat.loading();
-
-            $.ajax(url).then(function(data) {
-                Dcat.loading(false);
-                target.find("option").remove();
-                $(target).select2({
-                    data: $.map(data, function (d) {
-                        d.id = d.{{ $loads['idField'] }};
-                        d.text = d.{{ $loads['textField'] }};
-                        return d;
-                    })
-                }).val(String(target.data('value')).split(',')).trigger('change');
-            });
-        };
-
         $(document).off('change', selector);
         $(document).on('change', selector, function () {
-            var _this = this;
-            var promises = [];
-            var values = [];
-
-            $(this).find('option:selected').each(function () {
-                if (String(this.value) === '0'|| this.value) {
-                    values.push(this.value)
-                }
+            Dcat.helpers.loadFields(this, {
+                group: '.fields-group',
+                urls: urls,
+                fields: fields,
+                textField: "{{ $loads['textField'] }}",
+                idField: "{{ $loads['idField'] }}",
             });
-
-            fields.forEach(function(field, index){
-                var target = $(_this).closest('.fields-group').find('.' + fields[index]);
-
-                if (! values.length) {
-                    return;
-                }
-                promises.push(refreshOptions(urls[index] + (urls[index].match(/\?/)?'&':'?') + "q="+ values.join(','), target));
-            });
-
-            $.when(promises).then(function() {});
         });
         $(selector).trigger('change');
     </script>

+ 35 - 1
resources/views/form/selecttable.blade.php

@@ -25,15 +25,49 @@
 
 <script require="@select-table" init="{!! $selector !!}">
     var dialogId = $this.parent().find('{!! $dialogSelector !!}').attr('id');
+    var $input = $(this).find('input');
 
     Dcat.grid.SelectTable({
         dialog: '[data-id="' + dialogId + '"]',
         container: $this,
-        input: $(this).find('input'),
+        input: $input,
         @if(isset($max))
         multiple: true,
         max: {{ $max }},
         @endif
         values: {!! json_encode($options) !!},
     });
+
+    @if(! empty($load))
+    $input.on('change', function () {
+        var values = this.value;
+
+        Dcat.helpers.loadField(this, {
+            group: '{{ $load['group'] ?? '.fields-group' }}',
+            class: '.{{ $load['class'] }}',
+            url: "{!! $load['url'].(strpos($load['url'],'?')?'&':'?') !!}q=",
+            textField: "{{ $load['textField'] }}",
+            idField: "{{ $load['idField'] }}",
+            values: values,
+        });
+    }).trigger('change');
+    @endif
+
+    @if(! empty($loads))
+    var fields = '{!! $loads['fields'] !!}'.split('^');
+    var urls = '{!! $loads['urls'] !!}'.split('^');
+
+    $input.on('change', function () {
+        var values = this.value;
+
+        Dcat.helpers.loadFields(this, {
+            group: '.fields-group',
+            urls: urls,
+            fields: fields,
+            textField: "{{ $loads['textField'] }}",
+            idField: "{{ $loads['idField'] }}",
+            values: values,
+        });
+    }).trigger('change');
+    @endif
 </script>

+ 6 - 23
resources/views/scripts/select.blade.php

@@ -43,29 +43,12 @@
 
         $(document).off('change', selector);
         $(document).on('change', selector, function () {
-            var target = $(this).closest('{{ $load['group'] ?? '.fields-group' }}').find(".{{ $load['class'] }}");
-            var values = [];
-
-            $(this).find('option:selected').each(function () {
-                if (String(this.value) === '0'|| this.value) {
-                    values.push(this.value)
-                }
-            });
-
-            if (! values.length) {
-                return;
-            }
-            target.find("option").remove();
-
-            Dcat.loading();
-
-            $.ajax("{!! $load['url'].(strpos($load['url'],'?')?'&':'?') !!}q="+values.join(',')).then(function (data) {
-                Dcat.loading(false);
-
-                $.map(data, function (d) {
-                    target.append(new Option(d.{{ $load['textField'] }}, d.{{ $load['idField'] }}, false, false));
-                });
-                target.val(String(target.attr('data-value')).split(',')).trigger('change');
+            Dcat.helpers.loadField(this, {
+                group: '{{ $load['group'] ?? '.fields-group' }}',
+                class: '.{{ $load['class'] }}',
+                url: "{!! $load['url'].(strpos($load['url'],'?')?'&':'?') !!}q=",
+                textField: "{{ $load['textField'] }}",
+                idField: "{{ $load['idField'] }}",
             });
         });
         $(selector).trigger('change');

+ 55 - 0
src/Form/Field/SelectTable.php

@@ -6,6 +6,7 @@ use Dcat\Admin\Form\Field;
 use Dcat\Admin\Grid\LazyRenderable;
 use Dcat\Admin\Support\Helper;
 use Dcat\Admin\Widgets\DialogTable;
+use Illuminate\Support\Str;
 
 class SelectTable extends Field
 {
@@ -91,6 +92,60 @@ class SelectTable extends Field
         return $this;
     }
 
+    /**
+     * 联动加载.
+     *
+     * @param string $field
+     * @param string $sourceUrl
+     * @param string $idField
+     * @param string $textField
+     *
+     * @return $this
+     */
+    public function load($field, $sourceUrl, string $idField = 'id', string $textField = 'text')
+    {
+        if (Str::contains($field, '.')) {
+            $field = $this->formatName($field);
+        }
+
+        $class = $this->normalizeElementClass($field);
+
+        $url = admin_url($sourceUrl);
+
+        return $this->addVariables(['load' => compact('url', 'class', 'idField', 'textField')]);
+    }
+
+    /**
+     * 联动加载多个字段.
+     *
+     * @param string $fields
+     * @param string $sourceUrls
+     * @param string $idField
+     * @param string $textField
+     *
+     * @return $this
+     */
+    public function loads($fields = [], $sourceUrls = [], string $idField = 'id', string $textField = 'text')
+    {
+        $fieldsStr = implode('^', array_map(function ($field) {
+            if (Str::contains($field, '.')) {
+                return $this->normalizeElementClass($field).'_';
+            }
+
+            return $this->normalizeElementClass($field);
+        }, (array) $fields));
+        $urlsStr = implode('^', array_map(function ($url) {
+            return admin_url($url);
+        }, (array) $sourceUrls));
+
+        return $this->addVariables(['loads' => [
+            'fields'    => $fieldsStr,
+            'urls'      => $urlsStr,
+            'idField'   => $idField,
+            'textField' => $textField,
+        ]]);
+    }
+
     /**
      * @param array $options
      *