feat: Implement detailed semester management components

2026-03-30 14:44:53 +08:00
parent edf664fbb8
commit f7413111c0
9 changed files with 16 additions and 16 deletions
@@ -0,0 +1,130 @@
+<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>