feat:自动填充API联动 (#4786)

Co-authored-by: dqc <qianchuan.deng@gmail.com>

docs/zh-CN/components/form/formitem.md

@@ -1147,10 +1147,12 @@ Table 类型的表单项，要实现服务端校验，可以使用 `路径key`
       "autoFill": {
         showSuggestion: false,
         "fillMapping": {
-          "name": "${name}",
+          browser: "${browser}",
+          version: "${version}",
+          platform: '${platform1}'
         },
         api: {
-          url: "/api/mock2/form/autoUpdate?browser=$browser",
+          url: "/api/mock2/form/autoUpdate?browser=${browser}&version=${version}",
           responseData: {
             browser: "${browser}",
             version: "${version}",
@@ -1168,7 +1170,7 @@ Table 类型的表单项，要实现服务端校验，可以使用 `路径key`
     {
       "type": "input-text",
       "label": "平台",
-      "name": "platform1"
+      "name": "platform"
     },
   ]
 }
@@ -1209,8 +1211,8 @@ Table 类型的表单项，要实现服务端校验，可以使用 `路径key`
 
 fillMapping 配置 支持变量取值和表达式；
 如下配置中，如果想一次选中多条数据并映射可如下配置表达式，其中 items 默认为选中的 1 至 N 条数据：
-仅挑选 name,version 字段追加数据并去重：combo：'${UNIQ(CONCAT(combo, ARRAYMAP(items, item => {browserName: item.name, version: item.version})))}'
-数据替换并去重：combo：'${UNIQ(ARRAYMAP(items, item => {browserName: item.name, version: item.version}))}'
+仅挑选 platform,version 字段追加数据并去重：combo：'${UNIQ(CONCAT(combo, ARRAYMAP(items, item => {platform: item.platform, version: item.version})))}'
+数据替换并去重：combo：'${UNIQ(ARRAYMAP(items, item => {platform: item.platform, version: item.version}))}'
 数据替换：combo: ${items}
 
 ```schema:scope="body"
@@ -1223,11 +1225,11 @@ fillMapping 配置 支持变量取值和表达式；
       "name": "browser",
       "autoFill": {
         "showSuggestion": true,
-        "api": "/api/mock2/form/autoFillApi",
+        "api": "/api/mock2/form/autoUpdate?items=1",
         "multiple": true,
         "fillMapping": {
-          "combo": "${UNIQ(CONCAT(combo, ARRAYMAP(items, item => {browserName: item.name, version: item.version})))}",
-          "name": "${name}",
+          "combo": "${UNIQ(CONCAT(combo, ARRAYMAP(items, item => {platform: item.platform, version: item.version})))}",
+          "version": "${items[0].version}",
         },
         "labelField": "name",
         "position": "left-bottom-left-top",
@@ -1236,7 +1238,7 @@ fillMapping 配置 支持变量取值和表达式；
         "size": "md",
         "filter": {
           "body": [
-            { "type": "input-text", "name": "name", "label": "名称" },
+            { "type": "input-text", "name": "platfrom", "label": "平台" },
             { "type": "input-text", "name": "version", "label": "版本" },
             { "type": "button-toolbar", "buttons": [{ "type": "submit", "label": "搜索", "level": "primary" }] }
           ],
@@ -1244,7 +1246,7 @@ fillMapping 配置 支持变量取值和表达式；
           "mode": "horizontal"
         },
         "columns": [
-          { "name": "name", "label": "名称", "sortable": true },
+          { "name": "platform", "label": "平台", "sortable": true },
           { "name": "version", "label": "版本", "sortable": true }
         ]
       }
@@ -1257,12 +1259,13 @@ fillMapping 配置 支持变量取值和表达式；
     {
         type: 'combo',
         name: 'combo',
+        strictMode: false,
         addable: true,
         multiple: true,
         label: '版本明细',
         items: [
           {
-            name: 'name',
+            name: 'platform',
             label: '平台',
             type: 'input-text'
           },

mock/cfc/mock/form/autoUpdate.js

@@ -6,50 +6,52 @@ const result = async (req, res) => {
     {
       browser: 'Chrome',
       version: '1',
-      platform: 'linux',
+      platform: 'linux 1',
       Chrome: 'xxx1'
     },
     {
       browser: 'Chrome',
       version: '2',
-      platform: 'windows',
+      platform: 'windows xp',
       Chrome: 'xxx2'
     },
     {
       browser: 'Firefox',
       version: '3',
-      platform: 'linux',
+      platform: 'linux 2',
       Chrome: 'xxx3'
     },
     {
       browser: 'Firefox',
       version: '4',
-      platform: 'windows',
+      platform: 'windows 8',
       Chrome: 'xxx4'
     },
     {
       browser: 'Opera',
       version: '5',
-      platform: 'linux',
+      platform: 'linux 3',
       Chrome: 'xxx5'
     },
     {
       browser: 'Opera',
       version: '6',
-      platform: 'windows',
+      platform: 'windows 10',
       Chrome: 'xxx6'
     }
   ];
 
   await sleep(1000);
   const browser = req.query.browser;
+  const items = req.query.items;
   res.json({
     status: 0,
     msg: '',
-    data:
-      data.filter(function (item) {
-        return browser ? ~item.browser.indexOf(browser) : false;
-      })[0] || data[0]
+    data: items
+      ? data
+      : data.filter(function (item) {
+          return browser ? ~item.browser.indexOf(browser) : false;
+        })[0] || data[0]
   });
 };
 

packages/amis-core/src/renderers/Item.tsx

@@ -30,7 +30,7 @@ import {filter} from '../utils/tpl';
 import {HocStoreFactory} from '../WithStore';
 import {wrapControl} from './wrapControl';
 import debounce from 'lodash/debounce';
-import {isEffectiveApi} from '../utils/api';
+import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {findDOMNode} from 'react-dom';
 import {dataMapping} from '../utils';
 import Overlay from '../components/Overlay';
@@ -439,6 +439,23 @@ export class FormItemWrap extends React.Component<FormItemProps> {
     }
   }
 
+  componentDidUpdate(prevProps: FormItemProps) {
+    const props = this.props;
+    const {formItem: model} = props;
+
+    if (
+      isEffectiveApi(props.autoFill?.api, props.data) &&
+      isApiOutdated(
+        prevProps.autoFill?.api,
+        props.autoFill?.api,
+        prevProps.data,
+        props.data
+      )
+    ) {
+      this.syncAutoFill(model?.tmpValue, true);
+    }
+  }
+
   componentDidMount() {
     this.target = findDOMNode(this) as HTMLElement;
   }
@@ -514,8 +531,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
   }
 
   syncAutoFill = debounce(
-    (term: any) => {
-      (async (term: string) => {
+    (term: any, reload?: boolean) => {
+      (async (term: string, reload?: boolean) => {
         const {autoFill, onBulkChange, formItem, data} = this.props;
 
         // 参照录入
@@ -531,9 +548,10 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             [itemName || '']: term
           });
           if (
-            onBulkChange &&
-            isEffectiveApi(autoFill.api, ctx) &&
-            this.lastSearchTerm !== term
+            (onBulkChange &&
+              isEffectiveApi(autoFill.api, ctx) &&
+              this.lastSearchTerm !== term) ||
+            reload
           ) {
             let result = await formItem?.loadAutoUpdateData(
               autoFill.api,
@@ -551,7 +569,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             result && onBulkChange?.(result);
           }
         }
-      })(term).catch(e => console.error(e));
+      })(term, reload).catch(e => console.error(e));
     },
     250,
     {