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

src/modules/08_registryEmployee/components/DialogAddEmployee.vue

@@ -265,12 +265,11 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 600px">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <DialogHeader
-            tittle="เพิ่มข้อมูลลูกจ้างชั่วคราว"
-            :close="closeDialog"
-          />
-        </q-card-section>
+        <DialogHeader
+          tittle="เพิ่มข้อมูลลูกจ้างชั่วคราว"
+          :close="closeDialog"
+        />
+
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-md">
           <div class="row q-col-gutter-md">
@@ -551,15 +550,7 @@ watch(
 
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>

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"