skytek_xinliang
131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template>
|
|
<v-row density="compact">
|
|
<v-col cols="12" md="3">
|
|
<v-text-field
|
|
id="field-studentId"
|
|
v-model="form.studentId"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.studentId"
|
|
label="學號"
|
|
placeholder="例如：S2024008"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'studentId')"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-text-field
|
|
id="field-name"
|
|
v-model="form.name"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.name"
|
|
label="姓名"
|
|
placeholder="例如：陳怡君"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'name')"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
id="field-department"
|
|
v-model="form.department"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.department"
|
|
:items="props.departments"
|
|
label="系所"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'department')"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
id="field-grade"
|
|
v-model="form.grade"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.grade"
|
|
item-title="title"
|
|
item-value="value"
|
|
:items="props.gradeOptions"
|
|
label="年級"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'grade')"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
id="field-enrollYear"
|
|
v-model="form.enrollYear"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.enrollYear"
|
|
:items="props.enrollYears"
|
|
label="入學年度"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'enrollYear')"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
id="field-status"
|
|
v-model="form.status"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.status"
|
|
:items="props.statuses"
|
|
label="狀態"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'status')"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-text-field
|
|
id="field-email"
|
|
v-model="form.email"
|
|
density="comfortable"
|
|
:disabled="props.isFormLocked"
|
|
:error-messages="props.fieldErrors.email"
|
|
label="Email"
|
|
:readonly="props.isFormReadonly"
|
|
variant="outlined"
|
|
@update:model-value="emit('clear-field', 'email')"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { StudentFormState } from '@/composables/maint/useStudentMaintenanceForm'
|
|
import { toRef } from 'vue'
|
|
|
|
interface GradeOption {
|
|
title: string
|
|
value: number
|
|
}
|
|
|
|
const props = defineProps<{
|
|
departments: string[]
|
|
enrollYears: number[]
|
|
fieldErrors: Record<string, string[]>
|
|
form: StudentFormState
|
|
gradeOptions: GradeOption[]
|
|
isFormLocked: boolean
|
|
isFormReadonly: boolean
|
|
statuses: string[]
|
|
}>()
|
|
|
|
const form = toRef(props, 'form')
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'clear-field', field: keyof StudentFormState): void
|
|
}>()
|
|
</script>
|