แก้ API ข้อมูลราชการ

src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch,onMounted } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
   MyObjectRef,
@@ -30,21 +30,25 @@ const {
 const profileId = ref<string>(route.params.id.toString())
 /** ตัวแปรข้อมูลหลัก */
 const formMain = reactive<FormMain>({
-  ocId: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", //สังกัด
-  positionId: "ผู้อำนวยการ", //ตำแหน่ง
-  positionLine: "อำนวยการ", //สายงาน
-  positionLevel: "ต้น", //ระดับ
-  numberId: "กทข.1", //เลขที่ตำแหน่ง
-  positionExecutive: "ผู้อำนวยการกอง", //ตำแหน่งทางการบริหาร
+  ocId: "", //สังกัด
+  positionId: "", //ตำแหน่ง
+  positionLine: "", //สายงาน
+  positionLevel: "", //ระดับ
+  numberId: "", //เลขที่ตำแหน่ง
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
   positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
-  positionType: "ทั่วไป", //ประเภท
+  positionType: "", //ประเภท
   positionPathSide: "", //ด้าน/สาขา
 
-  containDate: new Date("2024-01-22T02:43:00"), //วันที่สั่งบรรจุ
-  workDate: new Date("2024-01-22T02:43:00"), //วันที่เริ่มปฏิบัติราชการ
-  reasonSameDate: "เนื่องจากเป็นวันหยุด",
-  retireDate: new Date("2024-01-22T02:43:00"), //วันเกษียณอายุ
-  ageAll: "0 ปี 2 เดือน 10 วัน", //อายุราชการ
+  containDate: null, //วันที่สั่งบรรจุ
+  workDate: null, //วันที่เริ่มปฏิบัติราชการ
+  reasonSameDate: "",
+  retireDate: null, //วันเกษียณอายุ
+  ageAll: {
+    year: 0,
+    month: 0,
+    day: 0
+  }, //อายุราชการ
   absent: 0, //ขาดราชการ
   age: 0, //อายุราชการเกื้อกูล
 });
@@ -341,57 +345,56 @@ function onSubmit() {
   dialogConfirm($q, () => {
     showLoader()
     http
-    .patch(config.API.profileNewGovernmentById(profileId.value),{
-      dateAppoint:containDate.value,
-      dateStart:workDate.value,
-      reasonSameDate:reasonSameDate.value
-    })
-    .then((res)=>{
-      closeDialog()
-      getData()
-    }).catch((e)=>{
-      messageError($q,e)
-    }).finally(()=>{
-      hideLoader()
-    })
+      .patch(config.API.profileNewGovernmentById(profileId.value), {
+        dateAppoint: containDate.value,
+        dateStart: workDate.value,
+        reasonSameDate:reasonSameDate.value
+      })
+      .then((res) => {
+        closeDialog()
+        getData()
+      }).catch((e) => {
+        messageError($q, e)
+      }).finally(() => {
+        hideLoader()
+      })
 
     closeDialog();
   });
 }
 
 /** ดึงข้อมูลราชการ */
-function getData(){
+function getData() {
   showLoader()
   http
-  .get(config.API.profileNewGovernmentById(profileId.value))
-  .then((res)=>{
-    console.log(res.data.result)
-    const data = res.data.result
-    formMain.ocId = data.oc //สังกัด
-    formMain.positionId = data.position //ตำแหน่ง
-    formMain.positionLine = data.positionLine //สายงาน
-    formMain.positionLevel = data.positionLevel //ระดับ
-    formMain.numberId = data.posNo //เลขที่ตำแหน่ง
-    formMain.positionType = data.positionType //ประเภท
-    formMain.positionExecutive = data.positionExecutive //ตำแหน่งทางการ บริหาร
-    formMain.positionPathSide = data.positionPathSide //ด้านสาขา
-    formMain.positionExecutiveSide = data.positionExecutiveSide //ด้านทางการบริหาร
+    .get(config.API.profileNewGovernmentById(profileId.value))
+    .then((res) => {
+      console.log(res.data.result)
+      const data = res.data.result
+      formMain.ocId = data.org //สังกัด
+      formMain.positionId = data.position //ตำแหน่ง
+      formMain.positionLine = data.positionField //สายงาน
+      formMain.positionLevel = data.posLevel //ระดับ
+      formMain.numberId = data.posMasterNo //เลขที่ตำแหน่ง
+      formMain.positionType = data.posType //ประเภท
+      formMain.positionExecutive = data.posExecutive //ตำแหน่งทางการ บริหาร
+      formMain.positionPathSide = data.positionArea //ด้านสาขา
+      formMain.positionExecutiveSide = data.positionExecutiveField //ด้านทางการบริหาร
 
 
-    formMain.containDate = data.dateAppoint
-    formMain.workDate = data.dateStart
-    formMain.reasonSameDate = data.reasonSameDate
-    formMain.retireDate = data.retireDate
-    formMain.ageAll = data.govAge
-    formMain.absent = data.govAgeAbsent
-    formMain.age = data.govAgePlus
+      formMain.containDate = data.dateAppoint
+      formMain.workDate = data.dateStart
+      formMain.reasonSameDate = data.reasonSameDate
+      formMain.retireDate = data.retireDate
+      formMain.ageAll = data.govAge
+      formMain.absent = data.govAgeAbsent
+      formMain.age = data.govAgePlus
 
-
-  }).catch((e)=>{
-    messageError($q,e)
-  }).finally(()=>{
-    hideLoader()
-  })
+    }).catch((e) => {
+      messageError($q, e)
+    }).finally(() => {
+      hideLoader()
+    })
 }
 
 /** ดึงข้อมูลประวัติ */
@@ -443,7 +446,7 @@ watch(
   }
 );
 
-onMounted(()=>{
+onMounted(() => {
   getData()
 })
 </script>
@@ -451,37 +454,21 @@ onMounted(()=>{
   <div class="row">
     <q-space />
     <div class="q-gutter-x-sm">
-      <q-btn
-        color="teal-5"
-        icon="mdi-pencil-outline"
-        flat
-        round
-        @click="openDialogEdit()"
-        ><q-tooltip>แก้ไข</q-tooltip></q-btn
-      >
-      <q-btn
-        color="edit"
-        icon="mdi-history"
-        flat
-        round
-        @click="openDialogHistory()"
-        ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
-      >
+      <q-btn color="teal-5" icon="mdi-pencil-outline" flat round
+        @click="openDialogEdit()"><q-tooltip>แก้ไข</q-tooltip></q-btn>
+      <q-btn color="edit" icon="mdi-history" flat round
+        @click="openDialogHistory()"><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn>
     </div>
   </div>
 
   <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="row"
-          v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)"
-          :key="index"
-        >
+        <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-6 text-weight-medium">{{
-              fieldLabels[field as keyof typeof fieldLabels]
-            }}</span>
+          fieldLabels[field as keyof typeof fieldLabels]
+        }}</span>
           </div>
           <div class="col-12 col-sm-12 col-md-8">
             <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
