admin-erahn/resources/js/components/util/Modal.vue

<template>
  <div>
   
   <transition name="modal-fade">
    <div v-if="showModal" class=" overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
      <div class="relative w-screen  my-6 mx-auto max-w-6xl">
        <!--content-->
        <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
          <!--header-->
          <div class="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
            <h3 class="text-3xl font-semibold">
              Pemeriksaan Aliran Tunai
            </h3>
            <button class="p-1 ml-auto  border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
              <span class=" text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                ×
              </span>
            </button>
          </div>
          <!--body-->
          <div class="relative p-6 flex-auto">
            <!-- <p class="my-4 text-blueGray-500 text-lg leading-relaxed">

            </p> -->

            <fieldset class="border-4 border-solid border-gray-600 p-3 mb-2">
                <legend class="text-xl">Legends Tunai</legend>
                <div class="flex flex-wrap">
                <div class="w-1/4">
                <p><b>AW</b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> Baki Awal</p>
                <p><b>PE</b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> Pendahuluan</p>
                <p><b>TS</b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> Penebusan</p>
                </div>
                <div class="w-1/4">
                <p><b>AK</b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> Baki Akhir</p>
                <p><b>SE</b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> Serahan</p>
                <p><b>GA</b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> Gadaian</p>
                </div>
                <div class="w-2/4 my-auto">
                    <h3 class="font-bold mb-3 text-center text-xl border-2 border-red-500 py-2 rounded-lg"><b class="text-red-500">Formula </b> <span class="mx-2"><i class="fas fa-angle-double-right"></i></span> AW + PE + TS - GA - SE = AK</h3>
                </div>
                </div>

            </fieldset>

            <div class="flex flex-wrap -mx-3 mb-3">
              
              <div class="bg-blue-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                <div class="flex flex-row">
                  <div class="bg-blue-500 px-3 py-6 rounded-l-2xl">
                      <h2 class="font-bold text-lg">AW</h2>
                  </div>

                    <div class="my-auto mx-auto">
                        <p class="font-bold uppercase text-black text-2xl">{{ this.bakiawal }}</p>
                    </div>

                </div> 
              </div>

               <div class="bg-blue-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                <div class="flex flex-row">
                  <div class="bg-blue-500 px-3 py-6 rounded-l-2xl">
                      <h2 class="font-bold text-lg">AK</h2>
                  </div>

                  <div class="my-auto mx-auto">
                      <p class="font-bold uppercase text-black text-2xl">{{ this.bakiakhir }}</p>
                  </div>
                </div> 
              </div>

              
            </div>

            <div class="flex flex-wrap -mx-3 mb-3">
              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                <div class="flex flex-row">
                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
                     <h2 class="font-bold text-lg">PE</h2>
                  </div>

                  <div class="my-auto mx-auto">
                      <p class="font-bold uppercase text-black text-2xl">{{ this.pendahuluan }}</p>
                  </div>
                </div> 
              </div>

               <div class="bg-red-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                <div class="flex flex-row">
                  <div class="bg-red-500 px-4 py-6 rounded-l-2xl">
                       <h2 class="font-bold text-lg">SE</h2>
                  </div>
                  <div class="my-auto mx-auto">
                      <p class="font-bold uppercase text-black text-2xl">{{ this.serahan }}</p>
                  </div>
                </div> 
              </div>
            </div>

            <div class="flex flex-wrap -mx-3 mb-3">
              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                <div class="flex flex-row">
                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
                     <h2 class="font-bold text-lg">TS</h2>
                  </div>
                  <div class="my-auto mx-auto">
                      <p class="font-bold uppercase text-black text-2xl">{{ this.penebusan }}</p>
                  </div>
                </div> 
              </div>

               <div class="bg-red-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                <div class="flex flex-row">
                  <div class="bg-red-500 px-4 py-6 rounded-l-2xl">
                       <h2 class="font-bold text-lg">GA</h2>
                  </div>
                  <div class="my-auto mx-auto">
                      <p class="font-bold uppercase text-black text-2xl">{{ this.gadaian }}</p>
                  </div>
                </div> 
              </div>
            </div>

            
          </div>
          <!--footer-->
          <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
            <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" type="button" v-on:click="toggleModal()">
              Batal
            </button>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded" type="button" v-on:click="kemaskinifunc()">
              Kemaskini
            </button>
          </div>
        </div>
      </div>
    </div>
   </transition>
    <transition
			enter-active-class="transition-all transform duration-200 ease-out"
		>
    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "modal",
  data() {
    return {
      showModal: false,
      tarikh: Date,
      kodcaw: '',
      kodlaluan:'',
      bakiawal: 0,
      bakiakhir: 0,
      pendahuluan: 0,
      serahan: 0,
      penebusan: 0,
      gadaian: 0,
      pageNumber: 1
    }
  },
  created(){
    console.log(this.kodcaw)
  },
  methods: {
    toggleModal: function(){
      this.showModal = !this.showModal;
    },
    kemaskinifunc: function(){
      // console.log(this.kodcaw + this.kodlaluan + this.tarikh)
      axios.put('/api/check/kemaskinialirantunai', 
      { 
          hostname:this.$hostname,
          kodcaw: this.kodcaw,
          teller: this.kodlaluan,
          tarikh: this.tarikh,
          gadaian: this.gadaian.replace(/[^0-9.-]+/g,""), 
          penebusan: this.penebusan.replace(/[^0-9.-]+/g,""), 
          bakiakhir: this.bakiakhir.replace(/[^0-9.-]+/g,"")

      }).then(response => {

        if(response.data == 'berjaya')
        {
          this.showModal = false;
          this.$toast.success("Kemaskini Sudah Berjaya!")
          // vm.$forceUpdate();
                
          this.$emit('clickEvent_', this.pageNumber)
            
          // setTimeout("window.location.reload()", 3000);
        }else{

          this.showModal = false;
          this.$toast.error("Kemaskini tidak berjaya")
        }
      });

    }
  },
}
</script>