add modules folder based on s_menu
This commit is contained in:
209
test/vuex/acc-one-po-jasa/components/dialogAddAttachment.vue
Normal file
209
test/vuex/acc-one-po-jasa/components/dialogAddAttachment.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-dialog v-model="dialog_attachment" persistent max-width="60vw">
|
||||
<v-card>
|
||||
<v-card-title class="headline grey lighten-2" primary-title>
|
||||
UPLOAD BERITA ACARA
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 class="mb-2 pa-2" style="border: 1px solid black;">
|
||||
<input
|
||||
type="file" id="files" ref="files" multiple
|
||||
accept="image/*" v-on:change="addAttach($event)"
|
||||
>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="(note) in prview_attachment"
|
||||
xs4 class="pa-2" :key="note.attach_id"
|
||||
>
|
||||
<div class="image-container">
|
||||
<v-img
|
||||
:src="makeImageUrl(note)" aspect-nation="1" contain
|
||||
class="grey lighten-2" @click="fullview(note, -1)"
|
||||
></v-img>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="(url, index) in attachviews"
|
||||
xs4 class="pa-2" :key="index"
|
||||
>
|
||||
<div class="image-container">
|
||||
<v-img
|
||||
:src="url" aspect-ratio="1" contain
|
||||
class="grey lighten-2" @click="fullview(url, index)"
|
||||
></v-img>
|
||||
<v-icon
|
||||
color="red" class="close-button"
|
||||
@click="removeAttachment(index)"
|
||||
>close</v-icon>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="BatalAddAttachment()" color="error" class="white--text">Batal</v-btn>
|
||||
<v-btn @click="SimpanAttachment()" color="primary" class="white--text">Simpan</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>
|
||||
{{ viewtitle }}
|
||||
<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="viewurl" 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>
|
||||
|
||||
<style>
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-container {
|
||||
position: relative;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
attachfiles: [],
|
||||
attachviews: [],
|
||||
viewtitle: "",
|
||||
viewurl: "",
|
||||
dialog_fullview: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialog_attachment: {
|
||||
get() {
|
||||
return this.$store.state.poservice.dialog_attachment
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("poservice/update_dialog_attachment", val)
|
||||
}
|
||||
},
|
||||
pojasa_attachment: {
|
||||
get() {
|
||||
return this.$store.state.poservice.pojasa_attachment
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("poservice/update_pojasa_attachment", val)
|
||||
}
|
||||
},
|
||||
loading_process() {
|
||||
return this.$store.state.poservice.loading_process
|
||||
},
|
||||
prview_attachment() {
|
||||
return this.$store.state.poservice.prview_attachment
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addAttach(event) {
|
||||
const files = event.target.files;
|
||||
if (files.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let index = 0; index < files.length; index++) {
|
||||
const file = files[index];
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
this.attachfiles.push(file);
|
||||
this.attachviews.push(url);
|
||||
}
|
||||
event.target.value = null;
|
||||
},
|
||||
makeImageUrl(note) {
|
||||
const year = new Date(note.created).getFullYear();
|
||||
const baseURL = BASE_URL + `/one-media/order-jasa/${year}/`;
|
||||
return baseURL + note.img_url;
|
||||
},
|
||||
fullview(url, index) {
|
||||
if (index < 0) {
|
||||
this.viewtitle = url.img_url;
|
||||
this.viewurl = this.makeImageUrl(url);
|
||||
} else {
|
||||
this.viewtitle = this.attachfiles[index].name;
|
||||
this.viewurl = url;
|
||||
}
|
||||
|
||||
this.dialog_fullview = true;
|
||||
},
|
||||
removeAttachment(index) {
|
||||
URL.revokeObjectURL(this.attachviews[index])
|
||||
this.attachfiles.splice(index, 1)
|
||||
this.attachviews.splice(index, 1)
|
||||
},
|
||||
SimpanAttachment() {
|
||||
if (!this.loading_process) {
|
||||
let form_data = new FormData();
|
||||
let listfiles = this.attachfiles;
|
||||
let pojasa = this.pojasa_attachment;
|
||||
|
||||
for (let index = 0; index < listfiles.length; index++) {
|
||||
let file = this.attachfiles[index];
|
||||
form_data.append('files['+ index + ']', file);
|
||||
}
|
||||
|
||||
const user = one_user();
|
||||
form_data.append('tjasaID', pojasa.T_KontrakJasaID);
|
||||
form_data.append('poID', pojasa.PurchaseOrderID);
|
||||
form_data.append('ponumber', pojasa.PurchaseOrderNumber);
|
||||
form_data.append('token', one_token());
|
||||
|
||||
this.$store.dispatch("poservice/uploadAttachment", form_data);
|
||||
} else {
|
||||
let snac = {color: 'warning', msg: 'proses sedang berjalan', state: true};
|
||||
this.$store.commit('poservice/update_snackbar', snac);
|
||||
}
|
||||
},
|
||||
BatalAddAttachment() {
|
||||
this.attachfiles = [];
|
||||
this.attachviews = [];
|
||||
this.dialog_attachment = false;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialog_fullview(val) {
|
||||
if (!val) {
|
||||
this.viewurl = "",
|
||||
this.viewtitle = ""
|
||||
}
|
||||
},
|
||||
dialog_attachment(val) {
|
||||
if (val) {
|
||||
this.attachfiles = []
|
||||
this.attachviews = []
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user