调整HasMany无法新增多个文件上传表单问题

src/Form/Field/File.php

@@ -4,6 +4,7 @@ namespace Dcat\Admin\Form\Field;
 
 use Dcat\Admin\Contracts\UploadField as UploadFieldInterface;
 use Dcat\Admin\Form\Field;
+use Dcat\Admin\Form\NestedForm;
 use Dcat\Admin\Support\Helper;
 use Dcat\Admin\Support\JavaScript;
 use Illuminate\Support\Arr;
@@ -117,6 +118,9 @@ class File extends Field implements UploadFieldInterface
         $this->relationName = $name;
         $this->options['formData']['_relation'] = [$name, $key];
 
+        $this->containerId .= NestedForm::DEFAULT_KEY_NAME;
+        $this->id .= NestedForm::DEFAULT_KEY_NAME;
+
         return $this;
     }
 
@@ -181,7 +185,7 @@ class File extends Field implements UploadFieldInterface
 
         $this->forceOptions();
         $this->formatValue();
-        $this->setupScript();
+        $this->setUpScript();
 
         $this->addVariables([
             'fileType'    => $this->options['isImage'] ? '' : 'file',
@@ -191,32 +195,43 @@ class File extends Field implements UploadFieldInterface
         return parent::render();
     }
 
-    protected function setupScript()
+    protected function setUpScript()
     {
         $newButton = trans('admin.uploader.add_new_media');
         $options = JavaScript::format($this->options);
+        $hasManyKey = NestedForm::DEFAULT_KEY_NAME;
 
         $this->script = <<<JS
 (function () {
-    var uploader, newPage, options = {$options};
+    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);
+    }
 
     build();
 
     function build() {
         var opts = $.extend({
-            selector: '#{$this->containerId}',
-            addFileButton: '#{$this->containerId} .add-file-button',
-            inputSelector: '#{$this->id}',
+            selector: cID,
+            addFileButton: cID+' .add-file-button',
+            inputSelector: ID,
         }, options);
 
         opts.upload = $.extend({
             pick: {
-                id: '#{$this->containerId} .file-picker',
+                id: cID+' .file-picker',
                 name: '_file_',
                 label: '<i class="feather icon-folder"></i>&nbsp; {$newButton}'
             },
-            dnd: '#{$this->containerId} .dnd-area',
-            paste: '#{$this->containerId} .web-uploader'
+            dnd: cID+' .dnd-area',
+            paste: cID+' .web-uploader'
         }, opts);
 
         uploader = Dcat.Uploader(opts);

src/Form/Field/HasMany.php

@@ -475,14 +475,14 @@ class HasMany extends Field
          */
         $script = <<<JS
 (function () {
-    var index = 0;
+    var nestedIndex = 0;
 $('#has-many-{$this->column}').on('click', '.add', function () {
 
     var tpl = $('template.{$this->column}-tpl');
 
-    index++;
+    nestedIndex++;
 
-    var template = tpl.html().replace(/{$defaultKey}/g, index);
+    var template = tpl.html().replace(/{$defaultKey}/g, nestedIndex);
     $('.has-many-{$this->column}-forms').append(template);
     {$templateScript}
 });
@@ -527,11 +527,11 @@ JS;
     }
 });
 
-var index = 0;
+var nestedIndex = 0;
 $('#has-many-{$this->column} > .header').off('click', '.add').on('click', '.add', function(){
-    index++;
-    var navTabHtml = $('#has-many-{$this->column} > template.nav-tab-tpl').html().replace(/{$defaultKey}/g, index);
-    var paneHtml = $('#has-many-{$this->column} > template.pane-tpl').html().replace(/{$defaultKey}/g, index);
+    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();
@@ -574,13 +574,13 @@ JS;
          */
         $script = <<<JS
 (function () {
-    var index = 0;
+    var nestedIndex = 0;
     $('#has-many-{$this->column}').on('click', '.add', function () {
         var tpl = $('template.{$this->column}-tpl');
     
-        index++;
+        nestedIndex++;
     
-        var template = tpl.html().replace(/{$defaultKey}/g, index);
+        var template = tpl.html().replace(/{$defaultKey}/g, nestedIndex);
         $('.has-many-{$this->column}-forms').append(template);
         {$templateScript}
     });