@ticatec/batch-data-uploader 0.0.4 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,225 @@
1
+ # BaseTemplate 类
2
+
3
+ 一个用于解析 Excel 文件并处理具有可定制列定义数据的抽象基类。
4
+
5
+ ## 概述
6
+
7
+ `BaseTemplate` 类为使用 `xlsx` 库处理 Excel 文件提供了一个基础。它支持将 Excel 数据解析为结构化格式,并通过子类化支持自定义列定义和数据转换。该类设计为可扩展以适应特定用例。
8
+ 通常不需要直接从BaseTemplate继承,根据业务需要可以直接使用两个子类 `BaseEncodingTemplate` 或者 `BaseUploadTemplate`
9
+
10
+ ## 使用方法
11
+
12
+ 要使用 `BaseTemplate`,需继承该类并实现必要的自定义数据处理逻辑。以下是一个示例:
13
+
14
+ ```typescript
15
+ import BaseTemplate from './BaseTemplate';
16
+ import type { DataColumn } from './DataColumn';
17
+
18
+ class MyTemplate extends BaseTemplate {
19
+ constructor(columns: DataColumn[], rowOffset: number = 1) {
20
+ super(columns, rowOffset);
21
+ }
22
+
23
+ // 可选地重写 consolidateData 以进行自定义数据处理
24
+ protected async consolidateData(rows: Array<any>): Promise<Array<any>> {
25
+ // 在此添加自定义逻辑
26
+ return rows;
27
+ }
28
+ }
29
+ ```
30
+
31
+ ### 解析 Excel 文件
32
+
33
+ 要解析 Excel 文件,请使用 `File` 对象调用 `parseExcelFile` 方法:
34
+
35
+ ```typescript
36
+ const file: File = // ... 获取文件(例如,从输入元素获取)
37
+ const columns: DataColumn[] = [
38
+ { field: 'name', parser: (value) => String(value) },
39
+ { field: 'age', parser: (value) => Number(value) }
40
+ ];
41
+ const template = new MyTemplate(columns);
42
+ await template.parseExcelFile(file);
43
+ console.log(template.list); // 访问解析后的数据
44
+ ```
45
+
46
+ ## 类详情
47
+
48
+ ### 构造函数
49
+
50
+ ```typescript
51
+ protected constructor(columns: Array<DataColumn>, rowOffset: number = 1)
52
+ ```
53
+
54
+ - **参数**:
55
+ - `columns`:定义数据结构(字段名和可选解析器)的 `DataColumn` 对象数组。
56
+ - `rowOffset`:Excel 表中要跳过的起始行数(默认值:1,例如跳过标题行)。
57
+ - **描述**:使用列定义和行偏移初始化模板。
58
+
59
+ ### 方法
60
+
61
+ #### `parseExcelFile`
62
+
63
+ ```typescript
64
+ async parseExcelFile(file: File): Promise<void>
65
+ ```
66
+
67
+ - **参数**:
68
+ - `file`:要解析的 Excel 文件。
69
+ - **描述**:读取并解析 Excel 文件,根据列定义处理每一行,并将结果在应用 `consolidateData` 后存储到内部 `_list` 中。
70
+ - **依赖**:使用 `xlsx` 读取 Excel 文件,使用 `utils` 进行嵌套值操作。
71
+
72
+ #### `consolidateData`
73
+
74
+ ```typescript
75
+ protected async consolidateData(rows: Array<any>): Promise<Array<any>>
76
+ ```
77
+
78
+ - **参数**:
79
+ - `rows`:从 Excel 文件解析出的原始行对象数组。
80
+ - **描述**:子类可重写的钩子方法,用于执行额外的数据处理。默认返回未更改的行。
81
+ - **重写**:子类可重写此方法以实现自定义数据转换逻辑。
82
+
83
+ #### `extractData`
84
+
85
+ ```typescript
86
+ protected extractData(arr: Array<any>): Array<any>
87
+ ```
88
+
89
+ - **参数**:
90
+ - `arr`:要处理的数据对象数组。
91
+ - **描述**:过滤并映射输入数据,仅包括可见且未忽略的列,返
92
+ 回处理后的新对象数组。
93
+ - **用途**:在内部用于准备上传或进一步处理的数据。
94
+
95
+ #### `wrapData`
96
+
97
+ ```typescript
98
+ protected wrapData(data: any): any
99
+ ```
100
+
101
+ - **参数**:
102
+ - `data`:单个行对象。
103
+ - **描述**:用于包装或转换单个行数据的钩子方法。默认返回未更改的数据。
104
+ - **重写**:子类可重写此方法以将数据包装为特定结构。
105
+
106
+ #### `columns`(获取器)
107
+
108
+ ```typescript
109
+ get columns(): Array<TableColumn>
110
+ ```
111
+
112
+ - **返回**:`TableColumn` 对象的数组,表示列定义。
113
+ - **描述**:提供列定义的副本,供数据表或其他 UI 组件使用。
114
+
115
+ #### `list`(获取器)
116
+
117
+ ```typescript
118
+ get list(): Array<any>
119
+ ```
120
+
121
+ - **返回**:解析并处理后的数据列表的副本。
122
+ - **描述**:提供对处理后数据的外部访问。
123
+
124
+ ## 类型 DataColumn接口
125
+
126
+ 定义数据表列结构和行为的 TypeScript 接口,用于描述数据列的元数据,支持列显示、数据解析和格式化等功能。
127
+ `DataColumn` 接口定义了数据表中列的属性和行为,包括列标题、字段映射、格式化、对齐, 用于数据解析和上传控制的特定字段。适用于需要处理表格数据和 Excel 文件解析的场景。
128
+
129
+ ### 使用方法
130
+
131
+ `DataColumn` 接口用于定义数据表的列结构,通常与 `BaseTemplate` 或其派生类(如 `BaseUploadTemplate`、`BaseEncodingTemplate`)结合使用。以下是一个示例:
132
+
133
+ ```typescript
134
+ import type { DataColumn } from './DataColumn';
135
+
136
+ const columns: DataColumn[] = [
137
+ {
138
+ field: 'user.name',
139
+ text: '姓名',
140
+ width: 150,
141
+ align: 'left',
142
+ parser: (value) => String(value).trim(),
143
+ visible: true,
144
+ ignore: false
145
+ },
146
+ {
147
+ field: 'user.age',
148
+ text: '年龄',
149
+ width: 100,
150
+ align: 'center',
151
+ parser: (value) => Number(value) || 0,
152
+ visible: true,
153
+ ignore: false,
154
+ formatter: (row) => `${row['user.age']} 岁`
155
+ }
156
+ ];
157
+ ```
158
+
159
+ ### 属性
160
+
161
+ - **field**: `string`
162
+ - 字段名,用于映射数据对象中的属性,支持点分隔的嵌套路径(如 `user.name`)。
163
+ - **text**: `string`
164
+ - 列标题文字,显示在数据表头。
165
+ - **frozen?**: `boolean`
166
+ - 是否冻结列(固定在表格左侧),仅在前面列的 `frozen` 为 `true` 时有效。
167
+ - **align?**: `'left' | 'center' | 'right'`
168
+ - 单元格内容对齐方式,默认为未指定(由渲染器决定)。
169
+ - **width**: `number`
170
+ - 列宽度(像素)。
171
+ - **minWidth?**: `number`
172
+ - 列最小宽度(像素,可选)。
173
+ - **formatter?**: `FormatCell`
174
+ - 单元格格式化函数,用于自定义单元格显示内容。
175
+ - **escapeHTML?**: `boolean`
176
+ - 是否转义 HTML 字符,防止 XSS 攻击(默认:未指定)。
177
+ - **visible?**: `boolean`
178
+ - 列是否可见,控制是否在表格中显示(默认:未指定)。
179
+ - **resizable?**: `boolean`
180
+ - 列是否允许调整宽度(默认:未指定)。
181
+ - **ignore?**: `boolean`
182
+ - 是否忽略该列,设置为 `true` 时,列仅用于前端显示,不参与数据上传(默认:`false`)。
183
+ - **parser?**: `ParserText`
184
+ - 数据解析函数,定义为 `(text: string) => any`,用于将 Excel 单元格的原始值转换为目标格式(例如,将字符串转换为数字)。
185
+
186
+ #### 类型
187
+
188
+ - **ParserText**: `(text: string) => any`
189
+ - 解析函数类型,接收字符串输入并返回任意类型的值,用于处理 Excel 文件中的单元格数据。
190
+ - **FormatCell**: 自定义类型(定义在 `./FormatCell`),用于格式化单元格显示内容。
191
+
192
+
193
+ #### 注意事项
194
+
195
+ - `field` 在 `DataColumn` 中为必填属性,用于确保数据映射的正确性。
196
+ - `parser` 函数是处理 Excel 数据时的关键,需根据字段类型(如字符串、数字、日期)定义合适的解析逻辑。
197
+ - `ignore` 属性适用于需要在前端显示但不参与上传的列(例如,辅助信息列)。
198
+ - 确保依赖的类型(`FormatCell`)已正确定义并导入。
199
+
200
+
201
+ #### 示例列定义
202
+
203
+ ```typescript
204
+ const columns: DataColumn[] = [
205
+ {
206
+ field: 'user.name',
207
+ parser: (value) => String(value).trim(),
208
+ visible: true,
209
+ ignore: false
210
+ },
211
+ {
212
+ field: 'user.age',
213
+ parser: (value) => Number(value) || 0,
214
+ visible: true,
215
+ ignore: false
216
+ }
217
+ ];
218
+ ```
219
+
220
+ ## 注意事项
221
+
222
+ - 该类为抽象类,必须继承后使用。
223
+ - 确保已安装并配置 `xlsx` 和 `@ticatec/uniface-element/DataTable`。
224
+ - `rowOffset` 可用于跳过 Excel 文件中的标题行。
225
+ - `DataColumn` 中的 `parser` 函数允许自定义单元格值的解析(例如,将字符串转换为数字)。
@@ -0,0 +1,170 @@
1
+ # BaseUploadTemplate Class
2
+
3
+ An abstract base class for parsing and batch uploading Excel file data, extending `BaseTemplate`, with support for status management and error data export.
4
+
5
+ ## [BaseTemplate](./BaseTemplate.md)
6
+
7
+ ## Overview
8
+
9
+ The `BaseUploadTemplate` class extends `BaseTemplate`, adding batch upload functionality, progress status updates, and error data export capabilities. It supports parsing Excel files with custom column definitions, uploading data in batches, and providing status tracking and error handling features.
10
+
11
+ ## Usage
12
+
13
+ To use `BaseUploadTemplate`, you must extend the class and implement the `uploadData` method to define the data upload logic. Below is an example:
14
+
15
+ ```typescript
16
+ import BaseUploadTemplate from './BaseUploadTemplate';
17
+ import type { DataColumn } from './DataColumn';
18
+
19
+ class MyUploadTemplate extends BaseUploadTemplate {
20
+ constructor(columns: DataColumn[], batchSize: number = 50, rowOffset: number = 1) {
21
+ super(columns, batchSize, rowOffset);
22
+ }
23
+
24
+ protected async uploadData(list: Array<any>): Promise<Array<any>> {
25
+ // Implement data upload logic, e.g., calling an API
26
+ return list.map(item => ({ ...item, error: null }));
27
+ }
28
+ }
29
+ ```
30
+
31
+ ### Parsing and Uploading Excel Files
32
+
33
+ ```typescript
34
+ const file: File = // ... Obtain the file (e.g., from an input element)
35
+ const columns: DataColumn[] = [
36
+ { field: 'name', text: 'Name', parser: (value) => String(value) },
37
+ { field: 'age', text: 'Age', parser: (value) => Number(value) }
38
+ ];
39
+ const template = new MyUploadTemplate(columns);
40
+ await template.parseExcelFile(file); // Parse the file
41
+ await template.upload(); // Upload the data
42
+ console.log(template.list); // Access processed data
43
+ ```
44
+
45
+ ### Exporting Error Data
46
+
47
+ ```typescript
48
+ template.exportErrorRowsToExcel('errors.xlsx'); // Export data with errors to an Excel file
49
+ ```
50
+
51
+ ## Class Details
52
+
53
+ ### Constructor
54
+
55
+ ```typescript
56
+ protected constructor(columns: Array<DataColumn>, batchSize: number = 50, rowOffset: number = 1)
57
+ ```
58
+
59
+ - **Parameters**:
60
+ - `columns`: An array of `DataColumn` objects defining the data structure (field names, display text, and optional parsers).
61
+ - `batchSize`: The size of each upload batch (default: 50).
62
+ - `rowOffset`: The number of starting rows to skip in the Excel sheet (default: 1, e.g., to skip the header row).
63
+ - **Description**: Initializes the template with column definitions, batch size, and row offset.
64
+
65
+ ### Methods
66
+
67
+ #### `setProgressStatusListener`
68
+
69
+ ```typescript
70
+ setProgressStatusListener(value: UpdateProgressStatus)
71
+ ```
72
+
73
+ - **Parameters**:
74
+ - `value`: A callback function for updating progress status.
75
+ - **Description**: Sets a listener to notify progress status updates, typically used for UI updates.
76
+
77
+ #### `uploadData` (Abstract Method)
78
+
79
+ ```typescript
80
+ protected abstract uploadData(list: Array<any>): Promise<Array<any>>
81
+ ```
82
+
83
+ - **Parameters**:
84
+ - `list`: An array of data to upload.
85
+ - **Description**: Subclasses must implement this method to define the data upload logic (e.g., calling a backend API). Returns an array containing the upload results, which may include error information.
86
+ - **Override**: Subclasses must implement this method.
87
+
88
+ #### `upload`
89
+
90
+ ```typescript
91
+ async upload()
92
+ ```
93
+
94
+ - **Description**: Uploads data in batches, updating the status of each record (`P` for pending, `U` for uploading, `D` for done), and invokes the progress status listener during the upload process.
95
+ - **Logic**: Processes data in batches, calling `uploadData` for each batch and updating the error status of records based on the results.
96
+
97
+ #### `wrapData`
98
+
99
+ ```typescript
100
+ protected wrapData(data: any): any
101
+ ```
102
+
103
+ - **Parameters**:
104
+ - `data`: A single row object.
105
+ - **Description**: Wraps the data into an object containing `data` and `status` properties, with the initial status set to `P` (pending).
106
+ - **Override**: Subclasses can override this method to customize the wrapping logic.
107
+
108
+ #### `columns` (Getter)
109
+
110
+ ```typescript
111
+ get columns(): Array<TableColumn>
112
+ ```
113
+
114
+ - **Returns**: An array of `TableColumn` objects representing column definitions, including data columns and a status column.
115
+ - **Description**: Extends `BaseTemplate`'s `columns`, adding a `data.` prefix to each field and appending a status column (displaying pending, uploading, success, or error information).
116
+
117
+ #### `exportErrorRowsToExcel`
118
+
119
+ ```typescript
120
+ exportErrorRowsToExcel(filename: string)
121
+ ```
122
+
123
+ - **Parameters**:
124
+ - `filename`: The name of the exported Excel file.
125
+ - **Description**: Filters rows with errors, generates an Excel file containing column headers, data values, and error information, and triggers a file download.
126
+ - **Dependencies**: Uses the `xlsx` library to generate the Excel file.
127
+
128
+ ## Types
129
+
130
+ - **DataColumn**: A custom type defining column metadata (e.g., `field`, `text`, `parser`, `visible`, `ignore`).
131
+ - **TableColumn**: A type from `@ticatec/uniface-element/DataTable`, used for column definitions in UI components.
132
+ - **UploadFun**: `(arr: Array<any>) => Promise<Array<any>>` type, representing the upload function.
133
+ - **UpdateProgressStatus**: `() => void` type, representing the progress status update callback.
134
+
135
+ ## Status Column
136
+
137
+ Defines an additional `statusColumn` to display the status of each row:
138
+
139
+ ```typescript
140
+ const statusColumn: TableColumn = {
141
+ text: getI18nText(i18nKeys.labelStatus),
142
+ width: 240,
143
+ resizable: true,
144
+ formatter: row => {
145
+ if (row.status == 'P') {
146
+ return getI18nText(i18nKeys.status.pending)
147
+ } else if (row.status == 'U') {
148
+ return getI18nText(i18nKeys.status.uploading)
149
+ } else {
150
+ if (row.error) {
151
+ return row.errorText
152
+ } else {
153
+ return getI18nText(i18nKeys.status.successful)
154
+ }
155
+ }
156
+ }
157
+ }
158
+ ```
159
+
160
+ - **Status Values**:
161
+ - `P`: Pending
162
+ - `U`: Uploading
163
+ - `D`: Done (may include errors)
164
+ - **Internationalization**: Uses `getI18nText` to retrieve status display text.
165
+
166
+ ## Notes
167
+
168
+ - This class is abstract and must be extended with an implementation of the `uploadData` method.
169
+ - Batch uploading is controlled by `batchSize` to avoid uploading too much data at once.
170
+ - The error data export function includes only rows with errors, facilitating user analysis and correction.
@@ -0,0 +1,172 @@
1
+
2
+ # BaseUploadTemplate 类
3
+
4
+ 一个用于解析和批量上传 Excel 文件数据的抽象基类,继承自 `BaseTemplate`,支持状态管理和错误数据导出。
5
+
6
+ ## [BaseTemplate](./BaseTemplate_cn.md)
7
+
8
+ ## 概述
9
+
10
+ `BaseUploadTemplate` 类扩展了 `BaseTemplate`,增加了批量上传功能、进度状态更新以及错误数据导出功能。它支持通过自定义列定义解析 Excel 文件,并以批次方式上传数据,同时提供状态跟踪和错误处理功能。
11
+
12
+ ## 使用方法
13
+
14
+ 要使用 `BaseUploadTemplate`,需继承该类并实现 `uploadData` 方法以定义数据上传逻辑。以下是一个示例:
15
+
16
+ ```typescript
17
+ import BaseUploadTemplate from './BaseUploadTemplate';
18
+ import type { DataColumn } from './DataColumn';
19
+
20
+ class MyUploadTemplate extends BaseUploadTemplate {
21
+ constructor(columns: DataColumn[], batchSize: number = 50, rowOffset: number = 1) {
22
+ super(columns, batchSize, rowOffset);
23
+ }
24
+
25
+ protected async uploadData(list: Array<any>): Promise<Array<any>> {
26
+ // 实现数据上传逻辑,例如调用 API
27
+ return list.map(item => ({ ...item, error: null }));
28
+ }
29
+ }
30
+ ```
31
+
32
+ ### 解析和上传 Excel 文件
33
+
34
+ ```typescript
35
+ const file: File = // ... 获取文件(例如,从输入元素获取)
36
+ const columns: DataColumn[] = [
37
+ { field: 'name', text: '姓名', parser: (value) => String(value) },
38
+ { field: 'age', text: '年龄', parser: (value) => Number(value) }
39
+ ];
40
+ const template = new MyUploadTemplate(columns);
41
+ await template.parseExcelFile(file); // 解析文件
42
+ await template.upload(); // 上传数据
43
+ console.log(template.list); // 访问处理后的数据
44
+ ```
45
+
46
+ ### 导出错误数据
47
+
48
+ ```typescript
49
+ template.exportErrorRowsToExcel('errors.xlsx'); // 导出包含错误的数据到 Excel 文件
50
+ ```
51
+
52
+ ## 类详情
53
+
54
+ ### 构造函数
55
+
56
+ ```typescript
57
+ protected constructor(columns: Array<DataColumn>, batchSize: number = 50, rowOffset: number = 1)
58
+ ```
59
+
60
+ - **参数**:
61
+ - `columns`:定义数据结构(字段名、显示文本和可选解析器)的 `DataColumn` 对象数组。
62
+ - `batchSize`:每次上传的批次大小(默认:50)。
63
+ - `rowOffset`:Excel 表中要跳过的起始行数(默认:1,例如跳过标题行)。
64
+ - **描述**:初始化模板,设置列定义、批次大小和行偏移。
65
+
66
+ ### 方法
67
+
68
+ #### `setProgressStatusListener`
69
+
70
+ ```typescript
71
+ setProgressStatusListener(value: UpdateProgressStatus)
72
+ ```
73
+
74
+ - **参数**:
75
+ - `value`:进度状态更新回调函数。
76
+ - **描述**:设置用于通知进度状态更新的监听器,通常用于 UI 更新。
77
+
78
+ #### `uploadData` (抽象方法)
79
+
80
+ ```typescript
81
+ protected abstract uploadData(list: Array<any>): Promise<Array<any>>
82
+ ```
83
+
84
+ - **参数**:
85
+ - `list`:要上传的数据数组。
86
+ - **描述**:子类必须实现此方法以定义数据上传逻辑(例如,调用后端 API)。返回包含上传结果的数组,可能包含错误信息。
87
+ - **重写**:子类需实现此方法。
88
+
89
+ #### `upload`
90
+
91
+ ```typescript
92
+ async upload()
93
+ ```
94
+
95
+ - **描述**:按批次上传数据,更新每条记录的状态(`P` 表示待处理,`U` 表示上传中,`D` 表示完成),并在上传过程中调用进度状态监听器。
96
+ - **逻辑**:将数据分批处理,每批调用 `uploadData`,并根据结果更新记录的错误状态。
97
+
98
+ #### `wrapData`
99
+
100
+ ```typescript
101
+ protected wrapData(data: any): any
102
+ ```
103
+
104
+ - **参数**:
105
+ - `data`:单个行对象。
106
+ - **描述**:将数据包装为包含 `data` 和 `status` 属性的对象,初始状态为 `P`(待处理)。
107
+ - **重写**:子类可重写此方法以自定义包装逻辑。
108
+
109
+ #### `columns`(获取器)
110
+
111
+ ```typescript
112
+ get columns(): Array<TableColumn>
113
+ ```
114
+
115
+ - **返回**:`TableColumn` 对象的数组,表示列定义,包含数据列和状态列。
116
+ - **描述**:扩展 `BaseTemplate` 的 `columns`,为每个字段添加 `data.` 前缀,并附加一个状态列(显示待处理、上传中、成功或错误信息)。
117
+
118
+ #### `exportErrorRowsToExcel`
119
+
120
+ ```typescript
121
+ exportErrorRowsToExcel(filename: string)
122
+ ```
123
+
124
+ - **参数**:
125
+ - `filename`:导出的 Excel 文件名。
126
+ - **描述**:筛选包含错误的行,生成 Excel 文件,包含列标题、数据值和错误信息,并触发文件下载。
127
+ - **依赖**:使用 `xlsx` 库生成 Excel 文件。
128
+
129
+ ## 类型
130
+
131
+ - **DataColumn**:自定义类型,定义列元数据(例如 `field`、`text`、`parser`、`visible`、`ignore`)。
132
+ - **TableColumn**:来自 `@ticatec/uniface-element/DataTable` 的类型,用于 UI 组件中的列定义。
133
+ - **UploadFun**:`(arr: Array<any>) => Promise<Array<any>>` 类型,表示上传函数。
134
+ - **UpdateProgressStatus**:`() => void` 类型,表示进度状态更新回调。
135
+
136
+ ## 状态列
137
+
138
+ 定义了一个额外的 `statusColumn` 用于显示每行数据的状态:
139
+
140
+ ```typescript
141
+ const statusColumn: TableColumn = {
142
+ text: getI18nText(i18nKeys.labelStatus),
143
+ width: 240,
144
+ resizable: true,
145
+ formatter: row => {
146
+ if (row.status == 'P') {
147
+ return getI18nText(i18nKeys.status.pending)
148
+ } else if (row.status == 'U') {
149
+ return getI18nText(i18nKeys.status.uploading)
150
+ } else {
151
+ if (row.error) {
152
+ return row.errorText
153
+ } else {
154
+ return getI18nText(i18nKeys.status.successful)
155
+ }
156
+ }
157
+ }
158
+ }
159
+ ```
160
+
161
+ - **状态值**:
162
+ - `P`:待处理(Pending)
163
+ - `U`:上传中(Uploading)
164
+ - `D`:完成(Done,可能包含错误)
165
+ - **国际化**:使用 `getI18nText` 获取状态显示文本。
166
+
167
+
168
+ ## 注意事项
169
+
170
+ - 该类为抽象类,必须继承并实现 `uploadData` 方法。
171
+ - 批量上传通过 `batchSize` 控制,避免一次性上传过多数据。
172
+ - 错误数据导出功能仅包含有错误的行,便于用户分析和修复。
@@ -0,0 +1,89 @@
1
+ # Excel Encoding Wizard Component
2
+
3
+ A Svelte-based dialog component for parsing Excel files, validating/completing data via a server-side API, and displaying validation results, integrated with `BaseEncodingTemplate` for data processing.
4
+
5
+ ## Overview
6
+
7
+ This component provides an interactive dialog interface that allows users to select an Excel file, parse its contents, validate and complete data through a server-side API, display a data table, and provide a confirm action when the data is valid. The component supports internationalization and dynamic button operations, making it suitable for scenarios requiring validation and completion of Excel data.
8
+
9
+ ## Usage
10
+
11
+ Embed the component in a Svelte application and pass the required properties. Below is an example:
12
+
13
+ 1. Implement a data template to define fields matching the Excel file. [BaseEncodingTemplate](./BaseEncodingTemplate.md)
14
+ 2. Open the dialog to load a local Excel file, which triggers parsing and validation via the server API. If validation passes, a confirm button is displayed. Clicking the confirm button returns the dataset through a callback function.
15
+
16
+ ```typescript
17
+ <script lang="ts">
18
+ import EncodingDialog from '@ticatec/batch-data-uploader/EncodingDialog.svelte';
19
+ import type { DataColumn } from '@ticatec/batch-data-uploader/DataColumn';
20
+ import MyEncodingTemplate from './MyEncodingTemplate'; // Extends BaseEncodingTemplate
21
+
22
+ const template = new MyEncodingTemplate();
23
+
24
+ function handleClose() {
25
+ console.log('Dialog closed');
26
+ }
27
+
28
+ function handleConfirm(data: any[]) {
29
+ console.log('Confirmed data:', data);
30
+ }
31
+ </script>
32
+
33
+ <ExcelEncodingDialog
34
+ title="Validate Excel Data"
35
+ width="800px"
36
+ height="600px"
37
+ {template}
38
+ closeHandler={handleClose}
39
+ confirmCallback={handleConfirm}
40
+ />
41
+ ```
42
+
43
+ ## Component Details
44
+
45
+ ### Properties
46
+
47
+ - **title**: `string`
48
+ - The dialog title.
49
+ - **width**: `string` (default: `"800px"`)
50
+ - The dialog width.
51
+ - **height**: `string` (default: `"600px"`)
52
+ - The dialog height.
53
+ - **template**: `BaseEncodingTemplate`
54
+ - An instance of `BaseEncodingTemplate` used for parsing Excel files, validating, and completing data.
55
+ - **confirmCallback**: `any`
56
+ - A callback function invoked when the confirm button is clicked, receiving the parsed data list (`template.list`).
57
+
58
+ ### Button Actions
59
+
60
+ - **btnChoose**: File selection button that triggers a file input dialog to choose an Excel file.
61
+ - **btnConfirm**: Confirm button, displayed only when the data is valid (`template.valid` is `true`), invokes `confirmCallback,` and closes the dialog.
62
+
63
+ ### Event Handling
64
+
65
+ - **File Selection**: Triggered via a hidden `<input type="file">` element, which calls `parseExcelFile` to parse the selected Excel file and invokes `template.parseExcelFile` for validation/completion.
66
+ - **Data Validation**: After parsing, checks `template.valid`. If the data is valid, adds the "Confirm" button.
67
+ - **Error Prompt**: Displays an error message via `window.Toast` if parsing fails and hides the loading indicator.
68
+
69
+ ## Types
70
+
71
+ - **DataColumn**: A custom interface defining column metadata (extends `TableColumn` from `@ticatec/uniface-element/DataTable`).
72
+ - **ButtonAction** / **ButtonActions**: From `@ticatec/uniface-element/ActionBar`, defining button operations.
73
+ - **IndicatorColumn**: From `@ticatec/uniface-element/DataTable`, defining the row number column.
74
+
75
+ ## Dependent Components
76
+
77
+ - **Dialog**: From `@ticatec/uniface-element/Dialog`, provides the dialog container.
78
+ - **DataTable**: From `@ticatec/uniface-element/DataTable`, displays the data table.
79
+ - **Box**: From `@ticatec/uniface-element/Box`, provides a bordered container style.
80
+ - **getI18nText**: From `@ticatec/i18n`, used for internationalized text.
81
+
82
+ ## Notes
83
+
84
+ - Ensure `BaseEncodingTemplate` correctly implements `isDataValid`, `encodeData`, and the `valid` property to support data validation and completion.
85
+ - The file input only accepts `.xls` and `.xlsx` file formats.
86
+ - A loading indicator (`window.Indicator`) is displayed during parsing, and errors are shown via `window.Toast`.
87
+ - The confirm button is displayed only when `template.valid` is `true`, ensuring only valid data can be submitted.
88
+ - The component depends on `window.Indicator` and `window.Toast` for UI prompts; ensure these global objects are defined.
89
+ - The `confirmCallback` receives the complete parsed data list, suitable for further processing or submission.