@@ -489,18 +476,14 @@ onMounted(()=>{
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-        <div
-          class="row"
-          v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)"
-          :key="index"
-        >
+        <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-6 text-weight-medium">{{
-              fieldLabels[field as keyof typeof fieldLabels]
-            }}</span>
+          fieldLabels[field as keyof typeof fieldLabels]
+        }}</span>
           </div>
           <div class="col-12 col-sm-12 col-md-8">
-            <span>{{ formMain[field]  ? formMain[field] : "-" }}</span>
+            <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
           </div>
         </div>
       </div>
@@ -515,8 +498,8 @@ onMounted(()=>{
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-                formMain.containDate ? date2Thai(formMain.containDate) : "-"
-              }}</span>
+          formMain.containDate ? date2Thai(formMain.containDate) : "-"
+        }}</span>
             </div>
           </div>
         </div>
@@ -527,25 +510,23 @@ onMounted(()=>{
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-                formMain.workDate !== null
-                  ? date2Thai(formMain.workDate as Date)
-                  : "-"
-              }}</span>
+            formMain.workDate !== null
+              ? date2Thai(formMain.workDate as Date)
+              : "-"
+          }}</span>
             </div>
           </div>
         </div>
-        <div
-          v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
-          class="col-12 col-sm-6 col-md-6"
-        >
+        <div v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
+          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-6 text-weight-medium">เหตุผลที่วันที่ไม่ตรงกัน</span>
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-                formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
-              }}</span>
+          formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
+        }}</span>
             </div>
           </div>
         </div>
