chore: input-excel 解析后显示文件名 (#3571)

src/locale/en-US.ts

@@ -96,6 +96,7 @@ register('en-US', {
   'Embed.invalidRoot': 'Invalid root selector',
   'Embed.downloading': 'Start downloading',
   'Excel.placeholder': `Drag 'n' drop excel here, or click to select`,
+  'Excel.parsed': '{{filename}} Parsed',
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
   'File.downloadTpl': 'Download template',

src/locale/zh-CN.ts

@@ -101,6 +101,7 @@ register('zh-CN', {
   'Embed.invalidRoot': '选择器不对，页面上没有此元素',
   'Embed.downloading': '文件即将开始下载',
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
+  'Excel.parsed': '已解析 {{filename}}',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
   'File.downloadTpl': '下载模板',
@@ -114,7 +115,7 @@ register('zh-CN', {
   'File.result': '已成功上传 {{uploaded}} 个文件，{{failed}} 个文件上传失败，',
   'File.retry': '重试上传',
   'File.start': '开始上传',
-  'File.upload': '上传文件',
+  'File.upload': '已上传',
   'File.uploadFailed': '接口返回错误，请仔细检查',
   'File.uploading': '上传中...',
   'Form.loadOptionsFailed': '加载选项失败，原因：{{reason}}',

src/renderers/Form/InputExcel.tsx

@@ -1,6 +1,7 @@
 import React, {Suspense} from 'react';
 import Dropzone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';
+import {Icon} from '../../components/icons';
 import {autobind} from '../../utils/helper';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 
@@ -43,7 +44,7 @@ export interface ExcelProps
     > {}
 
 export interface ExcelControlState {
-  open: boolean;
+  filename: string;
 }
 
 export default class ExcelControl extends React.PureComponent<
@@ -56,8 +57,9 @@ export default class ExcelControl extends React.PureComponent<
     includeEmpty: true,
     plainText: true
   };
+
   state: ExcelControlState = {
-    open: false
+    filename: ''
   };
 
   ExcelJS: any;
@@ -87,6 +89,7 @@ export default class ExcelControl extends React.PureComponent<
             const worksheet = workbook.worksheets[0];
             onChange(this.readWorksheet(worksheet));
           }
+          this.setState({filename: files[0].name});
         });
       }
     };
@@ -165,7 +168,13 @@ export default class ExcelControl extends React.PureComponent<
             <section className={cx('ExcelControl-container', className)}>
               <div {...getRootProps({className: cx('ExcelControl-dropzone')})}>
                 <input {...getInputProps()} />
-                <p>{__('Excel.placeholder')}</p>
+                {this.state.filename ? (
+                  __('Excel.parsed', {
+                    filename: this.state.filename
+                  })
+                ) : (
+                  <p>{__('Excel.placeholder')}</p>
+                )}
               </div>
             </section>
           )}