API รายการผังบัญชีเงินเดือน

src/modules/13_salary/views/salaryChart.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,7 +22,14 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { date2Thai, dialogRemove } = useCounterMixin();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
 
 /** modalDialog*/
 const modalDialogFormMain = ref<boolean>(false);
@@ -99,7 +108,7 @@ const itemMenu = ref<ItemsMenu[]>([
     label: "คัดลอก",
     icon: "content_copy",
     color: "blue-6",
-    type: "coppy",
+    type: "copy",
   },
   {
     label: "ลบ",
@@ -112,10 +121,10 @@ const itemMenu = ref<ItemsMenu[]>([
 /** queryString*/
 const formQuery = reactive<FormQuerySalary>({
   page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
+  pageSize: 2, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
-const totalRow = ref<number>(1);
+const maxPage = ref<number>(1);
 
 /**
  * function updatePagination
@@ -127,32 +136,26 @@ function updatePagination(newPagination: NewPagination) {
 }
 
 async function fetchListSalaly() {
-  const data = [
-    {
-      id: "1",
-      salaryType: "OFFICER", //ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
-      posType: "ทั่วไป", //ระดับของตำแหน่ง
-      posLevel: "ชำนาญการ", //ประเภทของตำแหน่ง
-      isActive: true, //สถานะการใช้งาน
-      date: new Date(), //ให้ไว้ ณ วันที่
-      startDate: new Date(), //วันที่มีผลบังคับใช้
-      endDate: new Date(), //วันที่สิ้นสุดบังคับใช้
-      detail: "", //คำอธิบาย
-    },
-    {
-      id: "2",
-      salaryType: "EMPLOYEE", //ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
-      posType: "ทั่วไป", //ระดับของตำแหน่ง
-      posLevel: "ชำนาญการ", //ประเภทของตำแหน่ง
-      isActive: false, //สถานะการใช้งาน
-      date: new Date(), //ให้ไว้ ณ วันที่
-      startDate: new Date(), //วันที่มีผลบังคับใช้
-      endDate: new Date(), //วันที่สิ้นสุดบังคับใช้
-      detail: "", //คำอธิบาย
-    },
-  ];
-
-  rows.value = data;
+  showLoader();
+  const page = await formQuery.page.toString();
+  const pageSize = await formQuery.pageSize.toString();
+  const keyword = await formQuery.keyword.toString();
+  await http
+    .get(
+      config.API.salaryChart +
+        `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      const data = res.data.result.data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 const typeAction = ref<string>("");
@@ -169,19 +172,47 @@ async function onClickSalaryRate(id: string) {
   router.push(`/salary/rate/${id}`);
 }
 
-async function onClickCoppy() {}
+async function onClickCoppy(id: string) {
+  await http
+    .post(config.API.salaryChartCopy, { id: id })
+    .then(() => {
+      success($q, "คัดลอกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      fetchListSalaly();
+    });
+}
 
-async function onClickDelete() {
-  dialogRemove($q, () => {});
+async function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.salaryChartByid(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        fetchListSalaly();
+      });
+  });
 }
 
 onMounted(async () => {
   await fetchListSalaly();
 });
 
-watch([() => formQuery.page, () => formQuery.pageSize], () => {
-  console.log(formQuery.page, formQuery.pageSize);
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
+  await fetchListSalaly();
 });
+
+async function filterFn(page: number) {
+  page !== 1 ? (formQuery.page = 1) : await fetchListSalaly();
+}
 </script>
 
 <template>
@@ -205,6 +236,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
         outlined
         v-model="formQuery.keyword"
         placeholder="ค้นหา"
+        @keydown.enter.prevent="filterFn(formQuery.page)"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -238,7 +270,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
         bordered
         :paging="true"
         dense
-        :rows-per-page-options="[10, 25, 50, 100]"
+        :rows-per-page-options="[2, 10, 25, 50, 100]"
         @update:pagination="updatePagination"
         :visible-columns="visibleColumns"
       >
@@ -295,10 +327,10 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
                           ? onClickSalary('edit', props.row)
                           : item.type === 'salaryRate'
                           ? onClickSalaryRate(props.row.id)
-                          : item.type === 'coppy'
-                          ? onClickCoppy()
+                          : item.type === 'copy'
+                          ? onClickCoppy(props.row.id)
                           : item.type === 'delete'
-                          ? onClickDelete()
+                          ? onClickDelete(props.row.id)
                           : null
                       "
                     >
@@ -324,7 +356,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
             v-model="formQuery.page"
             active-color="primary"
             color="dark"
-            :max="totalRow"
+            :max="maxPage"
             size="sm"
             boundary-links
             direction-links
@@ -338,6 +370,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
     v-model:modal="modalDialogFormMain"
     :typeAction="typeAction"
     :data="dataRow"
+    :fetchData="fetchListSalaly"
   />
 </template>