Files
fe-accone/test/vuex/acc-one-faktur-v4/components/dialog-attachment.vue
2026-07-20 13:14:28 +07:00

107 lines
3.7 KiB
Vue

<template>
<div>
<v-dialog v-model="dialog_attachment" persistent max-width="60vw">
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>
BUKTI PENERIMAAN
</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex v-for="(docs) in preview_attachment" xs4 class="pa-2" :key="docs.attach_id">
<div style="position: relative; padding-bottom: 35px;">
<v-img :src="makeImgUrl(docs)" aspect-ratio="1" contain class="grey lighten-2"
@click="fullview(docs)"></v-img>
</div>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dialog_attachment = false" color="error" class="white--text">Tutup</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog_fullview" persistent max-width="50vw">
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>
{{ doctitle }}
<v-spacer></v-spacer>
<v-btn color="red" fab small outline @click="dialog_fullview = false">
<v-icon color="red">close</v-icon>
</v-btn>
</v-card-title>
<v-card-text style="max-height: 80vh; overflow-y: auto;">
<div class="pa-2">
<v-img :src="docurl" contain class="grey lighten-2"></v-img>
</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn class="mr-2" color="red" flat outline @click="dialog_fullview = false">
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
module.exports = {
data() {
return {
dialog_fullview: false,
doctitle: "",
docurl: ""
}
},
computed: {
dialog_attachment: {
get() {
return this.$store.state.data.dialog_attachment
},
set(val) {
this.$store.commit("data/update_dialog_attachment", val)
}
},
preview_attachment: {
get() {
return this.$store.state.data.preview_attachment
},
set(val) {
this.$store.commit("data/update_preview_attachment", val)
}
}
},
methods: {
fullview(docs) {
this.doctitle = docs.img_url
this.docurl = this.makeImgUrl(docs)
this.dialog_fullview = true
},
makeImgUrl(docs) {
const year = new Date(docs.created).getFullYear()
let baseURL = BASE_URL;
switch (docs.category) {
case "4":
baseURL += `/one-media/order-jasa/${year}/`
return baseURL + docs.img_url
case "2":
baseURL += `/one-media/order-inventaris/${year}/`
return baseURL + docs.img_url
case "3":
baseURL += `/one-media/order-asset/${year}/`
return baseURL + docs.img_url
default:
return null
}
}
},
watch: {
},
}
</script>