hasMany字段js设置功能优化

resources/assets/dcat/extra/resource-selector.js

@@ -36,7 +36,7 @@
             cls = column.replace(/[\[\]]*/g, '') + (Math.random().toString(36).substr(2)),
             layer = options.window.layer,
             $input = getQueryDomObject(options.displayerContainer) || $(options.selector).parents('.select-resource').find('div[name="' + column + '"]'),
-            $hidden = getQueryDomObject(options.hiddenInput) || $('input[name="' + column + '"]'),
+            $hidden = getQueryDomObject(options.hiddenInput) || $input.parents('.input-group').find('input[name="' + column + '"]'),
             tagClearClass = options.clearOneClass || (cls + '-tag-clear-button'),
             clearClass = options.clearAllClass || (cls + '-clear-button'),
             maxItem = options.maxItem,

resources/assets/dcat/js/dcat-app.js

@@ -122,3 +122,7 @@ win.CreateDcat = function(config) {
     return prepare(new Dcat(config));
 };
 
+win.replaceNestedFormIndex = function (value) {
+    return value;
+};
+

resources/views/form/selectresource.blade.php

@@ -1,10 +1,8 @@
 <div class="{{$viewClass['form-group']}} {!! !$errors->has($column) ?: 'has-error' !!}">
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
     <div class="{{$viewClass['field']}} select-resource">
         @include('admin::form.error')
 
-        <app></app>
-
         <div class="input-group">
             <div {!! $attributes !!}>
                 @if($maxItem > 2 || ! $maxItem)

src/Form/Field.php

@@ -260,6 +260,19 @@ class Field implements Renderable
         return 'form-field-'.str_replace('.', '-', $column).'-'.$random;
     }
 
+    /**
+     * @param string|null $relationName
+     * @param string      $relationPrimaryKey
+     *
+     * @return $this
+     */
+    public function setNestedFormRelation(?string $relationName, $relationPrimaryKey)
+    {
+        $this->id .= NestedForm::DEFAULT_KEY_NAME;
+
+        return $this;
+    }
+
     /**
      * Format the label value.
      *
@@ -905,9 +918,11 @@ class Field implements Renderable
     public function getElementClass()
     {
         if (! $this->elementClass) {
-            $name = $this->elementName ?: $this->formatName($this->column);
+            $name = $this->getElementName();
 
-            $this->elementClass = (array) str_replace(['[', ']'], '_', $name);
+            $this->elementClass = array_map(function ($value) {
+                return 'field-'.$value;
+            }, (array) str_replace(['[', ']'], '_', $name));
         }
 
         return $this->elementClass;

src/Form/Field/Editor.php

@@ -175,7 +175,13 @@ JS;
     public function render()
     {
         $this->script = <<<JS
-    tinymce.init({$this->formatOptions()})
+(function () {
+    var opts = {$this->formatOptions()};
+
+    opts.selector = replaceNestedFormIndex(opts.selector);
+    
+    tinymce.init(opts)
+})();
 JS;
 
         return parent::render();

src/Form/Field/File.php

@@ -25,8 +25,6 @@ class File extends Field implements UploadFieldInterface
 
     protected $containerId;
 
-    protected $relationName;
-
     /**
      * @param string $column
      * @param array  $arguments
@@ -107,16 +105,14 @@ class File extends Field implements UploadFieldInterface
     }
 
     /**
-     * 设置字段的关联关系（在一/多对多表单中使用）.
-     *
-     * @param string|null $name
+     * @param string|null $relationName
+     * @param string      $relationPrimaryKey
      *
      * @return $this
      */
-    public function setRelation(?string $name, $key)
+    public function setNestedFormRelation(?string $relationName, $relationPrimaryKey)
     {
-        $this->relationName = $name;
-        $this->options['formData']['_relation'] = [$name, $key];
+        $this->options['formData']['_relation'] = [$relationName, $relationPrimaryKey];
 
         $this->containerId .= NestedForm::DEFAULT_KEY_NAME;
         $this->id .= NestedForm::DEFAULT_KEY_NAME;
@@ -124,14 +120,6 @@ class File extends Field implements UploadFieldInterface
         return $this;
     }
 
