fe-accone/test/vuex/acc-one-receive-order-asset/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 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>