diff --git a/docs/zh-CN/components/form/input-excel.md b/docs/zh-CN/components/form/input-excel.md index 19c99d9d8..7f8ea475d 100644 --- a/docs/zh-CN/components/form/input-excel.md +++ b/docs/zh-CN/components/form/input-excel.md @@ -223,3 +223,15 @@ order: 14 | parseMode | `'array'` 或 `'object'` | 'object' | 解析模式 | | includeEmpty | `boolean` | true | 是否包含空值 | | plainText | `boolean` | true | 是否解析为纯文本 | + +## 事件表 + +| 事件名称 | 事件参数 | 说明 | +| -------- | ---------------------- | -------------------- | +| change | `value: Array` | 选中值发生变化时触发 | + +## 动作表 + +| 动作名称 | 动作配置 | 说明 | +| -------- | -------- | ---- | +| clear | - | 清空 | diff --git a/docs/zh-CN/components/form/input-file.md b/docs/zh-CN/components/form/input-file.md index a89bb92d7..92f78df8c 100755 --- a/docs/zh-CN/components/form/input-file.md +++ b/docs/zh-CN/components/form/input-file.md @@ -311,3 +311,26 @@ order: 21 | startChunkApi | [API](../../../docs/types/api) | | startChunkApi | | chunkApi | [API](../../../docs/types/api) | | chunkApi | | finishChunkApi | [API](../../../docs/types/api) | | finishChunkApi | + +## 事件表 + +| 事件名称 | 事件参数 | 说明 | +| -------- | ------------------------ | -------------------- | +| change | `file: Array` | 选中值发生变化时触发 | +| remove | `file: FileValue` | 被移除的文件 | +| success | `file: FileValue` | 上传成功的文件 | +| fail | `file: FileValue` | 上传失败的文件 | + +### FileValue 属性表 + +| 属性名 | 类型 | 说明 | +| ------ | -------- | -------------------------------------------------- | +| name | `string` | 文件名称 | +| value | `string` | 上传成功后返回的 url | +| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` | +| error | `string` | 错误信息 | +## 动作表 + +| 动作名称 | 动作配置 | 说明 | +| -------- | -------- | ---- | +| clear | - | 清空 | \ No newline at end of file diff --git a/docs/zh-CN/components/form/input-image.md b/docs/zh-CN/components/form/input-image.md index f5bfe104c..c52bb3e99 100755 --- a/docs/zh-CN/components/form/input-image.md +++ b/docs/zh-CN/components/form/input-image.md @@ -398,3 +398,27 @@ app.listen(8080, function () {}); | maxWidth | `number` | | 限制图片最大宽度。 | | maxHeight | `number` | | 限制图片最大高度。 | | aspectRatio | `number` | | 限制图片宽高比,格式为浮点型数字,默认 `1` 即 `1:1`,如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率,请设置空字符串。 | + +## 事件表 + +| 事件名称 | 事件参数 | 说明 | +| -------- | ------------------------ | -------------------- | +| change | `file: Array` | 选中值发生变化时触发 | +| remove | `file: FileValue` | 被移除的文件 | +| success | `file: FileValue` | 上传成功的文件 | +| fail | `file: FileValue` | 上传失败的文件 | + +### FileValue 属性表 + +| 属性名 | 类型 | 说明 | +| ------ | -------- | -------------------------------------------------- | +| name | `string` | 图片名称 | +| value | `string` | 上传成功后返回的 url | +| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` | +| error | `string` | 错误信息 | + +## 动作表 + +| 动作名称 | 动作配置 | 说明 | +| -------- | -------- | ---- | +| clear | - | 清空 | diff --git a/src/renderers/Form/InputFile.tsx b/src/renderers/Form/InputFile.tsx index ab9ba0360..3066e16c8 100644 --- a/src/renderers/Form/InputFile.tsx +++ b/src/renderers/Form/InputFile.tsx @@ -818,7 +818,11 @@ export default class FileControl extends React.Component { let value = (ret.data as any).value || (ret.data as any).url || ret.data; - const dispatcher = await this.dispatchEvent('success', file); + const dispatcher = await this.dispatchEvent('success', { + ...file, + value, + state: 'uploaded' + }); if (dispatcher?.prevented) { return; } @@ -1220,11 +1224,19 @@ export default class FileControl extends React.Component { async dispatchEvent(e: string, data?: Record) { const {dispatchEvent} = this.props; - data = data || this.state.files; + const getEventData = (item: Record) => ({ + name: item.path || item.name, + value: item.value, + state: item.state, + error: item.error + }); + const value = data + ? getEventData(data) + : this.state.files.map(item => getEventData(item)); return dispatchEvent( e, createObject(this.props.data, { - file: data + file: value }) ); } diff --git a/src/renderers/Form/InputImage.tsx b/src/renderers/Form/InputImage.tsx index 45b342598..ced718b2d 100644 --- a/src/renderers/Form/InputImage.tsx +++ b/src/renderers/Form/InputImage.tsx @@ -1081,7 +1081,11 @@ export default class ImageControl extends React.Component< }; obj.value = obj.value || obj.url; - const dispatcher = await this.dispatchEvent('success', obj); + const dispatcher = await this.dispatchEvent('success', { + ...file, + value: obj.value, + state: 'uploaded' + }); if (dispatcher?.prevented) { return; } @@ -1252,8 +1256,16 @@ export default class ImageControl extends React.Component< async dispatchEvent(e: string, data?: Record) { const {dispatchEvent} = this.props; - data = data ? data : this.files; - return dispatchEvent(e, createObject(this.props.data, {file: data})); + const getEventData = (item: Record) => ({ + name: item.path || item.name, + value: item.value, + state: item.state, + error: item.error + }); + const value = data + ? getEventData(data) + : this.files.map(item => getEventData(item)); + return dispatchEvent(e, createObject(this.props.data, {file: value})); } // 动作