อัตรากำลังลูกจ้างประจำ ฯ

src/modules/16_positionEmployee/components/DialogFormPosition.vue

@@ -224,7 +224,7 @@ async function searchInput() {
     await http
       .get(
         config.API.orgEmployeePos +
-          `?keyword=${search.value}&type=${type.value}`
+          `?keyword=${search.value.trim()}&type=${type.value}`
       )
       .then((res) => {
         rowsPositionSelect.value = res.data.result;
@@ -556,15 +556,12 @@ watch(
                     <div class="col-12 col-sm-6 col-md-6">
                       <q-input
                         ref="searchRef"
-                        :class="inputEdit(isReadonly)"
                         v-model="search"
                         outlined
-                        clearable
                         dense
                         lazy-rules
                         label="คำค้น"
                         hide-bottom-space
-                        :rules="[(val:string) => !!val || `กรุณากรอกคำค้น`]"
                         @keydown.enter.prevent="searchInput()"
                       />
                     </div>
@@ -575,6 +572,7 @@ watch(
                         icon="search"
                         label="ค้นหา"
                         class="full-width q-pa-sm"
+                        outline
                         @click="searchInput()"
                       >
                       </q-btn>

src/modules/16_positionEmployee/components/DialogMovePos.vue

@@ -41,6 +41,7 @@ const {
   messageError,
   dialogMessageNotify,
   success,
+  filterTableQuasar,
 } = useCounterMixin();
 
 /**
@@ -79,14 +80,7 @@ const levelTree = ref<number>(0);
 
 const filterTable = ref<string>("");
 const selectedFilter = ref<PosMaster2[]>([]);
-
+const dataMain = ref<PosMaster2[]>([...rows.value]);
-/**
- * function รีเช็ด filter
- */
-function resetFilter() {
-  filterTree.value = "";
-  filterRef.value.focus();
-}
 
 /**
  * function เลือกข้อมูลหน่วยงาน
@@ -155,12 +149,22 @@ const pagination = ref({
   rowsPerPage: reqMaster.value.pageSize,
 });
 
+function onSerachDataTable() {
+  rows.value = filterTableQuasar(
+    filterTable.value,
+    dataMain.value,
+    columns.value ?? []
+  );
+}
+
 watch(
   () => modal.value,
   () => {
     reqMaster.value.page = 1;
     filterTree.value = "";
     pagination.value.rowsPerPage = reqMaster.value.pageSize;
+    dataMain.value = rows.value;
+    filterTable.value = "";
 
     title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
     if (modal.value && props.type === "SINGER") {
@@ -200,75 +204,85 @@ watch(
                 <q-space />
 
                 <div>
-                  <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+                  <q-input
+                    outlined
+                    dense
+                    v-model="filterTable"
+                    label="ค้นหา"
+                    @keydown.enter="onSerachDataTable"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="search" />
+                    </template>
+                  </q-input>
                 </div>
               </q-toolbar>
+              <div class="col-12">
+                <d-table
+                  flat
+                  bordered
+                  :rows="rows"
+                  :columns="columns"
+                  row-key="id"
+                  no-data-label="ไม่มีข้อมูล"
+                  selection="multiple"
+                  v-model:selected="selectedFilter"
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                  v-model:pagination="pagination"
+                  @update:pagination="updatePagination"
+                >
+                  <template v-slot:header-selection="scope">
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="scope.selected"
+                    />
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props">
+                      <q-td>
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
 
-              <d-table
+                      <q-td
-                flat
+                        v-for="col in props.cols"
-                bordered
+                        :key="col.name"
-                :rows="rows"
+                        :props="props"
-                :columns="columns"
+                      >
-                row-key="id"
+                        <div v-if="col.name == 'no'">
-                :filter="filterTable"
+                          {{
-                no-data-label="ไม่มีข้อมูล"
+                            (reqMaster.page - 1) * Number(reqMaster.pageSize) +
-                selection="multiple"
+                            props.rowIndex +
-                v-model:selected="selectedFilter"
+                            1
-                :rows-per-page-options="[10, 25, 50, 100]"
+                          }}
-                v-model:pagination="pagination"
+                        </div>
-                @update:pagination="updatePagination"
-              >
-                <template v-slot:header-selection="scope">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
-                <template v-slot:body="props">
-                  <q-tr :props="props">
-                    <q-td>
-                      <q-checkbox
-                        keep-color
-                        color="primary"
-                        dense
-                        v-model="props.selected"
-                      />
-                    </q-td>
 
-                    <q-td
+                        <div v-else>
-                      v-for="col in props.cols"
+                          {{ col.value }}
-                      :key="col.name"
+                        </div>
-                      :props="props"
+                      </q-td>
-                    >
+                    </q-tr>
-                      <div v-if="col.name == 'no'">
+                  </template>
-                        {{
+                  <template v-slot:pagination="scope">
-                          (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                    <q-pagination
-                          props.rowIndex +
+                      v-model="reqMaster.page"
-                          1
+                      active-color="primary"
-                        }}
+                      color="dark"
-                      </div>
+                      :max="totalPage"
-
+                      :max-pages="5"
-                      <div v-else>
+                      size="sm"
-                        {{ col.value }}
+                      boundary-links
-                      </div>
+                      direction-links
-                    </q-td>
+                    ></q-pagination>
-                  </q-tr>
+                  </template>
-                </template>
+                </d-table>
-                <template v-slot:pagination="scope">
+              </div>
-                  <q-pagination
-                    v-model="reqMaster.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="totalPage"
-                    :max-pages="5"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                  ></q-pagination>
-                </template>
-              </d-table>
             </q-card>
 
             <q-card
@@ -290,12 +304,7 @@ watch(
                 label="ค้นหา"
               >
                 <template v-slot:append>
-                  <q-icon
+                  <q-icon name="search" />
-                    v-if="filterTree !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
                 </template>
               </q-input>
               <q-tree

src/modules/16_positionEmployee/components/TreeMain.vue

@@ -94,12 +94,6 @@ watch(
         <div class="col-12">
           <q-input dense outlined v-model="filter" label="ค้นหา">
             <template v-slot:append>
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
               <q-icon name="search" color="grey-5" />
             </template>
           </q-input>
@@ -113,7 +107,7 @@ watch(
           :nodes="lazy"
           node-key="orgTreeId"
           label-key="labelName"
-          :filter="filter"
+          :filter="filter.trim()"
           no-results-label="ไม่พบข้อมูลที่ค้นหา"
           no-nodes-label="ไม่มีข้อมูล"
           v-model:expanded="expanded"

src/modules/16_positionEmployee/views/main.vue

@@ -20,7 +20,7 @@ import type { FilterMaster } from "@/modules/16_positionEmployee/interface/reque
 
 /** importComponents*/
 import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
-import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+import TreeTable from "@/modules/16_positionEmployee/components/TableMain.vue";
 import LoadView from "@/components/LoadView.vue";
 
 /** use*/

src/stores/mixin.ts

@@ -1100,6 +1100,26 @@ export const useCounterMixin = defineStore("mixin", () => {
       .catch((error) => console.error("ดาวน์โหลดไฟล์ไม่สำเร็จ:", error));
   }
 
+  function filterTableQuasar(keyword: string, data: any[], columns: any[]) {
+    const searchText = keyword.trim().toLowerCase();
+
+    if (!searchText) {
+      return data; // คืนค่าทั้งหมดถ้าไม่มีข้อความค้นหา
+    }
+
+    // คืนค่าข้อมูลที่กรองแล้ว
+    return data.filter((row: any) => {
+      return columns.some((col: any) => {
+        const rawValue = row[col.field];
+        const formattedValue = col.format
+          ? col.format(rawValue, row) // ใช้ `format` ถ้ามี
+          : rawValue;
+
+        return String(formattedValue).toLowerCase().includes(searchText);
+      });
+    });
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1143,5 +1163,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     findPosMasterNoOld,
     pathRegistryEmp,
     downloadRenameFileByLink,
+
+    filterTableQuasar,
   };
 });