no message

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

@@ -4,24 +4,31 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success } = mixin;
+const { messageError, success, showLoader, hideLoader } = mixin;
+const route = useRoute();
 
+const type_params = route.params.type;
 const props = defineProps({
   retireld: String,
+  listId: String,
+  UpdateListId: Function,
 });
 
 const modal = ref<boolean>(false);
 const retireld = ref<any>();
+const type = ref<any>();
+const listId = ref(props.listId);
 
 const columns = ref<any["columns"]>([
   {
-    name: "order",
+    name: "index",
     required: true,
     label: "ลำดับ",
-    field: "order",
+    field: "index",
     align: "left",
   },
   {
@@ -108,27 +115,73 @@ const filter = ref<string>("");
 watch(modal, () => {
   if (modal.value === true) {
     retireld.value = props.retireld;
-    fecthlistRetire(retireld.value);
+    if (type_params === "officer") {
+      type.value = type_params;
+    } else type.value = "all";
+
+    fecthlistRetire();
   }
 });
-const fecthlistRetire = async (retireld: any) => {
+const updateListId = (val: any) => {
-  // await http
+  listId.value = val;
-  //   .get(config.API.listRetire(retireld))
+  if (props.UpdateListId) {
-  //   .then((res) => {
+    props.UpdateListId(listId.value);
-  //     console.log(res);
+  }
-  //     rows.value = res.data.result.map((e: any) => ({
-  //       order: e.order,
-  //       fullname: e.fullName,
-  //       position: e.position,
-  //       level: e.positionEmployeeLevel,
-  //       organizationOrganization: e.organizationOrganization,
-  //     }));
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   });
 };
-const clickAdd = () => {
+const fecthlistRetire = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      console.log(id);
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [{}];
+  if (type.value === "officer") {
+    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
+  } else if (type.value === "all") {
+    console.log("all");
+    data = [
+      { criteriaType: "is_retire", criteriaValue: "false" },
+      { criteriaType: "employee_class", criteriaValue: "perm" },
+    ];
+  }
+  console.log(data);
+
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, type.value), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log(res.data.result);
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickAdd = (props: any) => {
+  console.log(props.row.id);
+  let data: any = props.row.id;
+
   $q.dialog({
     title: "ยืนยันการเพิ่มข้อมูล",
     message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
@@ -141,15 +194,17 @@ const clickAdd = () => {
     .onOk(async () => {
       console.log("เพิ่มข้อมูล");
       await http
-        .put(config.API.profileRetire("123"))
+        .put(config.API.profileRetire(data), { profileId: data })
-        .then(() => {
+        .then((res) => {
           success($q, "เพิ่มข้อมูลสำเร็จ");
+          updateListId(data);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
           fecthlistRetire();
+          modal.value = false;
         });
     })
     .onCancel(() => {})
@@ -236,10 +291,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <!-- <q-td>{{ props.rowIndex + 1 }}</q-td> -->
+              <q-td>{{ props.rowIndex + 1 }}</q-td>
-              <q-td key="order" :props="props">
+              <!-- <q-td key="order" :props="props">
                 {{ props.row.order }}
-              </q-td>
+              </q-td> -->
               <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>
@@ -254,9 +309,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-td>
                 <q-btn
                   outline
+                  :props="props"
                   label="เพิ่ม"
                   class="text-teal-5"
-                  @click="clickAdd"
+                  @click="clickAdd(props)"
                 />
               </q-td>
             </q-tr>

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-tr
-              <q-td key="order" :props="props">{{ props.row.order }}</q-td>
+              :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>

src/modules/06_retirement/router.ts

@@ -32,8 +32,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list/:id",
+    path: "/retirement/listretire/:id/:type",
-    name: "retirement/list/id",
+    name: "retirement/list/id/type",
     component: Listretirement,
     meta: {
       Auth: true,

src/modules/06_retirement/views/Main.vue

@@ -398,7 +398,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 const nextPage = (prop: any) => {
   console.log(prop.id);
 
-  router.push(`/retirement/list/${prop.id}`);
+  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
 };
 
 watch(type, () => {