Feature / Form 10

FW JS 管理側 公開側

明細行追加

見積明細、請求明細、注文商品、作業項目などを複数行で登録します。

明細行追加は、1件の見積、請求、注文、作業報告などに対して、商品・作業・数量・単価・金額のような行データを複数登録する機能です。Roundtableでは「親になるデータ」「明細行として増やす項目」「合計計算の方法」「行の追加・削除・並び替え」を言葉にしておくと、発注者、実装者、AIに指示する人の認識を合わせやすくなります。

見積登録フォームで複数の明細行を追加し、小計と合計を確認している業務画面例

この機能でできること

見積や請求の明細、注文商品、作業項目、予約オプション、納品物、経費内訳などを、1件の登録画面の中で複数行として入力できます。行ごとに品目、数量、単価、税区分、備考、担当者、作業日などを持たせ、行追加、行削除、複製、並び替え、小計・合計の確認までまとめて扱えます。

親データと明細データを分けて、1つの業務単位として保存します。 画面上では1つのフォームに見えても、実装では見積本体と見積明細のようにテーブルを分けることが多いため、保存単位と計算ルールを先に決めておくと安定します。

よくある利用場面

見積・請求の内訳登録 商品名、数量、単価、税区分、値引き、備考を行ごとに入力し、小計と合計を確認します。
注文・申込商品の複数選択 注文商品、オプション、配送先別の商品などを複数行で登録し、公開側の申込フォームでも使えるようにします。
作業報告・工数明細 作業日、担当者、作業内容、時間、単価、進捗を行単位で残し、案件や請求へつなげます。

プロンプト例

親になる画面、明細行の項目、最低行数、行の追加・削除可否、計算方法、保存時のチェック、公開側で使うかどうかをセットで伝えると、実装範囲を決めやすくなります。

プロンプト 見積登録フォームに明細行追加を入れてください。見積本体には顧客名、見積日、有効期限、備考を持たせ、明細行には品目名、数量、単価、税区分、行備考を入力できるようにしてください。初期表示は3行、追加ボタンで行を増やせるようにし、空行は保存しないでください。数量×単価で小計を表示し、税区分ごとの消費税と税込合計を画面下部に表示してください。管理側で登録・編集でき、公開側の申込フォームでも注文商品として使える構造にしてください。

この機能を使うときのポイント

親データ見積、請求、注文、作業報告など、明細行を束ねる本体データを決めます。
行項目品目、数量、単価、税区分、担当者、作業日、備考など、行ごとに持つ項目を整理します。
計算ルール小計、値引き、税額、税込合計、端数処理をどのタイミングで計算するかを決めます。
空行と削除空行を保存しない、削除済み行を残す、行番号を詰めるなど、保存時の扱いを明確にします。

この機能を実装するときのコツ

明細行追加は、親テーブルと子テーブルを分け、登録・編集時に親IDへ紐づく明細行をまとめて保存する設計が基本です。画面側ではJavaScriptで行テンプレートを追加し、行番号、name属性、削除フラグ、並び順が崩れないようにします。保存処理では、画面で見えている金額だけを信用せず、数量、単価、税区分からサーバー側でも再計算すると、改ざんや計算ずれを防げます。公開側で使う場合は、会員登録や申込フォームの途中保存、確認画面から戻った後の行復元も考慮します。