แก้ ฟิลเตอร์รายการผู้ทดลองปฏิบัติหน้าที่ราชการ

src/modules/05_placement/components/probation/MainProbation.vue

@@ -34,14 +34,17 @@ const paging = ref<boolean>(true);
 const filterRef2 = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging2 = ref<boolean>(true);
+const fillterStatus = ref<any>([]);
 const fillter = ref<any>("");
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const rows = ref<FormMainProbation[]>([]);
 const rows2 = ref<FormMainProbation2[]>([]);
+const dataUpdate = ref<FormMainProbation[]>([]);
 const Opfillter = ref<OpfillterTypeSt[]>([]);
 const Opfillter2 = ref<OpfillterTypeSt[]>([]);
 const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
+const formMain = reactive({ keyword: "", pageSize: 10, page: 1 });
 const maxPage = ref<number>(1);
 
 const modalAdd = ref<boolean>(false);
@@ -237,22 +240,22 @@ const columns2 = ref<QTableProps["columns"]>([
 
 /** get ข้อมูล */
 async function getpersonalList() {
-  rows.value = [];
   showLoader();
   await http
     .get(
       config.API.probationPersonalList() +
         `?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}`
     )
-    .then((res) => {
-      rows.value = res.data.data.data;
+    .then(async (res) => {
+      const data = await res.data.data.data;
+      const resTotal = await res.data.data.total;
+      rows.value = data;
+      fillterStatus.value = data;
+      dataUpdate.value = rows.value;
       Opfillter.value = storeFn.optionStatusProbation;
       Opfillter2.value = storeFn.optionStatusProbation;
-
-      totalList.value = Math.ceil(
-        res.data.data.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.data.total;
+      totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
+      total.value = resTotal;
       hideLoader();
     })
     .catch((e) => {
@@ -288,6 +291,15 @@ function updatePagination(newPagination: any) {
   formProbation.pageSize = newPagination.rowsPerPage;
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePaginationMain(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
 async function filterKeyword2Fn(page: number) {
   page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
 }
@@ -366,6 +378,7 @@ async function clickClose() {
 function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
+  getSearchMain()
 }
 
 /** reset ฟิลเตอร์ ใน dialog */
@@ -374,6 +387,11 @@ function resetFilter2() {
   filterRef2.value.focus();
 }
 
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
 function paginationLabel2(start: string, end: string, total: string) {
   if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -441,14 +459,19 @@ function closeAdd() {
   topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
 }
 
-function getSearch() {
-  pagination.value.page = 1;
-  getpersonalList();
+function getSearchMain(){
+  pagination.value.page = 1
+  getpersonalList()
 }
+
+watch([() => formProbation.page, () => formProbation.pageSize], () => {
+  onclickAddProbation();
+});
+
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    getSearch();
+  async () => {
+    getSearchMain()
   }
 );
 
@@ -478,7 +501,7 @@ onMounted(async () => {
             :borderless="false"
             :outlined="true"
             :hide-dropdown-icon="false"
-            @update:model-value="getpersonalList()"
+            @update:model-value="getSearchMain()"
             @filter="filterFn"
             use-input
             behavior="menu"
@@ -530,7 +553,7 @@ onMounted(async () => {
           outlined
           debounce="300"
           placeholder="ค้นหา"
-          @keydown.enter.prevent="getSearch"
+          @keydown.enter.prevent="getSearchMain()"
         >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
@@ -563,14 +586,15 @@ onMounted(async () => {
         <d-table
           :columns="columns"
           :rows="rows"
+          row-key="personal_id"
           flat
           bordered
+          :paging="true"
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-          :rows-per-page-options="[1, 25, 50, 100]"
-          @update:pagination="updatePagination"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @update:pagination="updatePaginationMain"
         >
           <template v-slot:header="props">
             <q-tr :props="props">

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -74,6 +74,7 @@ function redirectToPageadd() {
 /** ล้างค่าใน input */
 function resetFilter() {
   filterKeyword.value = "";
+  page.value = 1
   if (filterRef.value) {
     filterRef.value.focus();
     getList();