-    /**
-     * @return mixed
-     */
-    public function getRelation()
-    {
-        return $this->relationName;
-    }
-
     /**
      * Set field as disabled.
      *
@@ -199,25 +187,18 @@ class File extends Field implements UploadFieldInterface
     {
         $newButton = trans('admin.uploader.add_new_media');
         $options = JavaScript::format($this->options);
-        $hasManyKey = NestedForm::DEFAULT_KEY_NAME;
 
         $this->script = <<<JS
 (function () {
     var uploader, 
-    newPage, 
-    cID = '#{$this->containerId}',
-    ID = '#{$this->id}',
-    hasManyKey = '{$hasManyKey}',
-    options = {$options};
-
-    if (typeof nestedIndex !== "undefined") {
-        cID = cID.replace(hasManyKey, nestedIndex);
-        ID = ID.replace(hasManyKey, nestedIndex);
-    }
+        newPage, 
+        cID = replaceNestedFormIndex('#{$this->containerId}'),
+        ID = replaceNestedFormIndex('#{$this->id}'),
+        options = {$options};
 
-    build();
+    init();
 
-    function build() {
+    function init() {
         var opts = $.extend({
             selector: cID,
             addFileButton: cID+' .add-file-button',

src/Form/Field/HasMany.php

@@ -471,7 +471,6 @@ class HasMany extends Field
     protected function setupScriptForDefaultView($templateScript)
     {
         $removeClass = NestedForm::REMOVE_FLAG_CLASS;
-        $defaultKey = NestedForm::DEFAULT_KEY_NAME;
 
         /**
          * When add a new sub form, replace all element key in new sub form.
@@ -483,13 +482,16 @@ class HasMany extends Field
         $script = <<<JS
 (function () {
     var nestedIndex = 0;
+    
+    {$this->makeReplaceNestedIndexScript()}
+    
 $('#has-many-{$this->column}').on('click', '.add', function () {
 
     var tpl = $('template.{$this->column}-tpl');
 
     nestedIndex++;
 
-    var template = tpl.html().replace(/{$defaultKey}/g, nestedIndex);
+    var template = replaceNestedFormIndex(tpl.html());
     $('.has-many-{$this->column}-forms').append(template);
     {$templateScript}
 });
@@ -514,46 +516,47 @@ JS;
     protected function setupScriptForTabView($templateScript)
     {
         $removeClass = NestedForm::REMOVE_FLAG_CLASS;
-        $defaultKey = NestedForm::DEFAULT_KEY_NAME;
 
         $script = <<<JS
 (function () {
     $('#has-many-{$this->column} > .nav').off('click', 'i.close-tab').on('click', 'i.close-tab', function(){
-    var \$navTab = $(this).siblings('a');
-    var \$pane = $(\$navTab.attr('href'));
-    if( \$pane.hasClass('new') ){
-        \$pane.remove();
-    }else{
-        \$pane.removeClass('active').find('.$removeClass').val(1);
-    }
-    if(\$navTab.closest('li').hasClass('active')){
-        \$navTab.closest('li').remove();
-        $('#has-many-{$this->column} > .nav > li:nth-child(1) > a').click();
-    }else{
-        \$navTab.closest('li').remove();
-    }
-});
-
-var nestedIndex = 0;
-$('#has-many-{$this->column} > .header').off('click', '.add').on('click', '.add', function(){
-    nestedIndex++;
-    var navTabHtml = $('#has-many-{$this->column} > template.nav-tab-tpl').html().replace(/{$defaultKey}/g, nestedIndex);
-    var paneHtml = $('#has-many-{$this->column} > template.pane-tpl').html().replace(/{$defaultKey}/g, nestedIndex);
-    $('#has-many-{$this->column} > .nav').append(navTabHtml);
-    $('#has-many-{$this->column} > .tab-content').append(paneHtml);
-    $('#has-many-{$this->column} > .nav > li:last-child a').click();
-    {$templateScript}
-});
-
-if ($('.has-error').length) {
-    $('.has-error').parent('.tab-pane').each(function () {
-        var tabId = '#'+$(this).attr('id');
-        $('li a[href="'+tabId+'"] i').removeClass('d-none');
+        var \$navTab = $(this).siblings('a');
+        var \$pane = $(\$navTab.attr('href'));
+        if( \$pane.hasClass('new') ){
+            \$pane.remove();
+        }else{
+            \$pane.removeClass('active').find('.$removeClass').val(1);
+        }
+        if(\$navTab.closest('li').hasClass('active')){
+            \$navTab.closest('li').remove();
+            $('#has-many-{$this->column} > .nav > li:nth-child(1) > a').click();
+        }else{
+            \$navTab.closest('li').remove();
+        }
     });
+        
+    {$this->makeReplaceNestedIndexScript()}
     
-    var first = $('.has-error:first').parent().attr('id');
-    $('li a[href="#'+first+'"]').tab('show');
-}
+    var nestedIndex = 0;
+    $('#has-many-{$this->column} > .header').off('click', '.add').on('click', '.add', function(){
+        nestedIndex++;
+        var navTabHtml = replaceNestedFormIndex($('#has-many-{$this->column} > template.nav-tab-tpl').html());
+        var paneHtml = replaceNestedFormIndex($('#has-many-{$this->column} > template.pane-tpl').html());
+        $('#has-many-{$this->column} > .nav').append(navTabHtml);
+        $('#has-many-{$this->column} > .tab-content').append(paneHtml);
+        $('#has-many-{$this->column} > .nav > li:last-child a').click();
+        {$templateScript}
+    });
+    
+    if ($('.has-error').length) {
+        $('.has-error').parent('.tab-pane').each(function () {
+            var tabId = '#'+$(this).attr('id');
+            $('li a[href="'+tabId+'"] i').removeClass('d-none');
+        });
+        
+        var first = $('.has-error:first').parent().attr('id');
+        $('li a[href="#'+first+'"]').tab('show');
+    }
 })();
 JS;
 
@@ -570,7 +573,6 @@ JS;
     protected function setupScriptForTableView($templateScript)
     {
         $removeClass = NestedForm::REMOVE_FLAG_CLASS;
-        $defaultKey = NestedForm::DEFAULT_KEY_NAME;
 
         /**
          * When add a new sub form, replace all element key in new sub form.
@@ -582,12 +584,15 @@ JS;
         $script = <<<JS
 (function () {
     var nestedIndex = 0;
+    
+    {$this->makeReplaceNestedIndexScript()}
+    
     $('#has-many-{$this->column}').on('click', '.add', function () {
         var tpl = $('template.{$this->column}-tpl');
     
         nestedIndex++;
     
-        var template = tpl.html().replace(/{$defaultKey}/g, nestedIndex);
+        var template = replaceNestedFormIndex(tpl.html());
         $('.has-many-{$this->column}-forms').append(template);
         {$templateScript}
     });
@@ -602,6 +607,20 @@ JS;
         Admin::script($script);
     }
 
+    /**
+     * @return string
+     */
+    protected function makeReplaceNestedIndexScript()
+    {
+        $defaultKey = NestedForm::DEFAULT_KEY_NAME;
+
+        return <<<JS
+function replaceNestedFormIndex(value) {
+    return String(value).replace(/{$defaultKey}/g, nestedIndex);
+}
+JS;
+    }
+
     /**
      * Disable create button.
      *

src/Form/Field/Markdown.php

@@ -150,7 +150,9 @@ class Markdown extends Field
 
         $opts = JavaScript::format($this->options);
 
-        $this->script = "editormd(\"{$this->id}\", {$opts});";
+        $this->script = <<<JS
+editormd(replaceNestedFormIndex("{$this->id}"), {$opts});
+JS;
     }
 
     /**

src/Form/Field/SelectResource.php

@@ -175,7 +175,7 @@ Dcat.ResourceSelector({
     title: '{$label}',
     column: "{$this->getElementName()}",
     source: '{$this->source}',
-    selector: '#{$this->btnId}',
+    selector: replaceNestedFormIndex('#{$this->btnId}'),
     maxItem: {$maxItem}, 
     area: {$area},
     queryName: '{$queryName}',
@@ -184,7 +184,7 @@ Dcat.ResourceSelector({
     showCloseButton: false,
     disabled: '{$disabled}',
     displayer: 'default',
-    displayerContainer: $('$displayerContainer'),
+    displayerContainer: $(replaceNestedFormIndex('{$displayerContainer}')),
 });
 JS;
     }

src/Form/NestedForm.php

@@ -327,9 +327,7 @@ class NestedForm
             $field->attribute(Builder::BUILD_IGNORE, true);
         }
 
-        if ($field instanceof UploadField) {
-            $field->setRelation($this->relationName, $this->key);
-        }
+        $field->setNestedFormRelation($this->relationName, $this->key);
 
         $field::collectAssets();