画面設計｜CSVインポート
{success} CSV画面に関して明記します。
基本情報
| 名称 | 定義 | 備考 |
|---|---|---|
| ディレクトリ | components | vue.jsのディレクトリです。 |
| component | csvimport.vue | vue.jsのcomponennt名です。 |
| route | csv_import |
画面レイアウト図
画面項目
{primary} 画面に表示する項目等の情報を記載します。
| No. | 物理名 | 項目・論理名 | タイプ | 必須 | 備考 |
|---|---|---|---|---|---|
| 1 | import_type | インポート対象種類 | select | 〇 | ※Enum参照 |
| 2 | import_file | インポートファイル | file | 〇 | |
| 3 | - | 更新 | button | 〇 | 更新実行 |
| 4 | - | サンプルファイルダウロード | download | 〇 | 空のサンプルCSVをダウンロード |
基本事項
{primary} 本機能での基本事項を明記します。
| No. | 項目名 | 処理内容 |
|---|---|---|
| 1 | インポートファイルに関して | 拡張子csvのみ/容量制限等なし/1ファイルのみ |
画面アクション
{primary} 上記項目の備考で記載しきれないものや、特記事項があるものを記載します。主に画面の処理（フロント）を記載します。
| No. | 項目名 | 処理内容 |
|---|---|---|
| 2 | インポートファイル | ドラッグ＆ドロップ対応。1ファイルまで。CSVのみ |
| 3 | 更新 | ボタン押下後、モーダル表示→進捗状況をプログレスバー→結果表示 |
| - | ユーザーへの説明画面 | CSVインポートルール を参考に佐藤さんに作成してもらいます。 |
処理
{primary} 本画面に関する処理を記載します。主にシステムの処理（バックエンド）を記載します。
| No. | 項目名 | 処理内容 |
|---|---|---|
| 1 | ENUM取得 | インポート対象種類のENUM取得 |
| 2 | CSVインポート API | GET：CSVインポート |
{warning} ファイルの中身はCSVルールを確認してください。