no message

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -19,12 +19,16 @@ const modalNote = ref<boolean>(false);
 const note = ref<string>("");
 const retireProfileId = ref<string>("");
 const retireld = ref<string>();
+const listId = ref<string>("");
 
 onMounted(() => {
-  console.log(route.params.id);
+  console.log(route.params);
   if (route.params.id === undefined) {
     fecthlistprofile(type_params, year_params);
-  } else fecthlist(retireld_params);
+  }
+  if (route.params.id !== undefined) {
+    fecthlist(retireld_params);
+  }
 });
 const fecthlistprofile = async (type: any, year: any) => {
   showLoader();
@@ -45,7 +49,6 @@ const fecthlistprofile = async (type: any, year: any) => {
         positionLavel: e.positionEmployeeLevel,
         bureau: e.oc,
       }));
-      console.log(rows.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -59,7 +62,7 @@ const fecthlist = async (id: any) => {
   await http
     .get(config.API.listRetire(id))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
       retireld.value = res.data.result.id;
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
@@ -278,7 +281,6 @@ const clickDelete = (prop: any) => {
 const backHistory = () => {
   window.history.back();
 };
-
 const fetchReason = async (val: string) => {
   await http
     .get(config.API.reasonId(val))
@@ -328,6 +330,14 @@ const visibleNote = computed(() => {
     return true;
   }
 });
+watch(listId, () => {
+  if (route.params.id === undefined) {
+    fecthlistprofile(type_params, year_params);
+  } else fecthlist(retireld_params);
+});
+const UpdateListId = (newListId: string) => {
+  listId.value = newListId;
+};
 // const saveList = () => {
 //   $q.dialog({
 //     title: "ยืนยันกาบันทึกข้อมูล",
@@ -355,6 +365,23 @@ const visibleNote = computed(() => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
+const classrow = (prop: any) => {
+  console.log(listId.value);
+  if (prop.id === listId.value) {
+    return "color: #26a69a ";
+  } else return "";
+};
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "fullname",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 
 <template>
@@ -374,7 +401,11 @@ const visibleNote = computed(() => {
   <div>
     <q-card class="col-12 q-pa-md">
       <q-toolbar>
-        <AddList :retireld="retireld" />
+        <AddList
+          :retireld="retireld"
+          :listId="listId"
+          :UpdateListId="UpdateListId"
+        />
         <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -443,10 +474,11 @@ const visibleNote = computed(() => {
           :columns="columns"
           row-key="name"
           class="custom-header-table"
-          hide-bottom
           :filter="filter"
           :visible-columns="visibleColumns"
           no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -461,8 +493,12 @@ const visibleNote = computed(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="order" :props="props">{{ props.row.order }}</q-td>
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              :style="classrow(props.row)"
+            >
+              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
               <q-td key="organizationOrganization" :props="props">{{
@@ -516,6 +552,17 @@ const visibleNote = computed(() => {
               </q-td>
             </q-tr>
           </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
         </q-table>
       </div>
     </q-card>