Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
89
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Laravel + Vue + Vuetify で業務サイト作ってみる

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ファイルを更新してアップロード(インポート)して一括更新もできるようにしときます
アップロードは別コンポーネントに切り出して、アップロード結果も別コンポーネントでダイアログ表示するようにしときます

給与明細の電子交付機能を実装してみる

仕様はこんな感じ?
 1.利用者は自分の給与明細をPDFでダウンロード可能
 2.管理者はCSVアップロードで複数人の給与明細を1度に登録可能
 3.CSVは1人1行で対象者IDと明細情報を記載
 4.CSVアップ後に管理者が「公開」操作を行うと利用者がダウンロード可能になる
 5.明細の訂正がある場合は再度CSVをアップロードする
    ※基本的に一度公開したものは削除しない(利用者は訂正前も訂正後も両方ダウンロード可能)
 6.CSVでアップした明細情報は暗号化してデータベースへ保存
 7.管理者は明細PDFのダウンロード履歴を確認可能
 8.利用者はシステム初回利用時に電子交付への同意を必須とする
    https://www.nta.go.jp/publication/pamph/hotei/denshikofu-qa/answer.htm
 9.利用者は明細情報の削除が可能(DBで論理削除)
 10.管理者は明細情報を年月や利用者名で検索可能

給与明細は色々調べたところ payslip の用語で統一することにした
 ここら辺を参照 https://eikaiwa.dmm.com/uknow/questions/38676/
 「給与明細って英語でなんて言うの?」っていう質問へ英語講師たちが回答をしている
 まとめると以下な感じだけどイギリス人と南アフリカ人しか書いてないから偏ってるのかも。。
 回答者1:payslip wageslip (イギリス)
 回答者2:Payslip Salary slip (南アフリカ)
 回答者3:Payslip Payroll slip (イギリス)
 回答者4:Payslip Payment details Payment details (イギリス)
 回答者5:payslip salary statement (南アフリカ)
 回答者6:Payslip Payment details Wage receipt (イギリス)
 回答者7:paycheck paycheck stub pay advice (南アフリカ)

データ構造はこんな感じかな

csv_payslips(明細のCSVファイル管理)
ID
対象年月
ステータス(公開・非公開)
アップロードファイル名
対象者数(CSV有効行数)
エラー数(CSVエラー行数)
CSVヘッダー情報
登録日時
公開日時
削除日時
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: 給与明細:給与明細のPDFを自動生成する

アップロードしたCSVから社員の給与明細PDFファイルを自動生成してみます
CSVで100人分のデータをアップすれぱ、100人分の給与明細PDFが1発で出来上がります
明細のレイアウトはHTML(LaravelのBlade)で作るので自由に変更可能

STEP14: 操作ログを自動記録する

Laravel のミドルウェアを使って操作のログを自動で記録してみます
操作ログはデータベースへ保存して、ログイン済みであればユーザIDも自動で記録

STEP15: Vueコンポーネント(ページ)毎にJSファイルを分割する

Vueコンポーネント毎にJSファイルを作成するようにLaravel-mix(Webpack)を設定して、Vue-Routerが必要になった時に必要なJSファイルを読み込むようにしてみます

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
89
Help us understand the problem. What are the problem?