change dialog form po aset, separate form order / form aset
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
<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 BUKTI TERIMA ASET
|
||||
</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="addAttachment($event)">
|
||||
</v-flex>
|
||||
<v-flex v-for="(nota) in preview_attachment" xs4 class="pa-2"
|
||||
:key="nota.attach_id || nota.img_url">
|
||||
<div style="position: relative; padding-bottom: 35px;">
|
||||
<v-img :src="makeImageURL(nota)" aspect-ratio="1" contain class="grey lighten-2"
|
||||
@click="fullview(nota, -1)"></v-img>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex v-for="(url, index) in attachViews" xs4 class="pa-2" :key="index">
|
||||
<div style="position: relative; padding-bottom: 35px;">
|
||||
<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 v-if="selected_roasset.ReceiveOrderPoConfirmed != 'Y'" @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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
attachViews: [],
|
||||
attachFiles: [],
|
||||
dialog_fullview: false,
|
||||
viewtitle: "",
|
||||
viewurl: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialog_attachment: {
|
||||
get() {
|
||||
return this.$store.state.roasset.dialog_attachment
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_dialog_attachment", val)
|
||||
}
|
||||
},
|
||||
selected_roasset: {
|
||||
get() {
|
||||
return this.$store.state.roasset.selected_roasset
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_selected_roasset", val)
|
||||
}
|
||||
},
|
||||
preview_attachment: {
|
||||
get() {
|
||||
return this.$store.state.roasset.preview_attachment
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_preview_attachment", val)
|
||||
}
|
||||
},
|
||||
loading_process: {
|
||||
get() {
|
||||
return this.$store.state.roasset.loading_process
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_loading_process", val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addAttachment(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;
|
||||
},
|
||||
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;
|
||||
},
|
||||
makeImageURL(nota) {
|
||||
if (nota.url) {
|
||||
return nota.url;
|
||||
}
|
||||
|
||||
if (nota.src) {
|
||||
return nota.src;
|
||||
}
|
||||
|
||||
const year = new Date(nota.created).getFullYear();
|
||||
const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
|
||||
return baseURL + nota.img_url;
|
||||
},
|
||||
removeAttachment(index) {
|
||||
URL.revokeObjectURL(this.attachViews[index]);
|
||||
this.attachFiles.splice(index, 1);
|
||||
this.attachViews.splice(index, 1);
|
||||
},
|
||||
clearAttachment() {
|
||||
this.attachViews.forEach(function (url) {
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
this.attachFiles = [];
|
||||
this.attachViews = [];
|
||||
},
|
||||
BatalAddAttachment() {
|
||||
this.clearAttachment();
|
||||
this.preview_attachment = [];
|
||||
this.dialog_attachment = false;
|
||||
},
|
||||
SimpanAttachment() {
|
||||
if (!this.loading_process) {
|
||||
|
||||
} else {
|
||||
let snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
|
||||
this.$store.commit("roasset/update_snackbar", snac);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialog_fullview(val) {
|
||||
if (!val) {
|
||||
this.viewurl = "";
|
||||
this.viewtitle = "";
|
||||
}
|
||||
},
|
||||
dialog_attachment(val) {
|
||||
if (val) {
|
||||
this.clearAttachment();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user