add modules folder based on s_menu
This commit is contained in:
193
test/vuex/acc-one-po-asset/components/dialog-add-attachment.vue
Normal file
193
test/vuex/acc-one-po-asset/components/dialog-add-attachment.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<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 ATTACHMENT
|
||||
</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="(docs) in prview_attachment"
|
||||
xs4 class="pa-2" :key="docs.attach_id"
|
||||
>
|
||||
<div style="position: relative; padding-bottom: 35px;">
|
||||
<v-img
|
||||
:src="makeImageUrl(docs)" aspect-ratio="1" contain
|
||||
class="grey lighten-2" @click="fullview(docs, -1)"
|
||||
></v-img>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="(url, index) in tempdocs_view"
|
||||
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
|
||||
style="position: absolute; top: 5px; right: 5px; z-index: 1; cursor: pointer;"
|
||||
@click="removedocs(index)" color="red"
|
||||
>close</v-icon>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel_file()" color="error" class="white--text">Batal</v-btn>
|
||||
<v-btn @click="save_file()" 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>
|
||||
{{ docstitle }}
|
||||
<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="docsurl" contain class="grey lighten-2"
|
||||
></v-img>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn 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 {
|
||||
tempdocs_view: [],
|
||||
tempdocs_file: [],
|
||||
docstitle: "",
|
||||
docsurl: "",
|
||||
dialog_fullview: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialog_attachment: {
|
||||
get() {
|
||||
return this.$store.state.poasset.dialog_attachment
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("poasset/update_dialog_attachment", val)
|
||||
}
|
||||
},
|
||||
selected_orderaset: {
|
||||
get() {
|
||||
return this.$store.state.poasset.selected_orderaset
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("poasset/update_selected_orderaset", val)
|
||||
}
|
||||
},
|
||||
prview_attachment() {
|
||||
return this.$store.state.poasset.prview_attachment
|
||||
},
|
||||
loading_process() {
|
||||
return this.$store.state.poasset.loading_process
|
||||
}
|
||||
},
|
||||
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.tempdocs_file.push(file);
|
||||
this.tempdocs_view.push(url);
|
||||
}
|
||||
},
|
||||
makeImageUrl(docs) {
|
||||
const year = new Date(docs.created).getFullYear();
|
||||
const baseURL = BASE_URL + `/one-media/order-aset/${year}`;
|
||||
return baseURL + docs.img_url;
|
||||
},
|
||||
fullview(docs, index) {
|
||||
if (index < 0) {
|
||||
this.docstitle = docs.img_url;
|
||||
this.docsurl = this.makeImageUrl(docs);
|
||||
} else {
|
||||
this.docstitle = this.tempdocs_view[index];
|
||||
this.docsurl = docs;
|
||||
}
|
||||
|
||||
this.dialog_fullview = true;
|
||||
},
|
||||
removedocs(index) {
|
||||
URL.revokeObjectURL(this.tempdocs_view[index]);
|
||||
this.tempdocs_view.splice(index, 1);
|
||||
this.tempdocs_file.splice(index, 1);
|
||||
},
|
||||
cancel_file() {
|
||||
this.tempdocs_file = [];
|
||||
this.tempdocs_view = [];
|
||||
this.dialog_attachment = false;
|
||||
},
|
||||
save_file() {
|
||||
if (!this.loading_process) {
|
||||
let form_data = new FormData();
|
||||
let listfiles = this.tempdocs_file;
|
||||
let orderaset = this.selected_orderaset;
|
||||
|
||||
for (let index = 0; index < listfiles.length; index++) {
|
||||
const file = listfiles[index];
|
||||
form_data.append(`files[${index}]`, file);
|
||||
}
|
||||
|
||||
form_data.append('KontrakAsetID', orderaset.T_KontrakAsetID);
|
||||
form_data.append('POrderID', orderaset.PurchaseOrderID);
|
||||
form_data.append('POnumber', orderaset.PurchaseOrderNumber);
|
||||
form_data.append('token', one_token());
|
||||
|
||||
this.$store.dispatch('poasset/');
|
||||
} else {
|
||||
const snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
|
||||
this.$store.commit('poasset/update_snackbar', snac);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialog_fullview(val) {
|
||||
if (!val) {
|
||||
this.docstitle = "";
|
||||
this.docsurl = "";
|
||||
}
|
||||
},
|
||||
dialog_attachment(val) {
|
||||
if (val) {
|
||||
this.tempdocs_file = [];
|
||||
this.tempdocs_view = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user