no message

src/modules/14_KPI/views/indicatorByRole.vue

@@ -1,52 +1,53 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
 
+const maxPage = ref<number>(1);
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+
 /** หัวตาราง */
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicatorNo",
+    name: "no",
     align: "left",
     label: "ลำดับตัวชี้วัด ",
     sortable: true,
-    field: "indicatorNo",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "indicatorPass",
+    name: "including",
     align: "left",
     label: "รหัสตัวชี้วัด",
     sortable: true,
-    field: "indicatorPass",
+    field: "including",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "indicatorName",
+    name: "includingName",
     align: "left",
     label: "ชื่อตัวชี้วัด",
     sortable: true,
-    field: "indicatorName",
+    field: "includingName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>([
-  "indicatorNo",
-  "indicatorPass",
-  "indicatorName",
-]);
+const visibleColumns = ref<string[]>(["no", "including", "includingName"]);
 
 const positionOp = ref<any[]>([
   { id: "1", name: "นักจัดการทั่วไป 1" },
@@ -65,27 +66,27 @@ const formFilter = reactive({
   round: "1",
   keyword: "",
 });
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      indicatorNo: "1",
-      indicatorPass: "1กก",
-      indicatorName: "ตัวชี้วัด 1",
-    },
-    {
-      id: "2",
-      indicatorNo: "2",
-      indicatorPass: "2กก",
-      indicatorName: "ตัวชี้วัด 2",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.kpiRoleMainList +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}`
+    )
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -96,11 +97,34 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
 
 function onClickDelete(id: number) {
   dialogRemove($q, () => {
-    rows.value.splice(id, 1);
-    success($q, "ลบข้อมูลสำเร็จ");
+    http
+    .delete(config.API.kpiRoleMainList+`/${id}`)
+    .then((res)=>{
+      success($q, "ลบข้อมูลสำเร็จ");
+      fetchList()
+    }).finally(()=>{
+      
+    })
   });
 }
 
+function updatePage(val: number) {
+  formFilter.page = val;
+  fetchList();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(() => {
   fetchList();
 });
@@ -200,7 +224,22 @@ onMounted(() => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        @update:pagination="updatePageSize"
       >
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="maxPage"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="updatePage"
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -217,7 +256,13 @@ onMounted(() => {
               :props="props"
               @click="onClickAddOrView(true, props.row.id)"
             >
-              <div class="table_ellipsis">
+              <div v-if="col.name === 'no'">
+                {{
+                  (formFilter.page - 1) * Number(pagination.rowsPerPage) + props.rowIndex + 1
+                }}
+              </div>
+
+              <div v-else class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
@@ -227,7 +272,7 @@ onMounted(() => {
                 round
                 icon="delete"
                 color="red"
-                @click.stop.pervent="onClickDelete(props.rowIndex)"
+                @click.stop.pervent="onClickDelete(props.row.id)"
               >
                 <q-tooltip>ลบข้อมูล </q-tooltip>
               </q-btn>