refactor: replace common confirm dialogs with maintenance CRUD dialogs and streamline form handling in MasterDetailMntC.vue and SingleRecordMnt.vue

src/views/maint/MasterDetailMntB.vue

@@ -113,54 +113,17 @@ v-else :class="[
               { 'form-readonly': isFormReadonly },
               isMobile ? '' : 'd-flex flex-column h-100',
             ]" @submit.prevent="requestSaveConfirmation">
-              <v-row dense>
-                <v-col cols="12" md="3">
-                  <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="clearFieldError('studentId')" />
-                </v-col>
-                <v-col cols="12" md="3">
-                  <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="clearFieldError('name')" />
-                </v-col>
-                <v-col cols="12" md="3">
-                  <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="clearFieldError('department')" />
-                </v-col>
-                <v-col cols="12" md="3">
-                  <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="clearFieldError('grade')" />
-                </v-col>
-                <v-col cols="12" md="3">
-                  <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="clearFieldError('enrollYear')" />
-                </v-col>
-                <v-col cols="12" md="3">
-                  <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="clearFieldError('status')" />
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-text-field
-id="field-email" v-model="form.email" density="comfortable" :disabled="isFormLocked"
-                    :error-messages="fieldErrors.email" label="Email" :readonly="isFormReadonly"
-                    variant="outlined" @update:model-value="clearFieldError('email')" />
-                </v-col>
-              </v-row>
+              <maintenance-student-form-fields
+                :departments="departments"
+                :enroll-years="enrollYears"
+                :field-errors="fieldErrors"
+                :form="form"
+                :grade-options="gradeOptions"
+                :is-form-locked="isFormLocked"
+                :is-form-readonly="isFormReadonly"
+                :statuses="statuses"
+                @clear-field="clearFieldError"
+              />
 
               <v-divider />
 
@@ -206,44 +169,26 @@ v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="i
     </v-overlay>
   </teleport>
 
-  <common-confirm-dialog
-v-model="confirmCloseVisible" confirm-color="error" confirm-text="關閉不儲存" message="目前有尚未儲存的內容，確定要關閉嗎？"
-    title="未儲存變更" @confirm="confirmClose" />
-
-  <common-confirm-dialog
-v-model="confirmSaveVisible" :confirm-loading="isSaving" confirm-text="確認儲存" max-width="520"
-    title="確認儲存變更" @confirm="confirmSave">
-    <div v-if="saveSummary.length > 0" class="d-flex flex-column ga-2">
-      <div v-for="item in saveSummary" :key="item.label" class="d-flex flex-column">
-        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
-        <div v-if="item.before !== null" class="text-body-2">
-          <span class="text-medium-emphasis">原：</span>
-          <span :class="{ 'text-medium-emphasis': isPlaceholderValue(item.before) }">
-            {{ item.before }}
-          </span>
-        </div>
-        <div class="text-body-2">
-          <span class="text-medium-emphasis">新：</span>
-          <span :class="{ 'text-medium-emphasis': isPlaceholderValue(item.after) }">
-            {{ item.after }}
-          </span>
-        </div>
-      </div>
-    </div>
-    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
-  </common-confirm-dialog>
-
-  <common-confirm-dialog
-v-model="confirmDeleteVisible" confirm-color="error" confirm-text="確定刪除"
-    :message="`確定要刪除 ${pendingDeleteLabel} 嗎？此操作無法復原。`" title="確認刪除" @confirm="confirmDelete" />
-
-  <common-confirm-dialog
-v-model="confirmSwitchVisible" confirm-text="確定切換" max-width="480"
-    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？" title="未儲存變更" @confirm="confirmSwitch" />
-
-  <common-confirm-dialog
-v-model="confirmNavigateVisible" confirm-text="確定切換" max-width="480"
-    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？" title="未儲存變更" @confirm="confirmNavigate" />
+  <maintenance-crud-dialogs
+    :close-visible="confirmCloseVisible"
+    :delete-visible="confirmDeleteVisible"
+    :is-saving="isSaving"
+    :navigate-visible="confirmNavigateVisible"
+    :pending-delete-label="pendingDeleteLabel"
+    :save-summary="saveSummary"
+    :save-visible="confirmSaveVisible"
+    :switch-visible="confirmSwitchVisible"
+    @confirm-close="confirmClose"
+    @confirm-delete="confirmDelete"
+    @confirm-navigate="confirmNavigate"
+    @confirm-save="confirmSave"
+    @confirm-switch="confirmSwitch"
+    @update:close-visible="confirmCloseVisible = $event"
+    @update:delete-visible="confirmDeleteVisible = $event"
+    @update:navigate-visible="confirmNavigateVisible = $event"
+    @update:save-visible="confirmSaveVisible = $event"
+    @update:switch-visible="confirmSwitchVisible = $event"
+  />
 
   <!-- 刪除課程確認 -->
   <common-confirm-dialog
