แก้ไข Status เป็น text

src/modules/03_leave/store.ts

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+export const useRestDataStore = defineStore("Rest", () => {
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "PENDING":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
+});

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

@@ -6,9 +6,11 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { useRestDataStore } from "@/modules/03_leave/store";
 import Table from "@/components/Table.vue";
 
+const RestData = useRestDataStore();
+const { statusText } = RestData;
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -21,7 +23,7 @@ const visibleColumns = ref<String[]>([
   "placeLeave",
   "dateStartLeave",
   "dateLeave",
-  "status",
+  "statustext",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -31,7 +33,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:5px;",
+    style: "font-size: 14px; width:5%;",
   },
   {
     name: "placeLeave",
@@ -61,11 +63,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:10%;",
   },
@@ -92,7 +94,8 @@ const fectListleave = async () => {
         placeLeave: e.location,
         dateStartLeave: date2Thai(e.sendDate),
         dateLeave: date2Thai(e.activeDate),
-        status: e.status,
+        status:e.status,
+        statustext:statusText(e.status),
       }));
     })
     .catch((e: any) => {
@@ -145,26 +148,20 @@ const clickAdd = async () => {
                 class="cursor-pointer"
                 @click="router.push(`/leave/` + props.row.id)"
               >
-                <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-if="col.name == 'status'">
-                    <q-icon
-                      size="20px"
-                      v-if="props.row.status == 'PENDING'"
-                      name="mdi-timer-sand"
-                      color="deep-orange"
-                    >
-                      <q-tooltip>รอดำเนินการ</q-tooltip>
-                    </q-icon>
-                    <q-icon size="20px" v-else name="mdi-check" color="teal">
-                      <q-tooltip>เสร็จสิ้น</q-tooltip>
-                    </q-icon>
-                  </div>
-                  <div v-else>
-                    {{ col.value }}
-                  </div>
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="placeLeave" :props="props">
+                  {{ props.row.placeLeave}}
+                </q-td>
+                <q-td key="dateStartLeave" :props="props">
+                  {{ props.row.dateStartLeave}}
+                </q-td>
+                <q-td key="dateStartLeave" :props="props">
+                  {{ props.row.dateStartLeave}}
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
               </q-tr>
             </template>