แก้ฟิลเตอร์ จากล่างขึ้นบนถึง พ้นราชการ

src/modules/06_retirement/components/01_retirement/RetirementDetail.vue

@@ -31,6 +31,7 @@ const {
   date2Thai,
   dateToISO,
   findOrgName,
+  onSearchDataTable,
 } = mixin;
 const myForm = ref<QForm | null>(null);
 
@@ -120,6 +121,7 @@ const columns = ref<any["columns"]>([
   },
 ]);
 const rows = ref<RetirementList[]>([]);
+const rowsData = ref<RetirementList[]>([]);
 const visibleColumns = ref<string[]>([
   "order",
   "name",
@@ -157,7 +159,7 @@ async function fetchlistprofile(id: string) {
 
       // รายชื่อผู้เกษียณอายุราชการ
       if (data.profile !== null) {
-        rows.value = data.profile.map((e: any) => ({
+        const listData = data.profile.map((e: any) => ({
           id: e.id,
           profileId: e.profileId,
           order: e.order,
@@ -183,6 +185,8 @@ async function fetchlistprofile(id: string) {
           child4: e.child4,
           child4Id: e.child4Id,
         }));
+        rows.value = listData;
+        rowsData.value = listData;
       }
 
       if (statusReport.value == false) {
@@ -407,6 +411,14 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+async function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** Hook */
 onMounted(async () => {
   retireld.value = retireld_params.toString();
@@ -517,6 +529,7 @@ onMounted(async () => {
               placeholder="ค้นหา"
               style="max-width: 200px"
               class="q-ml-sm"
+              @keydown.enter="onSearch"
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -549,7 +562,6 @@ onMounted(async () => {
           :rows="rows"
           :columns="columns"
           row-key="order"
-          :filter="filter.trim()"
           :visible-columns="visibleColumns"
           no-data-label="ไม่มีข้อมูล"
           :pagination-label="paginationLabel"

src/modules/06_retirement/components/02_resign/Table.vue

@@ -23,10 +23,11 @@ const stroeResign = useDataStore();
 const { statusText } = stroe;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai, showLoader, hideLoader,onSearchDataTable } = mixin;
 
 /** Table */
 const rows = ref<ResponseItems[]>([]);
+const rowsData = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -196,6 +197,7 @@ async function fecthlist() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -223,6 +225,14 @@ function onRedirectToDetail(type: string, id: string) {
   router.push(`/retirement/${type}${test}/${id}`);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**Hook */
 onMounted(async () => {
   status.value = stroeResign.formQurey.status;
@@ -283,6 +293,7 @@ onMounted(async () => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keydown.enter="onSearch"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -309,7 +320,6 @@ onMounted(async () => {
         <d-table
           :columns="columns"
           :rows="rows"
-          :filter="filterKeyword.trim()"
           row-key="id"
           :visible-columns="visibleColumns"
           v-model:pagination="pagination"

src/modules/06_retirement/components/03_resignEmp/Table.vue

@@ -23,10 +23,11 @@ const stroeResign = useDataStore();
 const { statusText } = stroe;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai, showLoader, hideLoader,onSearchDataTable } = mixin;
 
 /** Table */
 const rows = ref<ResponseItems[]>([]);
+const rowsData = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -195,6 +196,7 @@ async function fecthlist() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -223,6 +225,14 @@ function onRedirectToDetail(type: string, id: string) {
   router.push(`/retirement/${type}${test}/${id}`);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**Hook */
 onMounted(async () => {
   statusEMP.value = stroeResign.formQureyEMP.status;
@@ -284,15 +294,10 @@ onMounted(async () => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keydown.enter="onSearch"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filterKeyword = ''"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
 
@@ -316,7 +321,6 @@ onMounted(async () => {
         <d-table
           :columns="columns"
           :rows="rows"
-          :filter="filterKeyword.trim()"
           row-key="id"
           :visible-columns="visibleColumns"
           v-model:pagination="pagination"

src/modules/06_retirement/components/06_dismissOrder/DialogSendToCommand.vue

@@ -9,10 +9,22 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
 
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
 
 import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/** props*/
+const props = defineProps({
+  closeModal: Function,
+  fecthlistRecevice: Function,
+});
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<ResponseData[]>("rows", { required: true });
+const rowsData = defineModel<ResponseData[]>("rowsData", { required: true });
+const filterKeyword = defineModel<string>("filterKeyword2", { required: true });
+
 /** use */
 const $q = useQuasar();
 const { statusText } = useTransferDataStore();
@@ -36,10 +48,11 @@ const {
   dialogConfirm,
   hideLoader,
   date2Thai,
+  onSearchDataTable,
 } = mixin;
 
 /** คอลัมน์ */
-const columns2 = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -112,7 +125,7 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 /** คอลัมน์ที่แสดง */
-const visibleColumns2 = ref<string[]>([
+const visibleColumns = ref<string[]>([
   "no",
   "fullname",
   "positionLevel",
@@ -121,15 +134,6 @@ const visibleColumns2 = ref<string[]>([
   "status",
 ]);
 
-/** props*/
-const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  fecthlistRecevice: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
 const modalCommand = ref<boolean>(false);
 
 /**
@@ -164,15 +168,23 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watchEffect(() => {
-  if (props.modal === true) {
+  if (modal.value === true) {
     selected.value = [];
     updateInput("");
   }
 });
 </script>
 <template>
-  <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่งให้ออก" :close="closeModal" />
       <q-separator />
@@ -185,16 +197,16 @@ watchEffect(() => {
               outlined
               dense
               debounce="300"
-              :model-value="filterKeyword2"
-              @update:model-value="updateInput"
+              v-model="filterKeyword"
               placeholder="ค้นหา"
+              @keydown.enter="onSearch"
             >
               <template v-slot:append>
                 <q-icon name="search" />
               </template>
             </q-input>
             <q-select
-              v-model="visibleColumns2"
+              v-model="visibleColumns"
               multiple
               outlined
               dense
@@ -202,7 +214,7 @@ watchEffect(() => {
               :display-value="$q.lang.table.columns"
               emit-value
               map-options
-              :options="columns2"
+              :options="columns"
               option-value="name"
               style="min-width: 140px"
               class="gt-xs q-ml-sm"
@@ -211,11 +223,10 @@ watchEffect(() => {
 
           <div class="col-12">
             <d-table
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2?.trim()"
+              :columns="columns"
+              :rows="rows"
               row-key="id"
-              :visible-columns="visibleColumns2"
+              :visible-columns="visibleColumns"
               selection="multiple"
               v-model:selected="selected"
             >