skytek_xinliang
96b96bcaaa
Split current project diagnostics into a dedicated analysis document and trim the main architecture strategy to focus on core guidance. This makes the documentation easier to navigate and separates observed issues from recommended architectural principles.docs: reorganize architecture strategy documentation Split current project diagnostics into a dedicated analysis document and trim the main architecture strategy to focus on core guidance. This makes the documentation easier to navigate and separates observed issues from recommended architectural principles.
103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { mdiBroom, mdiMagnify } from '@mdi/js'
|
|
|
|
interface GradeOption {
|
|
title: string
|
|
value: number
|
|
}
|
|
|
|
interface SearchState {
|
|
studentId: string
|
|
name: string
|
|
department: string
|
|
grade: number | null
|
|
status: string
|
|
}
|
|
|
|
defineProps<{
|
|
departments: string[]
|
|
gradeOptions: GradeOption[]
|
|
statuses: string[]
|
|
}>()
|
|
|
|
const search = defineModel<SearchState>({ required: true })
|
|
|
|
defineEmits<{
|
|
(e: 'reset'): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<v-col cols="12" md="2">
|
|
<div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
|
|
<v-text-field
|
|
id="search-student-id"
|
|
v-model="search.studentId"
|
|
aria-labelledby="search-student-id-label"
|
|
density="compact"
|
|
hide-details
|
|
name="searchStudentId"
|
|
placeholder="例如：S2024001"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="2">
|
|
<div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
|
|
<v-text-field
|
|
id="search-name"
|
|
v-model="search.name"
|
|
aria-labelledby="search-name-label"
|
|
density="compact"
|
|
hide-details
|
|
name="searchName"
|
|
placeholder="例如：王小明"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="2">
|
|
<div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
|
|
<v-select
|
|
id="search-department"
|
|
v-model="search.department"
|
|
aria-labelledby="search-department-label"
|
|
density="compact"
|
|
hide-details
|
|
:items="departments"
|
|
name="searchDepartment"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="2">
|
|
<div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
|
|
<v-select
|
|
id="search-grade"
|
|
v-model="search.grade"
|
|
aria-labelledby="search-grade-label"
|
|
density="compact"
|
|
hide-details
|
|
item-title="title"
|
|
item-value="value"
|
|
:items="gradeOptions"
|
|
name="searchGrade"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="2">
|
|
<div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
|
|
<v-select
|
|
id="search-status"
|
|
v-model="search.status"
|
|
aria-labelledby="search-status-label"
|
|
density="compact"
|
|
hide-details
|
|
:items="statuses"
|
|
name="searchStatus"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
|
|
<v-btn :prepend-icon="mdiBroom" variant="text" @click="$emit('reset')">清除</v-btn>
|
|
<v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
|
|
</v-col>
|
|
</template>
|