画面設計|送出機関一覧・編集画面


{success} 送出機関一覧・編集画面の画面設計を明記します。


基本情報

名称 定義 備考
ディレクトリ components vue.jsのディレクトリです。
component sendingAgency.vue vue.jsのcomponennt名です。
route sending_agency

画面レイアウト図

基本設計時 一覧、表示・登録編集画面:

image

コーディング後:


項目名

一覧

No. 項目名 タイプ 必須 アクション有無 備考
1 新規作成 button - - -
2 検索(選択式) セレクト - 送出国に該当する送出機関を取得
3 検索(入力式) 入力 - 送出機関名@LIKE検索
4 送出国 リンク - - -
5 送出機関名 リンク - - -
- 送出人数 - - - 表示項目から削除
- 配属社数 - - - 表示項目から削除

表示・登録編集

No. 項目名 タイプ 必須 アクション有無 備考
1 編集 button - 登録・編集時のみ表示
2 閉じる button - 登録・編集時のみ表示
3 送出国 セレクト - -
4 送出機関名 入力 - -
5 略称 入力 - -
6 所在地 セレクト - - -
7 責任者役職 入力 - -
8 責任者氏名 入力 - -
9 登録・更新 button - -
- 続けて登録 - - - 表示項目から削除
- 登録後、書類ページに戻る - - - 表示項目から削除

アクション

表示・登録編集

No. 項目名 処理内容
1 編集 背景が反転してコンテンツが入力モードに切り替わる
2 閉じる 入力から表示モードに切り替わる
3 登録・更新 作成・編集しているユーザー情報を更新する

その他補足

警告文

No. 項目名 処理内容
1 未登録がある場合 一覧の箇所に「登録してください」の警告文を表示。1つでも登録されていたら非表示。