Amir
60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<template>
|
|
<button @click="testLoading()" class="btn btn-primary">Invert isLoadingGetListCawangan</button>
|
|
<div v-if="isLoadingGetListCawangan" class="row justify-content-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<label>Pilih Cawangan</label>
|
|
<select class="custom-select" @change="pilihCawangan($event)">
|
|
<option selected disabled>Cawangan</option>
|
|
<option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
|
|
</select>
|
|
<div class="mt-3 row justify-content-center">
|
|
<DisplayLelongBid v-if="pilihIdCawangan != null" v-bind:key="componentKeySecond"
|
|
v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import axios from "axios";
|
|
import DisplayLelongBid from "./DisplayLelongBid.vue.vue"
|
|
|
|
const props = defineProps({
|
|
selectedLelong: String
|
|
})
|
|
|
|
const listCawangan = ref();
|
|
const pilihIdCawangan = ref();
|
|
const componentKeySecond = ref(0);
|
|
const isLoadingGetListCawangan = ref(false);
|
|
|
|
function testLoading() {
|
|
isLoadingGetListCawangan.value = !isLoadingGetListCawangan.value;
|
|
}
|
|
|
|
function getListCawangan() {
|
|
isLoadingGetListCawangan.value = true;
|
|
axios.get("/listCawangan", {
|
|
params: {
|
|
lelong_id: props.selectedLelong,
|
|
},
|
|
}).then((response) => {
|
|
listCawangan.value = response.data;
|
|
}).catch((error) => { alert(error); });
|
|
isLoadingGetListCawangan.value = false;
|
|
}
|
|
|
|
function pilihCawangan(e) {
|
|
let val = e.target.value;
|
|
pilihIdCawangan.value = val;
|
|
componentKeySecond.value += 1;
|
|
};
|
|
|
|
onMounted(() => {
|
|
getListCawangan();
|
|
})
|
|
</script> |