fe-accone/test/vuex/acc-one-receive-jasa/components/dialog-add-attachment.vue

<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 PENERIMAAN/PELAKSANAAN
            </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"
                    >
                        <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_rojasa.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.roservice.dialog_attachment
            },
            set(val) {
                this.$store.commit("roservice/update_dialog_attachment", val)
            }
        },
        selected_rojasa: {
            get() {
                return this.$store.state.roservice.selected_rojasa
            },
            set(val) {
                this.$store.commit("roservice/update_selected_rojasa", val)
            }
        },
        preview_attachment: {
            get() {
                return this.$store.state.roservice.preview_attachment
            },
            set(val) {
                this.$store.commit("roservice/update_preview_attachment", val)
            }
        },
        loading_process() {
            return this.$store.state.roservice.loading_process
        }
    },
    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) {
            const year = new Date(nota.created).getFullYear();
            const baseURL = BASE_URL + `/one-media/order-jasa/${year}/`;
            return baseURL + nota.img_url;
        },
        removeAttachment(index) {
            URL.revokeObjectURL(this.attachFiles[index]);
            this.attachFiles.splice(index, 1);
            this.attachViews.splice(index, 1);
        },
        BatalAddAttachment() {
            this.attachFiles = [];
            this.attachViews = [];
            this.preview_attachment = [];
            this.dialog_attachment = false;
        },
        SimpanAttachment() {
            if (!this.loading_process) {
                let formdata = new FormData();
                let listfiles = this.attachFiles;
                let rojasa = this.selected_rojasa;

                for (let index = 0; index < listfiles.length; index++) {
                    const file = listfiles[index];
                    formdata.append('files['+index+']', file)
                }

                formdata.append('token', one_token())
                formdata.append('ronumber', rojasa.ReceiveOrderPoNumber)
                formdata.append('tjasaID', rojasa.T_KontrakJasaID)
                formdata.append('poID', rojasa.PurchaseOrderID)
                formdata.append('roID', rojasa.ReceiveOrderPoID)

                this.$store.dispatch("roservice/uploadAttachment", formdata)
            } else {
                let snac = {color: 'warning', msg: 'proses sedang berjalan', state: true}
                this.$store.commit('roservice/update_snackbar', snac)
            }
        }
    },
    watch: {
        dialog_fullview(val) {
            if (!val) {
                this.viewurl = ""
                this.viewtitle = ""
            }
        },
        dialog_attachment(val) {
            if (val) {
                this.attachFiles = []
                this.attachViews = []
            }
        }
    },
}
</script>