@@ -556,10 +537,10 @@ onMounted(()=>{
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-                formMain.retireDate !== null
-                  ? date2Thai(formMain.retireDate as Date)
-                  : "-"
-              }}</span>
+            formMain.retireDate
+              ? date2Thai(formMain.retireDate as Date)
+              : "-"
+          }}</span>
             </div>
           </div>
         </div>
@@ -571,7 +552,7 @@ onMounted(()=>{
               <span class="text-grey-6 text-weight-medium">อายุราชการ</span>
             </div>
             <div class="col-12 col-sm-12 col-md-8">
-              <span>{{ formMain.ageAll !== "" ? formMain.ageAll : "-" }}</span>
+              <span>{{ formMain.ageAll ? `${formMain.ageAll.day} วัน ${formMain.ageAll.month} เดือน ${formMain.ageAll.year} ปี` : "-" }}</span>
             </div>
           </div>
         </div>
@@ -611,13 +592,7 @@ onMounted(()=>{
         <q-card-section class="q-pa-md">
           <div class="row q-col-gutter-sm">
             <div class="col-6">
-              <datepicker
-                v-model="containDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker v-model="containDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -625,28 +600,15 @@ onMounted(()=>{
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    ref="containDateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    hide-bottom-space
-                    dense
-                    outlined
-                    :model-value="
-                  containDate !== null
-                    ? date2Thai(containDate as Date)
-                    : null
-                "
-                    :rules="[
-                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
-                    ]"
-                    label="วัน/เดือน/ปี ที่บรรจุ"
-                  >
+                  <q-input ref="containDateRef" class="full-width inputgreen cursor-pointer" hide-bottom-space dense
+                    outlined :model-value="containDate !== null
+            ? date2Thai(containDate as Date)
+            : null
+          " :rules="[
+          (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+        ]" label="วัน/เดือน/ปี ที่บรรจุ">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="'color: var(--q-primary)'"
-                      >
+                      <q-icon name="event" class="cursor-pointer" :style="'color: var(--q-primary)'">
                       </q-icon>
                     </template>
                   </q-input>
@@ -654,13 +616,7 @@ onMounted(()=>{
               </datepicker>
             </div>
             <div class="col-6">
-              <datepicker
-                v-model="workDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker v-model="workDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -668,61 +624,31 @@ onMounted(()=>{
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    ref="workDateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    hide-bottom-space
-                    dense
-                    outlined
-                    :model-value="
-                  workDate !== null
-                    ? date2Thai(workDate as Date)
-                    : null
-                "
-                    :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
-                    label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
-                  >
+                  <q-input ref="workDateRef" class="full-width inputgreen cursor-pointer" hide-bottom-space dense
+                    outlined :model-value="workDate !== null
+            ? date2Thai(workDate as Date)
+            : null
+          " :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']" label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="'color: var(--q-primary)'"
-                      >
+                      <q-icon name="event" class="cursor-pointer" :style="'color: var(--q-primary)'">
                       </q-icon>
                     </template>
                   </q-input>
                 </template>
               </datepicker>
             </div>
-            <div
-              class="col-12"
-              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date):false"
-            >
-              <q-input
-                ref="reasonSameDateRef"
-                class="full-width inputgreen cursor-pointer"
-                label="เหตุผลกรณีไม่ตรงกัน"
-                type="textarea"
-                outlined
-                dense
-                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
-                v-model="reasonSameDate"
-              />
+            <div class="col-12"
+              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false">
+              <q-input ref="reasonSameDateRef" class="full-width inputgreen cursor-pointer" label="เหตุผลกรณีไม่ตรงกัน"
+                type="textarea" outlined dense :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                v-model="reasonSameDate" />
             </div>
           </div>
         </q-card-section>
 
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn id="onSubmit" type="submit" dense unelevated label="บันทึก" color="public" class="q-px-md">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
@@ -734,10 +660,7 @@ onMounted(()=>{
   <q-dialog v-model="modalHistory" persistent>
     <q-card style="min-width: 80%">
       <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขข้อมูลราชการ"
-          :close="() => (modalHistory = !modalHistory)"
-        />
+        <DialogHeader tittle="ประวัติแก้ไขข้อมูลราชการ" :close="() => (modalHistory = !modalHistory)" />
       </q-card-section>
 
       <q-separator />
@@ -745,66 +668,24 @@ onMounted(()=>{
       <q-card-section class="q-pa-sm">
         <div class="row q-pb-sm q-gutter-x-sm">
           <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            class="col-2"
-            debounce="300"
-          >
+          <q-input standout dense v-model="filterKeyword" ref="filterRef" outlined placeholder="ค้นหา" class="col-2"
+            debounce="300">
             <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
+              <q-icon v-if="filterKeyword == ''" name="search" @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer" />
+              <q-icon v-if="filterKeyword" name="cancel" @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer" />
             </template>
           </q-input>
-          <q-select
-            v-model="visibleColumnsHistory"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columnsHistory"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-          />
+          <q-select v-model="visibleColumnsHistory" multiple outlined dense options-dense
+            :display-value="$q.lang.table.columns" emit-value map-options :options="columnsHistory" option-value="name"
+            options-cover style="min-width: 150px" />
         </div>
-        <d-table
-          ref="table"
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :filter="filterKeyword"
-          :visible-columns="visibleColumnsHistory"
-        >
+        <d-table ref="table" :columns="columnsHistory" :rows="rowsHistory" flat bordered :paging="true" dense
+          class="custom-header-table" :filter="filterKeyword" :visible-columns="visibleColumnsHistory">
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                style="color: #000000; font-weight: 500"
-              >
+              <q-th v-for="col in props.cols" :key="col.name" :props="props" style="color: #000000; font-weight: 500">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th auto-width></q-th>
@@ -813,15 +694,11 @@ onMounted(()=>{
           <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 == 'dateStart' ||
-                    col.name == 'dateAppoint' ||
-                    col.name == 'createdAt' ||
-                    col.name == 'retireDate' 
-                  "
-                  class="table_ellipsis"
-                >
+                <div v-if="col.name == 'dateStart' ||
+          col.name == 'dateAppoint' ||
+          col.name == 'createdAt' ||
+          col.name == 'retireDate'
+          " class="table_ellipsis">
                   {{ date2Thai(col.value) }}
                 </div>
                 <div v-else>

src/modules/04_registryNew/interface/index/government.ts

@@ -1,23 +1,29 @@
 interface FormMain {
-  ocId:string
-  positionId:string
-  positionLine:string
-  positionLevel:string
-  numberId:string
-  positionExecutive:string
-  positionExecutiveSide:string
-  positionType:string
-  positionPathSide:string
+  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
+  containDate: any
+  workDate: any
+  reasonSameDate: string
+  retireDate: any
+  ageAll: GovAgeForm
+  absent: number
+  age: number
   [key: string]: any;
 }
+interface GovAgeForm {
+  year: number,
+  month: number,
+  day: number
+}
+
 interface MyObjectRef {
   containDate: object | null;
   workDate: object | null;