<template> <v-app> <!-- {{ filteredMatches }} --> <v-container> <v-data-table class="overflow-auto " :headers="headers" :items="filteredMatches" item-key="id" :search="search.value" :items-per-page="10"> <template v-slot:top> <v-toolbar flat> <v-toolbar-title>比赛</v-toolbar-title> <v-divider class="mx-4" inset vertical></v-divider> <v-spacer></v-spacer> <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line hide-details></v-text-field> </v-toolbar> </template> <template v-slot:item.date="{ item }"> <p style="width:60px" >{{ item.date }}</p> </template> <template v-slot:item.team="{ item }"> <p style="width:120px">{{ item.homeTeam }} VS {{ item.awayTeam }}</p> </template> <template v-slot:item.score="{ item }"> <p style="width:30px">{{ item.homeScore }} - {{ item.awayScore }}</p> </template> <template v-slot:item.actions="{ item }"> <div style="width:45px"> <v-icon v-if="!item.shenhe" small color="green" @click="opendialog(item, 'approve')" style="padding-right: 20px;">mdi-check</v-icon> <v-icon v-if="!item.shenhe" small color="red" @click="opendialog(item, 'reject')" style="padding-left: 20px;">mdi-close</v-icon> <div v-if="item.shenhe" variant="text">已审核</div></div> </template> </v-data-table> <v-dialog v-model="dialog" width="auto"> <v-card width="300px"> <v-card-title> {{ cardtitle }} </v-card-title> <v-card-text> {{ cardtext }} </v-card-text> <template v-slot:actions> <v-btn class="ms-auto" variant="flat" color="indigo" text="确定" @click="confirmAction"></v-btn> <v-btn class="ms-auto" variant="flat" color="indigo" text="取消" @click="dialog = false"></v-btn> </template> </v-card> </v-dialog> </v-container> </v-app> </template> <style> .table{ width: 60px; } </style> <script setup> import { ref } from 'vue'; import { reactive } from 'vue'; import { computed } from 'vue'; import axios from 'axios'; const matches = ref(new Array()); const actiontype = ref(null); const selectedMatch = ref(null); const cardtitle = ref(null); const cardtext = ref(null); const shenhetitle = ref(null); const shenhetext = ref(null); const dialog = ref(false); const verify = ref(true); function info(title, text) { cardtitle.value = title; cardtext.value = text; dialog.value = true; } function refresh() { axios.get('/api/lauchedGames',) .then(function (response) { const data = response.data; for (var i = 0; i < data.Games.length; i++) { var match = { id: data.Games[i].id, date: data.Games[i].game_date, homeTeam: data.Games[i].player1_real_name, awayTeam: data.Games[i].player2_real_name, homeScore: data.Games[i].score1, awayScore: data.Games[i].score2, shenhe: false, } matches.value[i] = match; } }) .catch(function (error) { console.log(error); }) } refresh(); const search = ref(''); const headers = reactive([ { title: '日期', key: 'date', sortable: false }, { title: '比赛', key: 'team', sortable: false }, { title: '比分', key: 'score', sortable: false }, { title: '审核', key: 'actions', sortable: false } ]); // const matches = ref(new Array()); const filteredMatches = computed(() => { // return matches.value return matches.value.filter(match => match.homeTeam.includes(search.value) || match.awayTeam.includes(search.value) || match.homeScore === parseInt(search.value) || match.awayScore === parseInt(search.value) ); }) function opendialog(game, type) { if (type === 'approve') { shenhetitle.value = `审核比赛 ${game.homeTeam} VS ${game.awayTeam}`; shenhetext.value = `确定要通过这场比赛吗?`; } else if (type === 'reject') { shenhetitle.value = `审核比赛 ${game.homeTeam} VS ${game.awayTeam}`; shenhetext.value = `确定要不通过这场比赛吗?`; } info(shenhetitle.value, shenhetext.value); selectedMatch.value = game; actiontype.value = type; } function confirmAction() { if (actiontype.value === 'approve') { verify.value = true; selectedMatch.value.shenhe = true; axios.post('/api/confirmGame', { game_id: selectedMatch.value.id, confirm: verify.value, }) .then(function (response) { const data = response.data; if (data.status === "SUCCESS") { console.log('success'); } }) .catch(function (error) { console.log(error); }) } else if(actiontype.value === 'reject') { verify.value = false; selectedMatch.value.shenhe = true; axios.post('/api/confirmGame', { game_id: selectedMatch.value.id, confirm: verify.value, }) .then(function (response) { const data = response.data; if (data.status === "SUCCESS") { console.log('success'); } }) .catch(function (error) { console.log(error); }) } dialog.value = false; } </script>