เลื่อนเงินเดือน

src/modules/13_salary/components/SalaryLists/Dashboard.vue

@@ -1,10 +1,30 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { QTableProps } from "quasar";
 
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
 const store = useSalaryListSDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const props = defineProps({
+  year: Number,
+  snapShot: String,
+  roundFilter: Object,
+});
+
+const gruup = ref<string>("ALL");
+const options = ref([
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "group1", name: "กลุ่ม 1" },
+  { id: "group2", name: "กลุ่ม 2" },
+]);
 
 /** itemsCard*/
 const itemsCardAPR = ref([
@@ -256,8 +276,45 @@ const visibleColumns = ref<string[]>(
     : []
 );
 
-const gruup = ref<string>("ทั้งหมด");
-const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่ม 2"]);
+function fetchDataDashboard() {
+  const formData = {
+    year: props?.year,
+    group: gruup.value,
+    period: props?.roundFilter?.id,
+    snapshot: props?.snapShot,
+  };
+  http
+    .post(config.API.salaryDashboardEmp, formData)
+    .then((res) => {
+      const quota = res.data.result.dashboard;
+      itemsCardAPR.value[0].total = quota.total;
+      itemsCardAPR.value[1].total = quota.fifteenPercent;
+      itemsCardAPR.value[2].total = quota.chosen;
+      itemsCardAPR.value[3].total = quota.remaining;
+      itemsCardAPR.value[4].total = quota.totalBackup;
+
+      itemsCardOCT.value[0].total = quota.currentAmount;
+      itemsCardOCT.value[1].total = quota.sixPercentAmount;
+      itemsCardOCT.value[2].total = quota.spentAmount;
+      itemsCardOCT.value[3].total = quota.sixPercentSpentAmount;
+      itemsCardOCT.value[4].total = quota.useAmount;
+      itemsCardOCT.value[5].total = quota.remainingAmount;
+      itemsCardOCT.value[6].total = quota.totalBackup;
+
+      rows.value = res.data.result.salaryOrg;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+onMounted(() => {
+  fetchDataDashboard();
+});
+
+watch([() => props?.snapShot, () => props.roundFilter], () => {
+  fetchDataDashboard();
+});
 </script>
 
 <template>
@@ -269,7 +326,12 @@ const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่
       v-model="gruup"
       :options="options"
       label="กลุ่ม"
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
       style="width: 150px"
+      @update:model-value="fetchDataDashboard"
     />
   </q-toolbar>
   <div class="row col-12 q-pa-md bg-grey-2">