ทะเบียนประวัติ: ปฏิบัติราชการพิเศษ API

src/api/registry/api.registry.ts

@@ -92,12 +92,21 @@ profileNewFamilyByFamilyId: (familyId: string) =>
 profileNewFamilyeHisByFamilyId: (familyId: string) =>
 `${registryNew}family/history/${familyId}`,
 
-    // ข้อมูลครอบครัว
+    // วินัย
-    profileNewDiscipline: `${registryNew}discipline`,
+profileNewDiscipline: `${registryNew}discipline`,
-    profileNewDisciplineByProfileId: (profileId: string) =>
+profileNewDisciplineByProfileId: (profileId: string) =>
-    `${registryNew}discipline/${profileId}`,
+`${registryNew}discipline/${profileId}`,
-    profileNewDisciplineByDisciplineId: (disciplineId: string) =>
+profileNewDisciplineByDisciplineId: (disciplineId: string) =>
-    `${registryNew}discipline/${disciplineId}`,
+`${registryNew}discipline/${disciplineId}`,
-    profileNewDisciplineHisByDisciplineId: (disciplineId: string) =>
+profileNewDisciplineHisByDisciplineId: (disciplineId: string) =>
-    `${registryNew}discipline/history/${disciplineId}`,
+`${registryNew}discipline/history/${disciplineId}`,
+
+    // ปฏิบัติราชการพิเศษ
+profileNewDuty: `${registryNew}duty`,
+profileNewDutyByProfileId: (profileId: string) =>
+`${registryNew}duty/${profileId}`,
+profileNewDutyByDutyId: (dutyId: string) =>
+`${registryNew}duty/${dutyId}`,
+profileNewDutyHisByDutyId: (dutyId: string) =>
+`${registryNew}duty/history/${dutyId}`,
 };

src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue

@@ -4,7 +4,6 @@ import { useQuasar, type QTableProps } from "quasar";
 import type {
   FormFilter,
   RequestItemsObject,
-  MyObjectRef,
 } from "@/modules/04_registryNew/interface/index/performSpecialWork";
 
 import http from "@/plugins/http";
@@ -29,6 +28,7 @@ const {
   showLoader,
   hideLoader,
   success,
+  dialogRemove,
 } = mixin;
 
 const modal = ref<boolean>(false);
@@ -36,24 +36,21 @@ const edit = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
 
 const id = ref<string>("");
-const dateStart = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
-const detail = ref<string>();
-const reference = ref<string>();
-const refCommandNo = ref<string>();
-const refCommandDate = ref<Date | null>(null);
 
 const dateStartRef = ref<object | null>(null);
 const dateEndRef = ref<object | null>(null);
 const detailRef = ref<object | null>(null);
 const referenceRef = ref<object | null>(null);
 
-const objectRef: MyObjectRef = {
+const dutyData = reactive<RequestItemsObject>({
-  dateStart: dateStartRef,
+  profileId: profileId.value,
-  dateEnd: dateEndRef,
+  dateStart: new Date(),
-  detail: detailRef,
+  dateEnd: null,
-  reference: referenceRef,
+  detail: "",
-};
+  reference: "",
+  refCommandNo: "",
+  refCommandDate: null,
+});
 
 const rows = ref<RequestItemsObject[]>([]);
 const filterKeyword = ref<string>("");
@@ -92,6 +89,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -103,6 +101,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateEnd",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -147,6 +146,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -157,15 +157,17 @@ function openDialogAdd() {
   modal.value = true;
 }
 
