Step53・販売伝票結合: JavaScript初心者入門講座

販売伝票結合

いよいよ販売伝票の仕上げです。これまで別々に作ってきた伝票（slip）と明細（Details）を一つにまとめます。結構本格的なシステムになってきましたね。

完成図

【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。slipDetails.zipからダウンロードすることもできます。

slip.html

<html>
  <head>
    <script type="text/javascript" src="database.js"></script>
    <script type="text/javascript" src="slip.js"></script>
    <script type="text/javascript" src="details.js"></script>
    <link href="base.css" rel="stylesheet" type="text/css">
    <link href="slip.css" rel="stylesheet" type="text/css">
    <title>slip</title>
  </head>
  <body>
    販売伝票
    <span id="slipDisplay"></span><br />
    <br />
    <a href="" name="linkNewSlip" id="linkNewSlip">伝票新規</a>
    <form name="form1">
      <p>
        <input type="button" name="btnInsertSlip" id="btnInsertSlip" value="伝票追加">
        <input type="button" name="btnUpdateSlip" id="btnUpdateSlip" value="伝票更新">
        <input type="button" name="btnDeleteSlip" id="btnDeleteSlip" value="伝票削除">
      </p>
      SLIP_CD:<input type="text" name="txtSlipCd" id="txtSlipCd">
      SLIP_DATE:<input type="text" name="txtSlipDate" id="txtSlipDate">
      CST_CD:<span id="customerDisplay"></span>
    </form>
    <span id="addressDisplay"></span>
    <br />
    <hr />
    <br />
    <br />
    <a href="" name="linkNewDetails" id="linkNewDetails">明細新規</a>
    <form name="form2">
      <p>
        <input type="button" name="btnInsertDetails" id="btnInsertDetails" value="明細追加">
        <input type="button" name="btnUpdateDetails" id="btnUpdateDetails" value="明細更新">
        <input type="button" name="btnDeleteDetails" id="btnDeleteDetails" value="明細削除">
      </p>
      GOODS_CD:<span id="goodsDisplay"></span>
      AMOUNT:<input type="text" name="txtAmount" id="txtAmount">
      MEMO:<input type="text" name="txtMemo" id="txtMemo">
    </form>
    <div id="detailsDisplay"></div>
    <div id="totalDisplay"></div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="sqlDisplay"></div>
  </body>
</html>

slip.css

#selectDetails {
width: 600px;
}

slip.js

var txtSlipCd;
var txtSlipDate;
var selectSlip;
var selectCst;

onload = function (){initSlip();initDetails();}
onunload = dbClose;

function initSlip() {
  //初期設定をする関数
  txtSlipCd = document.getElementById("txtSlipCd");
  txtSlipDate = document.getElementById("txtSlipDate");

  txtSlipCd.onfocus = function (){focus(this);}
  txtSlipCd.onblur = function (){blur(this);}
  txtSlipDate.onfocus = function (){focus(this);}
  txtSlipDate.onblur = function (){blur(this);}

  document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}
  document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}
  document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}
  document.getElementById("linkNewSlip").onclick = function (){return newSlip();}

  dbConnect();
  slipDisplay();
  cstDisplay();
}

function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}

function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}

function slipDisplay() {
  //伝票を表示する関数

  var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("slipDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectSlip\" id=\"selectSlip\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("slipDisplay").innerHTML = tempHtml;
  selectSlip = document.getElementById("selectSlip");
  selectSlip.onchange = function (){slipChange(this);}

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){

    //伝票側の処理
    textClearSlip();
    cstDisplay();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";

    alert("伝票を選択してください。");
  }else{
    var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";
    mySql = mySql +"from T07Slip,T04Customer ";
    mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";
    mySql = mySql +"and SLIP_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    txtSlipCd.value = recordSet(0);
    txtSlipDate.value = dateFormat(recordSet(1));
    selectCst.selectedIndex = cstIndexSearch(recordSet(2));
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);

    recordSet.Close();
    recordSet = null;

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    detailsDisplay();

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("customerDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("customerDisplay").innerHTML = tempHtml;
  selectCst = document.getElementById("selectCst");
  selectCst.onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}

function cstChange(obj) {
  //顧客を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }else{
    var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);

    recordSet.Close();
    recordSet = null;

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}

