fix:autoFill去除mapping配置 (#3959)

Co-authored-by: dqc <qianchuan.deng@gmail.com>
This commit is contained in:
qianchuan 2022-04-06 13:52:38 +08:00 committed by GitHub
parent 536af47d6d
commit c6b10613a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 26 deletions

View File

@ -1003,7 +1003,7 @@ Table 类型的表单项,要实现服务端校验,可以使用 `路径key`
### 配置自动填充
通过配置 "autoUpdate" 来开启自动填充;其中 api 为自动填充数据源接口地址mapping 为返回结果需要自动填充的 key value 映射关系
通过配置 "autoFillApi" 为自动填充数据源接口地址amis 可以将返回数据自动填充到表单中,例如如下配置
```schema:scope="body"
{
@ -1013,14 +1013,14 @@ Table 类型的表单项,要实现服务端校验,可以使用 `路径key`
"type": "input-text",
"label": "浏览器",
"name": "browser",
"autoUpdate": {
"autoFillApi": {
api: "/api/mock2/form/autoUpdate?browser=$browser",
showToast: true,
mapping: {
browser: "browser",
version: "version",
platform1: "${browser}",
}
replaceData: {
browser: "${browser}",
version: "${version}",
platform1: "${platform}",
},
silent: false
}
},
{

View File

@ -615,6 +615,11 @@ export interface SchemaApiObject {
indices?: boolean;
allowDots?: boolean;
};
/**
* autoFillApi
*/
silent?: boolean;
}
export type SchemaApi = string | SchemaApiObject;

View File

@ -26,6 +26,7 @@ import {SchemaRemark} from '../Remark';
import {
BaseSchema,
SchemaApi,
SchemaApiObject,
SchemaClassName,
SchemaExpression,
SchemaObject,
@ -420,7 +421,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
this.reaction.push(
reaction(
() => JSON.stringify(model.tmpValue),
() => this.syncAutoUpdate(model.tmpValue)
() => this.syncAutoFill(model.tmpValue)
)
);
}
@ -429,7 +430,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
componentWillUnmount() {
this.reaction.forEach(fn => fn());
this.reaction = [];
this.syncAutoUpdate.cancel();
this.syncAutoFill.cancel();
}
@autobind
@ -446,36 +447,32 @@ export class FormItemWrap extends React.Component<FormItemProps> {
this.props.onBlur && this.props.onBlur(e);
}
syncAutoUpdate = debounce(
syncAutoFill = debounce(
(term: any) => {
(async (term: string) => {
const {autoUpdate, onBulkChange, formItem, data} = this.props;
if (!autoUpdate || (autoUpdate && !autoUpdate.mapping)) {
const {autoFillApi, onBulkChange, formItem, data} = this.props;
if (!autoFillApi) {
return;
}
const {api, showToast} = autoUpdate;
let mapping = {...autoUpdate.mapping};
const itemName = formItem?.name;
const ctx = createObject(data, {
[itemName || '']: term
});
mapping = dataMapping(mapping, ctx);
if (
!isEmpty(mapping) &&
onBulkChange &&
isEffectiveApi(api, ctx) &&
isEffectiveApi(autoFillApi, ctx) &&
this.lastSearchTerm !== term
) {
const result = await formItem?.loadAutoUpdateData(
api,
autoFillApi,
ctx,
showToast
!!(autoFillApi as SchemaApiObject)?.silent
);
if (!result) return;
mapping = dataMapping(autoUpdate.mapping, result);
this.lastSearchTerm = getVariable(mapping, itemName) ?? term;
onBulkChange(mapping);
this.lastSearchTerm = getVariable(result, itemName) ?? term;
onBulkChange(result);
}
})(term).catch(e => console.error(e));
},

View File

@ -628,11 +628,11 @@ export const FormItemStore = StoreNode.named('FormItemStore')
const loadAutoUpdateData: (
api: Api,
data?: object,
showToast?: boolean
silent?: boolean
) => Promise<Payload> = flow(function* getAutoUpdateData(
api: string,
data: object,
showToast: boolean = false
silent: boolean = true
) {
if (loadAutoUpdateCancel) {
loadAutoUpdateCancel();
@ -644,9 +644,11 @@ export const FormItemStore = StoreNode.named('FormItemStore')
(loadAutoUpdateCancel = executor)
});
loadAutoUpdateCancel = null;
if (!json) {
return;
}
const result = json.data?.items || json.data?.rows;
// 只处理仅有一个结果的数据
if (result?.length === 1) {
@ -654,7 +656,9 @@ export const FormItemStore = StoreNode.named('FormItemStore')
} else if (isPlainObject(json.data)) {
return json.data;
}
showToast && toast.info(self.__('FormItem.autoUpdateloadFaild'));
!silent && toast.info(self.__('FormItem.autoUpdateloadFaild'));
return;
});