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

<template>
    <div>
        <b-row class="match-height">
            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'checkin', params: { 'activity_id': this.$route.params.activity_id } }">報到頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="drawPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'draw', params: { 'activity_id': this.$route.params.activity_id } }">抽獎頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="drawPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            target="_blank"
                            :to="{ name: 'slot', params: { 'activity_id': this.$route.params.activity_id } }">大獎抽獎頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>

            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'claim', params: { 'activity_id': this.$route.params.activity_id } }">兌獎頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'playPrizeList', params: { 'activity_id': this.$route.params.activity_id } }">中獎輪播名單</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            target="_blank"
                            :to="{ name: 'prizeList', params: { 'activity_id': this.$route.params.activity_id } }">主持人中獎名單</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            @click="downloadFile">匯出報到名單</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            @click="downloadRecipients">匯出得獎名單</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'search', params: { 'activity_id': this.$route.params.activity_id } }">查詢個人資訊</b-button>
                    </b-card-body>
                </b-card>
            </b-col>

        </b-row>
        <div v-if="canViewVerticalNavMenuLink({ route: 'slotManager' })" class="group-area mt-1">
            <h3>管理功能</h3>
            <hr>
        </div>
        <b-row class="match-height">
            <b-col v-if="canViewVerticalNavMenuLink({ route: 'slotManager' })" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'slotManager', params: { 'activity_id': this.$route.params.activity_id } }">抽獎管理頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="canViewVerticalNavMenuLink({ route: 'slotManager' })" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'randomTest', params: { 'activity_id': this.$route.params.activity_id } }">亂數分布測試</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="drawPage.includes(role)" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'activityUpdate', params: { 'activity_id': this.$route.params.activity_id } }">編輯活動</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
        </b-row>
    </div>
</template>

<script>
import { useUtils as useAclUtils } from '@core/libs/acl'
import { BCard, BCardBody, BCardText, BLink, BButton, BButtonGroup, BRow, BCol } from 'bootstrap-vue'
import { getUserData } from '@/auth/utils'
import useJwt from '@/auth/jwt/useJwt'
import Ripple from 'vue-ripple-directive'

export default {
    components: {
        BCard,
        BCardBody,
        BCardText,
        BLink,
        BButton,
        BButtonGroup,
        BRow,
        BCol,
    },
    directives: {
        Ripple,
    },
    setup() {
        const { canViewVerticalNavMenuLink } = useAclUtils()

        return {
            // ACL
            canViewVerticalNavMenuLink,
        }

    },
    data() {
        return {
            userData: getUserData(),
            lg: 4,
            adminPage: ['Admin'],
            drawPage: ['Admin', 'Draw'],
            checkinPage: ['Admin', 'Checkin'],
            role: "guest",
        }
    },
    created() {
        this.role = this.userData && this.userData.role ? this.userData.role : "guest"
    },
    methods: {
        downloadFile() {
            useJwt.postData('/api/checkin/export', { 'activity_id': this.$route.params.activity_id }).then(response => {
                let blob = new Blob([response.data], {
                    type: 'application/csv'
                })
                let link = document.createElement('a')
                link.href = window.URL.createObjectURL(blob)
                link.download = response.headers["content-disposition"].split('filename=')[1]
                link.click()
            }).catch(error => {
                console.log(error)
                this.user = { name: "查無此人", user_id: "　", department: "　" };
                this.input = "";
            });

        },
        downloadRecipients() {
            useJwt.postData('/api/recipients/export', { 'activity_id': this.$route.params.activity_id }).then(response => {
                let blob = new Blob([response.data], {
                    type: 'application/csv'
                })
                let link = document.createElement('a')
                link.href = window.URL.createObjectURL(blob)
                link.download = response.headers["content-disposition"].split('filename=')[1]
                link.click()
            }).catch(error => {
                console.log(error)
            });

        }
    }
}
</script>

<style>
.redirect-back {
    position: fixed;
    bottom: 5%;
    right: 30px;
    z-index: 99;
}
</style>