fifi97
264 lines
8.6 KiB
Vue
264 lines
8.6 KiB
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-1/3 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-->
|
|
<!--body-->
|
|
<div class="relative p-6 flex-auto">
|
|
|
|
<h3 class="text-center text-3xl font-semibold">
|
|
Daftar Senarai Hitam
|
|
</h3>
|
|
|
|
<div class="flex flex-wrap mt-4">
|
|
<div class="flex flex-row mx-auto">
|
|
|
|
<div class="flex flex-col">
|
|
<input id="frminput" type="text" ref="btnDropdownRef" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" />
|
|
|
|
<div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
|
|
<div class="py-1" role="none">
|
|
<a v-for="(cust,i) in arrayCustomer" :key="i" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0" v-on:click="ClickUrl({ cust: cust.id })">{{ cust.nama }}<br><b>{{ (cust.kpbaru) ? cust.kpbaru : cust.kplama }}</b></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div v-show="Object.keys(this.specCust).length > 0">
|
|
<form class="w-full mx-auto border border-gray-200 px-4 py-4 rounded mt-4">
|
|
|
|
<div class="w-full px-3 mb-6 md:mb-0">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Nama
|
|
</label>
|
|
<input readonly name="nama" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" :value="this.specCust.nama">
|
|
</div>
|
|
<div class="w-full px-3 mt-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Nokp
|
|
</label>
|
|
<input readonly name="nokp" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" :value="(this.specCust.kpbaru) ? this.specCust.kpbaru : this.specCust.kplama">
|
|
</div>
|
|
|
|
|
|
<div class="w-full px-3 mt-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Nota
|
|
</label>
|
|
<textarea v-model="nota" class="appearance-none block h-36 w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
|
|
</div>
|
|
</form>
|
|
</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" v-on:click="toggleModal()" type="button">
|
|
Batal
|
|
</button>
|
|
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="kemaskinifunc" type="button" >
|
|
Daftar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition
|
|
enter-active-class="transition-all transform duration-200 ease-out"
|
|
>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { createPopper } from "@popperjs/core";
|
|
|
|
export default {
|
|
|
|
props: {
|
|
placement: {
|
|
type: String,
|
|
default: "bottom-start"
|
|
}
|
|
},
|
|
name: "modal",
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
kodcaw: '',
|
|
dropdownShow: false,
|
|
param1: "",
|
|
arrayCustomer: [],
|
|
specCust: [],
|
|
nota:''
|
|
}
|
|
},
|
|
mounted() {
|
|
document.addEventListener('click', this.onClick);
|
|
},
|
|
beforeDestroy() {
|
|
document.removeEventListener('click', this.onClick);
|
|
},
|
|
created(){
|
|
// console.log('kodcaw',this.$kodcaw)
|
|
},
|
|
methods: {
|
|
toggleModal: function(){
|
|
this.showModal = !this.showModal;
|
|
this.arrayCustomer = [];
|
|
this.specCust = [];
|
|
},
|
|
async toggleDropdown() {
|
|
|
|
await this.getData()
|
|
|
|
if(this.arrayCustomer.length > 0)
|
|
{
|
|
this.dropdownShow = true;
|
|
createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
|
|
placement: "bottom-start",
|
|
modifiers: [{
|
|
name: "preventOverflow",
|
|
}]
|
|
});
|
|
}else{
|
|
this.$toast.info("Pelangan tidak dijumpai!")
|
|
}
|
|
|
|
},
|
|
getData: function() {
|
|
|
|
let inputvalue = document.getElementById("frminput").value;
|
|
|
|
if(inputvalue)
|
|
{
|
|
if(this.hasNumber(inputvalue))
|
|
{
|
|
this.axios.get(this.$api1 + '/admin/searchByIC', {
|
|
params: {
|
|
ic: inputvalue,
|
|
kodcaw: this.$kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.arrayCustomer = response.data
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
|
|
|
|
|
|
}else{
|
|
this.axios.get(this.$api1 + '/admin/searchByName', {
|
|
params: {
|
|
nama: inputvalue,
|
|
kodcaw: this.$kodcaw
|
|
|
|
}
|
|
}).then(response => {
|
|
this.arrayCustomer = response.data
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
hasNumber: function(inputString){
|
|
return /\d/.test(inputString);
|
|
},
|
|
onClick: function(){
|
|
|
|
if(this.showModal == true)
|
|
{
|
|
let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
|
|
let searchInside = this.$refs.btnDropdownRef.contains(event.target);
|
|
let buttonSearch = document.getElementById('buttonsearch');
|
|
|
|
if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
|
|
if(buttonSearch.value !== '')
|
|
{
|
|
this.dropdownShow = true
|
|
}
|
|
}
|
|
else{
|
|
if(this.$refs.btnDropdownRef.value != '')
|
|
{
|
|
this.dropdownShow = false
|
|
}else{
|
|
this.dropdownShow = false
|
|
this.arrayCustomer = []
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
ClickUrl: function(customer){
|
|
|
|
let self = this
|
|
this.dropdownShow = false
|
|
|
|
this.arrayCustomer.map(function(value, key) {
|
|
if(customer.cust == value.id)
|
|
{
|
|
self.specCust = value;
|
|
}
|
|
});
|
|
|
|
},
|
|
kemaskinifunc: function(){
|
|
|
|
axios.post(this.$hostname + '/admin/AddSenaraiHitam',
|
|
{
|
|
kodcaw: this.$kodcaw,
|
|
nokp: (this.specCust.kpbaru) ? this.specCust.kpbaru : this.specCust.kplama,
|
|
nota: this.nota
|
|
|
|
}).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>
|
|
|
|
<style>
|
|
|
|
.modal-fade-enter,
|
|
.modal-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-fade-enter-active,
|
|
.modal-fade-leave-active {
|
|
transition: opacity .5s ease;
|
|
}
|
|
</style> |