first commit + add fe component vue accone

test/vuex/acc-one-receive-item-po-inventaris/components/formDialogDocument.vue

@@ -0,0 +1,146 @@
+<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>