รายชื่อลูกจ้างชั่วคราว => Query

src/modules/08_registryEmployee/views/Main.vue

@@ -7,7 +7,10 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QInput, QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/08_registryEmployee/interface/index/Main";
+import type {
+  NewPagination,
+  DataOption,
+} from "@/modules/08_registryEmployee/interface/index/Main";
 import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
 
 /** importComponents*/
@@ -41,7 +44,13 @@ const queryParams = reactive({
   page: 1,
   pageSize: 10,
   type: "temp",
+  searchField: "fullName",
+  searchKeyword: "",
 });
+const searchTypeOption = ref<DataOption[]>([
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -298,21 +307,41 @@ onMounted(() => {
       </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
+        <q-select
+          outlined
+          v-model="queryParams.searchField"
+          :options="searchTypeOption"
+          emit-value
+          dense
+          emit-option
+          option-label="name"
+          option-value="id"
+          map-options
+        />
         <!-- ค้นหาข้อความใน table -->
         <q-input
           standout
           dense
-          v-model="filter"
+          v-model="queryParams.searchKeyword"
           ref="filterRef"
           outlined
-          debounce="300"
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
+          @keydown.enter.prevent="(queryParams.page = 1), fetchList()"
         >
           <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" />
+            <q-icon v-if="queryParams.searchKeyword == ''" name="search" />
+            <q-icon
+              v-if="queryParams.searchKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="
+                (queryParams.searchKeyword = ''),
+                  (queryParams.page = 1),
+                  fetchList()
+              "
+            />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
@@ -337,7 +366,6 @@ onMounted(() => {
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
-        :filter="filter"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         @update:pagination="updatePagination"