เหตุผลที่วันที่ไม่ตรงกัน

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

@@ -27,7 +27,7 @@ const {
   hideLoader,
 } = mixin;
 
-const profileId = ref<string>(route.params.id.toString())
+const profileId = ref<string>(route.params.id.toString());
 /** ตัวแปรข้อมูลหลัก */
 const formMain = reactive<FormMain>({
   ocId: "", //สังกัด
@@ -47,7 +47,7 @@ const formMain = reactive<FormMain>({
   ageAll: {
     year: 0,
     month: 0,
-    day: 0
+    day: 0,
   }, //อายุราชการ
   absent: 0, //ขาดราชการ
   age: 0, //อายุราชการเกื้อกูล
@@ -310,11 +310,15 @@ const columnsHistory = ref<QTableProps["columns"]>([
 /** เปิด dialog */
 function openDialogEdit() {
   modalEdit.value = true;
+
+  containDate.value = formMain.containDate ?formMain.containDate:null 
+  workDate.value = formMain.workDate ?formMain.workDate:null 
+  reasonSameDate.value = formMain.reasonSameDate ?formMain.reasonSameDate:null 
 }
 
 function openDialogHistory() {
   modalHistory.value = true;
-  getDataHistory()
+  getDataHistory();
 }
 /** ปิด dialog */
 function closeDialog() {
@@ -343,21 +347,23 @@ function validateForm() {
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    showLoader()
+    showLoader();
     http
       .patch(config.API.profileNewGovernmentById(profileId.value), {
         dateAppoint: containDate.value,
         dateStart: workDate.value,
-        reasonSameDate:reasonSameDate.value
+        reasonSameDate: reasonSameDate.value,
       })
       .then((res) => {
-        closeDialog()
+        closeDialog();
-        getData()
+        getData();
-      }).catch((e) => {
-        messageError($q, e)
-      }).finally(() => {
-        hideLoader()
       })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
 
     closeDialog();
   });
@@ -365,36 +371,36 @@ function onSubmit() {
 
 /** ดึงข้อมูลราชการ */
 function getData() {
-  showLoader()
+  showLoader();
   http
     .get(config.API.profileNewGovernmentById(profileId.value))
     .then((res) => {
-      console.log(res.data.result)
+      console.log(res.data.result);
-      const data = res.data.result
+      const data = res.data.result;
-      formMain.ocId = data.org //สังกัด
+      formMain.ocId = data.org; //สังกัด
-      formMain.positionId = data.position //ตำแหน่ง
+      formMain.positionId = data.position; //ตำแหน่ง
-      formMain.positionLine = data.positionField //สายงาน
+      formMain.positionLine = data.positionField; //สายงาน
-      formMain.positionLevel = data.posLevel //ระดับ
+      formMain.positionLevel = data.posLevel; //ระดับ
-      formMain.numberId = data.posMasterNo //เลขที่ตำแหน่ง
+      formMain.numberId = data.posMasterNo; //เลขที่ตำแหน่ง
-      formMain.positionType = data.posType //ประเภท
+      formMain.positionType = data.posType; //ประเภท
-      formMain.positionExecutive = data.posExecutive //ตำแหน่งทางการ บริหาร
+      formMain.positionExecutive = data.posExecutive; //ตำแหน่งทางการ บริหาร
-      formMain.positionPathSide = data.positionArea //ด้านสาขา
+      formMain.positionPathSide = data.positionArea; //ด้านสาขา
-      formMain.positionExecutiveSide = data.positionExecutiveField //ด้านทางการบริหาร
+      formMain.positionExecutiveSide = data.positionExecutiveField; //ด้านทางการบริหาร
 
-
+      formMain.containDate = data.dateAppoint;
-      formMain.containDate = data.dateAppoint
+      formMain.workDate = data.dateStart;
-      formMain.workDate = data.dateStart
+      formMain.reasonSameDate = data.reasonSameDate;
-      formMain.reasonSameDate = data.reasonSameDate
+      formMain.retireDate = data.retireDate;
-      formMain.retireDate = data.retireDate
+      formMain.ageAll = data.govAge;
-      formMain.ageAll = data.govAge
+      formMain.absent = data.govAgeAbsent;
-      formMain.absent = data.govAgeAbsent
+      formMain.age = data.govAgePlus;
-      formMain.age = data.govAgePlus
-
-    }).catch((e) => {
-      messageError($q, e)
-    }).finally(() => {
-      hideLoader()
     })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** ดึงข้อมูลประวัติ */
@@ -447,28 +453,44 @@ watch(
 );
 
 onMounted(() => {
-  getData()
+  getData();
-})
+});
 </script>
 <template>
   <div class="row">
     <q-space />
     <div class="q-gutter-x-sm">
-      <q-btn color="teal-5" icon="mdi-pencil-outline" flat round
+      <q-btn
-        @click="openDialogEdit()"><q-tooltip>แก้ไข</q-tooltip></q-btn>
+        color="teal-5"
-      <q-btn color="edit" icon="mdi-history" flat round
+        icon="mdi-pencil-outline"
-        @click="openDialogHistory()"><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn>
+        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]
+              fieldLabels[field as keyof typeof fieldLabels]
-        }}</span>
+            }}</span>
           </div>
           <div class="col-12 col-sm-12 col-md-8">
             <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
@@ -476,11 +498,15 @@ 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]
+              fieldLabels[field as keyof typeof fieldLabels]
-        }}</span>
+            }}</span>
           </div>
           <div class="col-12 col-sm-12 col-md-8">
             <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