+/** กดแก้ไข  */
 function openDialogEdit(props: RequestItemsObject) {
   modal.value = true;
-  id.value = props.id;
+  edit.value = true;
-  dateStart.value = props.dateStart;
+  id.value = props.id ? props.id : "";
-  dateEnd.value = props.dateEnd;
+  dutyData.dateStart = props.dateStart;
-  detail.value = props.detail;
+  dutyData.dateEnd = props.dateEnd;
-  reference.value = props.reference;
+  dutyData.detail = props.detail;
-  refCommandNo.value = props.refCommandNo;
+  dutyData.reference = props.reference;
-  refCommandDate.value = props.refCommandDate;
+  dutyData.refCommandNo = props.refCommandNo;
+  dutyData.refCommandDate = props.refCommandDate;
 }
 
 /**
@@ -182,126 +184,102 @@ function closeDialog() {
   modal.value = false;
   edit.value = false;
 
-  dateStart.value = null;
+  dutyData.dateStart = new Date();
-  dateEnd.value = null;
+  dutyData.dateEnd = null;
-  detail.value = "";
+  dutyData.detail = "";
-  reference.value = "";
+  dutyData.reference = "";
-  refCommandNo.value = "";
+  dutyData.refCommandNo = "";
-  refCommandDate.value = null;
+  dutyData.refCommandDate = null;
 }
 
-function getData() {
+/** fetch ข้อมูล */
-  // showLoader()
+async function fetchData(id: string) {
-  // http
+  showLoader();
-  // .get(config.API.??)
+  await http
-  // .then((res)=>{
+    .get(config.API.profileNewDutyByProfileId(id))
+    .then(async (res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
-  // })
+/** เพิ่มข้อมูล */
-  // .catch((e)=>{
-  //   messageError($q,e)
-  // }).finally(()=>{
 
-  // })
+async function addData() {
-  const data: RequestItemsObject[] = [
+  await http
-    {
+    .post(config.API.profileNewDuty, dutyData)
-      dateStart: new Date("2024-02-15T00:00:00"),
+    .then(() => {
-      dateEnd: new Date("2024-02-15T00:00:00"),
+      fetchData(profileId.value);
-      detail: "111",
+      success($q, "บันทึกข้อมูลสำเร็จ");
-      reference: "111",
+    })
-      refCommandNo: "",
+    .catch((err) => {
-      refCommandDate: null,
+      messageError($q, err);
-      id: "08dc2e13-1c3f-4261-8168-30018e5d953c",
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** แก้ไขข้อมูล */
+
+async function editData(idData: string) {
+  await http
+    .patch(config.API.profileNewDutyByDutyId(idData), {
+      ...dutyData,
+      profileId: undefined,
+    })
+    .then(() => {
+      fetchData(profileId.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ลบข้อมูล */
+
+function deleteData(idData: string) {
+  dialogRemove($q, () =>
+    http
+      .delete(config.API.profileNewDutyByDutyId(idData))
+      .then(() => {
+        fetchData(profileId.value);
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      })
+  );
+}
+
+/** กด Submit */
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      edit.value ? editData(id.value) : addData();
+      closeDialog();
     },
-  ];
+    "ยืนยันการบันทึกข้อมูล",
-
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  rows.value = data;
+  );
 }
 
-/** validate check*/
+onMounted(async () => {
-function validateForm() {
+  await fetchData(profileId.value);
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if ((edit.value = false)) {
-      saveData();
-    } else {
-      editData();
-    }
-  }
-}
-
-/**
- * บันทึกเพิ่มข้อมูล
- */
-function saveData() {
-  // showLoader();
-  //   await http
-  //     .post(config.API.profileDutyId(profileId.value), {
-  //       id: id.value,
-  //       dateStart: dateToISO(dateStart.value),
-  //       dateEnd: dateToISO(dateEnd.value),
-  //       detail: detail.value,
-  //       reference: reference.value,
-  //       refCommandNo: refCommandNo.value,
-  //       refCommandDate:
-  //         refCommandDate.value == null
-  //           ? null
-  //           : dateToISO(refCommandDate.value as Date),
-  //     })
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //       modal.value = false;
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       await fetchData();
-  //     });
-  closeDialog();
-}
-
-/**
- * บันทึกแก้ไขข้อมูล
- */
-const editData = async () => {
-  // showLoader();
-  // await http
-  //   .put(config.API.profileDutyId(id.value), {
-  //     id: id.value,
-  //     dateStart: dateToISO(dateStart.value),
-  //     dateEnd: dateToISO(dateEnd.value),
-  //     detail: detail.value,
-  //     reference: reference.value,
-  //     refCommandNo: refCommandNo.value,
-  //     refCommandDate:
-  //       refCommandDate.value == null
-  //         ? null
-  //         : dateToISO(refCommandDate.value as Date),
-  //   })
-  //   .then((res) => {
-  //     success($q, "บันทึกข้อมูลสำเร็จ");
-  //     modal.value = false;
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     await fetchData();
-  //   });
-  closeDialog();
-};
-
-onMounted(() => {
-  getData();
 });
 </script>
 <template>
@@ -407,30 +385,31 @@ onMounted(() => {
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
+        <q-td v-for="col in props.cols" :key="col.id">
-          v-for="col in props.cols"
-          :key="col.id"
-          @click="openDialogEdit(props.row)"
-        >
           <div v-if="col.name === 'no'">
             {{
               (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
             }}
           </div>
-          <div
+
-            v-else-if="
-              col.name == 'dateStart' ||
-              col.name == 'dateEnd' ||
-              col.name == 'refCommandDate'
-            "
-          >
-            {{ col.value ? date2Thai(col.value) : "-" }}
-          </div>
           <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            color="primary"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="mdi-pencil-outline"
+            clickable
+            @click="openDialogEdit(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -442,6 +421,19 @@ onMounted(() => {
           >
             <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
           </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="deleteData(props.row.id)"
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -553,7 +545,7 @@ onMounted(() => {
 
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 600px">
-      <form @submit.prevent="validateForm">
+      <q-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
           <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="closeDialog" />
         </q-card-section>
@@ -564,7 +556,7 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="dateStart"
+                v-model="dutyData.dateStart"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -580,7 +572,7 @@ onMounted(() => {
                     class="full-width inputgreen cursor-pointer"
                     outlined
                     dense
-                    :model-value="date2Thai(dateStart)"
+                    :model-value="date2Thai(dutyData.dateStart)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
                     hide-bottom-space
                     :label="`${'วันที่เริ่มต้น'}`"
@@ -604,12 +596,12 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="dateEnd"
+                v-model="dutyData.dateEnd"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
-                :min-date="dateStart"
+                :min-date="dutyData.dateStart"
-                :readonly="!dateStart"
+                :readonly="!dutyData.dateStart"
                 week-start="0"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
@@ -619,11 +611,11 @@ onMounted(() => {
                 <template #trigger>
                   <q-input
                     ref="dateEndRef"
-                    :readonly="!dateStart"
+                    :readonly="!dutyData.dateStart"
                     class="full-width inputgreen cursor-pointer"
                     dense
                     outlined
-                    :model-value="date2Thai(dateEnd)"
+                    :model-value="date2Thai(dutyData.dateEnd)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                     hide-bottom-space
                     :label="`${'วันที่สิ้นสุด'}`"
@@ -652,7 +644,7 @@ onMounted(() => {
                 dense
                 lazy-rules
                 autogrow
-                v-model="reference"
+                v-model="dutyData.reference"
                 :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
                 hide-bottom-space
                 :label="`${'เอกสารอ้างอิง'}`"
@@ -666,7 +658,7 @@ onMounted(() => {
                 dense
                 lazy-rules
                 autogrow
-                v-model="detail"
+                v-model="dutyData.detail"
                 :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                 hide-bottom-space
                 :label="`${'รายละเอียด'}`"
@@ -677,7 +669,7 @@ onMounted(() => {
                 class="full-width inputgreen cursor-pointer"
                 outlined
                 dense
-                v-model="refCommandNo"
+                v-model="dutyData.refCommandNo"
                 :label="`${'เลขที่คำสั่ง'}`"
               >
                 <template v-slot:append>
@@ -688,7 +680,7 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="refCommandDate"
+                v-model="dutyData.refCommandDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -706,7 +698,7 @@ onMounted(() => {
                     lazy-rules
                     :borderless="!edit"
                     :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate as Date)
+                      dutyData.refCommandDate == null ? null : date2Thai(dutyData.refCommandDate as Date)
                     "
                     hide-bottom-space
                     :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
@@ -723,10 +715,13 @@ onMounted(() => {
                       >
                       </q-icon>
                     </template>
-                    <template v-if="refCommandDate && edit" v-slot:append>
+                    <template
+                      v-if="dutyData.refCommandDate && edit"
+                      v-slot:append
+                    >
                       <q-icon
                         name="cancel"
-                        @click.stop.prevent="refCommandDate = null"
+                        @click.stop.prevent="dutyData.refCommandDate = null"
                         class="cursor-pointer"
                       />
                     </template>
@@ -751,7 +746,7 @@ onMounted(() => {
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 

src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue

@@ -55,6 +55,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -66,6 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateEnd",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -110,6 +112,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -132,6 +135,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -139,7 +143,7 @@ const columns = ref<QTableProps["columns"]>([
 function getHistory() {
   showLoader();
   http
-    .get(config.API.profileDutyHisId(id.value))
+    .get(config.API.profileNewDutyHisByDutyId(id.value))
     .then((res) => {
       let data = res.data.result;
       rows.value = [];
@@ -259,17 +263,6 @@ watch(modal, (status) => {
                     1
                   }}
                 </div>
-                <div
-                  v-else-if="
-                    col.name == 'dateStart' ||
-                    col.name == 'dateEnd' ||
-                    col.name == 'createdAt' ||
-                    col.name == 'refCommandDate'
-                  "
-                  class="table_ellipsis"
-                >
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </div>
                 <div v-else class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
                 </div>

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

@@ -13,13 +13,14 @@ interface FormFilter {
 
 //ข้อมูล
 interface RequestItemsObject {
-    id: string;
+    profileId: string,
-    dateStart: Date;
+    id?: string,
-    dateEnd: Date;
+    dateStart: Date | null,
-    detail: string;
+    dateEnd: Date | null,
-    reference: string;
+    detail: string,
-    refCommandNo: string;
+    reference: string,
-    refCommandDate: Date | null;
+    refCommandNo: string,
+    refCommandDate: Date | null,
   }
 
 interface MyObjectRef {