ปรับ filter KPI Devalopment

src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue

@@ -20,11 +20,13 @@ const {
   findPosMasterNoOld,
   findOrgNameOld,
   date2Thai,
+  onSearchDataTable,
 } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
 
 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -210,6 +212,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -218,12 +221,24 @@ function getData() {
       hideLoader();
     });
 }
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(
   () => modal.value,
   (n) => {
     if (n == true) {
       getData();
-    } else rows.value = [];
+    } else {
+      rows.value = [];
+      rowsMain.value = [];
+    }
   }
 );
 </script>
@@ -233,13 +248,43 @@ watch(
       <DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
       <q-separator />
       <q-card-section>
-        <div class="row">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12 row">
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-input
+                dense
+                outlined
+                v-model="filterKeyword"
+                label="ค้นหา"
+                @keydown.enter.pervent="serchDataTable"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
+
           <div class="col-12">
             <d-table
               ref="table"
               :columns="columns"
               :rows="rows"
-              :filter="filterKeyword"
               row-key="id"
               flat
               bordered

src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue

@@ -112,7 +112,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const kpiUserPlannedId = ref<string>("");
-const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
@@ -257,7 +256,6 @@ watch(
         ref="table"
         :columns="columns"
         :rows="rows"
-        :filter="filterKeyword"
         row-key="id"
         flat
         bordered