@@ -494,39 +520,47 @@ onMounted(() => {
         <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-6 text-weight-medium">วันที่สั่งบรรจุ</span>
+              <span class="text-grey-6 text-weight-medium"
+                >วันที่สั่งบรรจุ</span
+              >
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-          formMain.containDate ? date2Thai(formMain.containDate) : "-"
+                formMain.containDate ? date2Thai(formMain.containDate) : "-"
-        }}</span>
+              }}</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-6 text-weight-medium">วันที่เริ่มปฏิบัติราชการ</span>
+              <span class="text-grey-6 text-weight-medium"
+                >วันที่เริ่มปฏิบัติราชการ</span
+              >
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-            formMain.workDate !== null
+                formMain.workDate !== null
-              ? date2Thai(formMain.workDate as Date)
+                  ? date2Thai(formMain.workDate as Date)
-              : "-"
+                  : "-"
-          }}</span>
+              }}</span>
             </div>
           </div>
         </div>
-        <div v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
+        <div
-          class="col-12 col-sm-6 col-md-6">
+          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>
+              <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 : "-"
+                formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
-        }}</span>
+              }}</span>
             </div>
           </div>
         </div>
@@ -537,10 +571,10 @@ onMounted(() => {
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{
-            formMain.retireDate
+                formMain.retireDate
-              ? date2Thai(formMain.retireDate as Date)
+                  ? date2Thai(formMain.retireDate as Date)
-              : "-"
+                  : "-"
-          }}</span>
+              }}</span>
             </div>
           </div>
         </div>
@@ -552,7 +586,11 @@ 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.day} วัน ${formMain.ageAll.month} เดือน ${formMain.ageAll.year} ปี` : "-" }}</span>
+              <span>{{
+                formMain.ageAll
+                  ? `${formMain.ageAll.day} วัน ${formMain.ageAll.month} เดือน ${formMain.ageAll.year} ปี`
+                  : "-"
+              }}</span>
             </div>
           </div>
         </div>
@@ -569,7 +607,9 @@ onMounted(() => {
         <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-6 text-weight-medium">อายุราชการเกื้อกูล</span>
+              <span class="text-grey-6 text-weight-medium"
+                >อายุราชการเกื้อกูล</span
+              >
             </div>
             <div class="col-12 col-sm-12 col-md-8">
               <span>{{ formMain.age ? formMain.age : 0 }}</span>
@@ -592,7 +632,13 @@ 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>
@@ -600,15 +646,27 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input ref="containDateRef" class="full-width inputgreen cursor-pointer" hide-bottom-space dense
+                  <q-input
-                    outlined :model-value="containDate !== null
+                    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 || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+                    :rules="[
-        ]" label="วัน/เดือน/ปี ที่บรรจุ">
+                      (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>
@@ -616,7 +674,13 @@ 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>
@@ -624,31 +688,60 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input ref="workDateRef" class="full-width inputgreen cursor-pointer" hide-bottom-space dense
+                  <q-input
-                    outlined :model-value="workDate !== null
+                    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="วัน/เดือน/ปี เริ่มปฎิบัติราชการ">
+          "
+                    :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"
+            <div
-              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false">
+              class="col-12"
-              <q-input ref="reasonSameDateRef" class="full-width inputgreen cursor-pointer" label="เหตุผลกรณีไม่ตรงกัน"
+              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
-                type="textarea" outlined dense :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+            >
-                v-model="reasonSameDate" />
+              <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>
@@ -660,7 +753,10 @@ 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 />
@@ -668,24 +764,66 @@ 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"
+          <q-input
-            debounce="300">
+            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 = ''"
+              <q-icon
-                class="cursor-pointer" />
+                v-if="filterKeyword == ''"
-              <q-icon v-if="filterKeyword" name="cancel" @click.stop.prevent="filterKeyword = ''"
+                name="search"
-                class="cursor-pointer" />
+                @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
+          <q-select
-            :display-value="$q.lang.table.columns" emit-value map-options :options="columnsHistory" option-value="name"
+            v-model="visibleColumnsHistory"
-            options-cover style="min-width: 150px" />
+            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
+        <d-table
-          class="custom-header-table" :filter="filterKeyword" :visible-columns="visibleColumnsHistory">
+          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>
@@ -694,11 +832,15 @@ 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' ||
+                <div
-          col.name == 'dateAppoint' ||
+                  v-if="
-          col.name == 'createdAt' ||
+                    col.name == 'dateStart' ||
-          col.name == 'retireDate'
+                    col.name == 'dateAppoint' ||
-          " class="table_ellipsis">
+                    col.name == 'createdAt' ||
+                    col.name == 'retireDate'
+                  "
+                  class="table_ellipsis"
+                >
                   {{ date2Thai(col.value) }}
                 </div>
                 <div v-else>