lottery/resources/js/src/views/Activities/ActivityAdd.vue

<template>
    <div>
        <b-card-code title="Horizontal Form">
            <b-form @submit.prevent>
                <b-row>
                    <b-col cols="12">
                        <b-form-group label="活動名稱" label-for="activity-name" label-cols-md="4">
                            <b-form-input v-model="activity_name" id="activity-name" placeholder="活動名稱" />
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group label="活動時間" label-for="date" label-cols-md="4">
                            <b-form-input v-model="date" id="date" type="date" placeholder="活動時間" />
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group label="活動地點" label-for="place" label-cols-md="4">
                            <b-form-input v-model="place" id="place" placeholder="活動地點" />
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group label="報名截止時間" label-for="deadline" label-cols-md="4">
                            <b-form-input v-model="deadline" id="deadline" type="time" placeholder="報名截止時間" />
                        </b-form-group>
                    </b-col>

                    <!-- submit and reset -->
                    <b-col offset-md="4">
                        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" type="submit" variant="primary"
                            class="mr-1" @click="postData">
                            送出
                        </b-button>
                        <b-button v-ripple.400="'rgba(186, 191, 199, 0.15)'" type="reset" variant="outline-secondary">
                            取消
                        </b-button>
                    </b-col>
                </b-row>
            </b-form>
        </b-card-code>

        <!--TODO 匯入excel功能-->
        <b-form-file ref="prizeList" placeholder="匯入獎項列表" drop-placeholder="Drop file here..."
            accept=".xls, .xlsx, .csv" @change="importFile($event, 'prize')"></b-form-file>
        <b-form-file ref="guestList" placeholder="匯入來賓列表" drop-placeholder="Drop file here..."
            accept=".xls, .xlsx, .csv" @change="importFile($event, 'guest')"></b-form-file>

        <b-modal ref="confirm-modal" title="成功設定活動" centered ok-only ok-title="確認">
            <b-card-text>
                已成功設定活動資訊!
            </b-card-text>
        </b-modal>

        <b-modal ref="insert-success-modal" title="成功上傳" ok-only ok-title="確認">
            <b-card-text>
                成功上傳資料。
            </b-card-text>
        </b-modal>

    </div>

</template>

<script>
import BCardCode from '@core/components/b-card-code'
import {
    BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton, BFormFile, BModal, BCardText
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import useJwt from '@/auth/jwt/useJwt'
import { getUserData } from '@/auth/utils'

export default {
    components: {
        BCardCode,
        BRow,
        BCol,
        BFormGroup,
        BFormInput,
        BFormCheckbox,
        BForm,
        BButton,
        BFormFile,
        BModal,
        BCardText,
    },
    directives: {
        Ripple,
    },
    data() {
        return {
            activities: [],
            userData: getUserData(),
            activity_name: '',
            date: '',
            place: '',
            deadline: '',
            successText: '',
        }
    },
    methods: {
        postData() {
            useJwt.postData('/api/activity/store',
                {
                    'activity_name': this.activity_name,
                    'date': this.date,
                    'place': this.place,
                    'user_id': this.userData.user_id,
                    'deadline': this.deadline
                }).then(response => {
                    console.log(response);
                    this.$refs['confirm-modal'].toggle();
                }).catch(error => {
                    console.log("error: " + error);
                })
        },
        importFile(event, option) {
            let refOption = option + 'List';
            let formData = new FormData();
            formData.append('file', event.target.files[0]);
            formData.append('option', option);
            useJwt.postData('/api/activity/uploadFile', formData).then(response => {
                this.successText = response.data.success;
                this.$refs['insert-success-modal'].toggle();
                this.$refs[refOption].reset();
            }).catch(error => {
                console.log(error);
            });
        },
    }
}
</script>