dasborad เลื่อนค่าจ้างลูกจ้างประจำ

src/api/13_salary/api.salary.ts

@@ -71,6 +71,8 @@ export default {
   salaryListPeriodProfileByIdEmp: (id: string) =>
     `${salaryPeriodEmp}/profile/${id}`,
 
+  salaryDashboardEmp: `${salaryPeriodEmp}/summary/all`,
+
   salaryPeriodStatusEmp: (type: string, periodId: string, rootId: string) =>
     `${salaryPeriodEmp}/${type}/approve/${periodId}/${rootId}`,
   salaryPeriodStatusCommentEmp: (

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

@@ -1,10 +1,24 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive, computed } from "vue";
+import { ref, onMounted, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { QTableProps } from "quasar";
 
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const props = defineProps({
+  year: Number,
+  snapShot: String,
+  roundFilter: Object,
+});
 
 /** itemsCard*/
 const itemsCardAPR = ref([
@@ -255,48 +269,75 @@ const visibleColumns = ref<string[]>(
     : []
 );
 
-const isLoad = ref<boolean>(true);
+function fetchDataDashboard() {
-watch(
+  const formData = {
-  () => store.roundMainCode,
+    year: props?.year,
-  () => {
+    group: "",
-    isLoad.value = false;
+    period: props?.roundFilter?.id,
-    setTimeout(() => {
+    snapshot: props?.snapShot,
-      isLoad.value = true;
+  };
-    }, 200);
+  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>
   <!-- Card โควต้า -->
 
-  <div v-if="isLoad">
+  <div class="row col-12 q-pa-md bg-grey-2">
-    <div class="row col-12 q-pa-md bg-grey-2">
+    <div class="row col-12 q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
+      <div
-        <div
+        v-for="(item, index) in itemsCard"
-          v-for="(item, index) in itemsCard"
+        :key="index"
-          :key="index"
+        :class="
-          :class="
+          store.roundMainCode === 'APR'
-            store.roundMainCode === 'APR'
+            ? 'col-6 col-sm-4 col-md-3 col-lg-2'
-              ? 'col-6 col-sm-4 col-md-3 col-lg-2'
+            : 'col-3'
-              : 'col-3'
+        "
-          "
+      >
-        >
+        <q-card>
-          <q-card>
+          <q-card-section>
-            <q-card-section>
+            <div class="row items-center no-wrap">
-              <div class="row items-center no-wrap">
+              <div class="col">
-                <div class="col">
+                <div class="">{{ item.lable }}</div>
-                  <div class="">{{ item.lable }}</div>
-                </div>
-
-                <div :class="`text-${item.color} text-bold`">
-                  {{ item.total ? item.total.toLocaleString() : 0 }}
-                </div>
               </div>
-            </q-card-section>
+
-          </q-card>
+              <div :class="`text-${item.color} text-bold`">
-        </div>
+                {{ item.total ? item.total.toLocaleString() : 0 }}
-        <!-- <div class="row col justify-end self-center">
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <!-- <div class="row col justify-end self-center">
           <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
             <q-list>
               <q-item
@@ -317,40 +358,39 @@ watch(
             </q-list>
           </q-btn-dropdown>
         </div> -->
-      </div>
-    </div>
-    <q-separator />
-    <div class="col-12 q-pa-md">
-      <d-table
-        for="table"
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        row-key="id"
-        flat
-        bordered
-        dense
-        class="custom-header-table"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div class="table_ellipsis">
-                {{ col.value ? col.value : "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
     </div>
   </div>
+  <q-separator />
+  <div class="col-12 q-pa-md">
+    <d-table
+      for="table"
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      dense
+      class="custom-header-table"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
 </template>
 
 <style scoped></style>

src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue

@@ -137,9 +137,11 @@ function fetchListPerson() {
  * @param data ข้อมูลคนที่เพิ่ม
  */
 function onClickAddPerson(data: DataPerson) {
+  data.rank = undefined;
   const body: DataPersonReq = {
     id: store.groupId,
     type: store.tabType,
+
     ...data,
   };
 

src/modules/13_salary/interface/response/SalaryList.ts

@@ -74,6 +74,7 @@ interface DataPerson {
   prefix: string;
   root: string;
   rootId: string;
+  rank: string | undefined;
 }
 
 interface DataPeriod {

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

@@ -437,7 +437,11 @@ onMounted(() => {
       </q-card>
     </div>
     <div v-else>
-      <PageDashBoard />
+      <PageDashBoard
+        :year="year"
+        :snapShot="snapFilter"
+        :roundFilter="roundFilter"
+      />
     </div>
   </q-card>