見積・請求書を一元管理する請求書管理システムの実装

① 一覧管理画面

一覧画面では、会社名・発行日・ステータス・金額・支払状況などを確認でき、対象データの検索や編集、複製などの操作を管理画面から簡単に行える構成としています。

また、支払状況は画面上から即時更新できるよう、Ajaxを利用したリアルタイム更新機能を実装しています。

② 検索処理（PHP）

検索条件に応じてSQLのWHERE句を動的に生成し、対象データを取得します。

$sql = "SELECT * FROM seisan WHERE ";
$where = [];
$params = [];

if (!empty($_POST['companyname'])) {
    $where[] = "s_company LIKE :companyname";
    $params[':companyname'] = "%" . $_POST['companyname'] . "%";
}

$where[] = "s_no <> ''";

$sql .= implode(" AND ", $where);
$sql .= " ORDER BY s_no DESC";

$result = execPrep($sql, $params);

③ 支払状況更新（Ajax）

支払ステータスは画面更新なしで変更できるよう、Ajaxによる非同期更新処理を実装しています。

$('.payment-status').change(function() {

    var siharaiSelected = $(this).val();
    var setid = $(this).closest('tr').find('input[type="hidden"]').val();

    $.ajax({
        url: '../../../phps/shorui/seisan/indexreal.php',
        type: "POST",
        data: {
            setid: setid,
            siharaiSelected: siharaiSelected
        }
    });

});

④ 複製機能

一覧画面から既存の見積データを複製し、新しい伝票として登録できる機能を実装しています。

毎月の定期請求や類似案件では、ゼロから入力する手間を削減でき、 業務効率を大幅に向上させることができます。

if (isset($_POST['submit4'])) {

    $hid_id = key($_POST['submit4']);

    foreach ($_POST['id'] as $id => $val) {
        if ($id == $hid_id) {
            $hid_id = $val;
            break;
        }
    }

    $sql = "SELECT * FROM seisan WHERE id = :id";
    $params = [':id' => $hid_id];
    $result = execPrep($sql, $params);

    // 新しい伝票番号を作成
    $tmpdate = date('Ymd');
    $chardate = $tmpdate . "-1";

    // データコピー処理
}

① 登録・編集画面

各項目の詳細は下記の通りとなっております。

② 品目行の動的追加（JavaScript）

品目を複数入力できるよう、JavaScriptで行の追加・削除機能を実装しています。

$(document).on('click', '.addList', function() {
    $('#lsadd-tbody>tr')
        .eq(0)
        .clone(true)
        .insertAfter($(this).parent().parent());
});

$(document).on('click', '.removeList', function() {
    $(this).parent().parent().remove();
});

③ 金額自動計算処理

数量と単価から金額を自動計算し、合計金額を算出する処理を実装しています。

document.form1.elements[kingaku][i].value =
    Number(document.form1.elements[cnt][i].value) *
    Number(document.form1.elements[tanka][i].value);