mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
feat: InputExcel组件支持autoFill
This commit is contained in:
parent
60b1253b8d
commit
4ab14f9331
@ -242,6 +242,40 @@ order: 14
|
||||
}
|
||||
```
|
||||
|
||||
## 解析文件名称
|
||||
|
||||
> `3.5.0`及以上版本
|
||||
|
||||
文件解析成功后,可以使用`autoFill`属性,在当前组件所在的数据域中填充值,`input-excel`组件特有的保留字段请查看下方定义,`InputExcelData`中的字段可以用变量获取。通常可以利用这个属性为`input-excel`所在的表单追加文件名称。
|
||||
|
||||
```typescript
|
||||
interface InputExcelData {
|
||||
/* 文件名称 */
|
||||
filename: string;
|
||||
}
|
||||
```
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"type": "input-excel",
|
||||
"name": "excel",
|
||||
"label": "上传 Excel",
|
||||
"autoFill": {
|
||||
"operator": "amis",
|
||||
"time": "${DATETOSTR(NOW(), 'YYYY-MM-DD HH:mm:ss')}",
|
||||
"fileName": "${filename}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
@ -251,6 +285,7 @@ order: 14
|
||||
| includeEmpty | `boolean` | true | 是否包含空值 |
|
||||
| plainText | `boolean` | true | 是否解析为纯文本 |
|
||||
| placeholder | `string` | `"拖拽 Excel 到这,或点击上传"` | 占位文本提示 | `2.8.1` |
|
||||
| autoFill | `Record<string, string>` | | 自动填充 | `3.5.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
@ -1450,6 +1450,8 @@ order: 2
|
||||
|
||||
## 自动填充 autoFill
|
||||
|
||||
> 支持该配置项的有:ButtonGroup、List、NestedSelect、Picker、Radios、Select、InputFile、InputImage、InputExcel
|
||||
|
||||
一些选择器组件,支持配置`autoFill`,将当前已选中的选项的某个字段的值,自动填充到表单中某个表单项中,支持[数据映射](../../../docs/concepts/data-mapping)
|
||||
|
||||
```schema: scope="body"
|
||||
@ -1556,8 +1558,6 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
支持该配置项的有:ButtonGroup、List、NestedSelect、Picker、Radios、Select。
|
||||
|
||||
## 控制选项高度
|
||||
|
||||
> 1.10.0 及以上版本
|
||||
|
@ -1,8 +1,18 @@
|
||||
import React from 'react';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import {autobind, createObject, isObject, resolveEventData} from 'amis-core';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from 'amis-core';
|
||||
import {FormBaseControlSchema} from '../../Schema';
|
||||
import omit from 'lodash/omit';
|
||||
import merge from 'lodash/merge';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import isPlainObject from 'lodash/isPlainObject';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps,
|
||||
autobind,
|
||||
isObject,
|
||||
resolveEventData,
|
||||
dataMapping
|
||||
} from 'amis-core';
|
||||
import {FormBaseControlSchema, SchemaTokenizeableString} from '../../Schema';
|
||||
import type {CellValue, CellRichTextValue} from 'exceljs';
|
||||
|
||||
/**
|
||||
@ -47,6 +57,13 @@ export interface InputExcelControlSchema extends FormBaseControlSchema {
|
||||
* 占位文本提示
|
||||
*/
|
||||
placeholder?: string;
|
||||
|
||||
/**
|
||||
* 文件解析完成后将字段同步到表单内部
|
||||
*/
|
||||
autoFill?: {
|
||||
[propName: string]: SchemaTokenizeableString;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ExcelProps
|
||||
@ -87,6 +104,28 @@ export default class ExcelControl extends React.PureComponent<
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
syncAutoFill(filename: string) {
|
||||
const {autoFill, onBulkChange, data, name} = this.props;
|
||||
|
||||
if (autoFill?.hasOwnProperty('api') || !isObject(autoFill)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const excludeSelfAutoFill = name ? omit(autoFill, name) : autoFill;
|
||||
|
||||
if (!isEmpty(excludeSelfAutoFill) && onBulkChange) {
|
||||
const toSync = dataMapping(excludeSelfAutoFill, {filename});
|
||||
|
||||
Object.keys(toSync).forEach(key => {
|
||||
if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
|
||||
toSync[key] = merge({}, data[key], toSync[key]);
|
||||
}
|
||||
});
|
||||
onBulkChange(toSync);
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleDrop(files: File[]) {
|
||||
const excel = files[0];
|
||||
@ -116,7 +155,7 @@ export default class ExcelControl extends React.PureComponent<
|
||||
}
|
||||
|
||||
processExcelFile(excelData: ArrayBuffer | string, fileName: string) {
|
||||
const {allSheets, onChange, parseImage} = this.props;
|
||||
const {allSheets, onChange, parseImage, autoFill} = this.props;
|
||||
import('exceljs').then(async (ExcelJS: any) => {
|
||||
this.ExcelJS = ExcelJS;
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
@ -161,7 +200,13 @@ export default class ExcelControl extends React.PureComponent<
|
||||
if (dispatcher?.prevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(sheetsResult);
|
||||
|
||||
if (autoFill) {
|
||||
this.syncAutoFill(fileName);
|
||||
}
|
||||
|
||||
this.setState({filename: fileName});
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user