make_invoice

仕様

システム全体

publi/index.htmlをローカルのファイルから開いて仕様することとする。
Vue.jsのマウントフックにより、app/src/assets/basic_info.json と、 app/src/assets/times/ディレクトリ以下に入っている勤務時間のみ記載されたテキストファイルをすべて読み込み、請求金額を計算した状態でDOMをレンダリングする。

個人情報の塊のため、basic_info.jsonはGit管理に含めない。

テキストファイルの要件

ファイル名は必ず氏名.txtとする。
また、ファイルの内容は勤務時間を分単位で保存しているものとする。
勤務時間は小数まで含める。

テキストファイルを置くディレクトリは、app/src/assets/timesとする。

basic_info.jsonの記述方法

[
    {
        "location_name": "勤務している地域",
        "staff_name": "社員の氏名",
        "customer_name": "お客様の企業名",
        "price": "単価",
        "cost_below_limit": "控除のコスト",
        "cost_above_limit": "超過のコスト",
        "lower_limit": 下限時間,
        "upper_limit": 上限時間
    },
    .
    .
    .
]

実際の記述例

[
    {
        "location_name": "名古屋",
        "staff_name": "田中太郎",
        "customer_name": "株式会社ほげほげ",
        "price": "¥400,000",
        "cost_below_limit": "¥2,000",
        "cost_above_limit": "¥1,500",
        "lower_limit": 140,
        "upper_limit": 180
    }
]

金額を記述する部分では¥と、桁区切りを記述してください

basic_info.jsonの件数と、app/assets/times/以下のファイルの数が一致していて、かつ、氏名とファイル名が一致していないとバグります。

環境構築

1. node.jsの用意

2. yarnのインストール

mac環境なら、1と2は同時にできます。
下のコマンドを実行してください。
このコマンドを利用すると、Node.jsもインストールされます。
brewがインストールされていることが前提です。

brew install yarn

3. yarnを利用して、依存パッケージのインストール

下のコマンドをプロジェクトルートで実行してください。
yarn install

4. webpackを利用してビルド

下のコマンドをプロジェクトルートで実行してください。
./node_modules/.bin/webpack