แก้ไข statusText

src/modules/02_transfer/store.ts

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia"
+
+export const useTransferDataStore = defineStore("transfer", () => {
+	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/02_transfer/views/Main.vue

@@ -4,9 +4,12 @@ import { ref, onMounted } from "vue"
 import { useQuasar } from "quasar"
 import { useRouter } from "vue-router"
 import { useCounterMixin } from "@/stores/mixin"
+import { useTransferDataStore } from "@/modules/02_transfer/store"
 import http from "@/plugins/http"
 import config from "@/app.config"
 
+const transferData = useTransferDataStore()
+const { statusText } = transferData
 const router = useRouter()
 const $q = useQuasar()
 const mixin = useCounterMixin()
@@ -22,7 +25,7 @@ const rows = ref<any>([
 const initialPagination = ref({
 	rowsPerPage: 0,
 })
-const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "status"])
+const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "statustext"])
 
 const columns = ref<QTableProps["columns"]>([
 	{
@@ -89,11 +92,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%;",
 	},
@@ -117,6 +120,7 @@ const fecthListTransfer = async () => {
 				id: e.id,
 				date: date2Thai(e.createdAt),
 				status: e.status,
+				statustext: statusText(e.status),
 				position: e.organizationPositionOld,
 				noPos: e.posNo,
 				level: e.positionLevel,
@@ -165,21 +169,29 @@ const clickBack = () => {
 					>
 						<template #columns="props">
 							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/` + 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 == 'WAITTING'" 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="date" :props="props">
+									{{ props.row.date }}
+								</q-td>
+								<q-td key="position" :props="props">
+									{{ props.row.position }}
+								</q-td>
+								<q-td key="noPos" :props="props">
+									{{ props.row.noPos }}
+								</q-td>
+								<q-td key="level" :props="props">
+									{{ props.row.level }}
+								</q-td>
+								<q-td key="salary" :props="props">
+									{{ props.row.salary }}
+								</q-td>
+								<q-td key="transfer" :props="props">
+									{{ props.row.transfer }}
+								</q-td>
+								<q-td key="statustext" :props="props">
+									{{ props.row.statustext }}
 								</q-td>
 							</q-tr>
 						</template>