147 lines
5.0 KiB
Vue
147 lines
5.0 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialog_document" persistent max-width="60vw">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
FORM SURAT JALAN / DOKUMEN DARI SUPPLIER
|
|
</v-card-title>
|
|
<v-card-text class="pt-2 pb-0">
|
|
<v-layout v-if="act_dialog_doc == 'upload'" mr-2 ml-2 style="border:1px solid black" align-center row pa-2 mb-2>
|
|
<v-flex xs9>
|
|
<input type="file" id="files" ref="files" accept="image/*" multiple v-on:change="handleFileUploads()"/>
|
|
</v-flex>
|
|
</v-layout>
|
|
<p v-show="cekFile" class="error pl-2 pr-2" style="color:#fff">Belum diisi</p>
|
|
<v-layout v-if="show_progrees_upload" row align-center mr-2 ml-2>
|
|
<v-flex xs12>
|
|
|
|
<v-progress-linear :indeterminate="true"></v-progress-linear>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-if="imagePreviews.length > 0 && !show_progrees_upload" align-center row wrap>
|
|
<v-flex
|
|
v-for="(img, index) in imagePreviews"
|
|
:key="index"
|
|
xs6
|
|
class="pa-2"
|
|
>
|
|
<v-img :src="img">
|
|
<div class="fill-height bottom-gradient"></div>
|
|
</v-img>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="error" flat @click="closeDiallog()"> Tutup </v-btn>
|
|
<v-btn color="primary" v-if="act_dialog_doc == 'upload'" dark @click="saveForm()">Simpan</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "formDialogDocument",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
computed: {
|
|
dialog_document: {
|
|
get() {
|
|
return this.$store.state.ro.dialog_document;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("ro/update_dialog_document", val);
|
|
},
|
|
},
|
|
show_progrees_upload: {
|
|
get() {
|
|
return this.$store.state.ro.show_progrees_upload
|
|
},
|
|
set(val) {
|
|
this.$store.commit("ro/update_show_progrees_upload", val)
|
|
}
|
|
},
|
|
imageFiles: {
|
|
get() {
|
|
return this.$store.state.ro.imageFiles
|
|
},
|
|
set(val) {
|
|
this.$store.commit("ro/update_imageFiles", val)
|
|
}
|
|
},
|
|
imagePreviews: {
|
|
get() {
|
|
return this.$store.state.ro.imagePreviews
|
|
},
|
|
set(val) {
|
|
this.$store.commit("ro/update_imagePreviews", val)
|
|
}
|
|
},
|
|
cekFile: {
|
|
get() {
|
|
return this.$store.state.ro.cekFile;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("ro/update_cekFile", val);
|
|
},
|
|
},
|
|
act_dialog_doc: {
|
|
get() {
|
|
return this.$store.state.ro.act_dialog_doc;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("ro/update_act_dialog_doc", val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
closeDiallog() {
|
|
this.$store.commit("ro/update_dialog_document", false);
|
|
},
|
|
handleFileUploads(){
|
|
// this.files = this.$refs.files.files
|
|
|
|
const files = this.$refs.files.files;
|
|
this.imagePreviews = [];
|
|
this.imageFiles = [];
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
const url = URL.createObjectURL(file);
|
|
this.imagePreviews.push(url);
|
|
this.imageFiles.push(file);
|
|
}
|
|
},
|
|
saveForm() {
|
|
var formData = new FormData()
|
|
// console.log("formData",this.imageFiles.length)
|
|
|
|
for( var i = 0; i < this.imageFiles.length; i++ ){
|
|
let file = this.imageFiles[i]
|
|
|
|
formData.append('files[' + i + ']', file)
|
|
}
|
|
|
|
var user = one_user()
|
|
formData.append('receiveOrderPoID', this.$store.state.ro.selected_ro.ReceiveOrderPoID)
|
|
formData.append('receiveOrderPoNumber', this.$store.state.ro.selected_ro.ReceiveOrderPoNumber)
|
|
formData.append('userId', user.M_UserID)
|
|
|
|
this.$store.dispatch('ro/saveFiles', formData)
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
}
|
|
</script>
|