รายการตารางสถิติการลา

src/modules/05_leave/componenst/Table.vue

@@ -242,7 +242,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .icon-color {
   color: #4154b3;
 }

src/modules/05_leave/views/Main.vue

@@ -20,48 +20,25 @@ const { showLoader, hideLoader, messageError } = mixin;
 const router = useRouter();
 const $q = useQuasar();
 
-const itemPie = ref([
+const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
-  {
+
-    text: "ลาป่วย",
+const itemPie = ref<any>([]);
-    color: "text-pink-5",
-    value: 90,
-    all: "10",
-    use: "9",
-    remain: "1",
-  },
-  {
-    text: "ลากิจส่วนตัว",
-    color: "text-deep-purple",
-    value: 80,
-    all: "12",
-    use: "9",
-    remain: "3",
-  },
-  {
-    text: "ลาพักผ่อน",
-    color: "text-indigo",
-    value: 78,
-    all: "20",
-    use: "17",
-    remain: "3",
-  },
-]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "id",
+    name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: true,
-    field: "id",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:5%;",
   },
   {
-    name: "name",
+    name: "leaveTypeName",
     align: "left",
     label: "ประเภทการลา",
     sortable: true,
-    field: "name",
+    field: "leaveTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:15%;",
   },
@@ -129,18 +106,46 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; width:15%;",
   },
 ]);
+const row = ref<any>([]);
 const pagination = ref({ rowsPerPage: 10 });
 
-const modalStatsTable = ref<boolean>(false);
-
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-  modalStatsTable.value = true;
+  // modalStatsTable.value = true;
   showLoader();
   await http
     .get(config.API.leaveStats())
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      console.log(data);
+      const stat = filterLeaveType.value.map((e) => {
+        return data
+          .filter((el: any) => el.leaveTypeName === e)
+          .map((el: any) => ({
+            text: el.leaveTypeName,
+            color:
+              el.leaveTypeName === "ลาป่วย"
+                ? "text-pink-5"
+                : el.leaveTypeName === "ลากิจส่วนตัว"
+                ? "text-deep-purple"
+                : "text-indigo",
+            value: el.leavePercent,
+            all: el.leaveLimit,
+            use: el.leaveCountApprove,
+            remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
+          }));
+      });
+      stat.forEach((item) => itemPie.value.push(...item));
+      row.value = data.map((e: any) => ({
+        leaveTypeName: e.leaveTypeName,
+        leaveLimit: e.leaveLimit,
+        leaveExtend: e.leaveExtend,
+        leavePercent: e.leavePercent,
+        leaveCountSend: e.leaveCountSend,
+        leaveCountApprove: e.leaveCountApprove,
+        leaveCountReject: e.leaveCountReject,
+        leaveCountDelete: e.leaveCountDelete,
+      }));
     })
     .catch((err) => {
       messageError($q, err);
@@ -150,13 +155,18 @@ async function fetchStatsTable() {
     });
 }
 
+const modalStatsTable = ref<boolean>(false);
+function onClickOpenStat() {
+  modalStatsTable.value = true;
+}
+
 /** function redirectTo  ยื่นใบลา*/
 async function addAbsence() {
   router.push(`/leave/add`);
 }
 
 onMounted(async () => {
-  // await fetchStatsTable()
+  await fetchStatsTable();
 });
 </script>
 
@@ -190,7 +200,7 @@ onMounted(async () => {
               flat
               class="text-blue"
               icon="mdi-chart-line-variant"
-              @click="fetchStatsTable"
+              @click="onClickOpenStat"
               label="ตารางสถิติการลา"
             />
           </q-card>
@@ -342,21 +352,80 @@ onMounted(async () => {
           flat
           bordered
           dense
-          :rows="leaveStore.options"
+          :rows="row"
           :columns="columns"
-          row-key="name"
+          row-key="leaveTypeName"
-          class="col-12"
+          class="custom-table2 col-12"
           hide-bottom
           v-model:pagination="pagination"
-        />
+        >
+          <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 v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr></template
+          ></q-table
+        >
       </q-card-section>
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .borderTop {
   border-top: 1px solid #ededed;
   border-bottom: 1px solid #ededed;
 }
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
 </style>