@@ -294,12 +239,15 @@ import { mdiBookPlus, mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from
 import { computed, nextTick, ref } from 'vue'
 import { useDisplay } from 'vuetify'
 
-import CommonConfirmDialog from '@/components/maintenance/CommonConfirmDialog.vue'
+import MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
+import MaintenanceStudentFormFields from '@/components/maintenance/MaintenanceStudentFormFields.vue'
 import MasterDetailBSemesterMobilePanel from '@/components/maintenance/master-detail-b/MasterDetailBSemesterMobilePanel.vue'
 import MasterDetailBSemesterSection from '@/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue'
 import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
 import MntPageCards from '@/components/maintenance/MntPageCards.vue'
 import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
+import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
+import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
 import { type CourseRecord, type SemesterRecord, useSemesterStore } from '@/stores/semesters'
 import { type StudentRecord, useStudentStore } from '@/stores/students'
 
@@ -356,21 +304,11 @@ const editingId = ref<number | null>(null)
 const dialogMode = ref<'create' | 'edit' | 'view'>('create')
 const isLoading = ref(false)
 const isSaving = ref(false)
-// 各種確認彈窗
-const confirmCloseVisible = ref(false)
-const confirmSaveVisible = ref(false)
-const confirmDeleteVisible = ref(false)
-const confirmSwitchVisible = ref(false)
-const confirmNavigateVisible = ref(false)
 // UI 回饋
 const snackbarVisible = ref(false)
 const highlightedId = ref<number | null>(null)
 // 防止快速切換導致的異步覆蓋
 const loadSequence = ref(0)
-// 暫存待處理的目標
-const pendingDelete = ref<StudentRecord | null>(null)
-const pendingSwitchTarget = ref<StudentRecord | null>(null)
-const pendingNavigateTarget = ref<StudentRecord | null>(null)
 
 // Master-Detail 擴充
 const studentSemesters = ref<SemesterRecord[]>([])
@@ -495,32 +433,29 @@ function handleUpdateCourse (semesterId: number, courseIndex: number, payload: P
 }
 
 
-// 表單資料與初始快照（用於 dirty 判斷）
-const form = ref({
-  studentId: '',
-  name: '',
-  department: departments[0] ?? '',
-  grade: gradeOptions[0]?.value ?? 1,
-  enrollYear: enrollYears[0] ?? 2024,
-  credits: 0,
-  advisor: '',
-  email: '',
-  phone: '',
-  status: statuses[0] ?? '',
-})
-const initialForm = ref({ ...form.value })
-// 欄位錯誤訊息（僅保存一則）
-const fieldErrors = ref<Record<string, string[]>>({
-  studentId: [],
-  name: [],
-  department: [],
-  grade: [],
-  enrollYear: [],
-  credits: [],
-  advisor: [],
-  email: [],
-  phone: [],
-  status: [],
+const {
+  errorSummary,
+  fieldErrors,
+  form,
+  isDirty,
+  saveSummary,
+  clearAllErrors,
+  clearFieldError,
+  gradeLabel,
+  resetForm,
+  rowProps,
+  setForm,
+  statusColor,
+  syncInitialForm,
+  validateForm,
+} = useStudentMaintenanceForm({
+  departments,
+  gradeOptions,
+  enrollYears,
+  statuses,
+  students,
+  editingId,
+  highlightedId,
 })
 
 // 表單欄位簡單排版（無分組）
@@ -535,60 +470,58 @@ const dialogSubtitle = computed(() => {
   if (!editingId.value) return ''
   return `${form.value.studentId || '未填學號'}・${form.value.name || '未填姓名'}`
 })
-const isEditMode = computed(() => dialogMode.value === 'edit')
-const isViewMode = computed(() => dialogMode.value === 'view')
 // 是否有修改（用於啟用儲存與提示）
-const isDirty = computed(
-  () => JSON.stringify(form.value) !== JSON.stringify(initialForm.value),
-)
 // 載入/儲存時鎖定、檢視模式 readonly
 const isFormLocked = computed(() => isLoading.value || isSaving.value)
+const {
+  closeDialog,
+  confirmClose,
+  confirmCloseVisible,
+  confirmDelete,
+  confirmDeleteVisible,
+  confirmNavigate,
+  confirmNavigateVisible,
+  confirmSaveVisible,
+  confirmSwitch,
+  confirmSwitchVisible,
+  currentEditingRecord,
+  handleDialogVisibility,
+  hasNextRecord,
+  hasPrevRecord,
+  isEditMode,
+  isViewMode,
+  openAdjacentRecord,
+  openEdgeRecord,
+  pendingDeleteLabel,
+  requestCloseDialog,
+  requestDeleteConfirmation,
+  requestDeleteCurrent,
+  switchToEditMode,
+  switchToViewMode,
+} = useMaintenanceCrudFlow<StudentRecord>({
+  records: students,
+  editingId,
+  dialogMode,
+  dialogVisible,
+  isLoading,
+  isSaving,
+  isDirty,
+  clearAllErrors,
+  resetForm,
+  openEditDialog,
+  openViewDialog,
+  removeRecord: (id) => {
+    studentStore.removeStudent(id)
+    semesterStore.removeByStudentId(id)
+  },
+  describeRecord: (student) => `${student.studentId} ${student.name}`,
+  onCloseReset: () => {
+    selectedSemesterId.value = null
+    activeMobilePanel.value = 'master'
+    studentSemesters.value = []
+  },
+})
 const isFormReadonly = computed(() => isViewMode.value)
-// 目前筆數索引（用於導覽）
-const currentRecordIndex = computed(() =>
-  students.value.findIndex((item) => item.id === editingId.value),
-)
-const currentEditingRecord = computed(
-  () => students.value.find((item) => item.id === editingId.value) || null,
-)
-const hasPrevRecord = computed(() => currentRecordIndex.value > 0)
-const hasNextRecord = computed(
-  () => currentRecordIndex.value >= 0 && currentRecordIndex.value < students.value.length - 1,
-)
-const pendingDeleteLabel = computed(() => {
-  if (!pendingDelete.value) return '這筆資料'
-  return `${pendingDelete.value.studentId} ${pendingDelete.value.name}`
-})
-
-const saveSummary = computed(() => {
-  const labels: Record<string, string> = {
-    studentId: '學號',
-    name: '姓名',
-    department: '系所',
-    grade: '年級',
-    enrollYear: '入學年度',
-    credits: '已修學分',
-    advisor: '指導老師',
-    email: 'Email',
-    phone: '電話',
-    status: '狀態',
-  }
-  const before = initialForm.value
-  const after = form.value
-  const entries = Object.keys(labels).map((key) => {
-    const beforeValue = before[key as keyof typeof before]
-    const afterValue = after[key as keyof typeof after]
-    return {
-      key,
-      label: labels[key],
-      before: editingId.value ? formatSummaryValue(key, beforeValue) : null,
-      after: formatSummaryValue(key, afterValue),
-    }
-  })
-  if (!editingId.value) return entries
-  return entries.filter((entry) => entry.before !== entry.after)
-})
-
 // 重設查詢條件
 function resetSearch () {
   search.value = {
@@ -600,24 +533,6 @@ function resetSearch () {
   }
 }
 
-// 重設表單與錯誤狀態
-function resetForm () {
-  form.value = {
-    studentId: '',
-    name: '',
-    department: departments[0] ?? '',
-    grade: gradeOptions[0]?.value ?? 1,
-    enrollYear: enrollYears[0] ?? 2024,
-    credits: 0,
-    advisor: '',
-    email: '',
-    phone: '',
-    status: statuses[0] ?? '',
-  }
-  initialForm.value = { ...form.value }
-  clearAllErrors()
-}
-
 // 新增：開啟彈窗，使用預設值
 function openAddDialog () {
   loadSequence.value += 1
@@ -645,7 +560,7 @@ function openEditDialog (student: StudentRecord) {
   clearAllErrors()
   setTimeout(() => {
     if (sequence !== loadSequence.value || !dialogVisible.value) return
-    form.value = {
+    setForm({
       studentId: student.studentId,
       name: student.name,
       department: student.department,
@@ -656,8 +571,8 @@ function openEditDialog (student: StudentRecord) {
       email: student.email,
       phone: student.phone,
       status: student.status,
-    }
-    initialForm.value = { ...form.value }
+    })
+    syncInitialForm()
     isLoading.value = false
   }, 350)
 }
@@ -676,7 +591,7 @@ function openViewDialog (student: StudentRecord) {
   clearAllErrors()
   setTimeout(() => {
     if (sequence !== loadSequence.value || !dialogVisible.value) return
-    form.value = {
+    setForm({
       studentId: student.studentId,
       name: student.name,
       department: student.department,
@@ -687,89 +602,12 @@ function openViewDialog (student: StudentRecord) {
       email: student.email,
       phone: student.phone,
       status: student.status,
-    }
-    initialForm.value = { ...form.value }
+    })
+    syncInitialForm()
     isLoading.value = false
   }, 350)
 }
 
-// 依方向切換上一筆/下一筆
-function openAdjacentRecord (direction: 'prev' | 'next') {
-  if (!isViewMode.value && !isEditMode.value) return
-  const index = currentRecordIndex.value
-  if (index < 0) return
-  const targetIndex = direction === 'prev' ? index - 1 : index + 1
-  const target = students.value[targetIndex]
-  if (!target) return
-  if (isEditMode.value) {
-    if (isDirty.value) {
-      pendingNavigateTarget.value = target
-      confirmNavigateVisible.value = true
-      return
-    }
-    openEditDialog(target)
-    return
-  }
-  openViewDialog(target)
-}
-
-// 切換到第一筆/最後一筆
-function openEdgeRecord (position: 'first' | 'last') {
-  if (!isViewMode.value && !isEditMode.value) return
-  if (students.value.length === 0) return
-  const target = position === 'first' ? students.value[0] : students.value.at(-1)
-  if (!target) return
-  if (isEditMode.value) {
-    if (isDirty.value) {
-      pendingNavigateTarget.value = target
-      confirmNavigateVisible.value = true
-      return
-    }
-    openEditDialog(target)
-    return
-  }
-  openViewDialog(target)
-}
-
-// 檢視 → 編輯（直接切換）
-function switchToEditMode () {
-  if (!isViewMode.value) return
-  const current = students.value.find((item) => item.id === editingId.value)
-  if (!current) return
-  openEditDialog(current)
-}
-
-// 編輯 → 檢視（若 dirty 需確認）
-function switchToViewMode () {
-  if (!isEditMode.value) return
-  const current = students.value.find((item) => item.id === editingId.value)
-  if (!current) return
-  if (isDirty.value) {
-    pendingSwitchTarget.value = current
-    confirmSwitchVisible.value = true
-    return
-  }
-  openViewDialog(current)
-}
-
-// 確認切換為檢視模式
-function confirmSwitch () {
-  const target = pendingSwitchTarget.value
-  pendingSwitchTarget.value = null
-  confirmSwitchVisible.value = false
-  if (!target) return
-  openViewDialog(target)
-}
-
-// 確認切換到其他資料
-function confirmNavigate () {
-  const target = pendingNavigateTarget.value
-  pendingNavigateTarget.value = null
-  confirmNavigateVisible.value = false
-  if (!target) return
-  openEditDialog(target)
-}
-
 // 先檢核再提示儲存確認
 async function requestSaveConfirmation () {
   if (isSaving.value || isLoading.value || !isDirty.value || isViewMode.value) return
@@ -822,7 +660,7 @@ async function saveStudent () {
     highlightedId.value = createdId
   }
 
-  initialForm.value = { ...form.value }
+  syncInitialForm()
   dialogVisible.value = false
   snackbarVisible.value = true
   isSaving.value = false
@@ -831,163 +669,11 @@ async function saveStudent () {
   }, 1600)
 }
 
-// 刪除：先提示確認
-function requestDeleteConfirmation (student: StudentRecord) {
-  pendingDelete.value = student
-  confirmDeleteVisible.value = true
-}
-
-// 編輯模式刪除目前資料
-function requestDeleteCurrent () {
-  const current = currentEditingRecord.value
-  if (!current) return
-  requestDeleteConfirmation(current)
-}
-
-// 確認刪除後，若正在編輯該筆則關閉彈窗
-function confirmDelete () {
-  if (!pendingDelete.value) return
-  const deletedId = pendingDelete.value.id
-  studentStore.removeStudent(deletedId)
-  semesterStore.removeByStudentId(deletedId)
-  pendingDelete.value = null
-  confirmDeleteVisible.value = false
-  if (editingId.value === deletedId) {
-    closeDialog()
-  }
-}
-
-// 狀態顏色映射
-function statusColor (status: string) {
-  if (status === '在學') return 'success'
-  if (status === '休學') return 'warning'
-  if (status === '畢業') return 'secondary'
-  return 'default'
-}
-
-// 年級顯示字串
-function gradeLabel (grade: number) {
-  return gradeOptions.find((option) => option.value === grade)?.title ?? `年級 ${grade}`
-}
-
-// 列高亮（儲存後提示位置）
-function rowProps (data: { item: StudentRecord }) {
-  return {
-  class: data.item.id === highlightedId.value ? 'is-highlighted' : '',
-}
-}
-
-function clearAllErrors () {
-  fieldErrors.value = {
-    studentId: [],
-    name: [],
-    department: [],
-    grade: [],
-    enrollYear: [],
-    credits: [],
-    advisor: [],
-    email: [],
-    phone: [],
-    status: [],
-  }
-}
-
-function clearFieldError (field: string) {
-  if (!fieldErrors.value[field]?.length) return
-  fieldErrors.value[field] = []
-}
-
-function validateForm () {
-  const errors: Array<{ field: string; message: string }> = []
-  const studentId = form.value.studentId.trim()
-  const name = form.value.name.trim()
-  const email = form.value.email.trim()
-  const credits = form.value.credits
-
-  if (!studentId) errors.push({ field: 'studentId', message: '請輸入學號' })
-  if (!name) errors.push({ field: 'name', message: '請輸入姓名' })
-  if (!form.value.department) errors.push({ field: 'department', message: '請選擇系所' })
-  if (!form.value.grade) errors.push({ field: 'grade', message: '請選擇年級' })
-  if (!form.value.enrollYear) errors.push({ field: 'enrollYear', message: '請選擇入學年度' })
-  if (credits === null || Number.isNaN(credits)) {
-    errors.push({ field: 'credits', message: '請輸入已修學分' })
-  } else if (credits < 0) {
-    errors.push({ field: 'credits', message: '已修學分不可小於 0' })
-  }
-  if (!form.value.status) errors.push({ field: 'status', message: '請選擇狀態' })
-  if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-    errors.push({ field: 'email', message: 'Email 格式不正確' })
-  }
-
-  const duplicate = students.value.find(
-    (item) => item.studentId === studentId && item.id !== editingId.value,
-  )
-  if (studentId && duplicate) {
-    errors.push({ field: 'studentId', message: '學號已存在，請確認是否重複' })
-  }
-
-  return errors
-}
-
-const errorSummary = computed(() => {
-  const entries = Object.entries(fieldErrors.value).flatMap(([field, messages]) =>
-    messages.map((message) => ({ field, message })),
-  )
-  return entries.slice(0, 3)
-})
-
 function scrollToField (field: string) {
   const target = document.getElementById(`field-${field}`)
   if (!target) return
   target.scrollIntoView({ behavior: 'smooth', block: 'center' })
 }
-
-function requestCloseDialog () {
-  if (isDirty.value && !isSaving.value) {
-    confirmCloseVisible.value = true
-    return
-  }
-  closeDialog()
-}
-
-function confirmClose () {
-  confirmCloseVisible.value = false
-  closeDialog()
-}
-
-function closeDialog () {
-  dialogVisible.value = false
-  isLoading.value = false
-  isSaving.value = false
-  confirmSaveVisible.value = false
-  confirmSwitchVisible.value = false
-  confirmNavigateVisible.value = false
-  dialogMode.value = 'create'
-  editingId.value = null
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  studentSemesters.value = []
-  clearAllErrors()
-  resetForm()
-}
-
-function handleDialogVisibility (nextValue: boolean) {
-  if (nextValue) {
-    dialogVisible.value = true
-    return
-  }
-  requestCloseDialog()
-}
-
-
-const isPlaceholderValue = (value: string | null) => value === '—'
-
-function formatSummaryValue (key: string, value: string | number | null | undefined) {
-  if (value === null || value === undefined || value === '') return '—'
-  if (key === 'grade') return gradeLabel(Number(value))
-  return String(value)
-}
-
 </script>
 
 <style scoped>