fix: InputImage组件自动填充失效问题 (#5505)

baidu · Oct 10, 2022 · 5acdf81 · 5acdf81
1 parent 7dfae98
commit 5acdf81
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/docs/zh-CN/components/form/input-image.md b/docs/zh-CN/components/form/input-image.md
@@ -237,7 +237,7 @@ app.listen(8080, function () {});
 }
 ```
 
-**多选模式**
+### 多选模式
 
 当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。
 
@@ -257,12 +257,75 @@ app.listen(8080, function () {});
         "myUrl": "${items|pick:url}",
         "lastUrl": "${items|last|pick:url}"
       }
+    },
+    {
+      "type": "tpl",
+      "label": false,
+      "inline": false,
+      "tpl": "<strong>myUrl集合</strong>"
+    },
+    {
+      "type": "each",
+      "name": "myUrl",
+      "className": "mb-1",
+      "items": {
+        "type": "tpl",
+        "tpl": "<span class='label label-info m-l-sm inline-block mb-1'><%= data.item %></span>"
+      }
+    },
+    {
+      "type": "tpl",
+      "label": false,
+      "inline": false,
+      "tpl": "<strong>lastUrl</strong>"
+    },
+    {
+      "type": "text",
+      "name": "lastUrl",
+      "label": "lastUrl",
+      "inline": false
+    }
+  ]
+}
+```
+
+### 其他表单项填充
+
+```schema: scope="body"
+{
+  "type": "form",
+  "title": "表单",
+  "body": [
+    {
+      "type": "select",
+      "label": "选项",
+      "name": "imageUrl",
+      "delimiter": "|",
+      "autoFill": {
+        "inputImage": "${value}"
+      },
+      "options": [
+        {
+          "label": "imageURL",
+          "value": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
+        },
+        {
+          "label": "空链接",
+          "value": ""
+        }
+      ]
+    },
+    {
+      "type": "input-image",
+      "label": "图片上传",
+      "name": "inputImage",
+      "imageClassName": "r w-full"
     }
   ]
 }
 ```
 
-**initAutoFill**
+### initAutoFill 初始化时自动同步
 
 当表单反显时，可通过`initAutoFill`控制`autoFill`在数据反显时是否执行。
 

diff --git a/packages/amis/src/renderers/Form/InputImage.tsx b/packages/amis/src/renderers/Form/InputImage.tsx
@@ -836,7 +836,7 @@ export default class ImageControl extends React.Component<
     // 排除自身的字段，否则会无限更新state
     const excludeSelfAutoFill = omit(autoFill, name || '');
 
-    if (!isEmpty(excludeSelfAutoFill) && onBulkChange && this.initAutoFill) {
+    if (!isEmpty(excludeSelfAutoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
@@ -1341,7 +1341,6 @@ export default class ImageControl extends React.Component<
       frameImageStyle.width = frameImageWidth;
     }
     const filterFrameImage = filter(frameImage, this.props.data, '| raw');
-
     const hasPending = files.some(file => file.state == 'pending');
     return (
       <div className={cx(`ImageControl`, className)}>