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

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -25,6 +25,7 @@ const {
   messageError,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = useCounterMixin();
 
 const id = ref<string>("");
@@ -33,9 +34,7 @@ const profileId = ref<string>(
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -55,6 +54,7 @@ const formData = reactive<RequestNoPaidObject>({
 
 //Table
 const rows = ref<RowList[]>([]); //รายการ
+const rowsMain = ref<RowList[]>([]); //รายการ
 const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -128,9 +128,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * funciton ยืนยันการบันทึกข้อมูล
- */
+/** funciton ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, () => {
     isStatusEdit.value ? editData() : saveData();
@@ -153,23 +151,20 @@ function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
   modalDialog.value = true;
 }
 
-/**
- * function ปิด Didalig  บันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function ปิด Didalig  บันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 function onClickCloseDialog() {
   modalDialog.value = false;
   isStatusEdit.value = false;
 }
 
-/**
- * function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -179,9 +174,7 @@ async function getData() {
     });
 }
 
-/**
- * function เพิ่มข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function เพิ่มข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 function saveData() {
   showLoader();
   http
@@ -203,9 +196,7 @@ function saveData() {
     });
 }
 
-/**
- * function แก้ไขข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function แก้ไขข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 function editData() {
   showLoader();
   http
@@ -226,17 +217,21 @@ function editData() {
     });
 }
 
-/**
- * function เปิดข้อมูลประวัติการแก้ไช
- */
+/** function เปิดข้อมูลประวัติการแก้ไช*/
 function onClickHistory(rowId: string) {
   id.value = rowId;
   modalHistory.value = true;
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน */
 onMounted(() => {
   getData();
 });
@@ -262,7 +257,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -323,7 +318,6 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="keyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"