filter ==> ข้อมูลตำแหน่งลูกจ้างประจำ

src/modules/01_metadata/components/position-employee/GroupDetail.vue

@@ -30,10 +30,12 @@ const {
   messageError,
   success,
   date2Thai,
+  onSearchDataTable,
 } = useCounterMixin();
 
 // Table
 const rows = ref<DataGroup[]>([]); // รายการกลุ่มงาน
+const rowsMain = ref<DataGroup[]>([]); // รายการกลุ่มงาน
 const filter = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -138,16 +140,20 @@ const formDataLevel = reactive<FormDataLevel>({
  * เก็บข้อมูลรรายการระดับชั้นงานไว้ใน rows.value
  */
 async function fetchData() {
+  rows.value = [];
+  rowsMain.value = [];
   showLoader();
   await http
     .get(config.API.orgEmployeeTypeById(posTypeId.value))
     .then(async (res) => {
       titleName.value = res.data.result.posTypeName ?? null;
       formDataLevel.posTypeName = res.data.result.posTypeName;
-      rows.value = await res.data.result.posLevels.map((x: ResLevel) => ({
+      const lists = await res.data.result.posLevels.map((x: ResLevel) => ({
         ...x,
         posTypeName: res.data.result.posTypeName,
       }));
+      rows.value = lists;
+      rowsMain.value = lists;
     })
     .catch((err) => {
       messageError($q, err);
@@ -160,9 +166,7 @@ async function fetchData() {
 /**
  * ฟังก์ชันเปิด popup แก้ไขข้อมูลระดับชั้นงาน
  * @param data ข้อมูลระดับชั้นงานที่จะแก้ไข
- *
  * กำหนด  isStatusEdit เป็น true และกำหนดให้ ฟอร์มข้อมูลระดับชั้นงาน เป็น ข้อมูลที่จะแก่ไข
- *
  */
 function onClickOpenDialog(
   statusEdit: boolean = false,
@@ -183,7 +187,6 @@ function onClickOpenDialog(
 
 /**
  * ฟังก์ชันปืด popup แก้ไขหรื่อเพิ่มข้อมูลระดับชั้นงาน
- *
  * และกำหนดให้ ฟอร์มข้อมูลระดับชั้นงาน เป็นค่าว่าง
  */
 function onClickCloseDialog() {
@@ -195,7 +198,6 @@ function onClickCloseDialog() {
 
 /**
  * ยืนยันการบันทึกข้อมูลรายการระดับชั้นงาน
- *
  * ุ ถ้า dialogStatus เป็น 'false' จะทำการเพิ่มข้อมูลรายการระดับชั้นงาน ถ้าไม่จะทำการแก้ไขข้อมูล
  * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการระดับชั้นงานใหม่
  *
@@ -239,9 +241,16 @@ function convertPosLevelAuthority(val: string) {
   return result?.label;
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
- *
  * ถ่ามี posTypeId จะดึงข้อมูลรายการระดับชั้นงาน
  */
 onMounted(() => {
@@ -281,12 +290,11 @@ onMounted(() => {
           <q-input
             dense
             outlined
-            clearable
             v-model="filter"
             placeholder="ค้นหา"
-            @clear="filter = ''"
+            @keydown.enter.pervent="serchDataTable"
           >
-            <template v-slot:append v-if="filter === ''">
+            <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
@@ -310,7 +318,6 @@ onMounted(() => {
         ref="table"
         :columns="columns"
         :rows="rows"
-        :filter="filter"
         row-key="name"
         flat
         bordered