refactor: 搜尋欄位

2026-06-10 11:44:08 +08:00
parent afbdea6b13
commit aa49d78a84
10 changed files with 170 additions and 202 deletions
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
 import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
 import DetailNavigation from '@/components/maint/master-detail/DetailNavigation.vue'
 import DetailSidePanel from '@/components/maint/master-detail/DetailSidePanel.vue'
@@ -7,7 +9,6 @@ import MntDialogCard from '@/components/maint/MntDialogCard.vue'
 import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
 import MaintShell from '@/components/maint/MaintShell.vue'
 import SectionDataTable from '@/components/sections/SectionDataTable.vue'
-import SectionSearchPanel from '@/components/sections/SectionSearchPanel.vue'
 import { useMasterDetailAMaintenancePage } from '@/composables/page-drivers/useMasterDetailAMaintenancePage'

 const {
@@ -27,13 +28,62 @@ const {
    @create="openAddDialog"
  >
    <template #search-fields>
-      <SectionSearchPanel
-        v-model="search"
-        :departments="masterDetailProps.departments"
-        :grade-options="masterDetailProps.gradeOptions"
-        :statuses="masterDetailProps.statuses"
-        @reset="resetSearch"
-      />
+      <v-col cols="12" md="2">
+        <BaseFormTextField
+          id="search-student-id"
+          v-model="search.studentId"
+          label="學號"
+          :label-char-count="2"
+          name="searchStudentId"
+          placeholder="例如：S2024001"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormTextField
+          id="search-name"
+          v-model="search.name"
+          label="姓名"
+          :label-char-count="2"
+          name="searchName"
+          placeholder="例如：王小明"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormSelect
+          id="search-department"
+          v-model="search.department"
+          label="系所"
+          :label-char-count="2"
+          :items="departments"
+          name="searchDepartment"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormSelect
+          id="search-grade"
+          v-model="search.grade"
+          label="年級"
+          :label-char-count="2"
+          item-title="title"
+          item-value="value"
+          :items="gradeOptions"
+          name="searchGrade"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormSelect
+          id="search-status"
+          v-model="search.status"
+          label="狀態"
+          :label-char-count="2"
+          :items="statuses"
+          name="searchStatus"
+        />
+      </v-col>
+      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
+        <v-btn variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled variant="tonal">查詢</v-btn>
+      </v-col>
    </template>
    <template #table>
      <SectionDataTable
@@ -9,70 +9,55 @@
    <!-- 搜尋欄位放在 MaintShell 的 search-fields slot，讓外殼固定、欄位由頁面決定。 -->
    <template #search-fields>
      <v-col cols="12" md="2">
-        <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
-        <v-text-field
+        <BaseFormTextField
          id="search-student-id"
          v-model="search.studentId"
-          aria-labelledby="search-student-id-label"
-          density="compact"
-          hide-details
+          label="學號"
+          :label-char-count="2"
          name="searchStudentId"
          placeholder="例如：S2024001"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
-        <v-text-field
+        <BaseFormTextField
          id="search-name"
          v-model="search.name"
-          aria-labelledby="search-name-label"
-          density="compact"
-          hide-details
+          label="姓名"
+          :label-char-count="2"
          name="searchName"
          placeholder="例如：王小明"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
-        <v-select
+        <BaseFormSelect
          id="search-department"
          v-model="search.department"
-          aria-labelledby="search-department-label"
-          density="compact"
-          hide-details
+          label="系所"
+          :label-char-count="2"
          :items="departments"
          name="searchDepartment"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
-        <v-select
+        <BaseFormSelect
          id="search-grade"
          v-model="search.grade"
-          aria-labelledby="search-grade-label"
-          density="compact"
-          hide-details
+          label="年級"
+          :label-char-count="2"
          item-title="title"
          item-value="value"
          :items="gradeOptions"
          name="searchGrade"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
-        <v-select
+        <BaseFormSelect
          id="search-status"
          v-model="search.status"
-          aria-labelledby="search-status-label"
-          density="compact"
-          hide-details
+          label="狀態"
+          :label-char-count="2"
          :items="statuses"
          name="searchStatus"
-          variant="outlined"
        />
      </v-col>
      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
@@ -505,6 +490,8 @@ import { mdiBookPlus, mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'

+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
 import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
 import DetailCollapseGropus from '@/components/maint/master-detail/DetailCollapseGropus.vue'
 import DetailFullHeightPanel from '@/components/maint/master-detail/DetailFullHeightPanel.vue'
@@ -9,70 +9,55 @@
    <!-- 搜尋欄位放在 MaintShell 的 search-fields slot，讓外殼固定、欄位由頁面決定。 -->
    <template #search-fields>
      <v-col cols="12" md="2">
-        <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
-        <v-text-field
+        <BaseFormTextField
          id="search-student-id"
          v-model="search.studentId"
-          aria-labelledby="search-student-id-label"
-          density="compact"
-          hide-details
+          label="學號"
+          :label-char-count="2"
          name="searchStudentId"
          placeholder="例如：S2024001"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
-        <v-text-field
+        <BaseFormTextField
          id="search-name"
          v-model="search.name"
-          aria-labelledby="search-name-label"
-          density="compact"
-          hide-details
+          label="姓名"
+          :label-char-count="2"
          name="searchName"
          placeholder="例如：王小明"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
-        <v-select
+        <BaseFormSelect
          id="search-department"
          v-model="search.department"
-          aria-labelledby="search-department-label"
-          density="compact"
-          hide-details
+          label="系所"
+          :label-char-count="2"
          :items="departments"
          name="searchDepartment"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
-        <v-select
+        <BaseFormSelect
          id="search-grade"
          v-model="search.grade"
-          aria-labelledby="search-grade-label"
-          density="compact"
-          hide-details
+          label="年級"
+          :label-char-count="2"
          item-title="title"
          item-value="value"
          :items="gradeOptions"
          name="searchGrade"
-          variant="outlined"
        />
      </v-col>
      <v-col cols="12" md="2">
-        <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
-        <v-select
+        <BaseFormSelect
          id="search-status"
          v-model="search.status"
-          aria-labelledby="search-status-label"
-          density="compact"
-          hide-details
+          label="狀態"
+          :label-char-count="2"
          :items="statuses"
          name="searchStatus"
-          variant="outlined"
        />
      </v-col>
      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
@@ -492,6 +477,8 @@ import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil, mdiSchool } from '@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'

+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
 import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
 import MasterDetailCCourseMobilePanel from '@/components/maint/master-detail/CourseMobilePanel.vue'
 import DetailSimpleList from '@/components/maint/master-detail/DetailSimpleList.vue'
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
 import MaintShell from '@/components/maint/MaintShell.vue'
 import SectionDataTable from '@/components/sections/SectionDataTable.vue'
 import SectionFormPanel from '@/components/sections/SectionFormPanel.vue'
-import SectionSearchPanel from '@/components/sections/SectionSearchPanel.vue'
 import { useSingleRecordMaintenancePage } from '@/composables/page-drivers/useSingleRecordMaintenancePage'

 const {
@@ -21,13 +22,62 @@ const {
    @create="commands.openAddDialog"
  >
    <template #search-fields>
-      <SectionSearchPanel
-        v-model="search"
-        :departments="departments"
-        :grade-options="gradeOptions"
-        :statuses="statuses"
-        @reset="resetSearch"
-      />
+      <v-col cols="12" md="2">
+        <BaseFormTextField
+          id="search-student-id"
+          v-model="search.studentId"
+          label="學號"
+          :label-char-count="2"
+          name="searchStudentId"
+          placeholder="例如：S2024001"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormTextField
+          id="search-name"
+          v-model="search.name"
+          label="姓名"
+          :label-char-count="2"
+          name="searchName"
+          placeholder="例如：王小明"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormSelect
+          id="search-department"
+          v-model="search.department"
+          label="系所"
+          :label-char-count="2"
+          :items="departments"
+          name="searchDepartment"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormSelect
+          id="search-grade"
+          v-model="search.grade"
+          label="年級"
+          :label-char-count="2"
+          item-title="title"
+          item-value="value"
+          :items="gradeOptions"
+          name="searchGrade"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <BaseFormSelect
+          id="search-status"
+          v-model="search.status"
+          label="狀態"
+          :label-char-count="2"
+          :items="statuses"
+          name="searchStatus"
+        />
+      </v-col>
+      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
+        <v-btn variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled variant="tonal">查詢</v-btn>
+      </v-col>
    </template>
    <template #table>
      <SectionDataTable