function newSlip(){
  //伝票を新規作成する関数

  //伝票側の処理
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();

  //明細側の処理
  textClearDetails();
  goodsDisplay();
  document.getElementById("detailsDisplay").innerHTML = "";
  document.getElementById("totalDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";

  return false;
}

function maxCdSlip(){
  //SLIP_CDの最大値を取得する関数
  var mySql = "select max(SLIP_CD) from T07Slip";
  var recordSet = database.Execute(mySql);
  var maxCd = recordSet(0);
  return maxCd;
}

function textClearSlip() {
  //テキストボックスをクリアする関数
  txtSlipCd.value = "";
  txtSlipDate.value = "";
}

function dataInsertSlip() {
  //データを追加する関数
  try{
    if(dataCheckSlip(1)){
      var mySql = "insert into T07Slip values(" ;
      mySql = mySql + Number(txtSlipCd.value) + ", '";
      mySql = mySql + txtSlipDate.value + "', ";
      mySql = mySql + Number(selectCst.value);
      mySql = mySql +")";

      sqlDisplay(mySql);
      database.Execute(mySql);
      slipDisplay();
      alert("追加しました。");

    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}

function dataUpdateSlip() {
  //データを更新する関数
  if(!confirm("本当に更新しますか？")){
    return ;
  }
  if(dataCheckSlip(1)){
    var mySql = "update T07Slip set ";
    mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";
    mySql = mySql + "CST_CD = " + Number(selectCst.value);
    mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    slipDisplay();
    alert("更新しました。");
  }
}

function dataDeleteSlip() {
  //データを削除する関数
  if(!confirm("本当に削除しますか？")){
    return ;
  }

  if(dataCheckSlip(0)){
    //伝票側の処理
    var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    cstDisplay();

    //明細側の処理
    var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";

    //伝票側の処理
    textClearSlip();

    alert("削除しました。");
  }
}

function dataCheckSlip(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";

  if (txtSlipCd.value == "") {
    alert("SLIP_CD" + tempStr);
    return false;
  }
  if (txtSlipCd.value.match(/[^0-9]/)) {
    alert("SLIP_CDには半角数字を入力してください！");
    txtSlipCd.focus();
    return false;
  }
  if (flag == 1 && txtSlipDate.value == "") {
    alert("SLIP_DATE" + tempStr);
    return false;
  }
  if (flag == 1 && !txtSlipDate.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
    alert("SLIP_DATEは「yyyy/mm/dd」形式で入力してください！");
    return false;
  }
  if (flag == 1 && selectCst.value == 0) {
    alert("CST_CD" + "は必ず選択してください。");
    return false;
  }

  return true;
}

function cstIndexSearch(cstCd){
  //顧客選択ボックスのIndexを検索する関数
  var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";
  var recordSet = database.Execute(mySql);
  var cstIndex = recordSet(0);
  return cstIndex;
}

details.js

var txtAmount;
var txtMemo;
var selectGoods;

function initDetails() {
  //初期設定をする関数
  txtAmount = document.getElementById("txtAmount");
  txtMemo = document.getElementById("txtMemo");

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + txtSlipCd.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("detailsDisplay").innerHTML = "";

  var tempHtml = "<select size=\"10\" name=\"selectDetails\" id=\"selectDetails\">\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">";
    tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);
    tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);
    tempHtml = tempHtml + " [MEMO]:" + recordSet(5);
    tempHtml = tempHtml + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;

  totalDisplay();
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

  sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("goodsDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectGoods\" id=\"selectGoods\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}

function newDetails(){
  //明細を新規作成する関数
  textClearDetails();
  document.getElementById("sqlDisplay").innerHTML = "";
  goodsDisplay();
  detailsDisplay();
  selectGoods.focus();
  return false;
}

function textClearDetails() {
  //テキストボックスをクリアする関数
  txtAmount.value = "";
  txtMemo.value = "";
}

function dataInsertDetails() {
  //データを追加する関数

  try{
    if(dataCheckDetails(1)){
      var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";
      mySql = mySql + "values(";
      mySql = mySql + Number(txtSlipCd.value) + ",";
      mySql = mySql + Number(selectGoods.value) + ",";
      mySql = mySql + Number(txtAmount.value) + ", '";
      mySql = mySql + txtMemo.value + "'";
      mySql = mySql +")";

      sqlDisplay(mySql);
      database.Execute(mySql);
      textClearDetails();
      goodsDisplay();
      detailsDisplay();
      alert("追加しました。");

    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}

function dataUpdateDetails() {
  //データを更新する関数
  if(selectDetails.value==""){
    alert("明細が選択されていません。");
    return ;
  }
  if(!confirm("本当に更新しますか？")){
    return ;
  }
  if(dataCheckDetails(1)){
    var mySql = "update T08Details set ";
    mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
    mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
    mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
    mySql = mySql + " where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    alert("更新しました。");
  }
}

function dataDeleteDetails() {
  //データを削除する関数
  if(selectDetails.value==""){
    alert("明細が選択されていません。");
    return ;
  }
  if(!confirm("本当に削除しますか？")){
    return ;
  }
  if(dataCheckDetails(0)){
    var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    alert("削除しました。");
  }
}

function dataCheckDetails(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";

  if (flag == 1 && selectGoods.value == 0) {
    alert("GOODS_CD" + "は必ず選択してください。");
    return false;
  }
  if (flag == 1 && txtAmount.value == "") {
    alert("AMOUNT" + tempStr);
    return false;
  }
  if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {
    alert("AMOUNTには半角数字を入力してください！");
    txtAmount.focus();
    return false;
  }
  if (flag == 1 && txtMemo.value == "") {
    alert("Memo" + tempStr);
    return false;
  }

  return true;
}

function goodsIndexSearch(goodsCd){
  //商品選択ボックスのIndexを検索する関数
  var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
  var recordSet = database.Execute(mySql);
  var goodsIndex = recordSet(0);
  return goodsIndex;
}

function totalDisplay(){
  //明細のtotalを計算する関数
  var mySql = "select sum(PRICE * AMOUNT) ";
  mySql += "from T08Details,T06Goods ";
  mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql += "and SLIP_CD = " + txtSlipCd.value;
  var recordSet = database.Execute(mySql);
  var tempHtml = "TOTAL:" + recordSet(0) + "円";
  document.getElementById("totalDisplay").innerHTML = tempHtml;

  recordSet.Close();
  recordSet = null;
}

【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。

★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。

【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

販売伝票 結合

販売伝票結合