From 9762b4e6759a399ce76d5a4c723adcbd0d726f00 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 7 May 2025 22:31:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_retire/interface/Main.ts   |  28 ++-
 src/modules/03_retire/store.ts            |  19 +-
 src/modules/03_retire/views/addRetire.vue | 232 +++++++++++++++-------
 3 files changed, 204 insertions(+), 75 deletions(-)

diff --git a/src/modules/03_retire/interface/Main.ts b/src/modules/03_retire/interface/Main.ts
index 7c5a42b..1bb3486 100644
--- a/src/modules/03_retire/interface/Main.ts
+++ b/src/modules/03_retire/interface/Main.ts
@@ -54,15 +54,35 @@ interface MainListResponse {
   isActive: boolean;
 }
 
-interface DataOptions{
-  id:string
-  name:string
+interface DataOptions {
+  id: string;
+  name: string;
 }
+
+interface RowsType {
+  commanders: SeqTypeRow[];
+  approvers: SeqTypeRow[];
+}
+interface SeqTypeRow {
+  seq: number;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  positionName: string;
+  profileId: string;
+  keycloakId: string;
+  approveStatus: string;
+  comment: string;
+  rejectDate: Date | null;
+}
+
 export type {
   QuestionDescription,
   OptionQuestions,
   OptionQuestions2,
   MainList,
   MainListResponse,
-  DataOptions
+  DataOptions,
+  RowsType,
+  SeqTypeRow,
 };
diff --git a/src/modules/03_retire/store.ts b/src/modules/03_retire/store.ts
index c133f06..3c48e6f 100644
--- a/src/modules/03_retire/store.ts
+++ b/src/modules/03_retire/store.ts
@@ -4,9 +4,9 @@ export const useRestDataStore = defineStore("Rest", () => {
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
-        return "รอดำเนินการ";
+        return "ใหม่";
       case "PENDING":
-        return "เลือกตำแหน่งแล้ว";
+        return "รอดำเนินการ";
       case "APPROVE":
         return "อนุมัติ";
       case "REJECT":
@@ -16,7 +16,7 @@ export const useRestDataStore = defineStore("Rest", () => {
       case "WAITING":
         return "รอออกคำสั่ง";
       case "DONE":
-        return "ออกคำสั่งเสร็จแล้ว";
+        return "ออกคำสั่งเสร็จสิ้น";
       case "DONECANCEL":
         return "ยกเลิกการลาออก";
       case "CANCEL":
@@ -28,7 +28,20 @@ export const useRestDataStore = defineStore("Rest", () => {
     }
   };
 
+  function convertStatusText(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "APPROVE":
+        return "อนุญาต";
+      case "REJECT":
+        return "ยับยั้ง";
+    }
+  }
+
+  
   return {
     statusText,
+    convertStatusText
   };
 });
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index e341707..d1b164e 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import type { QForm } from "quasar";
+import type { QForm, QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRestDataStore } from "@/modules/03_retire/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import type { DataOptions } from "@/modules/03_retire/interface/Main";
+import type {
+  DataOptions,
+  RowsType,
+  SeqTypeRow,
+} from "@/modules/03_retire/interface/Main";
 
 import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 import Header from "@/components/DialogHeader.vue";
@@ -18,6 +23,8 @@ import Workflow from "@/components/Workflow/Main.vue";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
+const store = useRestDataStore();
+const { convertStatusText } = store;
 const link = ref<string>("");
 const dataStore = useDataStore();
 const routeName = router.currentRoute.value.name;
@@ -37,6 +44,7 @@ const id = ref<string>(
     ? route.params.id.toString()
     : ""
 ); //เก็บ id path
+const rowsApprover = ref<RowsType>();
 const myform = ref<QForm | null>(null); //form
 const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
 const dateCommand = ref<Date>(new Date()); //วันที่ยื่นขอลาออกจากราชการ
@@ -73,6 +81,69 @@ const dataDetail = ref<any>({});
 
 const modalWorkflow = ref<boolean>(false);
 
+const columnsCommanders = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "approveStatus",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "approveStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็นและเหตุผล",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "rejectDate",
+    align: "left",
+    label: "วันสุดท้ายที่ยับยั้ง",
+    field: "rejectDate",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.rejectDate ? date2Thai(row.rejectDate) : "-"}`;
+    },
+  },
+]);
+
 /**
  * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
  * @param val value ของ status true/false
@@ -159,6 +230,10 @@ async function fectDataresign(id: string) {
 
       noteReason.value = data.reason;
       remark.value = data.remark;
+      rowsApprover.value = {
+        commanders: data.commanders,
+        approvers: data.approvers,
+      };
       files.value = data.docs;
       dataDetail.value = data;
     })
@@ -521,52 +596,56 @@ onMounted(async () => {
                   </div>
                 </div>
                 <q-separator />
-                <div class="row col-12 q-pa-md">
-                  <div class="col-12 row bg-white q-col-gutter-md">
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">สถานะ</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          dataDetail.commanderReject !== null
-                            ? statusOrder(dataDetail.commanderReject)
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          dataDetail.commanderRejectDate !== null
-                            ? date2Thai(dataDetail.commanderRejectDate)
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                    <div class="col-xs-12 row items-start">
-                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                      <div
-                        class="col-12 text-detail"
-                        v-if="dataDetail.commanderReject === false"
-                      >
-                        {{
-                          dataDetail.commanderApproveReason !== null
-                            ? dataDetail.commanderApproveReason
-                            : "-"
-                        }}
-                      </div>
-                      <div
-                        class="col-12 text-detail"
-                        v-if="dataDetail.commanderReject === true"
-                      >
-                        {{
-                          dataDetail.commanderRejectReason !== null
-                            ? dataDetail.commanderRejectReason
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                  </div>
+                <div class="col-12">
+                  <d-table
+                    ref="table"
+                    :columns="columnsCommanders"
+                    :rows="rowsApprover?.commanders ?? []"
+                    row-key="key"
+                    flat
+                    bordered
+                    :paging="true"
+                    dense
+                    :rows-per-page-options="[1, 25, 50, 100]"
+                  >
+                    <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-if="col.name == 'approveStatus'">
+                            {{
+                              props.row.approveStatus
+                                ? convertStatusText(props.row.approveStatus)
+                                : "-"
+                            }}
+                          </div>
+                          <div v-else>
+                            {{ col.value ? col.value : "-" }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
                 </div>
               </q-card>
             </div>
@@ -584,12 +663,28 @@ onMounted(async () => {
                 <q-separator />
                 <div class="row col-12 q-pa-md">
                   <div class="col-12 row bg-white q-col-gutter-md">
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+                      <div class="col-12 text-detail">
+                        {{
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.firstName
+                            ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
+                            : "-"
+                        }}
+                      </div>
+                    </div>
                     <div class="col-xs-6 row items-start">
                       <div class="col-12 text-top">สถานะ</div>
                       <div class="col-12 text-detail">
                         {{
-                          dataDetail.oligarchReject !== null
-                            ? statusOrder(dataDetail.oligarchReject)
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.approveStatus
+                            ? convertStatusText(
+                                rowsApprover?.approvers[0].approveStatus
+                              )
                             : "-"
                         }}
                       </div>
@@ -598,31 +693,22 @@ onMounted(async () => {
                       <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
                       <div class="col-12 text-detail">
                         {{
-                          dataDetail.oligarchRejectDate !== null
-                            ? date2Thai(dataDetail.oligarchRejectDate)
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.rejectDate
+                            ? date2Thai(rowsApprover?.approvers[0].rejectDate)
                             : "-"
                         }}
                       </div>
                     </div>
                     <div class="col-xs-12 row items-start">
                       <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                      <div
-                        class="col-12 text-detail"
-                        v-if="dataDetail.oligarchReject == false"
-                      >
+                      <div class="col-12 text-detail">
                         {{
-                          dataDetail.oligarchApproveReason !== null
-                            ? dataDetail.oligarchApproveReason
-                            : "-"
-                        }}
-                      </div>
-                      <div
-                        class="col-12 text-detail"
-                        v-else-if="dataDetail.oligarchReject == true"
-                      >
-                        {{
-                          dataDetail.oligarchRejectReason !== null
-                            ? dataDetail.oligarchRejectReason
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.comment
+                            ? rowsApprover?.approvers[0].comment
                             : "-"
                         }}
                       </div>
@@ -691,3 +777,13 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 </template>
+<style scoped>
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>