UI รอบการลงเวลา

2023-10-26 16:42:47 +07:00 · 2023-10-26 16:42:47 +07:00 · 748b8e7aa7
commit 748b8e7aa7
parent 49bbf92b4f
7 changed files with 586 additions and 4 deletions
--- a/src/modules/09_leave/stores/WorkTimeStore.ts
+++ b/src/modules/09_leave/stores/WorkTimeStore.ts
@ -0,0 +1,117 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type { workingTimeDataRowType } from '@/modules/09_leave/interface/request/workTime'
+
+export const useWorkTimeStore = defineStore("WorkTimeStore", () => {
+    const rows = ref<workingTimeDataRowType[]>([])
+
+    const visibleColumns = ref<string[]>([
+        "round",
+        "morning",
+        "morningEnd",
+        "afternoon",
+        "afternoonEnd",
+        "reason",
+        "status",
+    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+
+        {
+            name: "round",
+            align: "left",
+            label: "รอบ",
+            sortable: true,
+            field: "round",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+        {
+            name: "morning",
+            align: "left",
+            label: "รอบเช้า",
+            sortable: true,
+            field: "morning",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "morningEnd",
+            align: "left",
+            label: "รอบออก",
+            sortable: true,
+            field: "morningEnd",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "afternoon",
+            align: "left",
+            label: "รอบบ่าย",
+            sortable: true,
+            field: "afternoon",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "afternoonEnd",
+            align: "left",
+            label: "รอบออก",
+            sortable: true,
+            field: "afternoonEnd",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "reason",
+            align: "left",
+            label: "คำอธิบาย",
+            sortable: true,
+            field: "reason",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "status",
+            align: "center",
+            label: "สถานะการใช้งาน",
+            sortable: false,
+            field: "status",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+    ]);
+    function fecthList(data: workingTimeDataRowType[]) {
+        let datalist: workingTimeDataRowType[] = data.map((e: workingTimeDataRowType) => {
+            return {
+                round:`${e.morning}-${e.afternoonEnd}`,
+                morning: e.morning,
+                morningEnd: e.morningEnd,
+                afternoon: e.afternoon,
+                afternoonEnd: e.afternoonEnd,
+                reason: e.reason === '' ? '-':e.reason,
+                status: e.status,
+            };
+        });
+        rows.value = datalist;
+    }
+
+    return {
+        fecthList,
+        rows,
+        visibleColumns,
+        columns
+    };
+})