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

2024-03-28 17:20:16 +07:00 · 2024-03-28 17:20:16 +07:00 · c8b3863b84
commit c8b3863b84
parent ad09bd908a
1 changed files with 245 additions and 103 deletions
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/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()
-        getData()
-      }).catch((e) => {
-        messageError($q, e)
-      }).finally(() => {
-        hideLoader()
+        closeDialog();
+        getData();
      })
+      .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)
-      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 //ด้านทางการบริหาร
+      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
-
-    }).catch((e) => {
-      messageError($q, e)
-    }).finally(() => {
-      hideLoader()
+      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();
+    });
 }

 /** ดึงข้อมูลประวัติ */
@ -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
-        @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>
@ -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]
-        }}</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>
@ -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) : "-"
-        }}</span>
+                formMain.containDate ? date2Thai(formMain.containDate) : "-"
+              }}</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
-              ? 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>
+              <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>
@ -537,10 +571,10 @@ onMounted(() => {
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{
-            formMain.retireDate
-              ? date2Thai(formMain.retireDate as Date)
-              : "-"
-          }}</span>
+                formMain.retireDate
+                  ? date2Thai(formMain.retireDate as Date)
+                  : "-"
+              }}</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
-                    outlined :model-value="containDate !== null
+                  <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="วัน/เดือน/ปี ที่บรรจุ">
+          "
+                    :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>
@ -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
-                    outlined :model-value="workDate !== null
+                  <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="วัน/เดือน/ปี เริ่มปฎิบัติราชการ">
+          "
+                    :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>
@ -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"
-            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>
@ -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' ||
-          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>