Skip to content

W
web_nangaoclub
Commit 8993c8ae authored by 孙谢炜's avatar 孙谢炜
Browse files
Options

修改搜索功能

parent 21d11078
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 131 deletions
vuetify-project/src/components/audit.vue
View file @ 8993c8ae
<template> <template>
<v-app> <v-app>
<v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10"> <!-- {{ filteredMatches }} -->
<template v-slot:top> <v-container>
<v-toolbar flat> <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value" :items-per-page="10">
<v-toolbar-title>比赛</v-toolbar-title> <template v-slot:top>
<v-divider class="mx-4" inset vertical></v-divider> <v-toolbar flat>
<v-spacer></v-spacer> <v-toolbar-title>比赛</v-toolbar-title>
<v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line hide-details></v-text-field> <v-divider class="mx-4" inset vertical></v-divider>
</v-toolbar> <v-spacer></v-spacer>
</template> <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line hide-details></v-text-field>
<template v-slot:item.team="{ item }"> </v-toolbar>
{{ item.homeTeam }} VS {{ item.awayTeam }} </template>
</template> <template v-slot:item.team="{ item }">
<template v-slot:item.score="{ item }"> {{ item.homeTeam }} VS {{ item.awayTeam }}
{{ item.homeScore }} - {{ item.awayScore }} </template>
</template> <template v-slot:item.score="{ item }">
<template v-slot:item.actions="{ item }"> {{ item.homeScore }} - {{ item.awayScore }}
<v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon> </template>
<v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon> <template v-slot:item.actions="{ item }">
</template> <v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon>
</v-data-table> <v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
</template>
</v-data-table>
</v-container>
</v-app> </v-app>
</template> </template>
<script> <script setup>
export default { import { ref } from 'vue';
data() { import { reactive } from 'vue';
return { import { computed } from 'vue';
search: '',
headers: [ const search = ref('');
{ title: '比赛', key: 'team' }, const headers = reactive([
{ title: '比分', key: 'score' }, { title: '比赛', key: 'team' },
{ title: '审核', key: 'actions', sortable: false } { title: '比分', key: 'score' },
], { title: '审核', key: 'actions', sortable: false }
matches: [ ]);
{ id: 1, homeTeam: 'Team A', awayTeam: 'Team B', homeScore: 2, awayScore: 1, status: 'pending' }, const matches = ref([
{ id: 2, homeTeam: 'Team C', awayTeam: 'Team D', homeScore: 0, awayScore: 3, status: 'pending' }, { id: 1, homeTeam: '张三', awayTeam: '零', homeScore: 2, awayScore: 1, status: 'pending' },
{ id: 3, homeTeam: 'Team E', awayTeam: 'Team F', homeScore: 2, awayScore: 2, status: 'pending' }, { id: 2, homeTeam: '李四', awayTeam: '一', homeScore: 0, awayScore: 3, status: 'pending' },
] { id: 3, homeTeam: '王五', awayTeam: '二', homeScore: 2, awayScore: 2, status: 'pending' },
}; ]);
},
methods: { const filteredMatches = computed(() => {
approveMatch(match) { // return matches.value
// Perform approval logic return matches.value.filter(match =>
match.status = 'approved'; match.homeTeam.includes(search.value) ||
}, match.awayTeam.includes(search.value) ||
rejectMatch(match) { match.homeScore === parseInt(search.value) ||
// Perform rejection logic match.awayScore === parseInt(search.value)
match.status = 'rejected'; );
} })
}
}; function approveMatch(match) {
// Perform approval logic
match.status = 'approved';
}
function rejectMatch(match) {
// Perform rejection logic
match.status = 'rejected';
}
</script> </script>
\ No newline at end of file
vuetify-project/src/components/game_detail.vue
View file @ 8993c8ae
<template> <template>
<v-app> <v-app>
<v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10"> <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value"
:items-per-page="10">
<template v-slot:top> <template v-slot:top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>比赛</v-toolbar-title> <v-toolbar-title>比赛</v-toolbar-title>
...@@ -17,9 +18,12 @@ ...@@ -17,9 +18,12 @@
{{ item.userScore }} - {{ item.opponentScore }} {{ item.userScore }} - {{ item.opponentScore }}
</template> </template>
<template v-slot:item.verified="{ item }"> <template v-slot:item.verified="{ item }">
<v-icon :color="item.verified != 1 ? (item.verified == 2 ? 'green' : 'red') : 'red'">{{ item.verified ? <v-icon v-if="item.verified === 1" color="blue">mdi-help-circle</v-icon>
<v-icon v-else-if="item.verified === 2" color="red">mdi-check-circle</v-icon>
<v-icon v-else-if="item.verified === 3" color="green">mdi-close-circle</v-icon>
<!-- <v-icon :color="item.verified != 1 ? (item.verified == 2 ? 'green' : 'red') : 'red'">{{ item.verified ?
'mdi-check-circle' : 'mdi-check-circle' :
'mdi-close-circle' }}</v-icon> 'mdi-close-circle' }}</v-icon> -->
</template> </template>
</v-data-table> </v-data-table>
</v-app> </v-app>
...@@ -28,16 +32,29 @@ ...@@ -28,16 +32,29 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { reactive } from 'vue'; import { reactive } from 'vue';
import { computed } from 'vue';
const search = ref(''); const search = ref('');
const headers = reactive([ const headers = reactive([
{ title: '比赛', key: 'name' }, { title: '比赛', key: 'name', sortable: true },
{ title: '比分', key: 'score' }, { title: '比分', key: 'score', sortable: true },
{ title: '审核状态', key: 'verified' }, { title: '审核状态', key: 'verified' },
]); ]);
const matches = reactive([ const matches = ref([
{ id: 1, username: 'Team A', opponentname: 'Team B', userScore: 3, opponentScore: 2, verified: true }, { id: 1, username: '张三', opponentname: '零', userScore: 3, opponentScore: 2, verified: 1 },
{ id: 2, username: 'Team A', opponentname: 'Team C', userScore: 1, opponentScore: 1, verified: false }, { id: 2, username: '李四', opponentname: '一', userScore: 1, opponentScore: 1, verified: 2 },
{ id: 3, username: 'Team A', opponentname: 'Team D', userScore: 2, opponentScore: 4, verified: true }, { id: 3, username: '王五', opponentname: '二', userScore: 2, opponentScore: 4, verified: 3 },
]); ]);
const filteredMatches = computed(() => {
// return matches.value
return matches.value.filter(match =>
match.username.includes(search.value) ||
match.opponentname.includes(search.value) ||
match.userScore === parseInt(search.value) ||
match.opponentScore === parseInt(search.value)
);
})
</script> </script>
\ No newline at end of file
vuetify-project/src/components/gamemanage.vue
View file @ 8993c8ae
<template> <template>
<v-container> <div class="text-h4 headline">
<v-row no-gutters> 比赛管理
<v-col align-self="center"> </div>
<v-autocomplete v-model="player1" hide-details="auto" label="姓名" <v-card class="game-info-card">
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete> <v-container>
</v-col> <!-- <v-card-title color="indigo">
<v-col cols="2" align-self="center"> 提交比赛
<div class="text-h6" style="text-align: center;">VS</div> </v-card-title> -->
</v-col> <v-row no-gutters>
<v-col align-self="center"> <v-col align-self="center">
<v-autocomplete v-model="player2" hide-details="auto" label="姓名" <v-autocomplete variant="underlined" v-model="player1" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete> :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col> </v-col>
</v-row> <v-col cols="2" align-self="center">
</v-container> <div class="text-h6" style="text-align: center;">VS</div>
<v-container> </v-col>
<v-row no-gutters> <v-col align-self="center">
<v-col align-self="center"> <v-autocomplete variant="underlined" v-model="player2" label="姓名"
<v-autocomplete v-model="score1" hide-details="auto" label="得分" :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete> </v-col>
</v-col> </v-row>
<v-col cols="2" align-self="center"> <v-row no-gutters>
<div class="text-h6" style="text-align: center;">:</div> <v-col align-self="center">
</v-col> <v-autocomplete variant="underlined" v-model="score1" label="得分"
<v-col align-self="center"> :items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
<v-autocomplete v-model="score2" hide-details="auto" label="得分" </v-col>
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete> <v-col cols="2" align-self="center">
</v-col> <div class="text-h6" style="text-align: center;">:</div>
</v-row> </v-col>
</v-container> <v-col align-self="center">
<v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-darken-3" size="x-large" <v-autocomplete variant="underlined" v-model="score2" label="得分"
variant="flat" block @click="loading = !loading"> :items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
提交 </v-col>
</v-btn> </v-row>
<v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-lighten-2" size="large"
variant="flat" block @click="loading = !loading">
提交
</v-btn>
</v-container>
<!-- <v-container>
</v-container> -->
<!-- <v-container>
</v-container> -->
</v-card>
<div> <div>
<v-card <v-card class="mx-auto my-2" href="../../game_detail.html" width="95%" rel="noopener" target="_blank" title="已提交比赛"
class="mx-auto my-8" append-icon="mdi-chevron-right"></v-card>
href="../../game_detail.html" <v-card class="mx-auto my-2" href="../../audit.html" width="95%" rel="noopener" target="_blank" title="待审核比赛"
max-width="344" append-icon="mdi-chevron-right"></v-card>
rel="noopener"
target="_blank"
title="审核详情"
append-icon="mdi-chevron-right"
></v-card>
<v-card
class="mx-auto my-8"
href="../../audit.html"
max-width="344"
rel="noopener"
target="_blank"
title="审核"
append-icon="mdi-chevron-right"
></v-card>
</div> </div>
</template> </template>
...@@ -71,3 +72,20 @@ const loading = ref(false); ...@@ -71,3 +72,20 @@ const loading = ref(false);
</script> </script>
<style>
.game-info-card {
width: 95%;
margin: auto;
margin-top: 20px;
/* padding: 5px; */
}
.headline {
margin-left: 5%;
margin-top: 5%;
margin-bottom: 2%;
}
</style>
\ No newline at end of file
vuetify-project/src/main.vue
View file @ 8993c8ae
...@@ -9,32 +9,36 @@ const tab = ref(null) ...@@ -9,32 +9,36 @@ const tab = ref(null)
<template> <template>
<div class="h-screen w-auto"> <div class="h-screen w-auto">
<v-window v-model="tab" class="h-screen w-auto"> <v-window v-model="tab" class="h-screen w-auto">
<v-window-item :key="1" :value="'tab-1'" class="h-screen w-auto"> <v-window-item :key="1" :value="'tab-1'" class="h-screen w-100">
<Home></Home> <Home></Home>
</v-window-item> </v-window-item>
<v-window-item :key="2" :value="'tab-2'" class="h-screen w-auto"> <v-window-item :key="2" :value="'tab-2'" class="h-screen w-100">
<Gamemanage></Gamemanage> <Gamemanage></Gamemanage>
</v-window-item> </v-window-item>
<v-window-item :key="3" :value="'tab-3'" class="h-screen w-auto"> <v-window-item :key="3" :value="'tab-3'" class="h-screen w-100">
<Space></Space> <Space></Space>
</v-window-item> </v-window-item>
</v-window> </v-window>
<v-tabs v-model="tab" bg-color="deep-purple-accent-4" align-tabs="center" stacked grow class="tabs"> <v-layout class="overflow-visible" style="height: 56px;">
<v-tab value="tab-1">
<v-icon>mdi-phone</v-icon> <v-bottom-navigation v-model="tab" color="indigo" align-tabs="center" stacked grow class="tabs">
首页 <v-btn value="tab-1">
</v-tab> <v-icon>mdi-home</v-icon>
首页
<v-tab value="tab-2"> </v-btn>
<v-icon>mdi-heart</v-icon>
比赛 <v-btn value="tab-2">
</v-tab> <v-icon>mdi-table-tennis</v-icon>
比赛
<v-tab value="tab-3"> </v-btn>
<v-icon>mdi-account-box</v-icon>
我的 <v-btn value="tab-3">
</v-tab> <v-icon>mdi-account</v-icon>
</v-tabs> 我的
</v-btn>
</v-bottom-navigation>
</v-layout>
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment