feat: add SingleRecord component for student maintenance with CRUD functionality

2026-03-30 11:03:01 +08:00
parent 00a7150757
commit 20b093ff73
22 changed files with 51 additions and 51 deletions
@@ -0,0 +1,173 @@
+<template>
+  <div v-if="mobile" class="d-flex align-center flex-wrap ga-2 w-100">
+    <div class="d-flex align-center ga-1">
+      <v-btn
+        v-if="isViewMode || isEditMode"
+        :disabled="!hasPrevRecord"
+        :icon="mdiChevronLeft"
+        size="small"
+        variant="text"
+        @click="$emit('prev')"
+      />
+      <v-btn
+        v-if="isViewMode || isEditMode"
+        :disabled="!hasNextRecord"
+        :icon="mdiChevronRight"
+        size="small"
+        variant="text"
+        @click="$emit('next')"
+      />
+    </div>
+    <v-spacer />
+    <v-btn
+      v-if="isViewMode"
+      color="primary"
+      :prepend-icon="mdiPencil"
+      size="small"
+      variant="tonal"
+      @click="$emit('switch-to-edit')"
+    >
+      {{ editLabel }}
+    </v-btn>
+    <v-btn
+      v-if="isEditMode"
+      color="primary"
+      :prepend-icon="mdiEye"
+      size="small"
+      variant="tonal"
+      @click="$emit('switch-to-view')"
+    >
+      {{ viewLabel }}
+    </v-btn>
+  </div>
+
+  <template v-else>
+    <v-btn
+      v-if="isViewMode || isEditMode"
+      :disabled="!hasPrevRecord"
+      :prepend-icon="mdiSkipPrevious"
+      size="small"
+      variant="text"
+      @click="$emit('first')"
+    >
+      {{ firstLabel }}
+    </v-btn>
+    <v-btn
+      v-if="isViewMode || isEditMode"
+      :disabled="!hasPrevRecord"
+      :prepend-icon="mdiChevronLeft"
+      size="small"
+      variant="text"
+      @click="$emit('prev')"
+    >
+      {{ prevLabel }}
+    </v-btn>
+    <v-btn
+      v-if="isViewMode || isEditMode"
+      :append-icon="mdiChevronRight"
+      :disabled="!hasNextRecord"
+      size="small"
+      variant="text"
+      @click="$emit('next')"
+    >
+      {{ nextLabel }}
+    </v-btn>
+    <v-btn
+      v-if="isViewMode || isEditMode"
+      :append-icon="mdiSkipNext"
+      :disabled="!hasNextRecord"
+      size="small"
+      variant="text"
+      @click="$emit('last')"
+    >
+      {{ lastLabel }}
+    </v-btn>
+    <v-spacer />
+    <v-btn
+      v-if="isViewMode"
+      color="primary"
+      :prepend-icon="mdiPencil"
+      size="small"
+      variant="tonal"
+      @click="$emit('switch-to-edit')"
+    >
+      {{ editLabel }}
+    </v-btn>
+    <v-btn
+      v-if="isEditMode"
+      color="primary"
+      :prepend-icon="mdiEye"
+      size="small"
+      variant="tonal"
+      @click="$emit('switch-to-view')"
+    >
+      {{ viewLabel }}
+    </v-btn>
+  </template>
+</template>
+
+<script setup lang="ts">
+import {
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiEye,
+  mdiPencil,
+  mdiSkipNext,
+  mdiSkipPrevious,
+} from '@mdi/js'
+defineProps({
+  isViewMode: {
+    type: Boolean,
+    required: true,
+  },
+  isEditMode: {
+    type: Boolean,
+    required: true,
+  },
+  hasPrevRecord: {
+    type: Boolean,
+    required: true,
+  },
+  hasNextRecord: {
+    type: Boolean,
+    required: true,
+  },
+  mobile: {
+    type: Boolean,
+    default: false,
+  },
+  firstLabel: {
+    type: String,
+    default: '首筆',
+  },
+  prevLabel: {
+    type: String,
+    default: '上一筆',
+  },
+  nextLabel: {
+    type: String,
+    default: '下一筆',
+  },
+  lastLabel: {
+    type: String,
+    default: '末筆',
+  },
+  editLabel: {
+    type: String,
+    default: '編輯',
+  },
+  viewLabel: {
+    type: String,
+    default: '檢視',
+  },
+})
+
+defineEmits<{
+  (event: 'first'): void
+  (event: 'prev'): void
+  (event: 'next'): void
+  (event: 'last'): void
+  (event: 'switch-to-edit'): void
+  (event: 'switch-to-view'): void
+}>()
+</script>