refactor: 搜尋欄位

src/views/maint/MasterDetailA.vue

@@ -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