ปรับ filte Table ข้อมูลทะเบียนประวัติ

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -32,9 +32,7 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -48,12 +46,14 @@ const {
   messageError,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = useCounterMixin();
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 //Table
 const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
+const rowsMain = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
 const keyword = ref<string>(""); //คำค้นหา
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
@@ -214,15 +214,14 @@ const posExecutiveOptionMain = ref<DataOption[]>([]);
 
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
-/**
- * function fetch รายการ ตำแหน่งเงินเดือน
- */
+/** function fetch รายการ ตำแหน่งเงินเดือน*/
 async function fetchListSalary() {
   showLoader();
   await http
     .get(config.API.profileListSalaryNew(profileId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsMain.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -232,9 +231,7 @@ async function fetchListSalary() {
     });
 }
 
-/**
- * function fetch รายการ ตำแหน่งเงินเดือน
- */
+/** function fetch รายการ ตำแหน่งเงินเดือน*/
 function fetchType() {
   http
     .get(config.API.orgPosType)
@@ -316,9 +313,7 @@ function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
   formDataSalary.doc = statusEdit ? data.templateDoc : "";
 }
 
-/**
- * function  ปิด dialog ตำแหน่งเงินเดือน
- */
+/** function  ปิด dialog ตำแหน่งเงินเดือน*/
 function onClickCloseDialog() {
   modalDialogSalary.value = false;
 }
@@ -403,9 +398,7 @@ function updateDoc(val: string) {
   formDataSalary.doc = val;
 }
 
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -511,9 +504,7 @@ function onClikcHistory(id: string) {
   modalHistory.value = true;
 }
 
-/**
- * function fetch ข้อมูลสายงาน
- */
+/** function fetch ข้อมูลสายงาน*/
 function fetchDataOption() {
   showLoader();
   http
@@ -563,9 +554,7 @@ function fetchDataOption() {
     });
 }
 
-/**
- * function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร
- */
+/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
 function fetchDataOptionExecutive() {
   showLoader();
   http
@@ -585,9 +574,7 @@ function fetchDataOptionExecutive() {
     });
 }
 
-/**
- * function fetch ข้อมูลปรเภทตำแหน่ง
- */
+/** function fetch ข้อมูลปรเภทตำแหน่ง*/
 function fetchOptionGroup() {
   showLoader();
   http
@@ -621,9 +608,16 @@ function onRefCommand(data: ResListSalary) {
   commandId.value = data.commandId;
   // commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
 }
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchListSalary();
 });
@@ -642,7 +636,14 @@ onMounted(() => {
       <q-tooltip>เพิ่มข้อมูล</q-tooltip>
     </q-btn>
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+      @keydown.enter.pervent="serchDataTable"
+    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -668,12 +669,11 @@ onMounted(() => {
     flat
     bordered
     dense
-    :filter="keyword.trim()"
     :columns="columns"
     :rows="rows"
     :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100]"
+    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
   >
     <template v-slot:header="props">