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>
<v-app>
<v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :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.team="{ item }">
{{ item.homeTeam }} VS {{ item.awayTeam }}
</template>
<template v-slot:item.score="{ item }">
{{ item.homeScore }} - {{ item.awayScore }}
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon>
<v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
</template>
</v-data-table>
<!-- {{ filteredMatches }} -->
<v-container>
<v-data-table :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.team="{ item }">
{{ item.homeTeam }} VS {{ item.awayTeam }}
</template>
<template v-slot:item.score="{ item }">
{{ item.homeScore }} - {{ item.awayScore }}
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon>
<v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
</template>
</v-data-table>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
return {
search: '',
headers: [
{ title: '比赛', key: 'team' },
{ title: '比分', key: 'score' },
{ title: '审核', key: 'actions', sortable: false }
],
matches: [
{ id: 1, homeTeam: 'Team A', awayTeam: 'Team B', homeScore: 2, awayScore: 1, status: 'pending' },
{ id: 2, homeTeam: 'Team C', awayTeam: 'Team D', homeScore: 0, awayScore: 3, status: 'pending' },
{ id: 3, homeTeam: 'Team E', awayTeam: 'Team F', homeScore: 2, awayScore: 2, status: 'pending' },
]
};
},
methods: {
approveMatch(match) {
// Perform approval logic
match.status = 'approved';
},
rejectMatch(match) {
// Perform rejection logic
match.status = 'rejected';
}
}
};
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { computed } from 'vue';
const search = ref('');
const headers = reactive([
{ title: '比赛', key: 'team' },
{ title: '比分', key: 'score' },
{ title: '审核', key: 'actions', sortable: false }
]);
const matches = ref([
{ id: 1, homeTeam: '张三', awayTeam: '零', homeScore: 2, awayScore: 1, status: 'pending' },
{ id: 2, homeTeam: '李四', awayTeam: '一', homeScore: 0, awayScore: 3, status: 'pending' },
{ id: 3, homeTeam: '王五', awayTeam: '二', homeScore: 2, awayScore: 2, status: 'pending' },
]);
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 approveMatch(match) {
// Perform approval logic
match.status = 'approved';
}
function rejectMatch(match) {
// Perform rejection logic
match.status = 'rejected';
}
</script>
\ No newline at end of file
vuetify-project/src/components/game_detail.vue
View file @ 8993c8ae
<template>
<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>
<v-toolbar flat>
<v-toolbar-title>比赛</v-toolbar-title>
......@@ -17,9 +18,12 @@
{{ item.userScore }} - {{ item.opponentScore }}
</template>
<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-close-circle' }}</v-icon>
'mdi-close-circle' }}</v-icon> -->
</template>
</v-data-table>
</v-app>
......@@ -28,16 +32,29 @@
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { computed } from 'vue';
const search = ref('');
const headers = reactive([
{ title: '比赛', key: 'name' },
{ title: '比分', key: 'score' },
{ title: '比赛', key: 'name', sortable: true },
{ title: '比分', key: 'score', sortable: true },
{ title: '审核状态', key: 'verified' },
]);
const matches = reactive([
{ id: 1, username: 'Team A', opponentname: 'Team B', userScore: 3, opponentScore: 2, verified: true },
{ id: 2, username: 'Team A', opponentname: 'Team C', userScore: 1, opponentScore: 1, verified: false },
{ id: 3, username: 'Team A', opponentname: 'Team D', userScore: 2, opponentScore: 4, verified: true },
const matches = ref([
{ id: 1, username: '张三', opponentname: '零', userScore: 3, opponentScore: 2, verified: 1 },
{ id: 2, username: '李四', opponentname: '一', userScore: 1, opponentScore: 1, verified: 2 },
{ 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>
\ No newline at end of file
vuetify-project/src/components/gamemanage.vue
View file @ 8993c8ae
<template>
<v-container>
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete v-model="player1" hide-details="auto" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">VS</div>
</v-col>
<v-col align-self="center">
<v-autocomplete v-model="player2" hide-details="auto" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete v-model="score1" hide-details="auto" label="得分"
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">:</div>
</v-col>
<v-col align-self="center">
<v-autocomplete v-model="score2" hide-details="auto" label="得分"
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
</v-col>
</v-row>
</v-container>
<v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-darken-3" size="x-large"
variant="flat" block @click="loading = !loading">
提交
</v-btn>
<div class="text-h4 headline">
比赛管理
</div>
<v-card class="game-info-card">
<v-container>
<!-- <v-card-title color="indigo">
提交比赛
</v-card-title> -->
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="player1" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">VS</div>
</v-col>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="player2" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
</v-row>
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="score1" label="得分"
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">:</div>
</v-col>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="score2" label="得分"
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
</v-col>
</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>
<v-card
class="mx-auto my-8"
href="../../game_detail.html"
max-width="344"
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>
<v-card class="mx-auto my-2" href="../../game_detail.html" width="95%" rel="noopener" target="_blank" title="已提交比赛"
append-icon="mdi-chevron-right"></v-card>
<v-card class="mx-auto my-2" href="../../audit.html" width="95%" rel="noopener" target="_blank" title="待审核比赛"
append-icon="mdi-chevron-right"></v-card>
</div>
</template>
......@@ -71,3 +72,20 @@ const loading = ref(false);
</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)
<template>
<div 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">
<Home></Home>
<v-window-item :key="1" :value="'tab-1'" class="h-screen w-100">
<Home></Home>
</v-window-item>
<v-window-item :key="2" :value="'tab-2'" class="h-screen w-auto">
<Gamemanage></Gamemanage>
<v-window-item :key="2" :value="'tab-2'" class="h-screen w-100">
<Gamemanage></Gamemanage>
</v-window-item>
<v-window-item :key="3" :value="'tab-3'" class="h-screen w-auto">
<Space></Space>
<v-window-item :key="3" :value="'tab-3'" class="h-screen w-100">
<Space></Space>
</v-window-item>
</v-window>
<v-tabs v-model="tab" bg-color="deep-purple-accent-4" align-tabs="center" stacked grow class="tabs">
<v-tab value="tab-1">
<v-icon>mdi-phone</v-icon>
首页
</v-tab>
<v-tab value="tab-2">
<v-icon>mdi-heart</v-icon>
比赛
</v-tab>
<v-tab value="tab-3">
<v-icon>mdi-account-box</v-icon>
我的
</v-tab>
</v-tabs>
<v-layout class="overflow-visible" style="height: 56px;">
<v-bottom-navigation v-model="tab" color="indigo" align-tabs="center" stacked grow class="tabs">
<v-btn value="tab-1">
<v-icon>mdi-home</v-icon>
首页
</v-btn>
<v-btn value="tab-2">
<v-icon>mdi-table-tennis</v-icon>
比赛
</v-btn>
<v-btn value="tab-3">
<v-icon>mdi-account</v-icon>
我的
</v-btn>
</v-bottom-navigation>
</v-layout>
</div>
</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