linx6g/skt-vuetify-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
skytek_xinliang
2026-03-26 16:01:20 +08:00
parent ec3fbace1a
commit 389ec56480
32 changed files with 2549 additions and 2763 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue
+33 -13
View File
@@ -29,7 +29,9 @@
<div class="d-flex align-center">
<div>
<div class="text-subtitle-2 font-weight-bold">課程列表</div>
<div class="text-caption text-medium-emphasis">手機版改用卡片式維護，不使用扁平表格</div>
<div class="text-caption text-medium-emphasis">
手機版改用卡片式維護，不使用扁平表格
</div>
</div>
<v-spacer />
<v-btn
@@ -46,14 +48,23 @@
</div>
<template v-if="semester.courses.length > 0">
<v-card v-for="(course, idx) in semester.courses" :key="`${course.code}-${idx}`" class="pa-3" variant="outlined">
<v-card
v-for="(course, idx) in semester.courses"
:key="`${course.code}-${idx}`"
class="pa-3"
variant="outlined"
>
<template v-if="isViewMode">
<div class="d-flex align-start justify-space-between ga-3">
<div>
<div class="text-body-1 font-weight-medium">{{ course.name }}</div>
<div class="text-caption text-medium-emphasis">{{ course.code }}</div>
</div>
<v-chip :color="course.score < 60 ? 'error' : 'success'" size="small" variant="tonal">
<v-chip
:color="course.score < 60 ? 'error' : 'success'"
size="small"
variant="tonal"
>
{{ course.score }} 分
</v-chip>
</div>
@@ -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) })"
/>
<v-text-field
density="comfortable"
@@ -93,7 +104,7 @@
label="代碼"
:model-value="course.code"
variant="outlined"
@update:model-value="(value) => $emit('update-course', semester.id, idx, { code: String(value) })"
@update:model-value="(value) => updateCourse(idx, { code: String(value) })"
/>
<v-text-field
density="comfortable"
@@ -103,7 +114,7 @@
:model-value="course.credits"
type="number"
variant="outlined"
@update:model-value="(value) => $emit('update-course', semester.id, idx, { credits: Number(value) || 0 })"
@update:model-value="(value) => updateCourse(idx, { credits: Number(value) || 0 })"
/>
<v-text-field
density="comfortable"
@@ -113,7 +124,7 @@
:model-value="course.score"
type="number"
variant="outlined"
@update:model-value="(value) => $emit('update-course', semester.id, idx, { score: Number(value) || 0 })"
@update:model-value="(value) => updateCourse(idx, { score: Number(value) || 0 })"
/>
</div>
</template>
@@ -129,9 +140,8 @@
</template>
<script setup lang="ts">
import { mdiArrowLeft, mdiDelete, mdiPlus } from '@mdi/js'
import type { CourseRecord, SemesterRecord } from '@/stores/semesters'
import { mdiArrowLeft, mdiDelete, mdiPlus } from '@mdi/js'
import { computed } from 'vue'
const props = defineProps<{
@@ -140,14 +150,24 @@ const props = defineProps<{
isFormLocked: boolean
}>()
defineEmits<{
const emit = defineEmits<{
(event: 'close'): void
(event: 'add-course', semesterId: number): void
(event: 'update-course', semesterId: number, courseIndex: number, payload: Partial<CourseRecord>): void
(
event: 'update-course',
semesterId: number,
courseIndex: number,
payload: Partial<CourseRecord>
): void
(event: 'delete-course', semesterId: number, courseIndex: number): void
}>()
const totalCredits = computed(() =>
props.semester?.courses.reduce((sum, course) => sum + course.credits, 0) ?? 0,
const totalCredits = computed(
() => props.semester?.courses.reduce((sum, course) => sum + course.credits, 0) ?? 0
)
function updateCourse (courseIndex: number, payload: Partial<CourseRecord>) {
if (!props.semester) return
emit('update-course', props.semester.id, courseIndex, payload)
}
</script>