hafifierahman
371 lines
11 KiB
Vue
371 lines
11 KiB
Vue
<template>
|
|
<div class="container px-1 px-md-4 py-5 mx-auto">
|
|
|
|
<router-link to="/permohonan">
|
|
<i class="fas fa-backspace text-yellow-500"></i>
|
|
</router-link>
|
|
|
|
<div v-if="this.loadstatus == true" class="card">
|
|
|
|
<div class="row flex justify-between px-3 top">
|
|
<div class="d-flex">
|
|
<h5>NO PERMOHONAN : <span class="text-primary font-weight-bold">{{ this.permohonan.nopermohonan }}</span></h5>
|
|
<h5>JUMLAH MOHON : <span class="text-primary font-weight-bold">{{ this.permohonan.amaun_mohon }}</span></h5>
|
|
</div>
|
|
<div>
|
|
<span class="text-white rounded font-weight-bold bg-green-500 p-3">{{ this.permohonan.jenismohon }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add class 'active' to progress -->
|
|
|
|
<div class="flex w-full mb--10 mt-4">
|
|
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6">
|
|
</div>
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img v-if="this.permohonan.tagoperasi == 2" class="icon mx-auto" src="/img/batal.png">
|
|
</div>
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img v-if="this.permohonan.tagakaun == 2" class="icon mx-auto" src="/img/batal.png">
|
|
</div>
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img v-if="this.permohonan.tagpb == 2" class="icon mx-auto" src="/img/batal.png">
|
|
</div>
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img v-if="this.permohonan.tagdeposit == 2" class="icon mx-auto" src="/img/batal.png">
|
|
</div>
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mt--8">
|
|
|
|
<div class="w-full">
|
|
|
|
<ul id="progressbar" class="text-center flex">
|
|
|
|
<li :class="this.permohonan[0].status.length >= 1 ? 'active' : ''" class="step0 w-1/6"></li>
|
|
|
|
<li :class="this.permohonan[0].status.length >= 2 ? 'active' : ''" class="step0 w-1/6"></li>
|
|
|
|
<li :class="this.permohonan[0].status.length >= 3 ? 'active' : ''" class="step0 w-1/6"></li>
|
|
|
|
<li :class="this.permohonan[0].status.length >= 4 ? 'active' : ''" class="step0 w-1/6"></li>
|
|
|
|
<li :class="this.permohonan[0].status.length >= 5 ? 'active' : ''" class="step0 w-1/6"></li>
|
|
|
|
<li :class="this.permohonan[0].status.length >= 6 ? 'active' : ''" class="step0 w-1/6"></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex w-full">
|
|
|
|
<div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/proposal.png">
|
|
|
|
<div class="flex flex-column">
|
|
|
|
<p class="font-weight-bold text-center">Permohonan <br>Cawangan</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/operasicek.png">
|
|
|
|
<div class="flex flex-column">
|
|
|
|
<p class="font-weight-bold text-center">Pengesahan<br>Operasi</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/operasicek.png">
|
|
|
|
<div class="d-flex flex-column">
|
|
|
|
<p class="font-weight-bold text-center">Akaun</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/leaderapproval.png">
|
|
|
|
<div class="d-flex flex-column">
|
|
|
|
<p class="font-weight-bold text-center">Kelulusan <br>Pengurus Besar</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/chequetick.png">
|
|
|
|
<div class="d-flex flex-column">
|
|
|
|
<p class="font-weight-bold text-center">Akaun <br> Deposit Ke Bank <br>Selesai</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/money.png">
|
|
|
|
<div class="d-flex flex-column">
|
|
|
|
<p class="font-weight-bold text-center">Cawangan<br> Terima Wang</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="this.loadstatus == true" class="">
|
|
|
|
|
|
|
|
<div class="p-4 flex justify-center items-center">
|
|
|
|
<table class="w-2/3 leading-normal">
|
|
|
|
<thead class="text-center">
|
|
|
|
<tr>
|
|
|
|
<th class="w-1/5 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
|
|
Tarikh
|
|
|
|
</th>
|
|
|
|
<th class="w-1/5 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
|
|
Masa
|
|
|
|
</th>
|
|
|
|
<th class="w-3/5 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
|
|
Status Permohonan
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="(status,i) in statusdescription" :key="i">
|
|
<td class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
|
|
<div class="flex items-center">
|
|
|
|
<div class="ml-3">
|
|
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="status[0].tarikh">
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
|
|
<div class="text-center flex items-center">
|
|
|
|
<div class="ml-3">
|
|
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="status[0].masa">
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
|
|
<div class="flex items-center">
|
|
|
|
<div class="ml-3">
|
|
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="status.description">
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
z-index: 0;
|
|
background-color: #ECEFF1;
|
|
padding-bottom: 20px;
|
|
margin-top: 90px;
|
|
margin-bottom: 90px;
|
|
border-radius: 10px
|
|
}
|
|
|
|
.top {
|
|
padding-top: 40px;
|
|
padding-left: 13% !important;
|
|
padding-right: 13% !important
|
|
}
|
|
|
|
#progressbar {
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
color: #455A64;
|
|
padding-left: 0px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
#progressbar li {
|
|
list-style-type: none;
|
|
font-size: 13px;
|
|
width: 17%;
|
|
float: left;
|
|
position: relative;
|
|
font-weight: 400;
|
|
z-index: 1;
|
|
}
|
|
|
|
#progressbar .step0:before {
|
|
font-family: FontAwesome;
|
|
content: "\f00d";
|
|
color: #fff;
|
|
}
|
|
|
|
#progressbar li:before {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 45px;
|
|
display: block;
|
|
font-size: 20px;
|
|
background: #C5CAE9;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
padding: 0px;
|
|
}
|
|
|
|
#progressbar li:after {
|
|
content: '';
|
|
width: 100%;
|
|
height: 12px;
|
|
background: #c5cae9e8;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 16px;
|
|
z-index: -1;
|
|
}
|
|
|
|
#progressbar li:last-child:after {
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
position: absolute;
|
|
/* left: -50%; */
|
|
width: 50%;
|
|
}
|
|
|
|
/* #progressbar li:nth-child(2):after,
|
|
#progressbar li:nth-child(3):after,
|
|
#progressbar li:nth-child(4):after {
|
|
left: -50%
|
|
} */
|
|
|
|
#progressbar li:first-child:after {
|
|
border-top-left-radius: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
position: absolute;
|
|
left: 50%;
|
|
}
|
|
|
|
#progressbar li:last-child:after {
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px
|
|
}
|
|
|
|
#progressbar li:first-child:after {
|
|
border-top-left-radius: 10px;
|
|
border-bottom-left-radius: 10px
|
|
}
|
|
|
|
#progressbar li.active:before,
|
|
#progressbar li.active:after {
|
|
background: #e67e22
|
|
}
|
|
|
|
#progressbar li.active:before {
|
|
font-family: FontAwesome;
|
|
content: "\f00c"
|
|
}
|
|
|
|
.icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
/* margin-right: 15px */
|
|
}
|
|
|
|
.icon-content {
|
|
padding-bottom: 20px
|
|
}
|
|
|
|
@media screen and (max-width: 992px) {
|
|
.icon-content {
|
|
width: 50%
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
mohonid: this.$route.params.mohonid,
|
|
statusdescription:{},
|
|
permohonan:{},
|
|
cawangan: 'KB2',
|
|
loadstatus: false
|
|
}
|
|
},
|
|
created(){
|
|
this.GetStatusData(this.mohonid,this.cawangan);
|
|
},
|
|
methods:{
|
|
async GetStatusData(mohonid,cawangan){
|
|
await this.axios.get(this.$hostname + '/admin/permohonan/description/' + mohonid).then(response => {
|
|
this.statusdescription = response.data;
|
|
});
|
|
|
|
await this.axios.get(this.$hostname + '/admin/permohonan/get/' + cawangan + '/' + mohonid).then(response => {
|
|
this.permohonan = response.data;
|
|
});
|
|
this.loadstatus = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|