【Vue.js】Vue.jsでマスタメンテナンス画面を作ってみよう！

概要

ダイアログ等を使わずに、新規追加・編集・削除の操作が1つの画面でできるマスタメンテナンスを作ってみました。
今回はその機能のロジックを記事にまとめております。

画面の全体像は以下の通りです。

• 「追加」ボタンで空レコードを追加
• レコードの入力欄で編集
• 「削除」ボタンで削除予定のレコードを選択(選択中のボタンを再度押下すると選択解除)
• 「保存」ボタンで、新規追加・編集・削除用のAPIをそれぞれ実行(DBに反映)
  
  今回は、「まとめて新規追加・編集・削除する」ロジックにフォーカスを当てるので、テーブルの作成方法、スタイルの設定については割愛させていただきます。

ロジック

まずは、テーブルに表示するデータに、Boolean型で「create」「edit」「delete」を設定します。最終的にこの値を用いて、「保存」ボタン押下時にどのAPIを実行すればよいかを判断させます。
初期値は、flaseで設定します。

初期データ

export default {
  name: "TestSetting",
  data() {
    return {
      NameItems: [
          {field1:"test1", field2:"t1", id:0, create:false ,edit:false ,delete:false},
          {field1:"test2", field2:"t2", id:1, create:false ,edit:false ,delete:false},
          {field1:"test3", field2:"t3", id:2, create:false ,edit:false ,delete:false}
      ],
      createdName: [],
      editedName: [],
      deletedName: []
    }
  };
}

以下の動作の時に、それぞれのBool値が変化します。

• 「追加」ボタン押下時 .......... createがtrueのレコードをテーブルに追加する
• レコードの入力欄が変化した時 .......... createがfalseならばeditをtrueに変更する
• 「削除」ボタン押下時 .......... deleteがfalseならばtrueに変更、trueならばfalseに変更する

「追加」ボタン押下時に発火する関数

    clickAddButton() {
        var lastNameItem = this.NameItems.length;
        this.NameItems.push(
            {field1:"",field2:"",id:lastNameItem, create:true ,edit:false ,delete:false}
        );
    },

レコードの入力欄が変化した時に発火する関数

    changeTable(changedSelect) {
      // changedSelect：編集したレコードのデータ。テーブルコンポーネントから$emitで渡しています。
      // changedSelect.create == trueならば新規登録のレコードなので、changedSelect.create == falseを条件にします。      
        if(changedSelect.create == false){
            var i = changedSelect.id;
            this.NameItems[i].edit = true;
        }
    },

「削除」ボタン押下時に発火する関数

    clickDeleteButton(DeletedValue) {
      // DeletedValue：「削除」ボタンを押下したレコードのデータ。テーブルコンポーネントから$emitで渡しています。
        var i = DeletedValue.id;
        if(this.NameItems[i].delete == false){
            this.NameItems[i].delete = true;
        }else{
            this.NameItems[i].delete = false;
        }
    },

次に、「保存」ボタンが押下されたときの動きを考えます。

新規追加APIの実行条件
cteate == trueであれば新規追加です。ただし、加えてdelete == trueである場合、「追加したレコードが削除予定」の状態であるため、この場合は新規追加・編集・削除いづれのAPIも実行する必要がありません。
つまり、新規登録APIを実行する条件はcteate == true && delete == falseと言えます。

編集APIの実行条件
edit == trueであれば編集です。ただし、加えてdelete == trueである場合、編集のAPIを実行する必要がありません。
つまり、編集APIを実行する条件はedit == true && delete == falseと言えます。

削除APIの実行条件
delete == trueであれば削除です。
つまり、削除APIを実行する条件はcteate == false && delete == trueと言えます。

以上のことを踏まえると、「保存」ボタン押下時に発火する関数は以下の様になります。

「保存」ボタン押下時に発火する関数

    pressOkButton() {
          for(var i = 0; i < this.NameItems.length; i++){
            if(this.NameItems[i].create == true &&
               this.NameItems[i].delete == false){
                this.createdName.push(this.NameItems[i]);
            }
            if(this.NameItems[i].edit == true &&
               this.NameItems[i].delete == false){
                this.editedName.push(this.NameItems[i]);
            }
            if(this.NameItems[i].create == false &&
               this.NameItems[i].delete == true){
                this.deletedName.push(this.NameItems[i]);
            }
          }

          if(this.createdName.length != 0){
              // 新規追加API実行コード
          }
          if(this.editedName.length != 0){
              // 編集API実行コード
          }
          if(this.deletedName.length != 0){
              // 削除API実行コード
          }
    },

this.createdName this.editedName this.deletedNameにそれぞれ新規追加、編集、削除するデータをプッシュし、各リストの要素数分APIを実行します。

おわりに

今回は、テーブルの新規追加・編集・削除を1つの画面で行う場合の考え方を記事にまとめました。
まだまだ経験も浅く拙い記事ではございますが、似たような画面を作ることがありましたら、ご参考にしていただけますと幸いです。