Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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: 給与明細:論理削除

https://qiita.com/nobu-maple/items/e107574a8a34f60fb0a9

vueからアップロードしてLaravelで保存した給与明細のデータを論理削除できるようにしてみます
検索時に「論理削除したデータも含める」かも指定可能に

STEP13: 給与明細:給与明細のPDFを自動生成する

https://qiita.com/nobu-maple/items/5c4a84dffc35d011375d

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

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

https://qiita.com/nobu-maple/items/691b698d919734bf567a

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

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

https://qiita.com/nobu-maple/items/16bfd5cc8c3cc01763a4

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

nobu-maple
元Oracleマスター/いまは普通のシステム屋/JavascriptやPHPからCやC++まで言語はなんでも/中学でMSXのBASICプログラムをはじめてからいく年月/最近はUiPathでRPAなことも楽しい
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした