Laravel と Vue と Vuetify で業務サイトを作ってみる挑戦記録です
内容は随時更新してきます
STEP01：LaravelからVueにデータを渡す
https://qiita.com/nobu-maple/items/a704fe70809b0394b5c9
Laravel の Blade から Vueのコンポーネントにデータを渡してみる
STEP02：Laravel ユーザでログインして Vue画面を表示する
https://qiita.com/nobu-maple/items/f0ee9324eacfed6eddd7
Laravelに登録しているユーザでログイン処理をして、vue画面に連携してみます
STEP03：Laravel ユーザの権限によってvueコンポーネントを出しわける
https://qiita.com/nobu-maple/items/3eb735c148a698585fa3
Laravelに登録しているユーザでログイン処理をして、ユーザの権限によって表示する vueコンポーネントを出し分けてみます
Laravelの権限は GATE 機能 を利用してみます
STEP04：vue-routerとVuetifyを使ってみる
https://qiita.com/nobu-maple/items/43c1228b8f04837d753b
Laravel でユーザ認証した後、Vue側でRouter使ってページを切り替えてみる
Vuetify のデータテーブルを使ったユーザ管理ページを作って、データテーブルの検索やページング、ソートの機能も使ってみる
STEP05：Vuetifyのダイアログを使ってユーザ情報を更新
https://qiita.com/nobu-maple/items/f0322bc99dce2d8eda40
Vuetify のダイアログを使ってユーザの追加、更新、削除処理を作ってみる
ユーザ一覧のVue親コンポーネントから子コンポーネントのダイアログを呼び出して、
子コンポーネントから処理結果を親コンポーネントに通知したりしてコンポーネント間の親子連携した処理を作ってみる
STEP06：Laravel5.7 の ValidationMessageを日本語化してみた
https://qiita.com/nobu-maple/items/923d180c81f1f97035d9
Laravel5.7 の ValidationMessageを日本語化
STEP07: ユーザ一覧をCSVでダウンロード
https://qiita.com/nobu-maple/items/fea4b1178082d064bcd4
Laravelのユーザテーブル情報をVueの画面からダウンロードします
Vue側のダウンロードの処理一切はダウンロードボタンのコンポーネントに閉じ込めてみます
CSVはWindowsで開けるように BOM つけときます（macは動作確認してません..）
STEP08: ユーザ一覧をCSVアップロードして一括更新
https://qiita.com/nobu-maple/items/6d55b52f6c75083d9638
Laravelのユーザ一覧をVueの画面からダウンロードできるようになったので
ダウンロードしたCSVファイルを更新してアップロード（インポート）して一括更新もできるようにしときます
アップロードは別コンポーネントに切り出して、アップロード結果も別コンポーネントでダイアログ表示するようにしときます
給与明細の電子交付機能を実装してみる
仕様はこんな感じ？
１．利用者は自分の給与明細をPDFでダウンロード可能
２．管理者はCSVアップロードで複数人の給与明細を１度に登録可能
３．CSVは１人１行で対象者ＩＤと明細情報を記載
４．CSVアップ後に管理者が「公開」操作を行うと利用者がダウンロード可能になる
５．明細の訂正がある場合は再度CSVをアップロードする
※基本的に一度公開したものは削除しない（利用者は訂正前も訂正後も両方ダウンロード可能）
６．CSVでアップした明細情報は暗号化してデータベースへ保存
７．管理者は明細PDFのダウンロード履歴を確認可能
８．利用者はシステム初回利用時に電子交付への同意を必須とする
https://www.nta.go.jp/publication/pamph/hotei/denshikofu-qa/answer.htm
９．利用者は明細情報の削除が可能（ＤＢで論理削除）
10．管理者は明細情報を年月や利用者名で検索可能
給与明細は色々調べたところ payslip の用語で統一することにした
ここら辺を参照 https://eikaiwa.dmm.com/uknow/questions/38676/
「給与明細って英語でなんて言うの？」っていう質問へ英語講師たちが回答をしている
まとめると以下な感じだけどイギリス人と南アフリカ人しか書いてないから偏ってるのかも。。
回答者１：payslip wageslip （イギリス）
回答者２：Payslip Salary slip （南アフリカ）
回答者３：Payslip Payroll slip （イギリス）
回答者４：Payslip Payment details Payment details （イギリス）
回答者５：payslip salary statement （南アフリカ）
回答者６：Payslip Payment details Wage receipt （イギリス）
回答者７：paycheck paycheck stub pay advice （南アフリカ）
データ構造はこんな感じかな
| csv_payslips（明細のCSVファイル管理） |
|---|
| ID |
| 対象年月 |
| ステータス（公開・非公開） |
| アップロードファイル名 |
| 対象者数（ＣＳＶ有効行数） |
| エラー数（ＣＳＶエラー行数） |
| ＣＳＶヘッダー情報 |
| 登録日時 |
| 公開日時 |
| 削除日時 |
| payslips（明細の詳細情報） |
|---|
| ID |
| CSV_ID |
| CSV行番号 |
| 対象年月 |
| ステータス（有効・削除） |
| 対象者ID |
| CSV行データ（明細データ） |
| 補正ファイル名 |
| ユーザダウンロード回数 |
| CSVエラー内容 |
| 削除者 |
| 削除日時 |
| download_payslips（PDFのダウンロード日時） |
|---|
| ID |
| payslip_ID |
| ダウンロード日時 |
| ダウンロード操作者ID |
| UA |
| IP |
STEP09: PDF生成テスト
https://qiita.com/nobu-maple/items/d60189231e9db9cb6b5a
Laravel で PDFファイルを生成してみる
PDFはデータベースの値を埋め込んで動的に内容を変えられるようにしとく
この記事はPDF生成を確認するサンプル
STEP10: リレーションしたユーザ情報も一緒に取得する
https://qiita.com/nobu-maple/items/6202e7e1f78b641a9e60
LaravelのEloquentで設定したリレーションを使ってユーザ情報も一緒に取得してみます
STEP11: 給与明細：給与明細データをアップロードする
https://qiita.com/nobu-maple/items/39bc9ff7c6817b51e679
給与明細のデータをCSVでアップロードしてデータベースへ保存
保存したCSVの一覧も表示します
STEP12: 給与明細：論理削除
vueからアップロードしてLaravelで保存した給与明細のデータを論理削除できるようにしてみます
検索時に「論理削除したデータも含める」かも指定可能に
STEP13： 給与明細：給与明細のＰＤＦを自動生成する
アップロードしたCSVから社員の給与明細PDFファイルを自動生成してみます
CSVで100人分のデータをアップすれぱ、100人分の給与明細PDFが１発で出来上がります
明細のレイアウトはHTML(LaravelのBlade)で作るので自由に変更可能
STEP14： 操作ログを自動記録する
Laravel のミドルウェアを使って操作のログを自動で記録してみます
操作ログはデータベースへ保存して、ログイン済みであればユーザＩＤも自動で記録
STEP15： Vueコンポーネント（ページ）毎にJSファイルを分割する
Vueコンポーネント毎にJSファイルを作成するようにLaravel-mix(Webpack)を設定して、Vue-Routerが必要になった時に必要なJSファイルを読み込むようにしてみます