skytek_xinliang
1116 lines
36 KiB
Vue
1116 lines
36 KiB
Vue
<template>
|
||
<mnt-page-cards
|
||
:search-panel-open="searchPanelOpen" :title="`主從資料維護示範A`"
|
||
@create="openAddDialog" @toggle-search="searchPanelOpen = !searchPanelOpen">
|
||
<template #search-fields>
|
||
<v-col cols="12" md="2">
|
||
<div class="text-body-2 text-medium-emphasis pl-2">學號</div>
|
||
<v-text-field
|
||
v-model="search.studentId" density="compact" hide-details placeholder="例如：S2024001"
|
||
variant="outlined" />
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<div class="text-body-2 text-medium-emphasis pl-2">姓名</div>
|
||
<v-text-field v-model="search.name" density="compact" hide-details placeholder="例如：王小明" variant="outlined" />
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<div class="text-body-2 text-medium-emphasis pl-2">系所</div>
|
||
<v-select v-model="search.department" density="compact" hide-details :items="departments" variant="outlined" />
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<div class="text-body-2 text-medium-emphasis pl-2">年級</div>
|
||
<v-select
|
||
v-model="search.grade" density="compact" hide-details item-title="title" item-value="value"
|
||
:items="gradeOptions" variant="outlined" />
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<div class="text-body-2 text-medium-emphasis pl-2">狀態</div>
|
||
<v-select v-model="search.status" density="compact" hide-details :items="statuses" 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="resetSearch">清除</v-btn>
|
||
<v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
|
||
</v-col>
|
||
</template>
|
||
<template #table>
|
||
<v-data-table
|
||
class="student-table" density="compact" fixed-header :headers="tableHeaders" height="100%"
|
||
:items="students" :items-per-page="10" items-per-page-text="每頁筆數" page-text="第 {0}-{1} 筆 / 共 {2} 筆"
|
||
:row-props="rowProps">
|
||
<template #[`item.grade`]="{ item }">
|
||
{{ gradeLabel(item.grade) }}
|
||
</template>
|
||
<template #[`item.status`]="{ item }">
|
||
<v-chip :color="statusColor(item.status)" size="small" variant="tonal">
|
||
{{ item.status }}
|
||
</v-chip>
|
||
</template>
|
||
<template #[`item.actions`]="{ item }">
|
||
<div class="d-flex ga-1">
|
||
<v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
|
||
檢視
|
||
</v-btn>
|
||
<v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
|
||
修改
|
||
</v-btn>
|
||
<v-btn
|
||
color="error" :prepend-icon="mdiDelete" size="small" variant="text"
|
||
@click="requestDeleteConfirmation(item)">
|
||
刪除
|
||
</v-btn>
|
||
</div>
|
||
</template>
|
||
</v-data-table>
|
||
</template>
|
||
</mnt-page-cards>
|
||
|
||
<!-- 主從式維護視窗 -->
|
||
<!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
|
||
<teleport to="body">
|
||
<!-- 包成元件需要傳高度寬度給dialog-panel -->
|
||
<v-overlay
|
||
class="dialog-overlay" :close-on-content-click="false" :model-value="dialogVisible" scrim="rgba(0, 0, 0, 0.45)"
|
||
scroll-strategy="block" @update:model-value="handleDialogVisibility">
|
||
<div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
|
||
|
||
<!-- 子檔區塊 (Detail Card)：學期成績明細 -->
|
||
<!-- 說明：點選主檔的學期後，會從左側滑出顯示該學期的詳細課程成績 -->
|
||
<div
|
||
v-if="!isMobile || activeMobilePanel === 'detail'" class="detail-panel-wrapper"
|
||
:class="{ 'is-active': !!selectedSemesterId, 'is-mobile': isMobile }">
|
||
<master-detail-semester-panel
|
||
v-model:detail-form="detailForm"
|
||
:is-detail-editing="isDetailEditing"
|
||
:is-mobile="isMobile"
|
||
:is-view-mode="isViewMode"
|
||
:selected-semester="selectedSemester"
|
||
@cancel-edit="cancelDetailEdit"
|
||
@close="closeDetailPanel"
|
||
@delete="handleDeleteSemester"
|
||
@save-edit="saveDetailEdit"
|
||
@start-edit="startDetailEdit"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
|
||
<!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
|
||
<mnt-dialog-card
|
||
v-if="!isMobile || activeMobilePanel === 'master'" :dialog-subtitle="dialogSubtitle"
|
||
:dialog-title="dialogTitle" :is-edit-mode="isEditMode" :is-view-mode="isViewMode"
|
||
:width="isMobile ? '100%' : 760">
|
||
<template #toolbar>
|
||
<mnt-record-nav-toolbar
|
||
:has-next-record="hasNextRecord" :has-prev-record="hasPrevRecord"
|
||
:is-edit-mode="isEditMode" :is-view-mode="isViewMode" :mobile="isMobile"
|
||
@first="openEdgeRecord('first')" @last="openEdgeRecord('last')" @next="openAdjacentRecord('next')"
|
||
@prev="openAdjacentRecord('prev')" @switch-to-edit="switchToEditMode" @switch-to-view="switchToViewMode" />
|
||
</template>
|
||
<template #content>
|
||
<!-- 錯誤提示：當表單驗證未通過時顯示 -->
|
||
<v-alert v-if="errorSummary.length > 0 && !isLoading" class="mb-4" type="error" variant="tonal">
|
||
<div class="text-subtitle-2 mb-2">請先修正以下問題</div>
|
||
<div class="d-flex flex-column ga-1">
|
||
<v-btn
|
||
v-for="error in errorSummary" :key="error.field" color="error" size="small" variant="text"
|
||
@click="scrollToField(error.field)">
|
||
{{ error.message }}
|
||
</v-btn>
|
||
</div>
|
||
</v-alert>
|
||
|
||
<!-- 載入中骨架畫面 -->
|
||
<v-skeleton-loader v-if="isLoading" class="mt-4" type="subtitle,paragraph" width="100%" />
|
||
|
||
<!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
|
||
<v-form v-else :class="{ 'form-readonly': isFormReadonly }" @submit.prevent="requestSaveConfirmation">
|
||
<v-row dense>
|
||
<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="clearFieldError('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="clearFieldError('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="clearFieldError('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="clearFieldError('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="clearFieldError('enrollYear')" />
|
||
</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="clearFieldError('status')" />
|
||
</v-col>
|
||
<v-col cols="12">
|
||
<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>
|
||
|
||
<v-divider />
|
||
|
||
<!-- 學期成績紀錄區塊 -->
|
||
<!-- 說明：顯示該學生的所有學期紀錄，並提供新增與選取功能 -->
|
||
<master-detail-semester-list
|
||
:is-mobile="isMobile" :is-view-mode="isViewMode"
|
||
:selected-semester-id="selectedSemesterId" :semesters="studentSemesters" @add="handleAddSemester"
|
||
@select="handleSemesterSelect" />
|
||
|
||
</v-form>
|
||
</template>
|
||
<template #actions>
|
||
<template v-if="isMobile">
|
||
<v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
|
||
<v-btn v-if="isEditMode" color="error" :disabled="isSaving" variant="tonal" @click="requestDeleteCurrent">
|
||
刪除
|
||
</v-btn>
|
||
<v-btn
|
||
v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
|
||
variant="flat" @click="requestSaveConfirmation">
|
||
儲存
|
||
</v-btn>
|
||
<v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
|
||
</template>
|
||
<template v-else>
|
||
<v-spacer />
|
||
<v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
|
||
<v-btn v-if="isEditMode" color="error" :disabled="isSaving" variant="tonal" @click="requestDeleteCurrent">
|
||
刪除
|
||
</v-btn>
|
||
<v-btn
|
||
v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
|
||
variant="flat" @click="requestSaveConfirmation">
|
||
儲存
|
||
</v-btn>
|
||
<v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
|
||
</template>
|
||
</template>
|
||
</mnt-dialog-card>
|
||
|
||
|
||
</div>
|
||
</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" />
|
||
|
||
<!-- 成功提示 -->
|
||
<v-snackbar v-model="snackbarVisible" color="success" location="bottom right" :timeout="2200">
|
||
儲存成功
|
||
</v-snackbar>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
|
||
import { computed, nextTick, ref } from 'vue'
|
||
import { useDisplay } from 'vuetify'
|
||
|
||
import CommonConfirmDialog from '@/components/maintenance/CommonConfirmDialog.vue'
|
||
import MasterDetailSemesterList from '@/components/maintenance/master-detail/MasterDetailSemesterList.vue'
|
||
import MasterDetailSemesterPanel from '@/components/maintenance/master-detail/MasterDetailSemesterPanel.vue'
|
||
import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
|
||
import MntPageCards from '@/components/maintenance/MntPageCards.vue'
|
||
import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
|
||
import { type SemesterRecord, useSemesterStore } from '@/stores/semesters'
|
||
import { type StudentRecord, useStudentStore } from '@/stores/students'
|
||
|
||
// 下拉選項：系所/年級/入學年度/狀態
|
||
const departments = ['資訊工程', '企業管理', '應用外語', '視覺設計', '財務金融']
|
||
const gradeOptions = [
|
||
{ title: '大一', value: 1 },
|
||
{ title: '大二', value: 2 },
|
||
{ title: '大三', value: 3 },
|
||
{ title: '大四', value: 4 },
|
||
{ title: '研究所', value: 5 },
|
||
]
|
||
const enrollYears = [2024, 2023, 2022, 2021, 2020, 2019]
|
||
const statuses = ['在學', '休學', '畢業']
|
||
|
||
const { smAndUp } = useDisplay()
|
||
const isMobile = computed(() => !smAndUp.value)
|
||
|
||
// 表格欄位設定（含固定欄與排序）
|
||
const tableHeaders = [
|
||
{ title: '學號', key: 'studentId', sortable: true, fixed: smAndUp.value && 'start' as const, width: 120 },
|
||
{ title: '姓名', key: 'name', sortable: true, fixed: smAndUp.value && 'start' as const, width: 100 },
|
||
{ title: '系所', key: 'department', sortable: true, width: 140 },
|
||
{ title: '年級', key: 'grade', sortable: true, width: 90 },
|
||
{ title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
|
||
{ title: '已修學分', key: 'credits', sortable: true, width: 110 },
|
||
{ title: 'Email', key: 'email', sortable: true, width: 200 },
|
||
{ title: '電話', key: 'phone', sortable: true, width: 140 },
|
||
{ title: '指導老師', key: 'advisor', sortable: true, width: 110 },
|
||
{ title: '狀態', key: 'status', sortable: true, width: 90 },
|
||
{ title: '操作', key: 'actions', sortable: false, fixed: smAndUp.value && 'end' as const, width: 'auto', cellProps: { class: 'px-0 bg-background' } },
|
||
]
|
||
|
||
// 查詢條件（示意用，未接 API）
|
||
const search = ref({
|
||
studentId: '',
|
||
name: '',
|
||
department: '',
|
||
grade: null as number | null,
|
||
status: '',
|
||
})
|
||
// 查詢區塊是否展開
|
||
const searchPanelOpen = ref(false)
|
||
|
||
// 透過 store 管理 Demo 資料與 CRUD
|
||
const studentStore = useStudentStore()
|
||
const semesterStore = useSemesterStore()
|
||
const students = computed(() => studentStore.students)
|
||
type StudentPayload = Omit<StudentRecord, 'id'>
|
||
|
||
// 彈窗狀態與流程控制
|
||
const dialogVisible = ref(false)
|
||
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[]>([])
|
||
const selectedSemesterId = ref<number | null>(null)
|
||
const activeMobilePanel = ref<'master' | 'detail'>('master')
|
||
const selectedSemester = computed(() =>
|
||
studentSemesters.value.find((s) => s.id === selectedSemesterId.value) || null
|
||
)
|
||
|
||
// Detail Editing State (子檔編輯狀態管理)
|
||
const isDetailEditing = ref(false)
|
||
const detailForm = ref<SemesterRecord | null>(null)
|
||
|
||
// 輔助函式：重新載入當前學生的學期資料
|
||
function refreshSemesters () {
|
||
if (editingId.value) {
|
||
studentSemesters.value = semesterStore.getStudentSemesters(editingId.value)
|
||
}
|
||
}
|
||
|
||
// 處理新增學期
|
||
function handleAddSemester () {
|
||
if (!editingId.value) return
|
||
const newSem = semesterStore.addSemester(editingId.value)
|
||
refreshSemesters()
|
||
selectedSemesterId.value = newSem.id
|
||
activeMobilePanel.value = 'detail'
|
||
startDetailEdit() // 新增後直接進入編輯模式
|
||
}
|
||
|
||
// 處理刪除學期
|
||
function handleDeleteSemester (id: number) {
|
||
// 簡單確認對話框 (實作時可改用更美觀的 Modal)
|
||
if (!confirm('確定要刪除此學期紀錄嗎？')) return
|
||
|
||
semesterStore.removeSemester(id)
|
||
refreshSemesters()
|
||
// 若刪除的是當前選取的學期，則取消選取並關閉編輯模式
|
||
if (selectedSemesterId.value === id) {
|
||
selectedSemesterId.value = null
|
||
isDetailEditing.value = false
|
||
activeMobilePanel.value = 'master'
|
||
}
|
||
}
|
||
|
||
// 開始編輯子檔 (複製資料到暫存表單)
|
||
function startDetailEdit () {
|
||
if (!selectedSemester.value) return
|
||
// Deep copy 以避免直接修改原始資料 (Vue 的響應式特性)
|
||
detailForm.value = JSON.parse(JSON.stringify(selectedSemester.value))
|
||
isDetailEditing.value = true
|
||
}
|
||
|
||
// 取消編輯子檔
|
||
function cancelDetailEdit () {
|
||
isDetailEditing.value = false
|
||
detailForm.value = null
|
||
if (isMobile.value && selectedSemesterId.value === null) {
|
||
activeMobilePanel.value = 'master'
|
||
}
|
||
}
|
||
|
||
// 儲存子檔變更
|
||
function saveDetailEdit () {
|
||
if (!detailForm.value || !detailForm.value.id) return
|
||
semesterStore.updateSemester(detailForm.value.id, detailForm.value)
|
||
refreshSemesters()
|
||
isDetailEditing.value = false
|
||
detailForm.value = null
|
||
}
|
||
|
||
// 編輯模式：新增課程項目
|
||
function addCourseToDetail () {
|
||
if (!detailForm.value) return
|
||
detailForm.value.courses.push({
|
||
code: '',
|
||
name: '',
|
||
credits: 3,
|
||
score: 0
|
||
})
|
||
}
|
||
|
||
// 編輯模式：移除課程項目
|
||
function removeCourseFromDetail (index: number) {
|
||
if (!detailForm.value) return
|
||
detailForm.value.courses.splice(index, 1)
|
||
}
|
||
|
||
|
||
// 表單資料與初始快照（用於 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 dialogTitle = computed(() => {
|
||
if (dialogMode.value === 'view') return '檢視主檔資料示範'
|
||
if (dialogMode.value === 'edit') return '修改主檔資料示範'
|
||
return '新增主檔資料示範'
|
||
})
|
||
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 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 = {
|
||
studentId: '',
|
||
name: '',
|
||
department: '',
|
||
grade: null,
|
||
status: '',
|
||
}
|
||
}
|
||
|
||
// 重設表單與錯誤狀態
|
||
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 }
|
||
isDetailEditing.value = false
|
||
clearAllErrors()
|
||
}
|
||
|
||
// 新增：開啟彈窗，使用預設值
|
||
function openAddDialog () {
|
||
loadSequence.value += 1
|
||
dialogMode.value = 'create'
|
||
editingId.value = null
|
||
studentSemesters.value = []
|
||
selectedSemesterId.value = null
|
||
activeMobilePanel.value = 'master'
|
||
resetForm()
|
||
isLoading.value = false
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
// 編輯：先開彈窗，資料載入後填入
|
||
function openEditDialog (student: StudentRecord) {
|
||
loadSequence.value += 1
|
||
const sequence = loadSequence.value
|
||
dialogMode.value = 'edit'
|
||
editingId.value = student.id
|
||
studentSemesters.value = semesterStore.getStudentSemesters(student.id)
|
||
selectedSemesterId.value = null
|
||
activeMobilePanel.value = 'master'
|
||
dialogVisible.value = true
|
||
isLoading.value = true
|
||
clearAllErrors()
|
||
setTimeout(() => {
|
||
if (sequence !== loadSequence.value || !dialogVisible.value) return
|
||
form.value = {
|
||
studentId: student.studentId,
|
||
name: student.name,
|
||
department: student.department,
|
||
grade: student.grade,
|
||
enrollYear: student.enrollYear,
|
||
credits: student.credits,
|
||
advisor: student.advisor,
|
||
email: student.email,
|
||
phone: student.phone,
|
||
status: student.status,
|
||
}
|
||
initialForm.value = { ...form.value }
|
||
isLoading.value = false
|
||
}, 350)
|
||
}
|
||
|
||
// 檢視：只讀模式並預設展開所有分組
|
||
function openViewDialog (student: StudentRecord) {
|
||
loadSequence.value += 1
|
||
const sequence = loadSequence.value
|
||
dialogMode.value = 'view'
|
||
editingId.value = student.id
|
||
studentSemesters.value = semesterStore.getStudentSemesters(student.id)
|
||
selectedSemesterId.value = null
|
||
activeMobilePanel.value = 'master'
|
||
dialogVisible.value = true
|
||
isLoading.value = true
|
||
clearAllErrors()
|
||
setTimeout(() => {
|
||
if (sequence !== loadSequence.value || !dialogVisible.value) return
|
||
form.value = {
|
||
studentId: student.studentId,
|
||
name: student.name,
|
||
department: student.department,
|
||
grade: student.grade,
|
||
enrollYear: student.enrollYear,
|
||
credits: student.credits,
|
||
advisor: student.advisor,
|
||
email: student.email,
|
||
phone: student.phone,
|
||
status: student.status,
|
||
}
|
||
initialForm.value = { ...form.value }
|
||
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
|
||
clearAllErrors()
|
||
|
||
const errors = validateForm()
|
||
if (errors.length > 0) {
|
||
for (const error of errors) {
|
||
fieldErrors.value[error.field] = [error.message]
|
||
}
|
||
await nextTick()
|
||
const firstError = errors[0]
|
||
if (firstError) scrollToField(firstError.field)
|
||
return
|
||
}
|
||
|
||
confirmSaveVisible.value = true
|
||
}
|
||
|
||
// 儲存確認後才真正送出
|
||
function confirmSave () {
|
||
confirmSaveVisible.value = false
|
||
saveStudent()
|
||
}
|
||
|
||
// 寫入資料（Demo：直接更新列表）
|
||
async function saveStudent () {
|
||
if (isSaving.value || isLoading.value) return
|
||
isSaving.value = true
|
||
await new Promise((resolve) => setTimeout(resolve, 450))
|
||
const payload = {
|
||
studentId: form.value.studentId.trim(),
|
||
name: form.value.name.trim(),
|
||
department: form.value.department,
|
||
grade: form.value.grade,
|
||
enrollYear: form.value.enrollYear,
|
||
credits: form.value.credits,
|
||
advisor: form.value.advisor.trim(),
|
||
email: form.value.email.trim(),
|
||
phone: form.value.phone.trim(),
|
||
status: form.value.status,
|
||
} as StudentPayload
|
||
|
||
if (editingId.value) {
|
||
const updated = studentStore.updateStudent(editingId.value, payload)
|
||
if (updated) highlightedId.value = editingId.value
|
||
} else {
|
||
const createdId = studentStore.addStudent(payload)
|
||
semesterStore.generateForStudent(createdId)
|
||
highlightedId.value = createdId
|
||
}
|
||
|
||
initialForm.value = { ...form.value }
|
||
dialogVisible.value = false
|
||
snackbarVisible.value = true
|
||
isSaving.value = false
|
||
window.setTimeout(() => {
|
||
highlightedId.value = null
|
||
}, 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'
|
||
isDetailEditing.value = false
|
||
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)
|
||
}
|
||
|
||
function handleSemesterSelect (id: number) {
|
||
if (isMobile.value) {
|
||
selectedSemesterId.value = id
|
||
activeMobilePanel.value = 'detail'
|
||
return
|
||
}
|
||
|
||
selectedSemesterId.value = selectedSemesterId.value === id ? null : id;
|
||
}
|
||
|
||
function closeDetailPanel () {
|
||
isDetailEditing.value = false
|
||
detailForm.value = null
|
||
if (isMobile.value) {
|
||
activeMobilePanel.value = 'master'
|
||
return
|
||
}
|
||
selectedSemesterId.value = null
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog-overlay :deep(.v-overlay__content) {
|
||
height: 100vh;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
width: 100vw;
|
||
max-width: 100vw;
|
||
}
|
||
|
||
.dialog-panel {
|
||
width: auto;
|
||
max-width: 100%;
|
||
height: 100vh;
|
||
background: transparent;
|
||
padding: 0;
|
||
display: flex;
|
||
background: transparent;
|
||
padding: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.dialog-panel>.v-card {
|
||
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.detail-panel-wrapper {
|
||
width: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||
margin-right: 0;
|
||
}
|
||
|
||
.detail-panel-wrapper.is-active {
|
||
width: 600px;
|
||
opacity: 1;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.dialog-panel.is-mobile {
|
||
width: 100%;
|
||
}
|
||
|
||
.dialog-panel.is-mobile :deep(.dialog-title) {
|
||
padding: 16px 20px 12px;
|
||
}
|
||
|
||
.dialog-panel.is-mobile :deep(.dialog-toolbar) {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.dialog-panel.is-mobile :deep(.dialog-actions) {
|
||
gap: 8px;
|
||
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.dialog-panel.is-mobile :deep(.dialog-actions .v-btn) {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.dialog-panel.is-mobile :deep(.v-card-text) {
|
||
padding-bottom: 88px;
|
||
}
|
||
|
||
.detail-panel-wrapper.is-mobile {
|
||
width: 100%;
|
||
opacity: 1;
|
||
overflow: visible;
|
||
}
|
||
|
||
.detail-panel-wrapper.is-mobile.is-active {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.dialog-panel {
|
||
width: 100%;
|
||
}
|
||
|
||
.dialog-panel>.v-card {
|
||
width: 100%;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.student-table :deep(table) {
|
||
min-width: 960px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.dialog-actions {
|
||
position: sticky;
|
||
bottom: 0;
|
||
background: rgba(var(--v-theme-surface), 0.95);
|
||
border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||
z-index: 1;
|
||
}
|
||
|
||
.dialog-title {
|
||
position: sticky;
|
||
top: 0;
|
||
background: rgba(var(--v-theme-surface), 0.95);
|
||
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||
z-index: 2;
|
||
}
|
||
|
||
.student-table {
|
||
overflow: auto;
|
||
}
|
||
|
||
.student-table :deep(table) {
|
||
min-width: 1400px;
|
||
}
|
||
|
||
.student-table :deep(th),
|
||
.student-table :deep(td) {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.student-table :deep(.v-data-table-column--fixed),
|
||
.student-table :deep(.v-data-table-column--fixed-end) {
|
||
background: rgb(var(--v-theme-surface));
|
||
}
|
||
|
||
.student-table :deep(.v-data-table-column--fixed-last-start)::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: -5px;
|
||
bottom: 0;
|
||
width: 5px;
|
||
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.student-table :deep(.v-data-table-footer) {
|
||
padding: 4px 0 0;
|
||
}
|
||
|
||
/* 直線 */
|
||
/* .student-table :deep(.v-data-table-column--first-fixed-end),
|
||
.student-table :deep(.v-data-table-column--last-fixed) {
|
||
border-left: none !important;
|
||
border-right: none !important;
|
||
} */
|
||
|
||
.form-readonly :deep(.v-field) {
|
||
pointer-events: none;
|
||
}
|
||
|
||
tbody tr.is-highlighted {
|
||
animation: row-highlight 1.6s ease-out;
|
||
}
|
||
|
||
@keyframes row-highlight {
|
||
0% {
|
||
background-color: rgba(var(--v-theme-primary), 0.18);
|
||
}
|
||
|
||
100% {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
</style>
|