125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialog_golongandarah" persistent max-width="40%">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="headline">Golongan Darah</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-card class="mt-1">
|
|
<v-layout v-if="imagePreviews.length > 0 && !show_progrees_upload" align-center row wrap>
|
|
<v-flex
|
|
v-for="(img, index) in imagePreviews"
|
|
:key="index"
|
|
xs12
|
|
class="pa-2"
|
|
>
|
|
<v-img :src="img.image_url">
|
|
<div class="fill-height bottom-gradient"></div>
|
|
</v-img>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="blue darken-1" flat @click="closeDialogGolonganDarah">Tutup</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
mounted() {
|
|
//this.$store.dispatch("re_fna/get_doctors",{token:''})
|
|
},
|
|
data() {
|
|
return {
|
|
error_doctor:false,
|
|
error_image:false,
|
|
selectedFileName: ''
|
|
};
|
|
},
|
|
computed: {
|
|
show_progrees_upload: {
|
|
get() {
|
|
return this.$store.state.re_golongandarah.show_progrees_upload
|
|
},
|
|
set(val) {
|
|
this.$store.commit("re_golongandarah/update_show_progrees_upload", val)
|
|
}
|
|
},
|
|
onprocess(){
|
|
return this.$store.state.re_golongandarah.onprocess
|
|
},
|
|
dialog_golongandarah: {
|
|
get() {
|
|
return this.$store.state.re_golongandarah.dialog_golongandarah
|
|
},
|
|
set(val) {
|
|
this.$store.commit("re_golongandarah/update_dialog_golongandarah", val)
|
|
}
|
|
},
|
|
results: {
|
|
get() {
|
|
return this.$store.state.re_golongandarah.results
|
|
},
|
|
set(val) {
|
|
this.$store.commit("re_golongandarah/update_results", val)
|
|
}
|
|
},
|
|
imagePreviews: {
|
|
get() {
|
|
return this.$store.state.re_golongandarah.imagePreviews
|
|
},
|
|
set(val) {
|
|
this.$store.commit("re_golongandarah/update_imagePreviews", val)
|
|
}
|
|
},
|
|
imageFiles: {
|
|
get() {
|
|
return this.$store.state.re_golongandarah.imageFiles
|
|
},
|
|
set(val) {
|
|
this.$store.commit("re_golongandarah/update_imageFiles", val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
closeDialogGolonganDarah(){
|
|
this.dialog_golongandarah = false
|
|
this.error_image = false
|
|
this.imagePreviews = []
|
|
this.imageFiles = []
|
|
this.selectedFileName = ''
|
|
},
|
|
handleFileUploads() {
|
|
const files = this.$refs.files.files;
|
|
this.imagePreviews = [];
|
|
this.imageFiles = [];
|
|
|
|
if (files.length > 0) {
|
|
const file = files[0]; // ambil file pertama saja
|
|
this.selectedFileName = file.name;
|
|
|
|
const url = URL.createObjectURL(file);
|
|
this.imagePreviews.push({
|
|
image_url: url
|
|
});
|
|
this.imageFiles.push(file);
|
|
} else {
|
|
this.selectedFileName = '';
|
|
}
|
|
|
|
// reset input supaya bisa pilih file yang sama lagi
|
|
this.$refs.files.value = '';
|
|
},
|
|
removeFile( key ){
|
|
this.files.splice( key, 1 );
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |