skt-vuetify-templates/src/components/items/ItemFormFieldGroup.vue

<script setup lang="ts">
import type { StudentFormState } from '@/composables/maint/useStudentMaintenanceForm'

interface GradeOption {
  title: string
  value: number
}

defineProps<{
  departments: string[]
  enrollYears: number[]
  fieldErrors: Record<keyof StudentFormState, string[]>
  gradeOptions: GradeOption[]
  isFormLocked: boolean
  isFormReadonly: boolean
  statuses: string[]
}>()

const form = defineModel<StudentFormState>({ required: true })

const emit = defineEmits<{
  (e: 'clear-field-error', field: keyof StudentFormState): void
}>()
</script>

<template>
  <v-row density="compact">
    <v-col cols="12" md="6">
      <v-text-field
        id="field-studentId"
        v-model="form.studentId"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.studentId"
        label="學號"
        placeholder="例如：S2024008"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'studentId')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-text-field
        id="field-name"
        v-model="form.name"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.name"
        label="姓名"
        placeholder="例如：陳怡君"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'name')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-select
        id="field-department"
        v-model="form.department"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.department"
        :items="departments"
        label="系所"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'department')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-select
        id="field-grade"
        v-model="form.grade"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.grade"
        item-title="title"
        item-value="value"
        :items="gradeOptions"
        label="年級"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'grade')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-select
        id="field-enrollYear"
        v-model="form.enrollYear"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.enrollYear"
        :items="enrollYears"
        label="入學年度"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'enrollYear')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-text-field
        id="field-credits"
        v-model.number="form.credits"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.credits"
        label="已修學分"
        min="0"
        :readonly="isFormReadonly"
        type="number"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'credits')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-text-field
        id="field-advisor"
        v-model="form.advisor"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.advisor"
        label="指導老師"
        placeholder="例如：林教授"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'advisor')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-text-field
        id="field-email"
        v-model="form.email"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.email"
        label="Email"
        placeholder="name@school.edu"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'email')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-text-field
        id="field-phone"
        v-model="form.phone"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.phone"
        label="電話"
        placeholder="例如：02-2345-6789"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'phone')"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-select
        id="field-status"
        v-model="form.status"
        density="comfortable"
        :disabled="isFormLocked"
        :error-messages="fieldErrors.status"
        :items="statuses"
        label="狀態"
        :readonly="isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field-error', 'status')"
      />
    </v-col>
  </v-row>
</template>