From 6666fe7c20fb72140b3e589f33cb9ca52171d330 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 12 Mar 2024 11:47:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/GovernmentInformation/01_Info.vue  | 161 +++++-------------
 .../interface/index/government.ts             |  68 +++++---
 2 files changed, 90 insertions(+), 139 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index 7d5f38aa3..54c0ca15f 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -4,6 +4,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type {
   MyObjectRef,
   RequestItemsHistoryObject,
+  FormMain,
 } from "@/modules/04_registryNew/interface/index/government";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
@@ -27,7 +28,7 @@ const {
 } = mixin;
 
 /** ตัวแปรข้อมูลหลัก */
-const formMain = reactive<any>({
+const formMain = reactive<FormMain>({
   ocId: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", //สังกัด
   positionId: "ผู้อำนวยการ", //ตำแหน่ง
   positionLine: "อำนวยการ", //สายงาน
@@ -38,10 +39,10 @@ const formMain = reactive<any>({
   positionType: "ทั่วไป", //ประเภท
   positionPathSide: "", //ด้าน/สาขา
 
-  containDate: "2024-01-22T02:43:00", //วันที่สั่งบรรจุ
-  workDate: "2024-01-22T02:43:00", //วันที่เริ่มปฏิบัติราชการ
+  containDate: new Date("2024-01-22T02:43:00"), //วันที่สั่งบรรจุ
+  workDate: new Date("2024-01-22T02:43:00"), //วันที่เริ่มปฏิบัติราชการ
   reasonSameDate: "เนื่องจากเป็นวันหยุด",
-  retireDate: "2024-01-22T02:43:00", //วันเกษียณอายุ
+  retireDate: new Date("2024-01-22T02:43:00"), //วันเกษียณอายุ
   ageAll: "0 ปี 2 เดือน 10 วัน", //อายุราชการ
   absent: 0, //ขาดราชการ
   age: 0, //อายุราชการเกื้อกูล
@@ -383,11 +384,23 @@ watch(
   () => modalHistory.value,
   (isOpen) => {
     if (isOpen === true) {
-      filterKeyword.value = ''
+      filterKeyword.value = "";
       getDataHistory();
     }
   }
 );
+
+const fieldLabels = {
+  ocId: "สังกัด",
+  positionId: "ตำแหน่ง",
+  numberId: "เลขที่ตำแหน่ง",
+  positionExecutive: "ตำแหน่งทางการบริหาร",
+  positionExecutiveSide: "ด้านตำแหน่งทางการบริหาร",
+  positionLine: "สายงาน",
+  positionLevel: "ระดับ",
+  positionType: "ประเภท",
+  positionPathSide: "ด้าน/สาขา",
+};
 </script>
 <template>
   <div class="row">
@@ -413,121 +426,37 @@ watch(
     </div>
   </div>
 
-  <q-card bordered class="q-pa-md">
+  <q-card bordered class="bg-grey-1 q-pa-md">
     <div class="row q-col-gutter-md">
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">สังกัด</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{ formMain.ocId !== "" ? formMain.ocId : "-" }}</span>
-            </div>
+        <div
+          class="row"
+          v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)"
+          :key="index"
+        >
+          <div class="col-12 col-sm-12 col-md-4">
+            <span class="text-grey-7">{{
+              fieldLabels[field as keyof typeof fieldLabels]
+            }}</span>
           </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">ตำแหน่ง</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionId !== "" ? formMain.positionId : "-"
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">เลขที่ตำแหน่ง</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.numberId !== "" ? formMain.numberId : "-"
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">ตำแหน่งทางการบริหาร</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionExecutive !== ""
-                  ? formMain.positionExecutive
-                  : "-"
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">ด้านตำแหน่งทางการบริหาร</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionExecutiveSide !== ""
-                  ? formMain.positionExecutiveSide
-                  : "-"
-              }}</span>
-            </div>
+          <div class="col-12 col-sm-12 col-md-8">
+            <span>{{ formMain[field] !== "" ? formMain[field] : "-" }}</span>
           </div>
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">สายงาน</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionLine !== "" ? formMain.positionLine : "-"
-              }}</span>
-            </div>
+        <div
+          class="row"
+          v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)"
+          :key="index"
+        >
+          <div class="col-12 col-sm-12 col-md-4">
+            <span class="text-grey-7">{{
+              fieldLabels[field as keyof typeof fieldLabels]
+            }}</span>
           </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">ระดับ</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionLevel !== "" ? formMain.positionLevel : "-"
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">ประเภท</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionType !== "" ? formMain.positionType : "-"
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-6">
-          <div class="row">
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-7">ด้าน/สาขา</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{
-                formMain.positionPathSide !== ""
-                  ? formMain.positionPathSide
-                  : "-"
-              }}</span>
-            </div>
+          <div class="col-12 col-sm-12 col-md-8">
+            <span>{{ formMain[field] !== "" ? formMain[field] : "-" }}</span>
           </div>
         </div>
       </div>
@@ -554,7 +483,9 @@ watch(
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-                formMain.workDate !== "" ? date2Thai(formMain.workDate) : "-"
+                formMain.workDate !== null
+                  ? date2Thai(formMain.workDate as Date)
+                  : "-"
               }}</span>
             </div>
           </div>
@@ -581,8 +512,8 @@ watch(
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-                formMain.retireDate !== ""
-                  ? date2Thai(formMain.retireDate)
+                formMain.retireDate !== null
+                  ? date2Thai(formMain.retireDate as Date)
                   : "-"
               }}</span>
             </div>
diff --git a/src/modules/04_registryNew/interface/index/government.ts b/src/modules/04_registryNew/interface/index/government.ts
index df450a86c..423747f30 100644
--- a/src/modules/04_registryNew/interface/index/government.ts
+++ b/src/modules/04_registryNew/interface/index/government.ts
@@ -1,28 +1,48 @@
+interface FormMain {
+  ocId:string
+  positionId:string
+  positionLine:string
+  positionLevel:string
+  numberId:string
+  positionExecutive:string
+  positionExecutiveSide:string
+  positionType:string
+  positionPathSide:string
+
+  containDate:Date
+  workDate:Date
+  reasonSameDate:string
+  retireDate:Date
+  ageAll:string
+  absent:number
+  age:number
+  [key: string]: any;
+}
 interface MyObjectRef {
-    containDate: object | null;
-    workDate: object | null;
-    reasonSameDate: object | null;
-    [key: string]: any;
+  containDate: object | null;
+  workDate: object | null;
+  reasonSameDate: object | null;
+  [key: string]: any;
 }
 
 interface RequestItemsHistoryObject {
-    oc: string | null;
-    position: string | null;
-    positionPathSide: string | null;
-    posNo: string | null;
-    positionLine: string | null;
-    positionType: string | null;
-    positionLevel: string | null;
-    positionExecutive: string | null;
-    positionExecutiveSide: string | null;
-    dateAppoint: Date;
-    dateStart: Date;
-    retireDate: string | null;
-    govAge: string | null;
-    govAgeAbsent: string | null;
-    govAgePlus: string | null;
-    reasonSameDate: string | null;
-    createdFullName: string | null;
-    createdAt: Date;
-  }
-export type { MyObjectRef,RequestItemsHistoryObject };
+  oc: string | null;
+  position: string | null;
+  positionPathSide: string | null;
+  posNo: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  dateAppoint: Date;
+  dateStart: Date;
+  retireDate: string | null;
+  govAge: string | null;
+  govAgeAbsent: string | null;
+  govAgePlus: string | null;
+  reasonSameDate: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+export type { MyObjectRef, RequestItemsHistoryObject, FormMain };