+
尚無課程資料
@@ -159,9 +175,8 @@
diff --git a/src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue b/src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue
index 3277f18..d4d65f5 100644
--- a/src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue
+++ b/src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue
@@ -29,7 +29,9 @@
課程列表
-
手機版改用卡片式維護，不使用扁平表格
+
+ 手機版改用卡片式維護，不使用扁平表格
+
-
+
{{ course.name }}
{{ course.code }}
-
+
{{ course.score }} 分
@@ -84,7 +95,7 @@
label="課程名稱"
:model-value="course.name"
variant="outlined"
- @update:model-value="(value) => $emit('update-course', semester.id, idx, { name: String(value) })"
+ @update:model-value="(value) => updateCourse(idx, { name: String(value) })"
/>
@@ -129,9 +140,8 @@
diff --git a/src/composables/layout/useAdminLayoutState.ts b/src/composables/layout/useAdminLayoutState.ts
new file mode 100644
index 0000000..9b069f6
--- /dev/null
+++ b/src/composables/layout/useAdminLayoutState.ts
@@ -0,0 +1,211 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
+import type { AdminLayoutMenuItem } from '@/components/layouts/sk-admin-layout/types'
+
+type ToggleSidebarPayload = {
+ drawer: boolean
+ rail: boolean
+}
+
+type UseAdminLayoutStateOptions = {
+ appBarRef: Ref
+ breadcrumbBarVisible: boolean | null
+ emitUpdateBreadcrumbBarVisible: (value: boolean) => void
+ emitUpdateFavoritesBarVisible: (value: boolean) => void
+ emitUpdateIsRail: (value: boolean) => void
+ favoritesBarVisible: boolean | null
+ isMobile: Ref
+ isRail: boolean | null
+ menuItems: AdminLayoutMenuItem[]
+ onToggleSidebar: (payload: ToggleSidebarPayload) => void
+}
+
+export function useAdminLayoutState (options: UseAdminLayoutStateOptions) {
+ const drawer = ref(true)
+ const mobileFavoritesPanel = ref(false)
+ const mobileMenuPath = ref([])
+ const localBreadcrumbBarVisible = ref(true)
+ const localFavoritesBarVisible = ref(true)
+ const localIsRail = ref(false)
+ const opened = ref([])
+ const appBarHeight = ref(0)
+
+ const isRail = computed({
+ get: () => (options.isRail ?? localIsRail.value),
+ set: (value: boolean) => {
+ if (options.isRail === null) {
+ localIsRail.value = value
+ return
+ }
+
+ options.emitUpdateIsRail(value)
+ },
+ })
+
+ const showFavoritesBar = computed({
+ get: () => (options.favoritesBarVisible ?? localFavoritesBarVisible.value),
+ set: (value: boolean) => {
+ if (options.favoritesBarVisible === null) {
+ localFavoritesBarVisible.value = value
+ return
+ }
+
+ options.emitUpdateFavoritesBarVisible(value)
+ },
+ })
+
+ const showBreadcrumbBar = computed({
+ get: () => (options.breadcrumbBarVisible ?? localBreadcrumbBarVisible.value),
+ set: (value: boolean) => {
+ if (options.breadcrumbBarVisible === null) {
+ localBreadcrumbBarVisible.value = value
+ return
+ }
+
+ options.emitUpdateBreadcrumbBarVisible(value)
+ },
+ })
+
+ const mobileCurrentItems = computed(() =>
+ mobileMenuPath.value.reduce(
+ (items, currentItem) => currentItem?.subItems ?? [],
+ options.menuItems || []
+ )
+ )
+
+ const mobileCurrentLevel = computed(() => mobileMenuPath.value.length + 1)
+
+ const mobileMenuLevels = computed(() =>
+ Array.from({ length: mobileCurrentLevel.value }, (_, index) => ({
+ level: index + 1,
+ title: index === 0 ? '主選單' : (mobileMenuPath.value[index - 1]?.title ?? `第${index + 1}層`),
+ }))
+ )
+
+ function resetMobilePanels () {
+ mobileFavoritesPanel.value = false
+ mobileMenuPath.value = []
+ }
+
+ function toggleSidebar () {
+ if (options.isMobile.value) {
+ drawer.value = !drawer.value
+ } else {
+ isRail.value = !isRail.value
+ }
+
+ options.onToggleSidebar({
+ drawer: drawer.value,
+ rail: isRail.value,
+ })
+ }
+
+ function goToMobileLevel (level: number) {
+ mobileFavoritesPanel.value = false
+ mobileMenuPath.value = mobileMenuPath.value.slice(0, Math.max(0, level - 1))
+ }
+
+ function openMobileFavoritesPanel () {
+ mobileMenuPath.value = []
+ mobileFavoritesPanel.value = true
+ }
+
+ function handleMobileMenuClick (
+ item: AdminLayoutMenuItem,
+ onSelect: (selectedItem: AdminLayoutMenuItem) => void
+ ) {
+ if (item?.subItems?.length) {
+ mobileMenuPath.value = [...mobileMenuPath.value, item]
+ return
+ }
+
+ onSelect(item)
+ }
+
+ function handleSelectFavorite (
+ item: AdminLayoutMenuItem,
+ onSelect: (selectedItem: AdminLayoutMenuItem) => void
+ ) {
+ onSelect(item)
+ mobileFavoritesPanel.value = false
+ }
+
+ function toggleFavoritesBar (nextValue?: boolean) {
+ showFavoritesBar.value =
+ typeof nextValue === 'boolean' ? nextValue : !showFavoritesBar.value
+ }
+
+ function handleUnshrink () {
+ isRail.value = false
+ }
+
+ let appBarObserver: ResizeObserver | null = null
+
+ function resolveObservedElement () {
+ const target = options.appBarRef.value as HTMLElement | { $el?: HTMLElement } | null
+ if (!target) return null
+ if (target instanceof HTMLElement) return target
+ return target.$el ?? null
+ }
+
+ function updateAppBarHeight () {
+ const el = resolveObservedElement()
+ if (!el) return
+ appBarHeight.value = Math.round(el.getBoundingClientRect().height || 0)
+ }
+
+ onMounted(() => {
+ updateAppBarHeight()
+ if (typeof ResizeObserver === 'undefined') return
+
+ const el = resolveObservedElement()
+ if (!el) return
+
+ appBarObserver = new ResizeObserver(() => updateAppBarHeight())
+ appBarObserver.observe(el)
+ })
+
+ onBeforeUnmount(() => {
+ if (!appBarObserver) return
+ appBarObserver.disconnect()
+ appBarObserver = null
+ })
+
+ watch(options.isMobile, (value) => {
+ if (!value) {
+ resetMobilePanels()
+ }
+ })
+
+ watch(drawer, (value) => {
+ if (!value) {
+ resetMobilePanels()
+ }
+ })
+
+ const mainStyle = computed(() => ({
+ paddingTop: appBarHeight.value ? `${appBarHeight.value}px` : undefined,
+ height: '100vh',
+ minHeight: 0,
+ flex: '1 1 0',
+ }))
+
+ return {
+ drawer,
+ goToMobileLevel,
+ handleMobileMenuClick,
+ handleSelectFavorite,
+ handleUnshrink,
+ isRail,
+ mainStyle,
+ mobileCurrentItems,
+ mobileCurrentLevel,
+ mobileFavoritesPanel,
+ mobileMenuLevels,
+ openMobileFavoritesPanel,
+ opened,
+ showBreadcrumbBar,
+ showFavoritesBar,
+ toggleFavoritesBar,
+ toggleSidebar,
+ }
+}
diff --git a/src/composables/layout/useThemeToggle.ts b/src/composables/layout/useThemeToggle.ts
new file mode 100644
index 0000000..6d5a8fb
--- /dev/null
+++ b/src/composables/layout/useThemeToggle.ts
@@ -0,0 +1,28 @@
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import { getNextThemeName } from '@/utils/theme'
+
+export function useThemeToggle () {
+ const theme = useTheme()
+
+ const availableThemeNames = computed(() =>
+ Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
+ )
+
+ function toggleTheme () {
+ const names = availableThemeNames.value
+ if (names.length === 0) return null
+
+ const current = theme.global.name.value
+ const next = getNextThemeName(names, current)
+ if (!next) return null
+
+ theme.change(next)
+ return next
+ }
+
+ return {
+ availableThemeNames,
+ toggleTheme,
+ }
+}
diff --git a/src/composables/maintenance/useEditableStudentGrid.ts b/src/composables/maintenance/useEditableStudentGrid.ts
new file mode 100644
index 0000000..bb08118
--- /dev/null
+++ b/src/composables/maintenance/useEditableStudentGrid.ts
@@ -0,0 +1,267 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { type StudentRecord, useStudentStore } from '@/stores/students'
+
+type StudentPayload = Omit
+
+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 tableHeaders = [
+ { title: '', key: 'select', sortable: false, nowrap: true },
+ { title: '學號', key: 'studentId', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '姓名', key: 'name', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '系所', key: 'department', sortable: true, minWidth: 140, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '年級', key: 'grade', sortable: true, minWidth: 140, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '入學年度', key: 'enrollYear', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '已修學分', key: 'credits', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '指導老師', key: 'advisor', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: 'Email', key: 'email', sortable: true, minWidth: 200, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '電話', key: 'phone', sortable: true, minWidth: 150, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '狀態', key: 'status', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
+ { title: '操作', key: 'actions', sortable: false, width: 'auto', nowrap: true, cellProps: { class: 'bg-background' } },
+] as const
+
+const TABLE_BOTTOM_GAP = 64
+const TABLE_MIN_HEIGHT = 240
+
+export function useEditableStudentGrid () {
+ const studentStore = useStudentStore()
+ const students = computed(() => studentStore.students)
+ const search = ref({
+ studentId: '',
+ name: '',
+ department: '',
+ })
+ const isBulkEditEnabled = ref(false)
+ const isSearchVisible = ref(false)
+ const tableContainerRef = ref(null)
+ const tableScrollParentRef = ref(null)
+ const tableResizeObserver = ref(null)
+ const tableHeight = ref(300)
+ const draftRows = ref>({})
+ const selectedRowIds = ref([])
+
+ function toPayload (student: StudentRecord): StudentPayload {
+ return {
+ 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,
+ }
+ }
+
+ function rebuildDraftRows () {
+ draftRows.value = Object.fromEntries(students.value.map((item) => [item.id, toPayload(item)]))
+ }
+
+ function getDraftRow (id: number) {
+ return draftRows.value[id] ?? null
+ }
+
+ const getSourceRow = (id: number) => students.value.find((item) => item.id === id) || null
+
+ function isRowDirty (id: number) {
+ const source = getSourceRow(id)
+ const draft = getDraftRow(id)
+ if (!source || !draft) return false
+
+ return (
+ source.studentId !== draft.studentId ||
+ source.name !== draft.name ||
+ source.department !== draft.department ||
+ source.grade !== draft.grade ||
+ source.enrollYear !== draft.enrollYear ||
+ source.credits !== draft.credits ||
+ source.advisor !== draft.advisor ||
+ source.email !== draft.email ||
+ source.phone !== draft.phone ||
+ source.status !== draft.status
+ )
+ }
+
+ const filteredStudents = computed(() => {
+ const keywordStudentId = search.value.studentId.trim().toLowerCase()
+ const keywordName = search.value.name.trim().toLowerCase()
+ const selectedDepartment = search.value.department
+
+ return students.value.filter((item) => {
+ if (studentStore.isMarkedAsDeleted(item.id)) return false
+
+ const matchesStudentId = keywordStudentId
+ ? item.studentId.toLowerCase().includes(keywordStudentId)
+ : true
+ const matchesName = keywordName ? item.name.toLowerCase().includes(keywordName) : true
+ const matchesDepartment = selectedDepartment ? item.department === selectedDepartment : true
+
+ return matchesStudentId && matchesName && matchesDepartment
+ })
+ })
+
+ const visibleStudentIds = computed(() => filteredStudents.value.map((item) => item.id))
+ const isAllVisibleSelected = computed(() =>
+ visibleStudentIds.value.length > 0 &&
+ visibleStudentIds.value.every((id) => selectedRowIds.value.includes(id))
+ )
+ const isPartiallyVisibleSelected = computed(() =>
+ visibleStudentIds.value.some((id) => selectedRowIds.value.includes(id)) &&
+ !isAllVisibleSelected.value
+ )
+ const hasAnyChange = computed(() =>
+ students.value.some((item) => isRowDirty(item.id)) || studentStore.deletedIds.size > 0
+ )
+ const hasSelectedRows = computed(() => selectedRowIds.value.length > 0)
+
+ function toggleSelectAll (checked: boolean | null) {
+ if (isPartiallyVisibleSelected.value) {
+ selectedRowIds.value = selectedRowIds.value.filter((id) => !visibleStudentIds.value.includes(id))
+ return
+ }
+
+ if (!checked) {
+ selectedRowIds.value = selectedRowIds.value.filter((id) => !visibleStudentIds.value.includes(id))
+ return
+ }
+
+ selectedRowIds.value = Array.from(new Set([...selectedRowIds.value, ...visibleStudentIds.value]))
+ }
+
+ function toggleSingleRowSelection (id: number, checked: boolean | null) {
+ if (checked) {
+ if (!selectedRowIds.value.includes(id)) {
+ selectedRowIds.value = [...selectedRowIds.value, id]
+ }
+ return
+ }
+
+ selectedRowIds.value = selectedRowIds.value.filter((selectedId) => selectedId !== id)
+ }
+
+ function deleteSingleRow (id: number) {
+ selectedRowIds.value = selectedRowIds.value.filter((selectedId) => selectedId !== id)
+ studentStore.markAsDeleted(id)
+ rebuildDraftRows()
+ }
+
+ function deleteSelectedRows () {
+ if (selectedRowIds.value.length === 0) return
+
+ for (const id of selectedRowIds.value) {
+ studentStore.markAsDeleted(id)
+ }
+
+ selectedRowIds.value = []
+ rebuildDraftRows()
+ }
+
+ function saveAllRows () {
+ for (const item of students.value) {
+ const draft = getDraftRow(item.id)
+ if (!draft) continue
+ if (!isRowDirty(item.id)) continue
+ studentStore.updateStudent(item.id, draft)
+ }
+
+ studentStore.commitDeleted()
+ rebuildDraftRows()
+ }
+
+ function resetAllRows () {
+ studentStore.restoreDeleted()
+ selectedRowIds.value = []
+ rebuildDraftRows()
+ }
+
+ function recalculateTableHeight () {
+ const container = tableContainerRef.value
+ if (!container) return
+
+ const scrollParent = tableScrollParentRef.value || (container.closest('.overflow-auto') as HTMLElement | null)
+ tableScrollParentRef.value = scrollParent
+
+ const parentBottom = scrollParent
+ ? scrollParent.getBoundingClientRect().bottom
+ : window.innerHeight
+ const top = container.getBoundingClientRect().top
+ const availableHeight = parentBottom - top - TABLE_BOTTOM_GAP
+ tableHeight.value = Math.max(TABLE_MIN_HEIGHT, Math.floor(availableHeight))
+ }
+
+ watch(students, () => {
+ const currentIds = new Set(students.value.map((item) => item.id))
+ selectedRowIds.value = selectedRowIds.value.filter((id) => currentIds.has(id))
+ })
+
+ watch(students, rebuildDraftRows, { immediate: true })
+
+ watch([isSearchVisible, isBulkEditEnabled], async () => {
+ await nextTick()
+ requestAnimationFrame(() => {
+ recalculateTableHeight()
+ })
+ })
+
+ onMounted(() => {
+ const container = tableContainerRef.value
+ if (container) {
+ tableScrollParentRef.value = container.closest('.overflow-auto') as HTMLElement | null
+ tableResizeObserver.value = new ResizeObserver(() => {
+ recalculateTableHeight()
+ })
+ tableResizeObserver.value.observe(container)
+ if (tableScrollParentRef.value) {
+ tableResizeObserver.value.observe(tableScrollParentRef.value)
+ }
+ }
+
+ requestAnimationFrame(() => {
+ recalculateTableHeight()
+ })
+ window.addEventListener('resize', recalculateTableHeight)
+ })
+
+ onBeforeUnmount(() => {
+ tableResizeObserver.value?.disconnect()
+ window.removeEventListener('resize', recalculateTableHeight)
+ })
+
+ return {
+ departments,
+ draftRows,
+ enrollYears,
+ filteredStudents,
+ getDraftRow,
+ gradeOptions,
+ hasAnyChange,
+ hasSelectedRows,
+ isAllVisibleSelected,
+ isBulkEditEnabled,
+ isPartiallyVisibleSelected,
+ isSearchVisible,
+ saveAllRows,
+ search,
+ selectedRowIds,
+ statuses,
+ tableContainerRef,
+ tableHeaders,
+ tableHeight,
+ toggleSelectAll,
+ toggleSingleRowSelection,
+ deleteSelectedRows,
+ deleteSingleRow,
+ resetAllRows,
+ }
+}
diff --git a/src/composables/maintenance/useMaintenanceCrudFlow.ts b/src/composables/maintenance/useMaintenanceCrudFlow.ts
new file mode 100644
index 0000000..c8f21ab
--- /dev/null
+++ b/src/composables/maintenance/useMaintenanceCrudFlow.ts
@@ -0,0 +1,245 @@
+import { computed, ref, type ComputedRef, type Ref } from 'vue'
+
+type DialogMode = 'create' | 'edit' | 'view'
+
+interface UseMaintenanceCrudFlowOptions {
+ records: ComputedRef
+ editingId: Ref
+ dialogMode: Ref
+ dialogVisible: Ref
+ isLoading: Ref
+ isSaving: Ref
+ isDirty: Readonly> | ComputedRef
+ clearAllErrors: () => void
+ resetForm: () => void
+ openEditDialog: (record: T) => void
+ openViewDialog: (record: T) => void
+ removeRecord: (id: number) => void
+ describeRecord: (record: T) => string
+ onCloseReset?: () => void
+ onAfterDelete?: (deletedId: number) => void
+}
+
+interface UseMaintenanceCrudFlowResult {
+ confirmCloseVisible: Ref
+ confirmSaveVisible: Ref
+ confirmDeleteVisible: Ref
+ confirmSwitchVisible: Ref
+ confirmNavigateVisible: Ref
+ pendingDelete: Ref
+ pendingDeleteLabel: ComputedRef
+ currentRecordIndex: ComputedRef
+ currentEditingRecord: ComputedRef
+ hasPrevRecord: ComputedRef
+ hasNextRecord: ComputedRef
+ isEditMode: ComputedRef
+ isViewMode: ComputedRef
+ openAdjacentRecord: (direction: 'prev' | 'next') => void
+ openEdgeRecord: (position: 'first' | 'last') => void
+ switchToEditMode: () => void
+ switchToViewMode: () => void
+ confirmSwitch: () => void
+ confirmNavigate: () => void
+ requestDeleteConfirmation: (record: T) => void
+ requestDeleteCurrent: () => void
+ confirmDelete: () => void
+ requestCloseDialog: () => void
+ confirmClose: () => void
+ closeDialog: () => void
+ handleDialogVisibility: (nextValue: boolean) => void
+}
+
+export function useMaintenanceCrudFlow (
+ options: UseMaintenanceCrudFlowOptions,
+): UseMaintenanceCrudFlowResult {
+ const confirmCloseVisible = ref(false)
+ const confirmSaveVisible = ref(false)
+ const confirmDeleteVisible = ref(false)
+ const confirmSwitchVisible = ref(false)
+ const confirmNavigateVisible = ref(false)
+ const pendingDelete = ref(null) as Ref
+ const pendingSwitchTarget = ref(null)
+ const pendingNavigateTarget = ref(null)
+
+ const isEditMode = computed(() => options.dialogMode.value === 'edit')
+ const isViewMode = computed(() => options.dialogMode.value === 'view')
+ const currentRecordIndex = computed(() =>
+ options.records.value.findIndex((item) => item.id === options.editingId.value),
+ )
+ const currentEditingRecord = computed(
+ () => options.records.value.find((item) => item.id === options.editingId.value) || null,
+ )
+ const hasPrevRecord = computed(() => currentRecordIndex.value > 0)
+ const hasNextRecord = computed(
+ () =>
+ currentRecordIndex.value >= 0
+ && currentRecordIndex.value < options.records.value.length - 1,
+ )
+ const pendingDeleteLabel = computed(() => {
+ if (!pendingDelete.value) return '這筆資料'
+ return options.describeRecord(pendingDelete.value)
+ })
+
+ 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 = options.records.value[targetIndex]
+ if (!target) return
+ if (isEditMode.value) {
+ if (options.isDirty.value) {
+ pendingNavigateTarget.value = target
+ confirmNavigateVisible.value = true
+ return
+ }
+ options.openEditDialog(target)
+ return
+ }
+ options.openViewDialog(target)
+ }
+
+ function openEdgeRecord (position: 'first' | 'last') {
+ if (!isViewMode.value && !isEditMode.value) return
+ if (options.records.value.length === 0) return
+ const target = position === 'first' ? options.records.value[0] : options.records.value.at(-1)
+ if (!target) return
+ if (isEditMode.value) {
+ if (options.isDirty.value) {
+ pendingNavigateTarget.value = target
+ confirmNavigateVisible.value = true
+ return
+ }
+ options.openEditDialog(target)
+ return
+ }
+ options.openViewDialog(target)
+ }
+
+ function switchToEditMode () {
+ if (!isViewMode.value) return
+ const current = currentEditingRecord.value
+ if (!current) return
+ options.openEditDialog(current)
+ }
+
+ function switchToViewMode () {
+ if (!isEditMode.value) return
+ const current = currentEditingRecord.value
+ if (!current) return
+ if (options.isDirty.value) {
+ pendingSwitchTarget.value = current
+ confirmSwitchVisible.value = true
+ return
+ }
+ options.openViewDialog(current)
+ }
+
+ function confirmSwitch () {
+ const target = pendingSwitchTarget.value
+ pendingSwitchTarget.value = null
+ confirmSwitchVisible.value = false
+ if (!target) return
+ options.openViewDialog(target)
+ }
+
+ function confirmNavigate () {
+ const target = pendingNavigateTarget.value
+ pendingNavigateTarget.value = null
+ confirmNavigateVisible.value = false
+ if (!target) return
+ options.openEditDialog(target)
+ }
+
+ function requestDeleteConfirmation (record: T) {
+ pendingDelete.value = record
+ confirmDeleteVisible.value = true
+ }
+
+ function requestDeleteCurrent () {
+ const current = currentEditingRecord.value
+ if (!current) return
+ requestDeleteConfirmation(current)
+ }
+
+ function closeDialog () {
+ options.dialogVisible.value = false
+ options.isLoading.value = false
+ options.isSaving.value = false
+ confirmCloseVisible.value = false
+ confirmSaveVisible.value = false
+ confirmDeleteVisible.value = false
+ confirmSwitchVisible.value = false
+ confirmNavigateVisible.value = false
+ pendingDelete.value = null
+ pendingSwitchTarget.value = null
+ pendingNavigateTarget.value = null
+ options.dialogMode.value = 'create'
+ options.editingId.value = null
+ options.clearAllErrors()
+ options.resetForm()
+ options.onCloseReset?.()
+ }
+
+ function confirmDelete () {
+ if (!pendingDelete.value) return
+ const deletedId = pendingDelete.value.id
+ options.removeRecord(deletedId)
+ pendingDelete.value = null
+ confirmDeleteVisible.value = false
+ options.onAfterDelete?.(deletedId)
+ if (options.editingId.value === deletedId) {
+ closeDialog()
+ }
+ }
+
+ function requestCloseDialog () {
+ if (options.isDirty.value && !options.isSaving.value) {
+ confirmCloseVisible.value = true
+ return
+ }
+ closeDialog()
+ }
+
+ function confirmClose () {
+ confirmCloseVisible.value = false
+ closeDialog()
+ }
+
+ function handleDialogVisibility (nextValue: boolean) {
+ if (nextValue) {
+ options.dialogVisible.value = true
+ return
+ }
+ requestCloseDialog()
+ }
+
+ return {
+ confirmCloseVisible,
+ confirmSaveVisible,
+ confirmDeleteVisible,
+ confirmSwitchVisible,
+ confirmNavigateVisible,
+ pendingDelete,
+ pendingDeleteLabel,
+ currentRecordIndex,
+ currentEditingRecord,
+ hasPrevRecord,
+ hasNextRecord,
+ isEditMode,
+ isViewMode,
+ openAdjacentRecord,
+ openEdgeRecord,
+ switchToEditMode,
+ switchToViewMode,
+ confirmSwitch,
+ confirmNavigate,
+ requestDeleteConfirmation,
+ requestDeleteCurrent,
+ confirmDelete,
+ requestCloseDialog,
+ confirmClose,
+ closeDialog,
+ handleDialogVisibility,
+ }
+}
diff --git a/src/composables/maintenance/useStudentMaintenanceForm.ts b/src/composables/maintenance/useStudentMaintenanceForm.ts
new file mode 100644
index 0000000..ddd8122
--- /dev/null
+++ b/src/composables/maintenance/useStudentMaintenanceForm.ts
@@ -0,0 +1,228 @@
+import { computed, ref, type ComputedRef, type Ref } from 'vue'
+import type { StudentRecord } from '@/stores/students'
+
+interface GradeOption {
+ title: string
+ value: number
+}
+
+interface StudentFormState {
+ studentId: string
+ name: string
+ department: string
+ grade: number
+ enrollYear: number
+ credits: number
+ advisor: string
+ email: string
+ phone: string
+ status: string
+}
+
+interface UseStudentMaintenanceFormOptions {
+ departments: string[]
+ gradeOptions: GradeOption[]
+ enrollYears: number[]
+ statuses: string[]
+ students: ComputedRef
+ editingId: Ref
+ highlightedId: Ref
+}
+
+type SaveSummaryItem = {
+ key: string
+ label: string
+ before: string | null
+ after: string
+}
+
+const fieldLabels: Record = {
+ studentId: '學號',
+ name: '姓名',
+ department: '系所',
+ grade: '年級',
+ enrollYear: '入學年度',
+ credits: '已修學分',
+ advisor: '指導老師',
+ email: 'Email',
+ phone: '電話',
+ status: '狀態',
+}
+
+function createDefaultForm (
+ departments: string[],
+ gradeOptions: GradeOption[],
+ enrollYears: number[],
+ statuses: string[],
+): StudentFormState {
+ return {
+ studentId: '',
+ name: '',
+ department: departments[0] ?? '',
+ grade: gradeOptions[0]?.value ?? 1,
+ enrollYear: enrollYears[0] ?? 2024,
+ credits: 0,
+ advisor: '',
+ email: '',
+ phone: '',
+ status: statuses[0] ?? '',
+ }
+}
+
+function createEmptyFieldErrors () {
+ return {
+ studentId: [],
+ name: [],
+ department: [],
+ grade: [],
+ enrollYear: [],
+ credits: [],
+ advisor: [],
+ email: [],
+ phone: [],
+ status: [],
+ } as Record
+}
+
+export function useStudentMaintenanceForm (options: UseStudentMaintenanceFormOptions) {
+ const form = ref(
+ createDefaultForm(options.departments, options.gradeOptions, options.enrollYears, options.statuses),
+ )
+ const initialForm = ref({ ...form.value })
+ const fieldErrors = ref(createEmptyFieldErrors())
+
+ const isDirty = computed(
+ () => JSON.stringify(form.value) !== JSON.stringify(initialForm.value),
+ )
+
+ function gradeLabel (grade: number) {
+ return options.gradeOptions.find((option) => option.value === grade)?.title ?? `年級 ${grade}`
+ }
+
+ 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)
+ }
+
+ const saveSummary = computed(() => {
+ const before = initialForm.value
+ const after = form.value
+ const entries = Object.keys(fieldLabels).map((key) => {
+ const fieldKey = key as keyof StudentFormState
+ return {
+ key,
+ label: fieldLabels[fieldKey],
+ before: options.editingId.value ? formatSummaryValue(key, before[fieldKey]) : null,
+ after: formatSummaryValue(key, after[fieldKey]),
+ }
+ })
+
+ if (!options.editingId.value) return entries
+ return entries.filter((entry) => entry.before !== entry.after)
+ })
+
+ const errorSummary = computed(() => {
+ const entries = Object.entries(fieldErrors.value).flatMap(([field, messages]) =>
+ messages.map((message) => ({ field, message })),
+ )
+ return entries.slice(0, 3)
+ })
+
+ function setForm (nextForm: StudentFormState) {
+ form.value = { ...nextForm }
+ }
+
+ function syncInitialForm () {
+ initialForm.value = { ...form.value }
+ }
+
+ function resetForm () {
+ form.value = createDefaultForm(
+ options.departments,
+ options.gradeOptions,
+ options.enrollYears,
+ options.statuses,
+ )
+ syncInitialForm()
+ clearAllErrors()
+ }
+
+ function clearAllErrors () {
+ fieldErrors.value = createEmptyFieldErrors()
+ }
+
+ function clearFieldError (field: keyof StudentFormState | string) {
+ if (!fieldErrors.value[field as keyof StudentFormState]?.length) return
+ fieldErrors.value[field as keyof StudentFormState] = []
+ }
+
+ function validateForm () {
+ const errors: Array<{ field: keyof StudentFormState; 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 = options.students.value.find(
+ (item) => item.studentId === studentId && item.id !== options.editingId.value,
+ )
+ if (studentId && duplicate) {
+ errors.push({ field: 'studentId', message: '學號已存在，請確認是否重複' })
+ }
+
+ return errors
+ }
+
+ function statusColor (status: string) {
+ if (status === '在學') return 'success'
+ if (status === '休學') return 'warning'
+ if (status === '畢業') return 'secondary'
+ return 'default'
+ }
+
+ function rowProps (data: { item: StudentRecord }) {
+ return {
+ class: data.item.id === options.highlightedId.value ? 'is-highlighted' : '',
+ }
+ }
+
+ const isPlaceholderValue = (value: string | null) => value === '—'
+
+ return {
+ errorSummary,
+ fieldErrors,
+ form,
+ initialForm,
+ isDirty,
+ isPlaceholderValue,
+ saveSummary,
+ clearAllErrors,
+ clearFieldError,
+ formatSummaryValue,
+ gradeLabel,
+ resetForm,
+ rowProps,
+ setForm,
+ statusColor,
+ syncInitialForm,
+ validateForm,
+ }
+}
+
+export type { StudentFormState, SaveSummaryItem }
diff --git a/src/composables/useApiCall.ts b/src/composables/useApiCall.ts
index 013e478..9792a9a 100644
--- a/src/composables/useApiCall.ts
+++ b/src/composables/useApiCall.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
import { type ApiRequestError, normalizeError } from '@/services/error'
import { useSnackbarStore } from '@/stores/snackbar'
@@ -9,6 +9,15 @@ type Options = {
errorToastLevel?: (error: ApiRequestError) => ToastLevel
}
+interface UseApiCallResult {
+ loading: Ref
+ data: Ref
+ error: Ref
+ execute: (...args: TArgs) => Promise
+ executeSafe: (...args: TArgs) => Promise
+ reset: () => void
+}
+
function getDefaultToastLevel (error: ApiRequestError): ToastLevel {
if (typeof error.status === 'number' && error.status >= 500) return 'error'
return 'warning'
@@ -21,9 +30,9 @@ function levelToColor (level: ToastLevel): string {
}
export function useApiCall (action: (...args: TArgs) => Promise,
- options?: Options) {
+ options?: Options): UseApiCallResult {
const loading = ref(false)
- const data = ref(null)
+ const data = ref(null) as Ref
const error = ref(null)
const snackbar = useSnackbarStore()
@@ -80,4 +89,3 @@ export function useApiCall (action: (...args:
reset,
}
}
-
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index a334323..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SKAdminLayout } from '@/components/layouts/SKAdminLayout.vue'
-export { default as SKEmptyLayout } from '@/components/layouts/SKEmptyLayout.vue'
diff --git a/src/pages/index.vue b/src/pages/index.vue
deleted file mode 100644
index 7646ab7..0000000
--- a/src/pages/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..6d1887e
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+
+ const component: DefineComponent, Record, unknown>
+ export default component
+}
diff --git a/src/views/maint/EditableGridMnt.vue b/src/views/maint/EditableGridMnt.vue
index 22d678d..a0cef61 100644
--- a/src/views/maint/EditableGridMnt.vue
+++ b/src/views/maint/EditableGridMnt.vue
@@ -1,393 +1,7 @@
-
-
-
- 可編輯表格維護示範
-
- {{ hasAnyChange ? '有未儲存變更' : '已同步' }}
-
- 筆數 {{ filteredStudents.length }}
-
- 條件搜尋
-
-
-
-
-
-
-
-
-
-
- 學號
-
-
-
- 姓名
-
-
-
- 系所
-
-
-
-
-
-
-
- 批次刪除
-
-
-
- 儲存變更
-
-
- 取消變更
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 刪除
-
-
-
-
-
-
-
-
{{ item.label }}
-
- 原：
-
- {{ item.before }}
-
-
-
- 新：
-
- {{ item.after }}
-
-
-
-
目前沒有可儲存的變更。
-
-
-
-
-
-
-
+
@@ -267,12 +212,15 @@ 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 MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
+import MaintenanceStudentFormFields from '@/components/maintenance/MaintenanceStudentFormFields.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 { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
+import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
import { type SemesterRecord, useSemesterStore } from '@/stores/semesters'
import { type StudentRecord, useStudentStore } from '@/stores/students'
@@ -329,21 +277,11 @@ const editingId = ref(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(null)
// 防止快速切換導致的異步覆蓋
const loadSequence = ref(0)
-// 暫存待處理的目標
-const pendingDelete = ref(null)
-const pendingSwitchTarget = ref(null)
-const pendingNavigateTarget = ref(null)
// Master-Detail 擴充
const studentSemesters = ref([])
@@ -433,32 +371,29 @@ function removeCourseFromDetail (index: number) {
}
-// 表單資料與初始快照（用於 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>({
- 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,
})
// 表單欄位簡單排版（無分組）
@@ -473,60 +408,59 @@ 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({
+ 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'
+ isDetailEditing.value = false
+ detailForm.value = null
+ },
+})
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 = {
- 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 = {
@@ -538,25 +472,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 }
- isDetailEditing.value = false
- clearAllErrors()
-}
-
// 新增：開啟彈窗，使用預設值
function openAddDialog () {
loadSequence.value += 1
@@ -566,6 +481,7 @@ function openAddDialog () {
selectedSemesterId.value = null
activeMobilePanel.value = 'master'
resetForm()
+ isDetailEditing.value = false
isLoading.value = false
dialogVisible.value = true
}
@@ -584,7 +500,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,
@@ -595,8 +511,8 @@ function openEditDialog (student: StudentRecord) {
email: student.email,
phone: student.phone,
status: student.status,
- }
- initialForm.value = { ...form.value }
+ })
+ syncInitialForm()
isLoading.value = false
}, 350)
}
@@ -615,7 +531,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,
@@ -626,89 +542,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
@@ -761,7 +600,7 @@ async function saveStudent () {
highlightedId.value = createdId
}
- initialForm.value = { ...form.value }
+ syncInitialForm()
dialogVisible.value = false
snackbarVisible.value = true
isSaving.value = false
@@ -770,163 +609,12 @@ 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'
- 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
diff --git a/src/views/maint/MasterDetailMntB.vue b/src/views/maint/MasterDetailMntB.vue
index 26ea9a0..fd2b18c 100644
--- a/src/views/maint/MasterDetailMntB.vue
+++ b/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">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -206,44 +169,26 @@ v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="i
-
-
-
-
-
-
{{ item.label }}
-
- 原：
-
- {{ item.before }}
-
-
-
- 新：
-
- {{ item.after }}
-
-
-
-
目前沒有可儲存的變更。
-
-
-
-
-
-
-
+
(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(null)
// 防止快速切換導致的異步覆蓋
const loadSequence = ref(0)
-// 暫存待處理的目標
-const pendingDelete = ref(null)
-const pendingSwitchTarget = ref(null)
-const pendingNavigateTarget = ref(null)
// Master-Detail 擴充
const studentSemesters = ref([])
@@ -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>({
- 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({
+ 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 = {
- 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)
-}
-