Merge branch 'develop' into devTee

src/modules/02_organization/components/DialogFormDateTime.vue

@@ -18,6 +18,7 @@ const {
   hideLoader,
   messageError,
   success,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /**
@@ -52,7 +53,7 @@ function onSubmit() {
     showLoader();
     http
       .put(config.API.orgSetDateTime(store.draftId as string), {
-        orgPublishDate: dateTime.value,
+        orgPublishDate: convertDateToAPI(dateTime.value),
       })
       .then(async () => {
         await props.fetchActive();

src/modules/02_organization/components/DialogStructureDetail.vue

@@ -18,7 +18,7 @@ const modal = defineModel<boolean>("structureDetail", { required: true });
 const treeId = defineModel<string>("treeId", { required: true });
 const orgLevel = defineModel<number>("orgLevel", { required: true });
 
-const formData = reactive<any>({
+const formData = reactive({
   orgName: "",
   agencyName: "", //*ส่วนราชการ
   orgType: "", //*ประเภท
@@ -27,7 +27,15 @@ const formData = reactive<any>({
   orgPhoneEx: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
   orgPhoneIn: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
   orgFax: "", //หมายเลขโทรสาร
-  orgShortName: "",
+  orgShortName: "", //อักษรย่อ
+  misId: "", //MsiId
+  departMentCode: "", //DEPARTMENT CODE
+  divisionCode: "", //DIVISION CODE
+  sectionCode: "", //SECTION CODE
+  jobCode: "", //JOB CODE
+  responsibility: "", //หน้าที่ความรับผิดชอบ
+  isCommission: "", //สำนักปลัด
+  isDeputy: "", //สำนักงาน กก.
 });
 
 /**
@@ -54,8 +62,20 @@ async function fetchDetailTree(id: string, type: string) {
           : "ยุบเลิก";
       formData.orgPhoneEx = data[`org${type}PhoneEx`];
       formData.orgPhoneIn = data[`org${type}PhoneIn`];
-      formData.orgFax = data[`org${type}Fax`];
+      formData.orgFax = data[`org${type}Fax`] ? data[`org${type}Fax`] : "-";
-      formData.orgShortName = data[`org${type}ShortName`];
+      formData.orgShortName = data[`org${type}ShortName`]
+        ? data[`org${type}ShortName`]
+        : "-";
+      formData.misId = data.misId ? data.misId : "-";
+      formData.departMentCode = data.DEPARTMENT_CODE
+        ? data.DEPARTMENT_CODE
+        : "-";
+      formData.divisionCode = data.DIVISION_CODE ? data.DIVISION_CODE : "-";
+      formData.sectionCode = data.SECTION_CODE ? data.SECTION_CODE : "-";
+      formData.jobCode = data.JOB_CODE ? data.JOB_CODE : "-";
+      formData.responsibility = data.responsibility ? data.responsibility : "-";
+      formData.isDeputy = data.isDeputy ? "ใช่" : "-";
+      formData.isCommission = data.isCommission ? "ใช่" : "-";
     })
     .catch((err) => {
       messageError($q, err);
@@ -108,6 +128,12 @@ watch(
                 <p>{{ formData.agencyName }}</p>
               </div>
             </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">อักษรย่อ</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgShortName }}</p>
+              </div>
+            </div>
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">ประเภท</div>
               <div class="col-8 text-grey-8">
@@ -149,8 +175,63 @@ watch(
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">Fax</div>
               <div class="col-8 text-grey-8">
-                <p v-if="formData.orgFax != ''">{{ formData.orgFax }}</p>
+                <p>{{ formData.orgFax }}</p>
-                <p v-else>-</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">MsiId</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.misId }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">DEPARTMENT CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.departMentCode }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">DIVISION CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.divisionCode }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">SECTION CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.sectionCode }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">JOB CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.jobCode }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">หน้าที่ความรับผิดชอบ</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.responsibility }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">สำนักปลัด</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.isDeputy }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">สำนักงาน กก.</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.isCommission }}</p>
               </div>
             </div>
           </div>

src/modules/02_organization/store/organizational.ts

@@ -148,6 +148,24 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     }
   }
 
+  /**
+   * ฟังก์ชันแปลงค่าสถานะรายละเอียดโครงสร้าง
+   * @param type  สถานะ
+   * @returns ชือสถานะ
+   */
+  function convertStatus(type: string) {
+    switch (type) {
+      case "current":
+        return "ปกติ";
+      case "draft":
+        return "แบบร่าง";
+      case "old":
+        return "ยุบเลิก";
+      default:
+        return "-";
+    }
+  }
+
   return {
     typeOrganizational,
     statusView,
@@ -171,5 +189,6 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     rootId,
     isLosck,
     remark,
+    convertStatus,
   };
 });

src/modules/04_registryPerson/components/DialogHistory.vue

@@ -33,10 +33,7 @@ const employeeClass = ref<string>(
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
 const positionKeyword = ref<string>("");
-const employeeClassOps = ref<DataOption[]>([
+
-  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
-  { id: "perm", name: "ลูกจ้างประจำ" },
-]);
 //ตัวเลือกประเภทการค้นหา
 const typeKeywordOps = ref<DataOption[]>([
   { id: "no", name: "ตำแหน่งเลขที่" },
@@ -97,14 +94,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const rows = ref<HistoryPos[]>([]);
 
-/** function เปลี่ยนประเภท*/
-function changeEmployeeClass() {
-  typeKeyword.value = "";
-  Keyword.value = "";
-  positionKeyword.value = "";
-  rows.value = [];
-}
-
 /**
  * function ค้นหาประวัติถือครองตำแหน่ง
  * @param type ประเภทข่าราชการ
@@ -186,27 +175,6 @@ function closeDialog() {
         <q-form ref="myForm">
           <div class="bg-grey-2 q-pa-sm">
             <div class="row q-col-gutter-sm full-width">
-              <!-- <div class="col-3">
-                <q-select
-                  hide-bottom-space
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
-                  outlined
-                  dense
-                  lazy-rules
-                  bg-color="white"
-                  v-model="employeeClass"
-                  emit-value
-                  map-options
-                  :options="employeeClassOps"
-                  option-label="name"
-                  option-value="id"
-                  :label="`${'ประเภท'}`"
-                  use-input
-                  input-debounce="0"
-                  @update:model-value="changeEmployeeClass"
-                />
-              </div> -->
-
               <div class="col-3">
                 <q-select
                   hide-bottom-space

src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue

@@ -8,11 +8,12 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";
 
 import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -26,6 +27,7 @@ const {
   date2Thai,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const id = ref<string>(route.params.id.toString());
@@ -44,98 +46,7 @@ const dialogStatus = ref<string>("create"); //สถานะการแก้
 const editId = ref<string>(""); //id ที่ต้องการแก้ไข
 
 //Table Main
-const rows = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
+const baseColumns = ref<QTableColumn[]>([
-const rowsMain = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
-const keyword = ref<string>(""); //คำค้นหา
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "certificateType",
-    align: "left",
-    label: "ชื่อใบอนุญาต",
-    sortable: true,
-    field: "certificateType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issuer",
-    align: "left",
-    label: "หน่วยงานผู้ออกใบอนุญาต",
-    sortable: true,
-    field: "issuer",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "certificateNo",
-    align: "left",
-    label: "เลขที่ใบอนุญาต",
-    sortable: true,
-    field: "certificateNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issueDate",
-    align: "left",
-    label: "วันที่ออกใบอนุญาต",
-    sortable: true,
-    field: "issueDate",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "expireDate",
-    align: "left",
-    label: "วันที่หมดอายุ",
-    sortable: true,
-    format: (v) => date2Thai(v),
-    field: "expireDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "certificateType",
-  "issuer",
-  "certificateNo",
-  "issueDate",
-  "expireDate",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-//Table ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
-const historyRows = ref<ResponseObject[]>([]); //รายการประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
-const historyRowsMain = ref<ResponseObject[]>([]); //รายการประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
-
-const historyKeyword = ref<string>(""); //คำค้นหาประวัติแก้ไข
-const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
     align: "left",
@@ -217,7 +128,7 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyVisibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "certificateType",
   "issuer",
   "certificateNo",
@@ -226,15 +137,30 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
+
+const rows = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
+const rowsMain = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
+const keyword = ref<string>(""); //คำค้นหา
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+//Table ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
+const historyId = ref<string>("");
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 const profesLicenseData = reactive<RequestItemsObject>({
   certificateType: "", //ชื่อใบอนุญาต
   issuer: "", //หน่วยงานผู้ออกใบอนุญาต
   certificateNo: "", //เลขที่ใบอนุญาต
-  issueDate: new Date(), //วันที่ออกใบอนุญาต
+  issueDate: null, //วันที่ออกใบอนุญาต
   expireDate: null, //วันที่หมดอายุ
   profileId: id.value,
 });
@@ -243,26 +169,49 @@ const profesLicenseData = reactive<RequestItemsObject>({
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
+      showLoader();
+      const isEdit = dialogStatus.value === "create" ? false : true;
+      const url = isEdit
+        ? config.API.profileNewCertificateByCertificateId(
+            editId.value,
+            empType.value
+          )
+        : config.API.profileNewCertificate(empType.value);
+
+      const method = isEdit ? http.patch : http.post;
+      await method(url, {
+        ...profesLicenseData,
+        issueDate: convertDateToAPI(profesLicenseData.issueDate),
+        expireDate: convertDateToAPI(profesLicenseData.expireDate),
+        profileId: isEdit
+          ? undefined
+          : empType.value === ""
+          ? id.value
+          : undefined,
+        profileEmployeeId: isEdit
+          ? undefined
+          : empType.value !== ""
+          ? id.value
+          : undefined,
+      })
+        .then(async () => {
+          await fetchData(id.value);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
-/** ปิด form  ข้อมูลใบอนุญาตประกอบวิชาชีพ*/
-function closeDialog() {
-  dialog.value = false;
-}
-
-/** ปิด popup ประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ*/
-function closeHistoryDialog() {
-  historyDialog.value = false;
-  historyRows.value = [];
-  historyKeyword.value = "";
-}
-
 /** fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ*/
 async function fetchData(id: string) {
   showLoader();
@@ -280,10 +229,15 @@ async function fetchData(id: string) {
     });
 }
 
+/** ปิด form  ข้อมูลใบอนุญาตประกอบวิชาชีพ*/
+function closeDialog() {
+  dialog.value = false;
+}
+
 /** เคลียร์ form ข้อมูลใบอนุญาตประกอบวิชาชีพ*/
 function clearForm() {
   profesLicenseData.expireDate = null;
-  profesLicenseData.issueDate = new Date();
+  profesLicenseData.issueDate = null;
   profesLicenseData.certificateNo = "";
   profesLicenseData.certificateType = "";
   profesLicenseData.issuer = "";
@@ -293,7 +247,7 @@ function clearForm() {
  * เปิด form แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
  * @param row  ข้อมูลใบอนุญาตประกอบวิชาชีพ
  */
-function editForm(row: any) {
+function editForm(row: ResponseObject) {
   dialogStatus.value = "edit";
   editId.value = row.id;
   profesLicenseData.certificateType = row.certificateType;
@@ -304,72 +258,27 @@ function editForm(row: any) {
   dialog.value = true;
 }
 
-/**
+function onViewHistory(id: string) {
- * เพิ่มรายการข้อมูลใบอนุญาตประกอบวิชาชีพ
+  historyId.value = id;
- */
+  historyDialog.value = true;
-function addData() {
-  showLoader();
-  http
-    .post(config.API.profileNewCertificate(empType.value), {
-      ...profesLicenseData,
-      profileId: empType.value === "" ? id.value : undefined,
-      profileEmployeeId: empType.value !== "" ? id.value : undefined,
-    })
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
- * @param idData  รายการข้อมูลใบอนุญาตประกอบวิชาชีพ
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(
-      config.API.profileNewCertificateByCertificateId(idData, empType.value),
-      {
-        ...profesLicenseData,
-        profileId: undefined,
-      }
-    )
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
 /** fetch ข้อมูลประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ*/
-function fetchHistoryData(id: string) {
+async function fetchDataHistory() {
   showLoader();
-  http
+  try {
-    .get(config.API.profileNewCertificateHisByCertificateId(id, empType.value))
+    const res = await http.get(
-    .then(async (res) => {
+      config.API.profileNewCertificateHisByCertificateId(
-      historyRows.value = res.data.result;
+        historyId.value,
-      historyRowsMain.value = res.data.result;
+        empType.value
-    })
+      )
-    .catch((err) => {
+    );
-      messageError($q, err);
+    return res.data.result;
-    })
+  } catch (err) {
-    .finally(() => {
+    messageError($q, err);
-      hideLoader();
+  } finally {
-    });
+    hideLoader();
+  }
 }
 
 function serchDataTable() {
@@ -380,14 +289,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  historyRows.value = onSearchDataTable(
-    historyKeyword.value,
-    historyRowsMain.value,
-    historyColumns.value ? historyColumns.value : []
-  );
-}
-
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -503,9 +404,7 @@ onMounted(() => {
             round
             color="deep-purple"
             icon="mdi-history"
-            @click="
+            @click="() => onViewHistory(props.row.id)"
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
           >
             <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
           </q-btn>
@@ -544,9 +443,7 @@ onMounted(() => {
               round
               color="deep-purple"
               icon="mdi-history"
-              @click="
+              @click="() => onViewHistory(props.row.id)"
-                () => (fetchHistoryData(props.row.id), (historyDialog = true))
-              "
             >
               <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
             </q-btn>
@@ -737,79 +634,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="historyDialog"
-      <dialog-header
+    :visible-columns="visibleColumnsHistory"
-        tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
+    :title="`ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ`"
-        :close="closeHistoryDialog"
+    :columns="columnsHistory"
-      />
+    :fetch-data="fetchDataHistory"
-      <q-separator />
+  />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          v-model:pagination="historyPagination"
-          bordered
-          :paging="true"
-          dense
-          :rows-per-page-options="[20, 50, 100]"
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped>

src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue

@@ -4,7 +4,7 @@ import { QForm, useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -13,6 +13,8 @@ import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/r
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
 
 import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+
 /** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
@@ -30,6 +32,7 @@ const {
   date2Thai,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const id = ref<string>(route.params.id.toString());
@@ -63,7 +66,7 @@ const trainData = reactive<RequestItemsObject>({
 const rows = ref<ResponseObject[]>([]);
 const rowsMain = ref<ResponseObject[]>([]);
 const keyword = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "name",
     align: "left",
@@ -94,8 +97,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "startDate",
     format(val, row) {
       return row.isDate
-        ? date2Thai(row.startDate)
+        ? date2Thai(row.startDate).toString()
-        : new Date(row.startDate).getFullYear() + 543;
+        : (new Date(row.startDate).getFullYear() + 543).toString();
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -112,171 +115,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "endDate",
     format(val, row) {
       return row.isDate
-        ? date2Thai(row.endDate)
+        ? date2Thai(row.endDate).toString()
-        : new Date(row.endDate).getFullYear() + 543;
+        : (new Date(row.endDate).getFullYear() + 543).toString();
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "yearly",
-    align: "left",
-    label: "ปีที่อบรม (พ.ศ.)",
-    sortable: true,
-    field: "yearly",
-    format: (v) => (v !== null ? v + 543 : "-"),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "place",
-    align: "left",
-    label: "สถานที่ฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "place",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "department",
-    align: "left",
-    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "department",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "numberOrder",
-    align: "left",
-    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
-    sortable: true,
-    field: "numberOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateOrder",
-    align: "left",
-    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
-    sortable: true,
-    field: "dateOrder",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "name", // ชื่อโครงงาน
-  "topic", // หัวข้อ
-  "yearly", // ปีที่อบรม
-  "place", // สถานที่
-  "duration", // รวมระยะเวลา
-  "department", // หน่วยงานที่รับผิดชอบ
-  "numberOrder", // เลขที่คำสั่ง
-  "dateOrder", // คำสั่งลงวันที่
-  "startDate", // วันเริ่มต้น
-  "endDate", // วันสิ้นสุด
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-//Table ประวัติแก้ไข
-const historyRows = ref<ResponseObject[]>([]);
-const historyRowsMain = ref<ResponseObject[]>([]);
-const historyKeyword = ref<string>("");
-const historyColumns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "topic",
-    align: "left",
-    label: "หัวข้อการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "topic",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "startDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.startDate)
-        : new Date(row.startDate).getFullYear() + 543;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "endDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.endDate)
-        : new Date(row.endDate).getFullYear() + 543;
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -379,7 +219,7 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyVisibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
   "yearly", // ปีที่อบรม
@@ -393,16 +233,64 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName", // แก้ไขโดย
   "lastUpdatedAt", // แก้ไขเมื่อวันที่
 ]);
-const historyPagination = ref({
+
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+//Table ประวัติแก้ไข
+const historyId = ref<string>("");
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
+      showLoader();
+      const isEdit = dialogStatus.value === "create" ? false : true;
+      const url = isEdit
+        ? config.API.profileNewTrainingByTrainingId(editId.value, empType.value)
+        : config.API.profileNewTraining(empType.value);
+
+      const method = isEdit ? http.patch : http.post;
+      await method(url, {
+        ...trainData,
+        startYear: undefined,
+        finishYear: undefined,
+        startDate: convertDateToAPI(trainData.startDate),
+        endDate: convertDateToAPI(trainData.endDate),
+        dateOrder: convertDateToAPI(trainData.dateOrder),
+        isDate: isDate.value === "false" ? false : true,
+        profileId: isEdit
+          ? undefined
+          : empType.value === ""
+          ? id.value
+          : undefined,
+        profileEmployeeId: isEdit
+          ? undefined
+          : empType.value !== ""
+          ? id.value
+          : undefined,
+      })
+        .then(async () => {
+          await fetchData(id.value);
+          await success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -425,9 +313,9 @@ function clearForm() {
 }
 
 /** เปิด popoup แก้ไขข้อมูลฝึกอบรม/ดูงาน */
-function editForm(row: any) {
+function editForm(row: RequestItemsObject) {
   dialogStatus.value = "edit";
-  editId.value = row.id;
+  editId.value = row.id ?? "";
   isDate.value = row.isDate ? "true" : "false";
   trainData.name = row.name;
   trainData.topic = row.topic;
@@ -439,76 +327,26 @@ function editForm(row: any) {
   trainData.dateOrder = row.dateOrder;
   trainData.startDate = row.startDate;
   trainData.endDate = row.endDate;
-  trainData.startYear = +row.startDate.slice(0, 4);
+  trainData.startYear = row.startDate
-  trainData.finishYear = +row.endDate.slice(0, 4);
+    ? typeof row.startDate === "string"
+      ? new Date(row.startDate).getFullYear()
+      : row.startDate.getFullYear()
+    : null;
+
+  trainData.finishYear = row.endDate
+    ? typeof row.endDate === "string"
+      ? new Date(row.endDate).getFullYear()
+      : row.endDate.getFullYear()
+    : null;
   dialog.value = true;
 }
 
-/** เพิ่มข้อมูลการฝึกอบรม/ดูงาน*/
-function addData() {
-  showLoader();
-  http
-    .post(config.API.profileNewTraining(empType.value), {
-      ...trainData,
-      startYear: undefined,
-      finishYear: undefined,
-      isDate: isDate.value === "false" ? false : true,
-      profileId: empType.value === "" ? id.value : undefined,
-      profileEmployeeId: empType.value !== "" ? id.value : undefined,
-    })
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * แก้ไขข้อมูลการฝึกอบรม/ดูงาน
- * @param idData  รายการฝึกอบรม/ดูงาน
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(config.API.profileNewTrainingByTrainingId(idData, empType.value), {
-      ...trainData,
-      profileId: undefined,
-      startYear: undefined,
-      finishYear: undefined,
-      isDate: isDate.value === "false" ? false : true,
-    })
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /** ปิด from การฝึกอบรม/ดูงาน*/
 function closeDialog() {
   dialog.value = false;
   clearForm();
 }
 
-/** ปิด ประวัติการแก่ไขการฝึกอบรม/ดูงาน */
-function closeHistoryDialog() {
-  historyDialog.value = false;
-  historyRows.value = [];
-  historyKeyword.value = "";
-}
-
 /** fetch รายการการฝึกอบรม/ดูงาน*/
 async function fetchData(id: string) {
   showLoader();
@@ -526,21 +364,27 @@ async function fetchData(id: string) {
     });
 }
 
-/** fetch ประวัติรายการแก้ไขการฝึกอบรม/ดูงาน*/
+function onViewHistory(id: string) {
-function fetchHistoryData(id: string) {
+  historyId.value = id;
+  historyDialog.value = true;
+}
+
+/** fetch ข้อมูลประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ*/
+async function fetchDataHistory() {
   showLoader();
-  http
+  try {
-    .get(config.API.profileNewTrainingHisByTrainingId(id, empType.value))
+    const res = await http.get(
-    .then((res) => {
+      config.API.profileNewTrainingHisByTrainingId(
-      historyRows.value = res.data.result;
+        historyId.value,
-      historyRowsMain.value = res.data.result;
+        empType.value
-    })
+      )
-    .catch((err) => {
+    );
-      messageError($q, err);
+    return res.data.result;
-    })
+  } catch (err) {
-    .finally(() => {
+    messageError($q, err);
-      hideLoader();
+  } finally {
-    });
+    hideLoader();
+  }
 }
 
 function serchDataTable() {
@@ -551,14 +395,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  historyRows.value = onSearchDataTable(
-    historyKeyword.value,
-    historyRowsMain.value,
-    historyColumns.value ? historyColumns.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(id.value);
@@ -675,9 +511,7 @@ onMounted(() => {
             round
             color="deep-purple"
             icon="mdi-history"
-            @click="
+            @click="() => onViewHistory(props.row.id)"
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
           >
             <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
           </q-btn>
@@ -715,9 +549,7 @@ onMounted(() => {
               round
               color="deep-purple"
               icon="mdi-history"
-              @click="
+              @click="() => onViewHistory(props.row.id)"
-                () => (fetchHistoryData(props.row.id), (historyDialog = true))
-              "
             >
               <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
             </q-btn>
@@ -843,7 +675,9 @@ onMounted(() => {
                       outlined
                       class="inputgreen"
                       hide-bottom-space
-                      :model-value="trainData.startYear + 543"
+                      :model-value="
+                        trainData.startYear ? trainData.startYear + 543 : null
+                      "
                       :rules="[
                         (val:string) =>
                           !!val ||
@@ -888,7 +722,9 @@ onMounted(() => {
                       class="inputgreen"
                       outlined
                       hide-bottom-space
-                      :model-value="trainData.finishYear + 543"
+                      :model-value="
+                        trainData.finishYear ? trainData.finishYear + 543 : null
+                      "
                       :rules="[
                         (val:string) =>
                           !!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
@@ -1138,76 +974,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="historyDialog"
-      <dialog-header
+    :visible-columns="visibleColumnsHistory"
-        tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
+    :title="`ประวัติแก้ไขการฝึกอบรม/ดูงาน`"
-        :close="closeHistoryDialog"
+    :columns="columnsHistory"
-      />
+    :fetch-data="fetchDataHistory"
-      <q-separator />
+  />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          v-model:pagination="historyPagination"
-          bordered
-          dense
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped>

src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue

@@ -10,10 +10,9 @@ import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insigni
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   DataOption,
-  InsigniaOps,
   InsigniasType,
   InsigniasTypeSub,
   ResFileData,
@@ -22,6 +21,7 @@ import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/r
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -82,214 +82,7 @@ const insigniaOptionsName = ref<InsigniasTypeSub[]>([]);
 const insigniaOptionsNameMain = ref<InsigniasTypeSub[]>([]);
 
 //Table Main
-const rows = ref<ResponseObject[]>([]);
+const baseColumns = ref<QTableColumn[]>([
-const rowsMain = ref<ResponseObject[]>([]);
-const filterSearch = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "year",
-    align: "left",
-    label: "ปีที่ยื่นขอ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => v + 543,
-    sort: (a: string, b: string) =>
-      a.toString().localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "receiveDate",
-    align: "left",
-    label: "วันที่ได้รับ",
-    sortable: true,
-    field: "receiveDate",
-    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" }),
-  },
-  {
-    name: "insignia",
-    align: "left",
-    label: "ชื่อเครื่องราชฯ",
-    sortable: true,
-    field: "insigniaId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => store.allNameInsignia.find((r) => r.id === v)?.name,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้น",
-    sortable: true,
-    field: "insigniaType",
-    format(val, row) {
-      return row.insignia.insigniaType.name;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับที่",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issue",
-    align: "left",
-    label: "ราชกิจจาฯ ฉบับที่",
-    sortable: true,
-    field: "issue",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volumeNo",
-    align: "left",
-    label: "เล่มที่",
-    sortable: true,
-    field: "volumeNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volume",
-    align: "left",
-    label: "เล่ม",
-    sortable: true,
-    field: "volume",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "section",
-    align: "left",
-    label: "ตอน",
-    sortable: true,
-    field: "section",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "page",
-    align: "left",
-    label: "หน้า",
-    sortable: true,
-    field: "page",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateAnnounce",
-    align: "left",
-    label: "วันที่ประกาศในราชกิจจาฯ",
-    sortable: true,
-    field: "dateAnnounce",
-    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" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "note",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "note",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "insignia",
-  "insigniaType",
-  "year",
-  "no",
-  "issue",
-  "volumeNo",
-  "volume",
-  "section",
-  "page",
-  "receiveDate",
-  "dateAnnounce",
-  "refCommandNo",
-  "refCommandDate",
-  "note",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-//Table ประวัติแก้ไข
-const rowsHistory = ref<RequestItemsObject[]>([]);
-const rowsHistoryMain = ref<RequestItemsObject[]>([]);
-const filterHistory = ref<string>("");
-const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
     align: "left",
@@ -443,6 +236,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "lastUpdateFullName",
     align: "left",
@@ -454,6 +258,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
     name: "lastUpdatedAt",
     align: "left",
@@ -467,7 +272,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "insignia",
   "insigniaType",
   "year",
@@ -481,13 +286,29 @@ const visibleColumnsHistory = ref<String[]>([
   "dateAnnounce",
   "refCommandNo",
   "refCommandDate",
+  "note",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
+
+const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
+const filterSearch = ref<string>("");
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+//Table ประวัติแก้ไข
+const historyId = ref<string>("");
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
 async function fetchData() {
   if (!profileId.value) return;
@@ -713,13 +534,16 @@ function clickClose() {
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
+  historyId.value = row.id;
+}
+
+async function fetchDataHistory() {
   showLoader();
   try {
     const res = await http.get(
-      config.API.profileNewInsignHisById(row.id, empType.value)
+      config.API.profileNewInsignHisById(historyId.value, empType.value)
     );
-    rowsHistory.value = res.data.result;
+    return res.data.result;
-    rowsHistoryMain.value = res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -818,14 +642,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchData();
@@ -1475,79 +1291,13 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="modalHistory" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="modalHistory"
-      <DialogHeader
+    :visible-columns="visibleColumnsHistory"
-        tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
+    :title="`ประวัติแก้ไขเครื่องราชอิสริยาภรณ์`"
-        :close="
+    :columns="columnsHistory"
-          () => (
+    :fetch-data="fetchDataHistory"
-            (modalHistory = false), (rowsHistory = []), (filterHistory = '')
+  />
-          )
-        "
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </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"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          v-model:pagination="historyPagination"
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          :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">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style lang="scss"></style>

src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue

@@ -9,7 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor";
 import type {
   DataOption,
@@ -18,6 +18,7 @@ import type {
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -31,6 +32,7 @@ const {
   dialogConfirm,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const profileId = ref<string>(
@@ -76,10 +78,7 @@ const modeView = ref<string>("table"); //การแสดงผล Table,Card
 const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
 
 //Table Main
-const rows = ref<ResponseObject[]>([]);
+const baseColumns = ref<QTableColumn[]>([
-const rowsMain = ref<ResponseObject[]>([]);
-const filterSearch = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
   {
     name: "issueDate",
     align: "left",
@@ -88,101 +87,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "issueDate",
     format(val, row) {
       return row.isDate
-        ? date2Thai(row.issueDate)
+        ? date2Thai(row.issueDate).toString()
-        : new Date(row.issueDate).getFullYear() + 543;
+        : (new Date(row.issueDate).getFullYear() + 543).toString();
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issuer",
-    align: "left",
-    label: "ผู้มีอำนาจลงนาม",
-    sortable: true,
-    field: "issuer",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "issuer",
-  "detail",
-  "issueDate",
-  "refCommandNo",
-  "refCommandDate",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-//Table ประวัติแก้ไข
-const rowsHistory = ref<ResponseObject[]>([]);
-const rowsHistoryMain = ref<ResponseObject[]>([]);
-const filterHistory = ref<string>("");
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "issueDate",
-    align: "left",
-    label: "วันที่ได้รับ",
-    sortable: true,
-    field: "issueDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.issueDate)
-        : new Date(row.issueDate).getFullYear() + 543;
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -260,7 +166,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "issuer",
   "detail",
   "issueDate",
@@ -269,6 +175,27 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+
+const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
+const filterSearch = ref<string>("");
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
+//Table ประวัติแก้ไข
+const rowsHistory = ref<ResponseObject[]>([]);
+const rowsHistoryMain = ref<ResponseObject[]>([]);
+const filterHistory = ref<string>("");
+const historyId = ref<string>("");
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 const historyPagination = ref({
   sortBy: "lastUpdatedAt",
 });
@@ -303,7 +230,7 @@ async function addEditData(editStatus: boolean = false) {
     ? config.API.profileNewHonorById(id.value, empType.value)
     : config.API.profileNewHonor(empType.value);
   const method = editStatus ? "patch" : "post";
-  const reqBody: RequestItemsObject = {
+  const reqBody = {
     ...declHonorForm,
     isUpload: !isEdit.value ? undefined : isUpload.value,
     profileEmployeeId:
@@ -313,10 +240,10 @@ async function addEditData(editStatus: boolean = false) {
     isDate: declHonorForm.isDate === "true" ? true : false,
     issueDate:
       declHonorForm.isDate === "true"
-        ? declHonorForm.issueDate
+        ? convertDateToAPI(declHonorForm.issueDate)
-        : new Date(`${issueDateYear.value}-01-01`),
+        : convertDateToAPI(new Date(`${issueDateYear.value}-01-01`)),
+    refCommandDate: convertDateToAPI(declHonorForm.refCommandDate),
   };
-
   try {
     await http[method](url, reqBody).then(async (res) => {
       if ((fileUpload.value && id.value) || res.data.result) {
@@ -324,7 +251,7 @@ async function addEditData(editStatus: boolean = false) {
       }
     });
     await fetchData();
-    await success($q, "บันทึกข้อมูลสำเร็จ");
+    success($q, "บันทึกข้อมูลสำเร็จ");
     modal.value = false;
   } catch (e) {
     messageError($q, e);
@@ -469,15 +396,17 @@ async function clickClose() {
 
 /** fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลประกาศเกียรติคุณ*/
 async function clickHistory(row: ResponseObject) {
+  historyId.value = row.id;
   modalHistory.value = true;
-  filterSearch.value = "";
+}
+
+async function fetchDataHistory() {
   showLoader();
   try {
     const res = await http.get(
-      config.API.profileNewHonorHisById(row.id, empType.value)
+      config.API.profileNewHonorHisById(historyId.value, empType.value)
     );
-    rowsHistory.value = res.data.result;
+    return res.data.result;
-    rowsHistoryMain.value = res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -522,19 +451,12 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData();
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -1056,81 +978,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="modalHistory" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="modalHistory"
-      <q-card-section class="flex justify-between" style="padding: 0">
+    :visible-columns="visibleColumnsHistory"
-        <DialogHeader
+    :title="`ประวัติแก้ไขประกาศเกียรติคุณ`"
-          tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
+    :columns="columnsHistory"
-          :close="
+    :fetch-data="fetchDataHistory"
-            () => (
+  />
-              (modalHistory = false), (rowsHistory = []), (filterHistory = '')
-            )
-          "
-        />
-      </q-card-section>
-
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </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"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          v-model:pagination="historyPagination"
-          :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">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue

@@ -9,7 +9,7 @@ import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/R
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   RequestItemsObject,
   DataOptions,
@@ -18,6 +18,7 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogDevelop from "@/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -33,6 +34,7 @@ const {
   dialogConfirm,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const profileId = ref<string>(
@@ -80,266 +82,7 @@ const resPerformForm = reactive<RequestItemsObject>({
 });
 
 //Table ผลการประเมินการปฏิบัติราชการ
-const rows = ref<ResponseObject[]>([]);
+const baseColumns = ref<QTableColumn[]>([
-const rowsMain = ref<ResponseObject[]>([]);
-const filterSearch = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "date",
-    align: "left",
-    label: "วันที่ได้รับ",
-    sortable: true,
-    field: "date",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => {
-      return `${v ? Number(v) + 543 : "-"}`;
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "period",
-    align: "left",
-    label: "รอบการประเมิน",
-    sortable: true,
-    field: "period",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => {
-      return (
-        periodOp.value.find((item: DataOptions) => item.id === v)?.name || "-"
-      );
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "point1Total",
-    align: "left",
-    label: "ส่วนที่ 1 (น้ำหนัก)",
-    sortable: true,
-    field: "point1Total",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "point1",
-    align: "left",
-    label: "ผลประเมินส่วนที่ 1 (คะแนน)",
-    sortable: true,
-    field: "point1",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "point2Total",
-    align: "left",
-    label: "ส่วนที่ 2 (น้ำหนัก)",
-    sortable: true,
-    field: "point2Total",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "point2",
-    align: "left",
-    label: "ผลประเมินส่วนที่ 2 (คะแนน)",
-    sortable: true,
-    field: "point2",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "pointSumTotal",
-    align: "left",
-    label: "ผลรวม (น้ำหนัก)",
-    sortable: true,
-    field: "pointSumTotal",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "pointSum",
-    align: "left",
-    label: "ผลประเมินรวม (คะแนน)",
-    sortable: true,
-    field: "pointSum",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ผลประเมิน",
-    sortable: true,
-    field: "name",
-    format(val, row) {
-      return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "point1Total",
-  "year",
-  "period",
-  "point1",
-  "point2Total",
-  "point2",
-  "pointSumTotal",
-  "pointSum",
-  "name",
-  "date",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-//Table การพัฒนารายบุคคล (Individual Development Plan)
-const rowsPlan = ref<any[]>([]);
-const filterSearchPlan = ref<string>("");
-const columnsPlan = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "developmentProjects",
-    align: "left",
-    label: "วิธีการพัฒนา",
-    sortable: false,
-    field: "developmentProjects",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "developmentTarget",
-    align: "left",
-    label: "เป้าหมายการพัฒนา",
-    sortable: false,
-    field: "developmentTarget",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "developmentResults",
-    align: "left",
-    label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
-    field: "developmentResults",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "developmentReport",
-    align: "left",
-    label: "รายงานผลการพัฒนา",
-    sortable: false,
-    field: "developmentReport",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsPlan = ref<String[]>([
-  "no",
-  "name",
-  "developmentProjects",
-  "developmentTarget",
-  "developmentResults",
-  "developmentReport",
-]);
-
-//Table ประวัติแก้ไข
-const rowsHistory = ref<ResponseObject[]>([]);
-const rowsHistoryMain = ref<ResponseObject[]>([]);
-const filterHistory = ref<string>("");
-const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
@@ -506,7 +249,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "point1Total",
   "year",
   "period",
@@ -520,10 +263,106 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
+
+const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
+const filterSearch = ref<string>("");
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+//Table การพัฒนารายบุคคล (Individual Development Plan)
+const rowsPlan = ref<any[]>([]);
+const filterSearchPlan = ref<string>("");
+const columnsPlan = ref<QTableColumn[]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
+    sortable: false,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentProjects",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: false,
+    field: "developmentProjects",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentTarget",
+    align: "left",
+    label: "เป้าหมายการพัฒนา",
+    sortable: false,
+    field: "developmentTarget",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentResults",
+    align: "left",
+    label: "วิธีการวัดผลการพัฒนา",
+    sortable: false,
+    field: "developmentResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentReport",
+    align: "left",
+    label: "รายงานผลการพัฒนา",
+    sortable: false,
+    field: "developmentReport",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsPlan = ref<String[]>([
+  "no",
+  "name",
+  "developmentProjects",
+  "developmentTarget",
+  "developmentResults",
+  "developmentReport",
+]);
+
+//Table ประวัติแก้ไข
+const rowsHistory = ref<ResponseObject[]>([]);
+const rowsHistoryMain = ref<ResponseObject[]>([]);
+const historyId = ref<string>("");
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
 async function fetchData() {
   if (!profileId.value) return;
@@ -585,8 +424,9 @@ async function addEditData(editStatus: boolean = false) {
     ? config.API.profileNewAssessmentsById(id.value, empType.value)
     : config.API.profileNewAssessments(empType.value);
   const method = editStatus ? "patch" : "post";
-  const reqBody: RequestItemsObject = {
+  const reqBody = {
     ...resPerformForm,
+    date: convertDateToAPI(resPerformForm.date),
     period: period.value,
     year: year.value,
     profileEmployeeId:
@@ -636,16 +476,18 @@ async function clickClose() {
 
 /** fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
 async function clickHistory(row: ResponseObject) {
+  historyId.value = row.id;
   modalHistory.value = true;
-  filterSearch.value = "";
+}
+
+async function fetchDataHistory() {
   showLoader();
   try {
     const res = await http.get(
-      config.API.profileNewAssessmentsHisById(row.id, empType.value)
+      config.API.profileNewAssessmentsHisById(historyId.value, empType.value)
     );
 
-    rowsHistory.value = res.data.result;
+    return res.data.result;
-    rowsHistoryMain.value = res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -702,14 +544,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 watch(
   () => paginationIdp.value.rowsPerPage,
   async () => {
@@ -1391,78 +1225,13 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="modalHistory" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="modalHistory"
-      <DialogHeader
+    :visible-columns="visibleColumnsHistory"
-        tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
+    :title="`ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ`"
-        :close="
+    :columns="columnsHistory"
-          () => (
+    :fetch-data="fetchDataHistory"
-            (modalHistory = false), (rowsHistory = []), (filterHistory = '')
+  />
-          )
-        "
-      />
-      <q-separator />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </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"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columnsHistory"
-          v-model:pagination="historyPagination"
-          :rows="rowsHistory"
-          :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">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 
   <DialogDevelop
     v-model:modal="modalDevelop"

src/modules/04_registryPerson/components/detail/DialogHistory.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableColumn } from "quasar";
+import type { DataHistory } from "@/modules/04_registryPerson/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const { onSearchDataTable } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+const columns = defineModel<QTableColumn[]>("columns", {
+  required: true,
+});
+const visibleColumnsMain = defineModel<string[]>("visibleColumns", {
+  required: true,
+});
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const filter = ref<string>("");
+const rows = ref<DataHistory[]>([]);
+const dataMain = ref<DataHistory[]>([]);
+const visibleColumns = ref<string[]>([]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
+async function fetchDataTable() {
+  visibleColumns.value = visibleColumnsMain.value;
+  const data = await props?.fetchData?.();
+  dataMain.value = data;
+  rows.value = data;
+}
+
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลส่วนตัว */
+function serchDataTable() {
+  rows.value = onSearchDataTable(filter.value, dataMain.value, columns.value);
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataTable();
+    } else {
+      filter.value = "";
+      dataMain.value = [];
+      rows.value = [];
+      pagination.value.sortBy = "lastUpdatedAt";
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader :tittle="title" :close="() => (modal = false)" />
+
+      <q-separator />
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            dense
+            v-model="filter"
+            outlined
+            placeholder="ค้นหา"
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
+        </div>
+
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          v-model:pagination="pagination"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, watch, ref, reactive } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableColumn } from "quasar";
 import type { FormEmployee } from "@/modules/04_registryPerson/interface/request/Employee";
 import type {
   EmployeeHistory,
@@ -13,8 +14,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Employee";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
-import type { QTableColumn } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -145,9 +145,6 @@ function onSubmit() {
 
 /** ประวัติข้อมูลลูกจ้างชั่วคราว */
 const modalHistory = ref<boolean>(false);
-const filter = ref<string>("");
-const rows = ref<EmployeeHistory[]>([]);
-const rowsMain = ref<EmployeeHistory[]>([]);
 const columns = ref<QTableColumn[]>([
   {
     name: "positionEmployeeGroupId",
@@ -307,7 +304,7 @@ const columns = ref<QTableColumn[]>([
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const visibleColumns = ref<string[]>([
   "positionEmployeeGroupId",
   "positionEmployeeLineId",
   "positionEmployeePositionId",
@@ -321,38 +318,23 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 function onClickHistory() {
-  showLoader();
   modalHistory.value = true;
-  http
-    .get(config.API.informationHistoryEmployee(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.sort(
-        (a: any, b: any) =>
-          new Date(b.lastUpdatedAt).getTime() -
-          new Date(a.lastUpdatedAt).getTime()
-      );
-      rowsMain.value = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
-function serchDataTable() {
+async function fetchDataHistory() {
-  rows.value = onSearchDataTable(
+  showLoader();
-    filter.value,
+  try {
-    rowsMain.value,
+    const res = await http.get(
-    columns.value ? columns.value : []
+      config.API.informationHistoryEmployee(profileId.value)
-  );
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 onMounted(() => {
@@ -635,80 +617,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
-  <q-dialog v-model="modalHistory" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="modalHistory"
-      <DialogHeader
+    :visible-columns="visibleColumns"
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+    :title="`ประวัติแก้ไขข้อมูลส่วนตัว`"
-        :close="() => ((modalHistory = false), (filter = ''), (rows = []))"
+    :columns="columns"
-      />
+    :fetch-data="fetchDataHistory"
-      <q-separator />
+  />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right"> </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue

@@ -6,7 +6,7 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   Employment,
   EmploymentHistory,
@@ -14,6 +14,7 @@ import type {
 import type { FormEmployment } from "@/modules/04_registryPerson/interface/request/Employee";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -28,6 +29,7 @@ const {
   hideLoader,
   showLoader,
   onSearchDataTable,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const profileId = ref<string>(route.params.id.toString());
@@ -41,7 +43,8 @@ const isLeave = defineModel<boolean>("isLeave", {
 const rows = ref<Employment[]>([]);
 const rowsMain = ref<Employment[]>([]);
 const filter = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
+
+const columns = ref<QTableColumn[]>([
   {
     name: "date",
     align: "left",
@@ -106,9 +109,6 @@ const visibleColumns = ref<string[]>([
 const pagination = ref({
   sortBy: "",
 });
-const paginationHistory = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 const modalEmployment = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
@@ -186,7 +186,10 @@ function onSubmit() {
     showLoader();
     const methods = isEdit.value ? "put" : "post";
     const id = isEdit.value ? employmentId.value : profileId.value;
-    http[methods](config.API.employmentEmployee(id), formData)
+    http[methods](config.API.employmentEmployee(id), {
+      ...formData,
+      date: convertDateToAPI(formData.date),
+    })
       .then(async () => {
         await fetchListEmployment();
         await success($q, "บันทึกข้อมูลสำเร็จ");
@@ -224,30 +227,29 @@ function onDeleteEmployment(id: string) {
 
 /** ประวัติข้อมูลการจ้าง*/
 const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<EmploymentHistory[]>([]);
+const historyId = ref<string>("");
-const rowsHistoryMain = ref<EmploymentHistory[]>([]);
-const filterHistory = ref<string>("");
 
 /**
  * function เปิด dialog ประวัติการแก้ไขข้อมูลการจ้าง
  * @param id รายการการจ้าง
  */
 function onClickHistory(id: string) {
+  historyId.value = id;
   modalHistory.value = true;
+}
+
+async function fetchDataHistory() {
   showLoader();
-  http
+  try {
-    .get(config.API.employmentHistoryEmployee(id))
+    const res = await http.get(
-    .then((res) => {
+      config.API.employmentHistoryEmployee(historyId.value)
-      const data = res.data.result;
+    );
-      rowsHistory.value = data;
+    return res.data.result;
-      rowsHistoryMain.value = data;
+  } catch (err) {
-    })
+    messageError($q, err);
-    .catch((err) => {
+  } finally {
-      messageError($q, err);
+    hideLoader();
-    })
+  }
-    .finally(() => {
-      hideLoader();
-    });
 }
 
 function serchDataTable() {
@@ -258,14 +260,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
 onMounted(() => {
   profileId.value && fetchListEmployment();
 });
@@ -462,81 +456,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
-  <q-dialog v-model="modalHistory" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="modalHistory"
-      <DialogHeader
+    :visible-columns="visibleColumns"
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+    :title="`ประวัติแก้ไขข้อมูลการจ้าง`"
-        :close="
+    :columns="columns"
-          () => (
+    :fetch-data="fetchDataHistory"
-            (modalHistory = false), (filterHistory = ''), (rowsHistory = [])
+  />
-          )
-        "
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterHistory"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rowsHistory"
-          :visible-columns="visibleColumns"
-          v-model:pagination="paginationHistory"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-separator />
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>

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

@@ -8,13 +8,11 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
-import type {
+import type { FormMain } from "@/modules/04_registryPerson/interface/index/government";
-  RequestItemsHistoryObject,
-  FormMain,
-} from "@/modules/04_registryPerson/interface/index/government";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const route = useRoute();
 const $q = useQuasar();
@@ -28,7 +26,7 @@ const {
   hideLoader,
   success,
   pathRegistryEmp,
-  onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 /** props*/
@@ -71,18 +69,16 @@ const reasonSameDateRef = ref<object | null>(null);
 
 //ประวัติแก้ไขข้อมูลราชการ
 const filterKeyword = ref<string>(""); //คำค้นหา
-const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขข้อมูลราชการ;
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขข้อมูลราชการ;ยการประวัติแก้ไขข้อมูลราชการ
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
-const rowsHistoryMain = ref<RequestItemsHistoryObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
 //ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
-const visibleColumnsHistory = ref<String[]>([
+const visibleColumnsHistory = ref<string[]>([
   "dateAppoint",
   "dateStart",
   "reasonSameDate",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
+const columnsHistory = ref<QTableColumn[]>([
   {
     name: "dateAppoint",
     align: "left",
@@ -142,9 +138,55 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
+
-  sortBy: "lastUpdatedAt",
+/** ดึงข้อมูลราชการ*/
-});
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.profileNewGovernmentById(profileId.value, empType.value))
+    .then(async (res) => {
+      const data = await 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.dateLeave;
+      formMain.dateRetireLaw = data.dateRetireLaw;
+      formMain.ageAll = data.govAge;
+      formMain.absent = data.govAgeAbsent;
+      formMain.age = data.govAgePlus;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูลประวัติ */
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewGovernmentHistory(profileId.value, empType.value)
+    );
+    const data = res.data.result;
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
 
 /** เปิด dialog */
 function openDialogEdit() {
@@ -160,7 +202,6 @@ function openDialogEdit() {
 function openDialogHistory() {
   modalHistory.value = true;
   filterKeyword.value = "";
-  getDataHistory();
 }
 
 /** ปิด dialog*/
@@ -179,8 +220,8 @@ function onSubmit() {
       .patch(
         config.API.profileNewGovernmentById(profileId.value, empType.value),
         {
-          dateAppoint: containDate.value,
+          dateAppoint: convertDateToAPI(containDate.value),
-          dateStart: workDate.value,
+          dateStart: convertDateToAPI(workDate.value),
           reasonSameDate:
             dateToISO(containDate.value as Date) ===
             dateToISO(workDate.value as Date)
@@ -202,93 +243,6 @@ function onSubmit() {
   });
 }
 
-/** ดึงข้อมูลราชการ*/
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.profileNewGovernmentById(profileId.value, empType.value))
-    .then(async (res) => {
-      const data = await 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.dateLeave;
-      formMain.dateRetireLaw = data.dateRetireLaw;
-      formMain.ageAll = data.govAge;
-      formMain.absent = data.govAgeAbsent;
-      formMain.age = data.govAgePlus;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ดึงข้อมูลประวัติ */
-async function getDataHistory() {
-  showLoader();
-  await http
-    .get(config.API.profileNewGovernmentHistory(profileId.value, empType.value))
-    .then(async (res) => {
-      let data = await res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          oc: e.oc,
-          position: e.position,
-          positionPathSide: e.positionPathSide,
-          posNo: e.posNo,
-          positionLine: e.positionLine,
-          positionType: e.positionType,
-          positionLevel: e.positionLevel,
-          positionExecutive: e.positionExecutive,
-          positionExecutiveSide: e.positionExecutiveSide,
-          dateAppoint: new Date(e.dateAppoint),
-          dateStart: new Date(e.dateStart),
-          dateRetire: e.dateRetire,
-          dateRetireLaw: e.dateRetireLaw,
-          govAge: e.govAge,
-          govAgeAbsent: e.govAgeAbsent,
-          govAgePlus: e.govAgePlus,
-          reasonSameDate: e.reasonSameDate,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-          lastUpdatedAt: e.lastUpdatedAt,
-          lastUpdateFullName: e.lastUpdateFullName,
-        });
-      });
-      rowsHistoryMain.value = rowsHistory.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ค้นหาข้อมูลรายการประวัติข้อมูลราชการ */
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   getData();
@@ -648,8 +602,16 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขข้อมูลราชการ`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
+
   <!-- dialog History -->
-  <q-dialog v-model="modalHistory" persistent>
+  <!-- <q-dialog v-model="modalHistory" persistent>
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขข้อมูลราชการ"
@@ -721,7 +683,7 @@ onMounted(() => {
         </d-table>
       </q-card-section>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue

@@ -8,7 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   RequestItemsObject,
   DisciplineOps,
@@ -16,7 +16,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/discipline";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const route = useRoute();
 const $q = useQuasar();
@@ -30,6 +30,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const profileId = ref<string>(
@@ -53,20 +54,16 @@ const disciplineData = reactive<RequestItemsObject>({
   refCommandDate: null, //เอกสารอ้างอิง (ลงวันที่)
 });
 
-const rows = ref<RequestItemsObject[]>([]); //รายการวินัย
+const baseColumns = ref<QTableColumn[]>([
-const rowsMain = ref<RequestItemsObject[]>([]); //รายการวินัย
-const mode = ref<string>("table"); //การแสดงผล Table card
-const filterKeyword = ref<string>(""); //คำค้นหา
-const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
     label: "วัน เดือน ปี",
     sortable: true,
     field: "date",
-    format: (v) => date2Thai(v),
     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" }),
   },
@@ -95,7 +92,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "unStigma",
     align: "left",
-    label: "ประเภทคำสั่ง",
+    label: "ล้างมลทิน",
     sortable: true,
     field: "unStigma",
     headerStyle: "font-size: 14px",
@@ -119,8 +116,19 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "เอกสารอ้างอิง (ลงวันที่)",
     sortable: true,
-    field: "refCommandDate",
     format: (v) => date2Thai(v),
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -139,15 +147,28 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "level",
   "detail",
   "unStigma",
   "refCommandNo",
   "refCommandDate",
   "date",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+
+const rows = ref<RequestItemsObject[]>([]); //รายการวินัย
+const rowsMain = ref<RequestItemsObject[]>([]); //รายการวินัย
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
@@ -157,6 +178,9 @@ const modal = ref<boolean>(false); //แสดงข้อมูลวินั
 const modalHistory = ref<boolean>(false); //แสดงประวัติแก้ไขวินัย
 const id = ref<string>(""); //id ที่ต้แงการแก้ไข
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 const Ops = ref<DisciplineOps>({
   levelOptions: [
     { id: "0", name: "ไม่ร้ายแรง", disable: true },
@@ -267,62 +291,6 @@ async function fetchData(id: string) {
     });
 }
 
-/** funciton เพิ่มช้อมูลวินัย*/
-function addData() {
-  showLoader();
-  const body = {
-    date: disciplineData.date,
-    level: disciplineData.level,
-    detail: disciplineData.detail,
-    unStigma: disciplineData.unStigma,
-    refCommandNo: disciplineData.refCommandNo,
-    profileId: empType.value === "" ? disciplineData.profileId : undefined,
-    profileEmployeeId:
-      empType.value !== "" ? disciplineData.profileId : undefined,
-    refCommandDate: disciplineData.refCommandDate,
-  };
-  http
-    .post(config.API.profileNewDiscipline(empType.value), body)
-    .then(async () => {
-      await fetchData(profileId.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * funciton บันทึกแก่ไขช้อมูลวินัย
- * @param idData  id ที่ต้องการแก้ไข
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(
-      config.API.profileNewDisciplineByDisciplineId(idData, empType.value),
-      {
-        ...disciplineData,
-        profileId: undefined,
-      }
-    )
-    .then(async () => {
-      await fetchData(profileId.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * กดเลือกข้อมูลที่จะแก้ไข
  * @param props ค่า props ใน row ที่เลือก
@@ -339,6 +307,52 @@ function openDialogEdit(props: RequestItemsObject) {
   disciplineData.refCommandDate = props.refCommandDate;
 }
 
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const url = edit.value
+        ? config.API.profileNewDisciplineByDisciplineId(id.value, empType.value)
+        : config.API.profileNewDiscipline(empType.value);
+
+      const method = edit.value ? http.patch : http.post;
+
+      const body = {
+        ...disciplineData,
+        date: convertDateToAPI(disciplineData.date),
+        refCommandDate: convertDateToAPI(disciplineData.refCommandDate),
+        profileId: edit.value
+          ? undefined
+          : empType.value === ""
+          ? disciplineData.profileId
+          : undefined,
+        profileEmployeeId: edit.value
+          ? undefined
+          : empType.value !== ""
+          ? disciplineData.profileId
+          : undefined,
+      };
+
+      await method(url, body)
+        .then(async () => {
+          await fetchData(profileId.value);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
 /**
  * function ดูประวัติการแ้ไขรายการวินัย
  * @param idOrder
@@ -348,16 +362,21 @@ function openDialogHistory(idOrder: string) {
   id.value = idOrder;
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/** fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย*/
-function onSubmit() {
+async function fetchDataHistory() {
-  dialogConfirm(
+  showLoader();
-    $q,
+
-    () => {
+  try {
-      edit.value ? editData(id.value) : addData();
+    const res = await http.get(
-    },
+      config.API.profileNewDisciplineHisByDisciplineId(id.value, empType.value)
-    "ยืนยันการบันทึกข้อมูล",
+    );
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    const data = res.data.result;
-  );
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /** ฟังก์ค้นหาข้อมูลรายการวินัย */
@@ -374,6 +393,7 @@ onMounted(() => {
   fetchData(profileId.value);
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -745,7 +765,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขวินัย`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue

@@ -1,271 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
-
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/discipline";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const route = useRoute();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-/**
- * props
- */
-const modal = defineModel<boolean>("modal", { required: true }); //แสดงประวัติแก้ไขวินัย
-const id = defineModel<string>("id", { required: true }); //id วินัยที่ต้องการดูประวัติแก้ไขวินัย
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const filterKeyword = ref<string>(""); //คำค้นหา
-const rows = ref<RequestItemsObject[]>([]); //รายการประวัติแก้ไขวินัย
-const rowsMain = ref<RequestItemsObject[]>([]); //รายการประวัติแก้ไขวินัย
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "date",
-    align: "left",
-    label: "วัน เดือน ปี",
-    sortable: true,
-    field: "date",
-    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" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "level",
-    align: "left",
-    label: "ระดับการลงโทษทางวินัย",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "unStigma",
-    align: "left",
-    label: "ล้างมลทิน",
-    sortable: true,
-    field: "unStigma",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    format: (v) => date2Thai(v),
-    field: "refCommandDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "level",
-  "detail",
-  "unStigma",
-  "refCommandNo",
-  "refCommandDate",
-  "date",
-  "createdFullName",
-  "createdAt",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย*/
-async function getHistory() {
-  showLoader();
-  await http
-    .get(
-      config.API.profileNewDisciplineHisByDisciplineId(id.value, empType.value)
-    )
-    .then(async (res) => {
-      let data = await res.data.result;
-      rows.value = [];
-      data.map((e: RequestItemsObject) => {
-        rows.value.push({
-          ...e,
-          id: e.id,
-          level: e.level,
-          detail: e.detail,
-          unStigma: e.unStigma,
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-        });
-      });
-      rowsMain.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ค้นหาข้อมูลรายการวินัย */
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไขวินัย
- */
-watch(modal, (status) => {
-  if (status == true) {
-    getHistory();
-    filterKeyword.value = "";
-  } else {
-    filterKeyword.value = "";
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขวินัย"
-        :close="() => ((modal = false), (rows = []))"
-      />
-      <q-separator color="grey-4" />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableColumn } from "quasar";
 
 import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
@@ -12,7 +12,6 @@ import type {
   DetailData,
   DataOptionLeave,
   DataOption,
-  ResponseTotalObject,
 } from "@/modules/04_registryPerson/interface/index/leave";
 import type {
   DataLeave,
@@ -20,7 +19,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 /**props*/
 const isLeave = defineModel<boolean>("isLeave", {
@@ -46,7 +45,6 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-const rowsTotal = ref<ResponseTotalObject[]>([]);
 const id = ref<string>("");
 
 const mode = ref<string>("table");
@@ -77,10 +75,7 @@ const statLeaveOptionFilter = ref<DataOption[]>([
   { id: "waitting", name: "รออนุมัติ" },
 ]);
 
-//Table
+const baseColumns = ref<QTableColumn[]>([
-const rows = ref<DetailData[]>([]);
-const rowsMain = ref<DetailData[]>([]);
-const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -109,10 +104,10 @@ const columns = ref<QTableProps["columns"]>([
     label: "วัน เดือน ปี ที่ลา",
     sortable: true,
     field: "dateLeave",
-    format(val, row) {
-      return dateThaiRange([row.dateStartLeave, row.dateEndLeave]);
-    },
     headerStyle: "font-size: 14px",
+    format(val, row) {
+      return dateThaiRange([row.dateStartLeave, row.dateEndLeave]) || "";
+    },
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
@@ -136,11 +131,11 @@ const columns = ref<QTableProps["columns"]>([
     label: "สถานะ",
     sortable: true,
     field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
     format(val, row) {
       return statusLeave(val);
     },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -155,6 +150,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "lastUpdatedAt",
     align: "left",
@@ -168,43 +174,59 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "no",
   "typeLeave",
   "dateLeave",
   "numLeave",
   "status",
   "reason",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
 
+//Table
+const rows = ref<DetailData[]>([]);
+const rowsMain = ref<DetailData[]>([]);
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const statusLeave = (val: string) => {
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
-  switch (val) {
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
-    case "waitting":
-      return "รออนุมัติ";
-    case "reject":
-      return "ไม่ผ่านการอนุมัติ";
-    case "approve":
-      return "ผ่านการอนุมัติ";
-    case "cancel":
-      return "ยกเลิก";
-    default:
-      return "-";
-  }
-};
 
-const clickEditRowType = () => {
+/** function fetch ข้อมูลรายการลา*/
-  const filter = typeLeaveOptionFilter.value.filter(
+async function getData() {
-    (v: DataOptionLeave) => v.id == typeLeave.value?.id
+  showLoader();
-  );
+  await http
-  if (filter.length > 0) {
+    .get(config.API.profileNewLeaveById(profileId.value, empType.value))
-    numUsedLeave.value = filter[0].totalLeave;
+    .then(async (res) => {
-  }
+      const data = await res.data.result;
-};
+      rows.value = data.map((item: DataLeave) => ({
+        ...item,
+        id: item.id,
+        typeLeave: item.leaveType.name,
+        code: item.leaveType.refCommandDate,
+        dateStartLeave: item.dateLeaveStart,
+        dateEndLeave: item.dateLeaveEnd,
+        numLeave: item.leaveDays,
+        typeLeaveId: item.leaveTypeId,
+      }));
+      rowsMain.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 /** function เปิด dialog ข้อมูลการลา*/
 function openDialogAdd() {
@@ -235,8 +257,7 @@ function openDialogAdd() {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
-function clickTotal() {
+function fetchTypeLeave() {
-  rowsTotal.value = [];
   showLoader();
   http
     .get(config.API.profileNewLeaveType())
@@ -277,32 +298,53 @@ function openDialogEdit(props: DetailData) {
     new Date(props.dateEndLeave as Date),
   ];
   numLeave.value = props.numLeave;
-  clickTotal();
+  fetchTypeLeave();
-  if (rowsTotal.value.length > 0) {
-    let data: DataOptionLeave[] = [];
-    rowsTotal.value.map((e: ResponseTotalObject) => {
-      data.push({
-        id: e.typeLeaveId,
-        name: e.typeLeave,
-        totalLeave: e.totalLeave,
-      });
-    });
-    typeLeaveOption.value = data;
-    typeLeaveOptionFilter.value = data;
-  }
 }
 
-/** ปิด dialog ข้อมูลการลา*/
+/** function ยืนยันการบันทึกข้อมูล*/
-function closeDialog() {
+function onSubmit() {
-  modal.value = false;
+  dialogConfirm($q, async () => {
-  edit.value = false;
+    showLoader();
-  id.value = "";
+    const url = edit.value
-  typeLeave.value = null;
+      ? config.API.profileNewLeaveById(id.value, empType.value)
-  statLeave.value = "";
+      : config.API.profileNewLeave(empType.value);
-  reason.value = "";
+
-  dateRange.value = [new Date(), new Date()];
+    const methods = edit.value ? http.patch : http.post;
-  numLeave.value = 1;
+
-  numUsedLeave.value = 0;
+    const body = {
+      leaveTypeId: typeLeave.value?.id,
+      dateLeaveStart: dateToISO(dateRange.value[0]),
+      dateLeaveEnd: dateToISO(dateRange.value[1]),
+      leaveDays: numLeave.value,
+      leaveCount: 0,
+      totalLeave: 0,
+      status: statLeave.value,
+      reason: reason.value,
+      profileId: edit.value
+        ? undefined
+        : empType.value === ""
+        ? profileId.value
+        : undefined,
+      profileEmployeeId: edit.value
+        ? undefined
+        : empType.value !== ""
+        ? profileId.value
+        : undefined,
+    };
+
+    await methods(url, body)
+      .then(async () => {
+        await getData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /**
@@ -356,98 +398,34 @@ function openDialogHistory(idOrder: string) {
   id.value = idOrder;
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+async function fetchDataHistory() {
-function onSubmit() {
-  dialogConfirm($q, async () => {
-    if (edit.value == false) {
-      saveData();
-    } else {
-      editData();
-    }
-  });
-}
-
-/** บันทึกเพิ่มข้อมูล*/
-function saveData() {
   showLoader();
-  http
+  try {
-    .post(config.API.profileNewLeave(empType.value), {
+    const res = await http.get(
-      leaveTypeId: typeLeave.value?.id,
+      config.API.profileNewLeaveHistory(id.value, empType.value)
-      dateLeaveStart: dateToISO(dateRange.value[0]),
+    );
-      dateLeaveEnd: dateToISO(dateRange.value[1]),
-      leaveDays: numLeave.value,
-      leaveCount: 0,
-      totalLeave: 0,
-      status: statLeave.value,
-      reason: reason.value,
-      profileId: empType.value === "" ? profileId.value : undefined,
-      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 
-/** บันทึกแก้ไขข้อมูล*/
+    const data = res.data.result.map((e: DataLeave) => ({
-async function editData() {
+      ...e,
-  showLoader();
+      id: e.id,
-  http
+      typeLeave: e.leaveType.name,
-    .patch(config.API.profileNewLeaveById(id.value, empType.value), {
+      code: e.leaveType.refCommandDate,
-      leaveTypeId: typeLeave.value?.id,
+      dateStartLeave: e.dateLeaveStart,
-      dateLeaveStart: dateToISO(dateRange.value[0]),
+      dateEndLeave: e.dateLeaveEnd,
-      dateLeaveEnd: dateToISO(dateRange.value[1]),
+      numLeave: e.leaveDays,
-      leaveDays: numLeave.value,
+      status: e.status,
-      leaveCount: 0,
+      reason: e.reason,
-      totalLeave: 0,
+      typeLeaveId:
-      status: statLeave.value,
+        e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-      reason: reason.value,
+          ? e.typeLeaveId
-    })
+          : "",
-    .then(async () => {
+    }));
-      await getData();
+    return data;
-      await success($q, "บันทึกข้อมูลสำเร็จ");
+  } catch (err) {
-      closeDialog();
+    messageError($q, err);
-    })
+  } finally {
-    .catch((e) => {
+    hideLoader();
-      messageError($q, e);
+  }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** function fetch ข้อมูลรายการลา*/
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.profileNewLeaveById(profileId.value, empType.value))
-    .then(async (res) => {
-      const data = await res.data.result;
-      rows.value = data.map((item: DataLeave) => ({
-        ...item,
-        id: item.id,
-        typeLeave: item.leaveType.name,
-        code: item.leaveType.refCommandDate,
-        dateStartLeave: item.dateLeaveStart,
-        dateEndLeave: item.dateLeaveEnd,
-        numLeave: item.leaveDays,
-        typeLeaveId: item.leaveTypeId,
-      }));
-      rowsMain.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
 /** ฟังก์ค้นหาข้อมูลรายการวินัย */
@@ -459,13 +437,49 @@ function serchDataTable() {
   );
 }
 
-/**
+/** ปิด dialog ข้อมูลการลา*/
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+function closeDialog() {
- */
+  modal.value = false;
+  edit.value = false;
+  id.value = "";
+  typeLeave.value = null;
+  statLeave.value = "";
+  reason.value = "";
+  dateRange.value = [new Date(), new Date()];
+  numLeave.value = 1;
+  numUsedLeave.value = 0;
+}
+
+function statusLeave(val: string) {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+}
+
+function clickEditRowType() {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value?.id
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -805,7 +819,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขการลา`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue

@@ -1,334 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
-
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type {
-  DetailData,
-  FormFilter,
-} from "@/modules/04_registryPerson/interface/index/leave";
-import type { DataLeave } from "@/modules/04_registryPerson/interface/response/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-const $q = useQuasar();
-const route = useRoute();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const filterKeyword = ref<string>("");
-const rows = ref<DetailData[]>([]); //data history
-const rowsMain = ref<DetailData[]>([]); //data history
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 12,
-  keyword: "",
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
-});
-
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "typeLeave",
-    align: "left",
-    label: "ประเภทการลา",
-    sortable: true,
-    field: "typeLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateLeave",
-    align: "left",
-    label: "วัน เดือน ปี ที่ลา",
-    sortable: true,
-    field: "dateLeave",
-    headerStyle: "font-size: 14px",
-    format(val, row) {
-      return dateThaiRange([row.dateStartLeave, row.dateEndLeave]);
-    },
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "numLeave",
-    align: "left",
-    label: "จำนวนวันลา",
-    sortable: true,
-    field: "numLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return statusLeave(val);
-    },
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "reason",
-    align: "left",
-    label: "เหตุผล",
-    sortable: true,
-    field: "reason",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "no",
-  "typeLeave",
-  "dateLeave",
-  "numLeave",
-  "sumLeave",
-  "totalLeave",
-  "status",
-  "reason",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const historyPagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวัติการแก้ไขการลา */
-async function getHistory() {
-  showLoader();
-  await http
-    .get(config.API.profileNewLeaveHistory(id.value, empType.value))
-    .then(async (res) => {
-      let data = await res.data.result;
-      rows.value = [];
-      data.map((e: DataLeave) => {
-        rows.value.push({
-          ...e,
-          id: e.id,
-          typeLeave: e.leaveType.name,
-          code: e.leaveType.refCommandDate,
-          dateStartLeave: e.dateLeaveStart,
-          dateEndLeave: e.dateLeaveEnd,
-          numLeave: e.leaveDays,
-          status: e.status,
-          reason: e.reason,
-          typeLeaveId:
-            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-              ? e.typeLeaveId
-              : "",
-        });
-      });
-      rowsMain.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-function dateThaiRange(val: [Date, Date]) {
-  if (val === null) {
-  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
-    return `${date2Thai(val[0])}`;
-  } else {
-    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
-  }
-}
-
-/**
- * function convertStatus
- * @param val
- */
-function statusLeave(val: string) {
-  switch (val) {
-    case "waitting":
-      return "รออนุมัติ";
-    case "reject":
-      return "ไม่ผ่านการอนุมัติ";
-    case "approve":
-      return "ผ่านการอนุมัติ";
-    case "cancel":
-      return "ยกเลิก";
-    default:
-      return "-";
-  }
-}
-
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขการลา */
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    getHistory();
-    filterKeyword.value = "";
-  } else {
-    filterKeyword.value = "";
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขการลา"
-        :close="() => ((modal = false), (rows = []))"
-      />
-      <q-separator color="grey-4" />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="historyPagination"
-          :visible-columns="visibleColumns"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{
-                    (formFilter.page - 1) * formFilter.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableColumn } from "quasar";
 import axios from "axios";
 
 import { useRoute } from "vue-router";
@@ -13,7 +13,9 @@ import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/i
 import type { ResFileData } from "@/modules/04_registryPerson/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+
+// import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue";
 
 const route = useRoute();
 
@@ -28,6 +30,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const profileId = ref<string>(
@@ -61,11 +64,7 @@ const dutyData = reactive<RequestItemsObject>({
   isUpload: false,
 });
 
-const mode = ref<string>("table"); //การแสดงผล Table card
+const baseColumns = ref<QTableColumn[]>([
-const filterKeyword = ref<string>(""); //คำค้นหา
-const rows = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
-const rowsMain = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
-const columns = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
     align: "left",
@@ -136,31 +135,90 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "lastUpdatedAt",
+    name: "lastUpdateFullName",
     align: "left",
-    label: "วันที่แก้ไข",
+    label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "lastUpdatedAt",
+    field: "lastUpdateFullName",
-    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const visibleColumns = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "dateStart",
   "dateEnd",
   "detail",
   "reference",
   "refCommandNo",
   "refCommandDate",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+const rows = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
+const rowsMain = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
+/** fetch ข้อมูลรายการพิเศษ*/
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewDutyByProfileId(id, empType.value))
+    .then(async (res) => {
+      rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewDutyHisByDutyId(id.value, empType.value)
+    );
+    const data = res.data.result;
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 /** เปิด dialog */
 function openDialogAdd() {
   modal.value = true;
@@ -205,27 +263,21 @@ function closeDialog() {
   dutyData.refCommandNo = "";
   dutyData.refCommandDate = null;
   fileUpload.value = null;
-
   fileUpload.value = null;
   isUpload.value = false;
   fileData.value = null;
 }
 
-/** fetch ข้อมูลรายการพิเศษ*/
+/** ยืนยันการบันทึกข้อมูล*/
-async function fetchData(id: string) {
+function onSubmit() {
-  showLoader();
+  dialogConfirm(
-  await http
+    $q,
-    .get(config.API.profileNewDutyByProfileId(id, empType.value))
+    () => {
-    .then(async (res) => {
+      edit.value ? editData(id.value) : addData();
-      rows.value = await res.data.result;
+    },
-      rowsMain.value = await res.data.result;
+    "ยืนยันการบันทึกข้อมูล",
-    })
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    .catch((err) => {
+  );
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
 /** functoin บันทึกการเพิ่มข้อมูล*/
@@ -234,12 +286,12 @@ function addData() {
   const body = {
     profileId: empType.value === "" ? profileId.value : undefined,
     profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-    dateStart: dutyData.dateStart,
+    dateStart: convertDateToAPI(dutyData.dateStart),
-    dateEnd: dutyData.dateEnd,
+    dateEnd: convertDateToAPI(dutyData.dateEnd),
     detail: dutyData.detail,
     reference: dutyData.reference,
     refCommandNo: dutyData.refCommandNo,
-    refCommandDate: dutyData.refCommandDate,
+    refCommandDate: convertDateToAPI(dutyData.refCommandDate),
   };
   http
     .post(config.API.profileNewDuty(empType.value), body)
@@ -265,10 +317,13 @@ function editData(idData: string) {
   http
     .patch(config.API.profileNewDutyByDutyId(idData, empType.value), {
       ...dutyData,
+      dateStart: convertDateToAPI(dutyData.dateStart),
+      dateEnd: convertDateToAPI(dutyData.dateEnd),
+      refCommandDate: convertDateToAPI(dutyData.refCommandDate),
       profileId: undefined,
       isUpload: !edit.value ? undefined : isUpload.value,
     })
-    .then(async (res) => {
+    .then(async () => {
       if (fileUpload.value && idData) {
         await uploadProfile(idData);
       }
@@ -384,18 +439,6 @@ async function onDownloadFile(id: string, isLoad: boolean = true) {
     });
 }
 
-/** ยืนยันการบันทึกข้อมูล*/
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    () => {
-      edit.value ? editData(id.value) : addData();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-
 function serchDataTable() {
   rows.value = onSearchDataTable(
     filterKeyword.value,
@@ -917,7 +960,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขปฏิบัติราชการพิเศษ`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>

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

@@ -1,266 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
-import { useRoute } from "vue-router";
-
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const filterKeyword = ref<string>(""); //คำค้นหา
-const rows = ref<ResponseObject[]>([]); //data history
-const rowsMain = ref<ResponseObject[]>([]); //data history
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "dateStart",
-    align: "left",
-    label: "เริ่มต้น",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "dateEnd",
-    align: "left",
-    label: "สิ้นสุด",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "reference",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "reference",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "dateStart",
-  "dateEnd",
-  "detail",
-  "reference",
-  "refCommandNo",
-  "refCommandDate",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const historyPagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
-function getHistory() {
-  showLoader();
-  http
-    .get(config.API.profileNewDutyHisByDutyId(id.value, empType.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          dateStart: new Date(e.dateStart),
-          dateEnd: new Date(e.dateEnd),
-          detail: e.detail,
-          reference: e.reference,
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-          lastUpdateFullName: e.lastUpdateFullName,
-          lastUpdatedAt: e.lastUpdatedAt,
-        });
-      });
-      rowsMain.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    getHistory();
-    filterKeyword.value = "";
-  } else {
-    filterKeyword.value = "";
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
-        :close="() => ((modal = false), (rows = []))"
-      />
-      <q-separator />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="historyPagination"
-          :visible-columns="visibleColumns"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue

@@ -8,12 +8,12 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DataActing } from "@/modules/04_registryPerson/interface/request/Government";
 import type { ResActingPosData } from "@/modules/04_registryPerson/interface/response/Government";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const route = useRoute();
@@ -28,6 +28,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const profileId = ref<string>(
@@ -40,12 +41,7 @@ const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
-/** Table*/
+const baseColumns = ref<QTableColumn[]>([
-const rows = ref<ResActingPosData[]>([]); //รายการวินัย
-const rowsMain = ref<ResActingPosData[]>([]); //รายการวินัย
-const mode = ref<string>("table"); //การแสดงผล Table card
-const filterKeyword = ref<string>(""); //คำค้นหา
-const columns = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
     align: "left",
@@ -119,7 +115,17 @@ const columns = ref<QTableProps["columns"]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "lastUpdatedAt",
     align: "left",
@@ -133,19 +139,35 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "dateStart",
   "dateEnd",
   "posNo",
   "position",
   "refCommandNo",
   "status",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+
+/** Table*/
+const rows = ref<ResActingPosData[]>([]); //รายการวินัย
+const rowsMain = ref<ResActingPosData[]>([]); //รายการวินัย
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** Dialog*/
 const isStatusEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
@@ -164,15 +186,6 @@ const formData = reactive<DataActing>({
   status: false,
 });
 
-/** ฟังก์ค้นหาข้อมูลรายการ */
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
 async function fetchData() {
   showLoader();
   await http
@@ -190,11 +203,28 @@ async function fetchData() {
     });
 }
 
+/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileActpositionHistory(rowId.value, empType.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     const body = {
       ...formData,
+      dateStart: convertDateToAPI(formData.dateStart),
+      dateEnd: convertDateToAPI(formData.dateEnd),
       profileId: isStatusEdit.value ? undefined : profileId.value,
     };
     const method = isStatusEdit.value ? "patch" : "post";
@@ -252,6 +282,15 @@ function closeDialogForm() {
   formData.status = false;
 }
 
+/** ฟังก์ค้นหาข้อมูลรายการ */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchData();
 });
@@ -618,7 +657,14 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:id="rowId" />
+  <!-- <DialogHistory v-model:modal="modalHistory" v-model:id="rowId" /> -->
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขรักษาการในตำแหน่ง`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 
   <DialogPreviewCommand
     v-model:modal="modalCommand"

src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue

@@ -1,242 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
-import { useRoute } from "vue-router";
-
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const filterKeyword = ref<string>(""); //คำค้นหา
-const rows = ref<ResponseObject[]>([]); //data history
-const rowsMain = ref<ResponseObject[]>([]); //data history
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันที่เริ่มต้น",
-    sortable: true,
-    field: "dateStart",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateEnd",
-    align: "left",
-    label: "วันที่สิ้นสุด",
-    sortable: true,
-    field: "dateEnd",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    format(val, row) {
-      return row.status ? "ใช้งาน" : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "dateStart",
-  "dateEnd",
-  "posNo",
-  "position",
-  "status",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const historyPagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
-function fetchDataHistory() {
-  showLoader();
-  http
-    .get(config.API.profileActpositionHistory(id.value, empType.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = data;
-      rowsMain.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก fetchDataHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    fetchDataHistory();
-    filterKeyword.value = "";
-  } else {
-    filterKeyword.value = "";
-    rows.value = [];
-    rowsMain.value = [];
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขรักษาการในตำแหน่ง"
-        :close="() => ((modal = false), (rows = []))"
-      />
-      <q-separator />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="historyPagination"
-          :visible-columns="visibleColumns"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue

@@ -9,7 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DatAssistance } from "@/modules/04_registryPerson/interface/request/Government";
 import type {
   ResAssistanceData,
@@ -17,7 +17,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Government";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernmentHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const route = useRoute();
@@ -32,6 +32,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const profileId = ref<string>(
@@ -44,12 +45,7 @@ const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
-/** Table*/
+const baseColumns = ref<QTableColumn[]>([
-const rows = ref<ResAssistanceData[]>([]); //รายการวินัย
-const rowsMain = ref<ResAssistanceData[]>([]); //รายการวินัย
-const mode = ref<string>("table"); //การแสดงผล Table card
-const filterKeyword = ref<string>(""); //คำค้นหา
-const columns = ref<QTableProps["columns"]>([
   {
     name: "agency",
     align: "left",
@@ -107,6 +103,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "lastUpdatedAt",
     align: "left",
@@ -120,15 +127,31 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "agency",
   "dateStart",
   "dateEnd",
   "commandNo",
   "document",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
+/** Table*/
+const rows = ref<ResAssistanceData[]>([]); //รายการวินัย
+const rowsMain = ref<ResAssistanceData[]>([]); //รายการวินัย
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
@@ -182,11 +205,28 @@ async function fetchData() {
     });
 }
 
+/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileAssistanceHistory(rowId.value, empType.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     const body = {
       ...formData,
+      dateStart: convertDateToAPI(formData.dateStart),
+      dateEnd: convertDateToAPI(formData.dateEnd),
       profileId: isStatusEdit.value ? undefined : profileId.value,
       isUpload: !isStatusEdit.value ? undefined : isUpload.value,
     };
@@ -825,7 +865,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:id="rowId" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขรายการช่วยราชการ`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 
   <DialogPreviewCommand
     v-model:modal="modalCommand"

src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernmentHistory.vue

@@ -1,239 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
-import { useRoute } from "vue-router";
-
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const filterKeyword = ref<string>(""); //คำค้นหา
-const rows = ref<ResponseObject[]>([]); //data history
-const rowsMain = ref<ResponseObject[]>([]); //data history
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "agency",
-    align: "left",
-    label: "หน่วยงานที่ให้ช่วยราชการ",
-    sortable: true,
-    field: "agency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันเริ่มช่วยราชการ",
-    sortable: true,
-    field: "dateStart",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateEnd",
-    align: "left",
-    label: "วันสิ้นสุดการช่วยราชการ",
-    sortable: true,
-    field: "dateEnd",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "commandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "document",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "document",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "agency",
-  "dateStart",
-  "dateEnd",
-  "commandNo",
-  "document",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const historyPagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
-function fetchDataHistory() {
-  showLoader();
-  http
-    .get(config.API.profileAssistanceHistory(id.value, empType.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = data;
-      rowsMain.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก fetchDataHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    fetchDataHistory();
-    filterKeyword.value = "";
-  } else {
-    filterKeyword.value = "";
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขรายการช่วยราชการ"
-        :close="() => ((modal = false), (rows = []))"
-      />
-      <q-separator />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          v-model:pagination="historyPagination"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue

@@ -9,7 +9,7 @@ import { useGovernmentPosDataStore } from "@/modules/04_registryPerson/stores/Po
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { FormPostition } from "@/modules/04_registryPerson/interface/index/government";
 import type {
@@ -25,7 +25,7 @@ import type { ResListSalary } from "@/modules/04_registryPerson/interface/respon
 import type { DataCardPos } from "@/modules/04_registryPerson/interface/index/government";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const $q = useQuasar();
@@ -51,19 +51,12 @@ const {
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
-  convertDateToAPI
+  convertDateToAPI,
 } = useCounterMixin();
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-//Table
+const baseColumns = ref<QTableColumn[]>([
-const rows = ref<DataPositions[]>([]); //รายการตำแหน่งเงินเดือน
-const rowsMain = ref<DataPositions[]>([]); //รายการตำแหน่งเงินเดือน
-const keyword = ref<string>(""); //คำค้นหา
-const modalCommand = ref<boolean>(false);
-const command = ref<string>("");
-const commandId = ref<string>("");
-const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "commandDateAffect",
     align: "left",
@@ -88,7 +81,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format(val, row) {
       return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}.${row.posNo}`
+        ? `${row.posNoAbb}${row.posNo}`
         : row.posNo
         ? row.posNo
         : "-";
@@ -252,20 +245,35 @@ const baseColumns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const columns = computed(() => {
+const baseVisibleColumns = ref<string[]>([
-  if (empType.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-const visibleColumns = ref<string[]>([
   "commandDateAffect",
   "posNo",
   "positionName",
@@ -278,7 +286,29 @@ const visibleColumns = ref<string[]>([
   "commandDateSign",
   "organization",
   "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
+
+//Table
+const rows = ref<DataPositions[]>([]); //รายการตำแหน่งเงินเดือน
+const rowsMain = ref<DataPositions[]>([]); //รายการตำแหน่งเงินเดือน
+const keyword = ref<string>(""); //คำค้นหา
+const modalCommand = ref<boolean>(false);
+const command = ref<string>("");
+const commandId = ref<string>("");
+
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter(
+    (e: QTableColumn) =>
+      e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAt"
+  )
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter(
+    (e: string) => e !== "lastUpdateFullName" && e !== "lastUpdatedAt"
+  )
+);
 const pagination = ref({
   sortBy: "",
 });
@@ -296,6 +326,7 @@ const formData = reactive<FormPostition>({
   positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
   positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
   positionLine: "", // สายงาน
+  positionCee: "", //ระดับซี
   positionPathSide: "", //ด้าน/สาขา
   positionExecutive: "", //ตำแหน่งทางการบริหาร
   amount: null, //เงินเดือน
@@ -308,6 +339,9 @@ const formData = reactive<FormPostition>({
   remark: "", //หมายเหตุ
 });
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 const modalDialogSalary = ref<boolean>(false); //แสดง popup ตำแหน่งเงินเดือน
 const isStatusEdit = ref<boolean>(false); //สถานะแก้ไขข้อมูลตำแหน่งเงินเดือน
 const salaryId = ref<string>(""); //id ที่ต้องการแก้ไข
@@ -504,7 +538,7 @@ async function fetchDataTenure() {
         // นำข้อมูลไปใส่ใน cardData
         cardData.value[0].data = position;
         cardData.value[1].data = posLevel;
-        if (empType.value !== "-employee") {
+        if (empType.value !== "-employee" && cardData.value.length > 2) {
           cardData.value[2].data = posExecutive;
         }
 
@@ -529,9 +563,9 @@ async function fetchDataTenure() {
  * @param status แก่ไข , เพิ่ม
  */
 async function updateSelectType(val: string, status: boolean = false) {
-  const listLevel = dataLevel.value.find(
+  const listLevel = val
-    (e: DataPosType) => e.posTypeName === val
+    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
-  );
+    : null;
 
   if (listLevel) {
     store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
@@ -543,6 +577,9 @@ async function updateSelectType(val: string, status: boolean = false) {
     }));
 
     formData.positionLevel = !status ? "" : formData.positionLevel;
+  } else {
+    store.posLevelData = [];
+    formData.positionLevel = "";
   }
 }
 
@@ -588,6 +625,7 @@ async function onClickOpenDialog(
   formData.positionName = statusEdit ? data.positionName : "";
   formData.positionType = statusEdit ? data.positionType : "";
   formData.positionLevel = statusEdit ? data.positionLevel : "";
+  formData.positionCee = statusEdit ? data.positionCee : "";
   formData.positionLine = statusEdit ? data.positionLine : "";
   formData.positionPathSide = statusEdit ? data.positionPathSide : "";
   formData.positionExecutive = statusEdit ? data.positionExecutive : "";
@@ -736,6 +774,22 @@ function serchDataTable() {
   );
 }
 
+/** function fetch ข้อมูลประวัติการแก้ไข*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileListSalaryHistoryNew(salaryId.value, empType.value)
+    );
+
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 function classInput(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -913,7 +967,8 @@ onMounted(async () => {
 
         <q-card-section style="max-height: 100%" class="scroll">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
+            <div class="col-xs-12 col-sm-12 col-md-8">
+              <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
               <q-select
                 outlined
                 :class="classInput(true)"
@@ -933,7 +988,6 @@ onMounted(async () => {
                 fill-input
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']"
                 @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
                     )"
@@ -948,7 +1002,43 @@ onMounted(async () => {
               </q-select>
             </div>
 
-            <div class="col-xs-6 col-sm-12 col-md-6">
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
+              <datepicker
+                v-model="formData.commandDateAffect"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(true)"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    borderless
+                    :model-value="date2Thai(formData.commandDateAffect)"
+                    :label="`${'วันที่คำสั่งมีผล'}`"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        color="primary"
+                        class="cursor-pointer"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-6 col-sm-12 col-md-8">
               <div class="row q-col-gutter-sm">
                 <div class="col-6">
                   <q-input
@@ -962,10 +1052,9 @@ onMounted(async () => {
                     :label="`${'เลขที่คำสั่ง'}`"
                   />
                 </div>
-                <label class="col-1 flex justify-center items-center text-bold"
+                <label class="col-1 flex justify-center items-center">/</label>
-                  >/</label
-                >
                 <div class="col-5">
+                  <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.commandYear"
@@ -990,7 +1079,6 @@ onMounted(async () => {
                             : formData.commandYear + 543
                         "
                         :label="`${'พ.ศ.'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1007,47 +1095,8 @@ onMounted(async () => {
               </div>
             </div>
 
-            <div class="col-xs-6 col-sm-6 col-md-3">
+            <div class="col-xs-6 col-sm-6 col-md-4">
-              <datepicker
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
-                v-model="formData.commandDateAffect"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :class="classInput(true)"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    borderless
-                    :model-value="date2Thai(formData.commandDateAffect)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือกวันที่คำสั่งมีผล'}`,
-                        ]"
-                    :label="`${'วันที่คำสั่งมีผล'}`"
-                    hide-bottom-space
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        color="primary"
-                        class="cursor-pointer"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-
-            <div class="col-xs-6 col-sm-6 col-md-3">
               <datepicker
                 v-model="formData.commandDateSign"
                 :locale="'th'"
@@ -1066,11 +1115,6 @@ onMounted(async () => {
                     dense
                     borderless
                     :model-value="date2Thai(formData.commandDateSign)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือก วันที่ลงนาม'}`,
-                        ]"
                     :label="`${'วันที่ลงนาม'}`"
                     hide-bottom-space
                   >
@@ -1087,6 +1131,10 @@ onMounted(async () => {
               </datepicker>
             </div>
 
+            <div class="col-12">
+              <q-separator />
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
                 :class="classInput(true)"
@@ -1102,6 +1150,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1111,12 +1160,12 @@ onMounted(async () => {
                 v-model="formData.posNo"
                 hide-bottom-space
                 :label="`${'ตำแหน่งเลขที่'}`"
-                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
               >
               </q-input>
             </div>
 
             <div class="col-xs-12 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1126,11 +1175,11 @@ onMounted(async () => {
                 v-model="formData.positionName"
                 :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
                 hide-bottom-space
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']"
               />
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
               <q-select
                 ref="positionType Ref"
                 outlined
@@ -1150,8 +1199,8 @@ onMounted(async () => {
                 hide-selected
                 fill-input
                 input-debounce="0"
+                clearable
                 @update:model-value="updateSelectType"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
@@ -1167,6 +1216,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
               <q-select
                 :class="classInput(true)"
                 :disable="!formData.positionType"
@@ -1175,7 +1225,6 @@ onMounted(async () => {
                 lazy-rules
                 borderless
                 v-model="formData.positionLevel"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']"
                 :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
                 emit-value
                 map-options
@@ -1200,6 +1249,20 @@ onMounted(async () => {
               </q-select>
             </div>
 
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-input
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.positionCee"
+                hide-bottom-space
+                :label="`${'ระดับซี'}`"
+              >
+              </q-input>
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
                 outlined
@@ -1303,6 +1366,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]" -->
               <q-input
                 :class="classInput(true)"
                 ref="salaryRef"
@@ -1312,7 +1376,6 @@ onMounted(async () => {
                 label="เงินเดือน"
                 mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 lazy-rules
                 hide-bottom-space
               />
@@ -1425,7 +1488,13 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขตำแหน่ง`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
   <DialogPreviewCommand
     v-model:modal="modalCommand"
     v-model:command="command"

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue

@@ -1,405 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { useQuasar } from "quasar";
-
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useGovernmentPosDataStore } from "@/modules/04_registryPerson/stores/Position";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type { DataPositions } from "@/modules/04_registryPerson/interface/response/Position";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const route = useRoute();
-const store = useGovernmentPosDataStore();
-const {
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  pathRegistryEmp,
-  onSearchDataTable,
-  findOrgName,
-} = useCounterMixin();
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const salaryId = defineModel<string>("salaryId", { required: true });
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const rows = ref<DataPositions[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const rowsMain = ref<DataPositions[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const keyword = ref<string>(""); //คำค้นหา
-const baseColumns = ref<QTableProps["columns"]>([
-  {
-    name: "commandDateAffect",
-    align: "left",
-    label: "วันที่คำสั่งมีผล",
-    sortable: true,
-    field: "commandDateAffect",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}.${row.posNo}`
-        : row.posNo
-        ? row.posNo
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionName",
-    align: "left",
-    label: empType.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: empType.value === "-employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: empType.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    format(val, row) {
-      return `${
-        row.positionLevel
-          ? row.positionLevel
-          : row.positionCee
-          ? row.positionCee
-          : "-"
-      }`;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(v, row) {
-      return row.amount
-        ? `${row.amount.toLocaleString()}${
-            row.amountSpecial !== 0 && row.amountSpecial
-              ? ` (${row.amountSpecial.toLocaleString()})`
-              : ""
-          }`
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "commandNo",
-    format(val, row) {
-      return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
-        : "";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandCode",
-    align: "left",
-    label: "ประเภทคำสั่ง",
-    sortable: true,
-    field: "commandCode",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return store.convertCommandCodeName(val);
-    },
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandDateSign",
-    align: "left",
-    label: "วันที่ลงนาม",
-    sortable: true,
-    field: "commandDateSign",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return findOrgName({
-        root: row.orgRoot,
-        child1: row.orgChild1,
-        child2: row.orgChild2,
-        child3: row.orgChild3,
-        child4: row.orgChild4,
-      });
-    },
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "commandDateAffect",
-  "posNo",
-  "positionName",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
-  "amount",
-  "commandNo",
-  "commandCode",
-  "commandDateSign",
-  "organization",
-  "remark",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const columns = computed(() => {
-  if (empType.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวัติการแก้ไข*/
-function fetchListHistory() {
-  showLoader();
-  http
-    .get(config.API.profileListSalaryHistoryNew(salaryId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
-      rowsMain.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ชันปิด Popup*/
-function closeDialog() {
-  modal.value = false;
-  keyword.value = "";
-  rows.value = [];
-}
-
-/** ฟังก์ค้นหาข้อมูลรายการวินัย */
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    keyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(
-  () => modal.value,
-  () => {
-    modal.value && fetchListHistory();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
-        :close="closeDialog"
-      />
-      <q-separator color="grey-4" />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="keyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="pagination"
-          :visible-columns="visibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols">
-                <div v-if="col.name == 'organization'" class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>

src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableColumn } from "quasar";
 
 import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
@@ -11,7 +11,7 @@ import config from "@/app.config";
 import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const route = useRoute();
 const $q = useQuasar();
@@ -25,6 +25,7 @@ const {
   dialogConfirm,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 const id = ref<string>("");
@@ -48,10 +49,7 @@ const date = ref<Date | null>(null); //วันที่
 const detail = ref<string>(""); //รายละเอียด
 
 //Table
-const rows = ref<RowList[]>([]);
+const baseColumns = ref<QTableColumn[]>([
-const rowsMain = ref<RowList[]>([]);
-const filterKeyword = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
@@ -76,23 +74,52 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "lastUpdatedAt",
+    name: "lastUpdateFullName",
     align: "left",
-    label: "วันที่แก้ไข",
+    label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "lastUpdatedAt",
+    field: "lastUpdateFullName",
-    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const visibleColumns = ref<String[]>(["date", "detail", "lastUpdatedAt"]);
+const baseVisibleColumns = ref<string[]>([
+  "date",
+  "detail",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const rows = ref<RowList[]>([]);
+const rowsMain = ref<RowList[]>([]);
+const filterKeyword = ref<string>("");
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** fetch รายการข้อมูลอื่นๆ*/
 async function getData() {
   showLoader();
@@ -121,7 +148,6 @@ function openDialogAdd() {
 function openDialogEdit(props: RowList) {
   modal.value = true;
   edit.value = true;
-
   id.value = props.id;
   date.value = props.date;
   detail.value = props.detail;
@@ -136,6 +162,21 @@ function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
 }
 
+/** ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewOtherHisById(id.value, empType.value)
+    );
+    return res.data.result;
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
+}
+
 /** ปิด dialog */
 function closeDialog() {
   modal.value = false;
@@ -145,65 +186,54 @@ function closeDialog() {
 }
 
 /** validate check*/
-function validateForm() {
+function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      if (edit.value) {
+      showLoader();
-        editData();
+      // if (edit.value) {
-      } else {
+      //   editData();
-        saveData();
+      // } else {
-      }
+      //   saveData();
+      // }
+
+      const url = edit.value
+        ? config.API.profileNewOtherById(id.value, empType.value)
+        : config.API.profileNewOther(empType.value);
+
+      const method = edit.value ? http.patch : http.post;
+
+      await method(url, {
+        date: convertDateToAPI(date.value),
+        detail: detail.value,
+        profileId: edit.value
+          ? undefined
+          : empType.value === ""
+          ? profileId.value
+          : undefined,
+        profileEmployeeId: edit.value
+          ? undefined
+          : empType.value !== ""
+          ? profileId.value
+          : undefined,
+      })
+        .then(async () => {
+          await getData();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
-/** บันทึกเพิ่มข้อมูล*/
-function saveData() {
-  showLoader();
-  http
-    .post(config.API.profileNewOther(empType.value), {
-      profileId: empType.value === "" ? profileId.value : undefined,
-      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-      date: date.value,
-      detail: detail.value,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** บันทึกแก้ไขข้อมูล*/
-function editData() {
-  showLoader();
-  http
-    .patch(config.API.profileNewOtherById(id.value, empType.value), {
-      date: date.value,
-      detail: detail.value,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 function serchDataTable() {
   rows.value = onSearchDataTable(
     filterKeyword.value,
@@ -393,7 +423,7 @@ onMounted(() => {
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 70%">
-      <q-form greedy @submit.prevent @validation-success="validateForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="edit ? 'แก้ไขข้อมูลอื่นๆ' : 'เพิ่มข้อมูลอื่นๆ'"
           :close="closeDialog"
@@ -463,7 +493,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue

@@ -1,211 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
-
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const route = useRoute();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const rows = ref<RowList[]>([]); // data history
-const rowsMain = ref<RowList[]>([]); // data history
-const filterKeyword = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "date",
-    align: "left",
-    label: "วันที่",
-    sortable: true,
-    field: "date",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width: 50px;",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "date",
-  "detail",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล*/
-function getHistory() {
-  showLoader();
-  http
-    .get(config.API.profileNewOtherHisById(id.value, empType.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: RowList) => {
-        rows.value.push({
-          id: e.id,
-          date: e.date,
-          detail: e.detail,
-          lastUpdateFullName: e.lastUpdateFullName,
-          lastUpdatedAt: new Date(e.lastUpdatedAt),
-        });
-      });
-      rowsMain.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filterKeyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    getHistory();
-    filterKeyword.value = "";
-  } else {
-    filterKeyword.value = "";
-    rows.value = [];
-    filterKeyword.value = "";
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader tittle="ประวัติแก้ไขอื่นๆ" :close="() => (modal = false)" />
-      <q-separator color="grey-4" />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch, ref, reactive } from "vue";
+import { onMounted, watch, ref, reactive, defineAsyncComponent } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
@@ -16,6 +16,7 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -30,7 +31,7 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
-  onSearchDataTable,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /** props*/
@@ -55,9 +56,6 @@ const empType = ref<string>(
 const id = ref<string>("");
 const modal = ref<boolean>(false); // แสดงฟอร์มแก้ไขประวัติส่วนตัว
 const informaData = ref<ResponseObject>(); // ข้อมูลส่วนคัว
-const rowsHistory = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
-const rowsHistoryMain = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
-const filterHistory = ref<string>(""); //คำค้นหาช้อมูลรายการประวัติการแก้ไข
 const modalHistory = ref<boolean>(false); // แสดงช้อมูลรายการประวัติการแก้ไข
 const age = ref<string | null>(""); //อายุ
 const formData = reactive<RequestObject>(store.defaultProfile); //ฟอร์มข้อมูลการแก่้ไข
@@ -255,7 +253,7 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const visibleColumnsHistory = ref<string[]>([
   "citizenId",
   "prefix",
   "rank",
@@ -272,9 +270,6 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 /** function เรียกข้อมูลข้อมูลส่วนตัว*/
 async function getData() {
@@ -331,6 +326,7 @@ function onSubmit() {
           ...formData,
           employeeClass:
             route.name === "registry-employeeId" ? "TEMP" : undefined,
+          birthDate: convertDateToAPI(formData.birthDate),
         })
         .then(async () => {
           await props.fetchDataPersonal?.();
@@ -352,21 +348,22 @@ function onSubmit() {
 
 /** function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว*/
 async function clickHistory() {
-  showLoader();
   modalHistory.value = true;
-  filterHistory.value = "";
+}
-  await http
+
-    .get(config.API.profileNewProfileHisById(id.value, empType.value))
+async function fetchDataHistory() {
-    .then(async (res) => {
+  showLoader();
-      rowsHistory.value = await res.data.result;
+  try {
-      rowsHistoryMain.value = await res.data.result;
+    const res = await http.get(
-    })
+      config.API.profileNewProfileHisById(id.value, empType.value)
-    .catch((e) => {
+    );
-      messageError($q, e);
+    const data = await res.data.result;
-    })
+    return data;
-    .finally(() => {
+  } catch (e) {
-      hideLoader();
+    messageError($q, e);
-    });
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -396,7 +393,6 @@ function changeCardID(citizenId: string | number | null) {
 function calculateMaxDate() {
   const today = new Date();
   today.setFullYear(today.getFullYear() - 18);
-
   return today;
 }
 
@@ -417,15 +413,6 @@ watch(
   }
 );
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลส่วนตัว */
-function serchDataTable() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   const promises = [];
@@ -863,81 +850,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <!-- ประวัติแก้ไขข้อมูลส่วนตัว -->
+  <DialogHistory
-  <q-dialog v-model="modalHistory" persistent>
+    v-model:modal="modalHistory"
-    <q-card style="min-width: 80%">
+    :visible-columns="visibleColumnsHistory"
-      <DialogHeader
+    :title="`ประวัติแก้ไขข้อมูลส่วนตัว`"
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+    :columns="columnsHistory"
-        :close="
+    :fetch-data="fetchDataHistory"
-          () => (
+  />
-            (modalHistory = false), ((rowsHistory = []), (filterHistory = ''))
-          )
-        "
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </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"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          class="custom-header-table"
-          :visible-columns="visibleColumnsHistory"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style lang="scss">

src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive, watch } from "vue";
+import { onMounted, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
@@ -12,6 +12,7 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/components/information/interface/response/OldName";
 import type { DataProfile } from "@/modules/04_registryPerson/interface/response/Main";
 import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
@@ -23,7 +24,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const route = useRoute();
 const store = useProfileDataStore();
-const attrs = ref<any>(useAttrs());
+
 const { fetchPerson } = store;
 const {
   date2Thai,
@@ -165,11 +166,10 @@ const pagination = ref({
 
 const uploadUrl = ref<string>("");
 const subId = ref<string>("");
-const fileUpload = ref<File>();
+const fileUpload = ref<File | undefined>(undefined);
 
 /** ฟังก์ชันดึงข้อมูลส่วนตัว*/
 async function fetchDataPersonal() {
-  showLoader();
   await http
     .get(config.API.registryNewByProfileId(profileId.value, empType.value))
     .then(async (res) => {
@@ -178,9 +178,6 @@ async function fetchDataPersonal() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -189,7 +186,6 @@ async function fetchDataPersonal() {
  * @param id id profile
  */
 async function fetchData(id: string) {
-  showLoader();
   await http
     .get(config.API.profileNewChangeNameByProfileId(id, empType.value))
     .then(async (res) => {
@@ -198,19 +194,46 @@ async function fetchData(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** ฟังก์ชันยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
-  if (!!fileUpload.value || dialogStatus.value === "edit") {
+  if (!!fileUpload.value) {
     dialogConfirm(
       $q,
-      () => {
+      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
+        showLoader();
+        await http
+          .post(config.API.profileNewChangeName(empType.value), {
+            profileId: empType.value === "" ? profileId.value : undefined,
+            profileEmployeeId:
+              empType.value !== "" ? profileId.value : undefined,
+            prefixId: changeNameData.prefixId,
+            prefix: changeNameData.prefix,
+            firstName: changeNameData.firstName,
+            lastName: changeNameData.lastName,
+            status: changeNameData.status,
+            documentId: changeNameData.documentId,
+          })
+          .then(async (res) => {
+            subId.value = await res.data.result;
+            await Promise.all([
+              uploadProfile(res.data.result),
+              fetchData(profileId.value),
+              props?.fetchDataPersonal?.(),
+              fetchDataPersonal(),
+            ]);
+
+            closeDialog();
+            success($q, "บันทึกข้อมูลสำเร็จ");
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -242,7 +265,7 @@ async function uploadProfile(id: string) {
     )
     .then(async (res) => {
       uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
-      await uploadFileURL(uploadUrl.value, fileUpload.value);
+      await uploadFileURL(uploadUrl.value, fileUpload.value as File);
     })
     .catch((err) => {
       messageError($q, err);
@@ -254,7 +277,7 @@ async function uploadProfile(id: string) {
  * @param uploadUrl Path อัปโหลดไฟล์
  * @param file ไฟล์เอกสาร
  */
-async function uploadFileURL(uploadUrl: string, file: any) {
+async function uploadFileURL(uploadUrl: string, file: File) {
   await axios
     .put(uploadUrl, file, {
       headers: {
@@ -298,65 +321,7 @@ async function onDownloadFile(id: string) {
 }
 
 /** ฟังกชันเพิ่มการเปลี่ยนชื่อ - นามสกุล */
-async function addData() {
+async function addData() {}
-  showLoader();
-  await http
-    .post(config.API.profileNewChangeName(empType.value), {
-      profileId: empType.value === "" ? profileId.value : undefined,
-      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-      prefixId: changeNameData.prefixId,
-      prefix: changeNameData.prefix,
-      firstName: changeNameData.firstName,
-      lastName: changeNameData.lastName,
-      status: changeNameData.status,
-      documentId: changeNameData.documentId,
-    })
-    .then(async (res) => {
-      subId.value = await res.data.result;
-      await uploadProfile(res.data.result);
-      await fetchData(profileId.value);
-      await props?.fetchDataPersonal?.();
-      await fetchDataPersonal();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * ฟังกชันแก้ไขการเปลี่ยนชื่อ - นามสกุล
- * @param idData  id ที่ต้องการแก้ไช
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(
-      config.API.profileNewChangeNameByChangeNameId(idData, empType.value),
-      {
-        ...changeNameData,
-        profileId: undefined,
-      }
-    )
-    .then(async () => {
-      await uploadProfile(subId.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      await fetchData(profileId.value);
-      await props.fetchDataPersonal?.();
-      await fetchDataPersonal();
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 
 /**
  * ฟังกชันค้นหาข้อมูลใน select
@@ -376,7 +341,7 @@ function filterSelector(val: string, update: Function, refData: string) {
     case "prefixOps":
       update(() => {
         store.Ops.prefixOps = store.OpsFilter.prefixOps.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -433,6 +398,7 @@ watch(
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   // เช็ค ตัวเลือก ถ้าไม่มีให้ ดึงข้อมูลใหท่
+  showLoader();
   if (
     store.Ops.prefixOps.length === 0 ||
     store.Ops.genderOps.length === 0 ||
@@ -442,8 +408,11 @@ onMounted(async () => {
   ) {
     await fetchPerson();
   }
-
+  try {
-  await Promise.all([fetchData(profileId.value), fetchDataPersonal()]);
+    await Promise.all([fetchData(profileId.value), fetchDataPersonal()]);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -509,7 +478,6 @@ onMounted(async () => {
     bordered
     virtual-scroll
     ref="table"
-    v-bind="attrs"
     :rows="rows"
     :columns="columns"
     :visible-columns="visibleColumns"

src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue

@@ -9,13 +9,13 @@ import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address"
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address";
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Address";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const store = useAddressDataStore();
@@ -36,7 +36,6 @@ const {
   hideLoader,
   dialogConfirm,
   pathRegistryEmp,
-  onSearchDataTable,
 } = mixin;
 
 /**
@@ -81,10 +80,7 @@ const dataLabel = {
 };
 
 const modalHistory = ref<boolean>(false); //แสดง Popup ประวัติแก้ไขข้อมูลที่อยู่
-const rowsHistory = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
+const visibleColumnsHistory = ref<string[]>([
-const rowsHistoryMain = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
-const filterHistory = ref<string>(""); //คำค้นหา
-const visibleColumnsHistory = ref<String[]>([
   "currentAddress",
   "currentDistrict",
   "currentSubDistrict",
@@ -99,7 +95,7 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
+const columnsHistory = ref<QTableColumn[]>([
   {
     name: "registrationAddress",
     align: "left",
@@ -252,9 +248,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 /**
  * ฟังก์ชันดึงข้อมูลที่อยู่
@@ -470,26 +463,23 @@ function clickClose() {
   modal.value = false;
 }
 
-/**
+/** ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่*/
- * ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่
- * และดึงข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
- */
 async function clickHistory() {
-  showLoader();
   modalHistory.value = true;
-  filterHistory.value = "";
+}
-  await http
+
-    .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
+async function fetchDataHistory() {
-    .then(async (res) => {
+  showLoader();
-      rowsHistory.value = await res.data.result;
+  try {
-      rowsHistoryMain.value = await res.data.result;
+    const res = await http.get(
-    })
+      config.API.profileNewAddressHisById(profileId.value, empType.value)
-    .catch((e) => {
+    );
-      messageError($q, e);
+    const data = res.data.result;
-    })
+    return data;
-    .finally(() => {
+  } catch (err) {
-      hideLoader();
+  } finally {
-    });
+    hideLoader();
+  }
 }
 
 /**
@@ -508,15 +498,6 @@ function sameAddressToggle(v: string) {
   }
 }
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่ */
-function serchDataTable() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 /** ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้า*/
 watch(
   () => sameAddress.value,
@@ -904,74 +885,13 @@ onMounted(async () => {
   </q-dialog>
 
   <!-- ประวัติแก้ไขข้อมูลที่อยู่ -->
-  <q-dialog v-model="modalHistory" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="modalHistory"
-      <DialogHeader
+    :title="`ประวัติแก้ไขข้อมูลที่อยู่`"
-        tittle="ประวัติแก้ไขข้อมูลที่อยู่"
+    :columns="columnsHistory"
-        :close="() => ((modalHistory = false), (rowsHistory = []))"
+    :visible-columns="visibleColumnsHistory"
-      />
+    :fetch-data="fetchDataHistory"
-      <q-separator color="grey-4" />
+  />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </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"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          :visible-columns="visibleColumnsHistory"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue

@@ -9,7 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type {
   FormPerson,
@@ -17,6 +17,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/family";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -30,7 +31,6 @@ const {
   messageError,
   success,
   pathRegistryEmp,
-  onSearchDataTable,
 } = useCounterMixin();
 
 /** props*/
@@ -43,9 +43,7 @@ const profileId = ref<string>(
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 /** TableHisoty*/
-const rows = ref<any[]>([]);
+const visibleColumns = ref<string[]>([
-const rowsMain = ref<any[]>([]);
-const visibleColumns = ref<String[]>([
   "statusMarital",
   "citizenId",
   "prefix",
@@ -57,7 +55,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const columns = ref<QTableProps["columns"]>([
+const columns = ref<QTableColumn[]>([
   {
     name: "statusMarital",
     align: "left",
@@ -151,9 +149,6 @@ const columns = ref<QTableProps["columns"]>([
     format: (val) => date2Thai(val, false, true),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 /** ข้อมูล*/
 const fatherData = reactive<FormPerson>({
@@ -190,6 +185,7 @@ const modalHistory = ref<boolean>(false);
 const filterHistory = ref<string>("");
 const titleForm = ref<string>("");
 const typeForm = ref<string>("");
+const historyId = ref<string>("");
 const isEdit = ref<boolean>(false);
 const childernId = ref<string>("");
 
@@ -353,7 +349,6 @@ function closeDialog() {
   fromData.job = "";
   fromData.lastNameOld = "";
   fromData.statusMarital = "";
-  rows.value = [];
   filterHistory.value = "";
 }
 
@@ -418,10 +413,9 @@ function onOpenDialogForm(
  * @param id
  */
 async function onOpenDialogHistory(type: string, id: string = "") {
-  modalHistory.value = true;
   typeForm.value = type;
-  const historyId = type === "children" ? id : profileId.value;
+  historyId.value = type === "children" ? id : profileId.value;
-  await fetchHistory(historyId, type);
+  modalHistory.value = true;
 }
 
 /** function fetch ข้อมูลความสัมพันธ์ */
@@ -453,59 +447,41 @@ function filterSelectorRelation(val: string, update: Function) {
   });
 }
 
-/**
+async function fetchDataHistory() {
- * function fetch ข้อมูลประวัติการแก้ไขข้อมูล
- * @param id
- * @param type
- */
-async function fetchHistory(id: string, type: string) {
   showLoader();
-  await http
+  try {
-    .get(config.API.profileFamilyHistory(id, empType.value, type))
+    const res = await http.get(
-    .then(async (res) => {
+      config.API.profileFamilyHistory(
-      const data = await res.data.result;
+        historyId.value,
-      rows.value = await data.map((e: any) => ({
+        empType.value,
-        citizenId: e[`${type}CitizenId`],
+        typeForm.value
-        prefix: e[`${type}Prefix`],
+      )
-        firstName: e[`${type}FirstName`],
+    );
-        lastName: e[`${type}LastName`],
-        job: e[`${type}Career`],
-        isLive: e[`${type}Live`],
-        lastNameOld:
-          type === "couple"
-            ? e.coupleLastNameOld
-            : type === "mother"
-            ? e.motherLastNameOld
-            : undefined,
-        lastUpdateFullName: e.lastUpdateFullName,
-        lastUpdatedAt: e.lastUpdatedAt,
-        statusMarital: type === "couple" ? e.relationship : undefined,
-      }));
-      rowsMain.value = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูล */
+    const data = await res.data.result.map((e: any) => ({
-function serchDataTable() {
+      citizenId: e[`${typeForm.value}CitizenId`],
-  const baseColumns =
+      prefix: e[`${typeForm.value}Prefix`],
-    typeForm.value === "couple"
+      firstName: e[`${typeForm.value}FirstName`],
-      ? columns.value
+      lastName: e[`${typeForm.value}LastName`],
-      : typeForm.value === "mother"
+      job: e[`${typeForm.value}Career`],
-      ? columns.value?.filter((e) => e.name !== "statusMarital")
+      isLive: e[`${typeForm.value}Live`],
-      : columns.value?.filter(
+      lastNameOld:
-          (e) => e.name !== "lastNameOld" && e.name !== "statusMarital"
+        typeForm.value === "couple"
-        );
+          ? e.coupleLastNameOld
-  rows.value = onSearchDataTable(
+          : typeForm.value === "mother"
-    filterHistory.value,
+          ? e.motherLastNameOld
-    rowsMain.value,
+          : undefined,
-    baseColumns ? baseColumns : []
+      lastUpdateFullName: e.lastUpdateFullName,
-  );
+      lastUpdatedAt: e.lastUpdatedAt,
+      statusMarital: typeForm.value === "couple" ? e.relationship : undefined,
+    }));
+
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
@@ -1073,100 +1049,29 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <!-- ประวัติการแก้ไขข้อมูล -->
+  <DialogHistory
-  <q-dialog v-model="modalHistory" class="dialog" persistent>
+    v-model:modal="modalHistory"
-    <q-card style="min-width: 80%">
+    :title="`ประวัติการแก้ไขข้อมูล${
-      <DialogHeader
+      typeForm === 'father'
-        :tittle="`ประวัติการแก้ไขข้อมูล${
+        ? 'บิดา'
-          typeForm === 'father'
+        : typeForm === 'mother'
-            ? 'บิดา'
+        ? 'มารดา'
-            : typeForm === 'mother'
+        : typeForm === 'couple'
-            ? 'มารดา'
+        ? 'คู่สมรส'
-            : typeForm === 'couple'
+        : 'บุตร'
-            ? 'คู่สมรส'
+    }`"
-            : 'บุตร'
+    :columns="
-        }`"
+      typeForm === 'couple'
-        :close="closeDialog"
+        ? columns
-      />
+        : typeForm === 'mother'
-      <q-separator />
+        ? columns?.filter((e) => e.name !== 'statusMarital')
-      <q-card-section>
+        : columns?.filter(
-        <div class="row q-gutter-sm q-mb-sm">
+            (e) => e.name !== 'lastNameOld' && e.name !== 'statusMarital'
-          <q-space />
+          )
-          <q-input
+    "
-            dense
+    :visible-columns="visibleColumns"
-            v-model="filterHistory"
+    :fetch-data="fetchDataHistory"
-            ref="filterRef"
+  />
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="
-              typeForm === 'couple'
-                ? columns
-                : typeForm === 'mother'
-                ? columns?.filter((e) => e.name !== 'statusMarital')
-                : columns?.filter(
-                    (e) =>
-                      e.name !== 'lastNameOld' && e.name !== 'statusMarital'
-                  )
-            "
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="
-            typeForm === 'couple'
-              ? columns
-              : typeForm === 'mother'
-              ? columns?.filter((e) => e.name !== 'statusMarital')
-              : columns?.filter(
-                  (e) => e.name !== 'lastNameOld' && e.name !== 'statusMarital'
-                )
-          "
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue

@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -9,7 +8,7 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   DataOptionEducation,
   DataOptionEducationLevel,
@@ -22,6 +21,7 @@ import type {
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogSortEducation from "@/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -48,11 +48,7 @@ const mode = ref<string>("table"); //การแสดงของ Table card
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
-/** Table*/
+const baseColumns = ref<QTableColumn[]>([
-const keyword = ref<string>("");
-const rows = ref<ResponseObject[]>([]);
-const rowsMain = ref<ResponseObject[]>([]);
-const columns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
     align: "left",
@@ -84,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     format(val, row) {
       return row.isDate
         ? date2Thai(row.startDate)
-        : new Date(row.startDate).getFullYear() + 543;
+        : (new Date(row.startDate).getFullYear() + 543).toString();
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -97,11 +93,10 @@ const columns = ref<QTableProps["columns"]>([
     label: "ถึง",
     sortable: true,
     field: "endDate",
-
     format(val, row) {
       return row.isDate
         ? date2Thai(row.endDate)
-        : new Date(row.endDate).getFullYear() + 543;
+        : (new Date(row.endDate).getFullYear() + 543).toString();
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -249,238 +244,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "isHigh",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "",
-});
-
-/** Table ประวัติแก้ไขประวัติการศึกษา*/
-const historyKeyword = ref<string>("");
-const historyRows = ref<ResponseObject[]>([]);
-const historyRowsMain = ref<ResponseObject[]>([]);
-const historyColumns = ref<QTableProps["columns"]>([
-  {
-    name: "educationLevel",
-    align: "left",
-    label: "ระดับการศึกษา",
-    sortable: true,
-    field: "educationLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "institute",
-    align: "left",
-    label: "สถานศึกษา",
-    sortable: true,
-    field: "institute",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่",
-    sortable: true,
-    field: "startDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.startDate)
-        : new Date(row.startDate).getFullYear() + 543;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "ถึง",
-    sortable: true,
-    field: "endDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.endDate)
-        : new Date(row.endDate).getFullYear() + 543;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "finishDate",
-    align: "left",
-    label: "วันที่สำเร็จการศึกษา",
-    sortable: true,
-    field: "finishDate",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isEducation",
-    align: "left",
-    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-    sortable: true,
-    field: "isEducation",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isHigh",
-    align: "left",
-    label: "วุฒิการศึกษาสูงสุด",
-    sortable: true,
-    field: "isHigh",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => (v === true ? "ใช่" : v === false ? "ไม่ใช่" : "-"),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "degree",
-    align: "left",
-    label: "วุฒิการศึกษา",
-    sortable: true,
-    field: "degree",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "field",
-    align: "left",
-    label: "สาขาวิชา/ทาง",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fundName",
-    align: "left",
-    label: "ทุน",
-    sortable: true,
-    field: "fundName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gpa",
-    align: "left",
-    label: "เกรดเฉลี่ย",
-    sortable: true,
-    field: "gpa",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "country",
-    align: "left",
-    label: "ประเทศ",
-    sortable: true,
-    field: "country",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "other",
-    align: "left",
-    label: "ข้อมูลการติดต่อ",
-    sortable: true,
-    field: "other",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "ระยะเวลา",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "durationYear",
-    align: "left",
-    label: "ระยะเวลาหลักสูตร (ปี)",
-    sortable: true,
-    field: "durationYear",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "note",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "note",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "lastUpdateFullName",
     align: "left",
@@ -505,7 +268,7 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyVisibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
   "degree",
@@ -525,10 +288,25 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const paginationHistory = ref({
+
-  sortBy: "lastUpdatedAt",
+/** Table*/
+const keyword = ref<string>("");
+const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
+  sortBy: "",
 });
 
+/** Table ประวัติแก้ไขประวัติการศึกษา*/
+const historyColumns = ref<QTableColumn[]>(baseColumns.value);
+const historyVisibleColumns = ref<string[]>(baseVisibleColumns.value);
+
 const editId = ref<string>(""); //id ที่ต้องการแก้ไข
 const isDate = ref<string>("false");
 
@@ -578,8 +356,55 @@ const dataSort = ref<ResponseObject[]>([]);
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
+      showLoader();
+      const isEdit = dialogStatus.value === "create" ? false : true;
+      const url = isEdit
+        ? config.API.profileNewEducationByEducationId(
+            editId.value,
+            empType.value
+          )
+        : config.API.profileNewEducation(empType.value);
+
+      const method = isEdit ? http.patch : http.post;
+
+      const body = {
+        ...educationData,
+        startYear: undefined,
+        endYear: undefined,
+        isDate: isDate.value === "false" ? false : true,
+        profileId: isEdit
+          ? undefined
+          : empType.value === ""
+          ? id.value
+          : undefined,
+        profileEmployeeId: isEdit
+          ? undefined
+          : empType.value !== ""
+          ? id.value
+          : undefined,
+        durationYear: isEdit
+          ? educationData.durationYear === ""
+            ? null
+            : educationData.durationYear
+          : undefined,
+        finishDate: convertDateToAPI(educationData.finishDate),
+        startDate: convertDateToAPI(educationData.startDate),
+        endDate: convertDateToAPI(educationData.endDate),
+      };
+
+      await method(url, body)
+        .then(async () => {
+          await fetchData(id.value);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -678,13 +503,6 @@ function closeDialog() {
   dialog.value = false;
 }
 
-/** funcitob ปิด popup ประวัติการศึกษา*/
-function closeHistoryDialog() {
-  historyDialog.value = false;
-  historyKeyword.value = "";
-  historyRows.value = [];
-}
-
 /**
  * function fetch ข้อมูลประวัตืการศึกษา
  * @param id บุคคล
@@ -724,84 +542,32 @@ function fetchEducationLevel() {
     });
 }
 
+const historyId = ref<string>("");
 /**
  * function fetch ประวัติการแก้ไขประวัติการศึกษา
  * @param id  ประวัติการศึกษา
  */
-function fetchHistoryData(id: string) {
+function onOpenHistoryData(id: string) {
-  showLoader();
+  historyId.value = id;
-  http
+  historyDialog.value = true;
-    .get(config.API.profileNewEducationHisByEducationId(id, empType.value))
-    .then(async (res) => {
-      historyRows.value = await res.data.result;
-      historyRowsMain.value = await res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
-/** function เพิ่มข้อมูลประวัติการศึกษา*/
+async function fetchDataHistory() {
-function addData() {
   showLoader();
-  http
+  try {
-    .post(config.API.profileNewEducation(empType.value), {
+    const res = await http.get(
-      ...educationData,
+      config.API.profileNewEducationHisByEducationId(
-      startYear: undefined,
+        historyId.value,
-      endYear: undefined,
+        empType.value
-      isDate: isDate.value === "false" ? false : true,
+      )
-      profileId: empType.value === "" ? id.value : undefined,
+    );
-      profileEmployeeId: empType.value !== "" ? id.value : undefined,
+    const data = res.data.result;
-      finishDate: convertDateToAPI(educationData.finishDate),
+    return data;
-      startDate: convertDateToAPI(educationData.startDate),
+  } catch (err) {
-      endDate: convertDateToAPI(educationData.endDate),
+    messageError($q, err);
-    })
+  } finally {
-    .then(async () => {
+    hideLoader();
-      await fetchData(id.value);
+  }
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function บันทึกการแก้ไขข้อมูล
- * @param idData  ประวัติการศึกษา
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(config.API.profileNewEducationByEducationId(idData, empType.value), {
-      ...educationData,
-      profileId: undefined,
-      startYear: undefined,
-      endYear: undefined,
-      isDate: isDate.value === "false" ? false : true,
-      durationYear:
-        educationData.durationYear === "" ? null : educationData.durationYear,
-      finishDate: convertDateToAPI(educationData.finishDate),
-      startDate: convertDateToAPI(educationData.startDate),
-      endDate: convertDateToAPI(educationData.endDate),
-    })
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
 /** ฟังก์ค้นหาข้อมูลรายการประวัติการศึกษา */
@@ -813,15 +579,6 @@ function serchDataTable() {
   );
 }
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติการศึกษา */
-function serchDataTableHistory() {
-  historyRows.value = onSearchDataTable(
-    historyKeyword.value,
-    historyRowsMain.value,
-    historyColumns.value ? historyColumns.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchData(id.value);
@@ -955,9 +712,7 @@ onMounted(async () => {
             dense
             round
             icon="mdi-history"
-            @click="
+            @click="() => onOpenHistoryData(props.row.id)"
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
@@ -996,9 +751,7 @@ onMounted(async () => {
               round
               color="deep-purple"
               icon="mdi-history"
-              @click="
+              @click="() => onOpenHistoryData(props.row.id)"
-                () => (fetchHistoryData(props.row.id), (historyDialog = true))
-              "
             >
               <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
             </q-btn>
@@ -1543,81 +1296,13 @@ onMounted(async () => {
   </q-dialog>
 
   <!-- ประวัติแก้ไขประวัติการศึกษา -->
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
+  <DialogHistory
-    <q-card style="min-width: 80%">
+    v-model:modal="historyDialog"
-      <DialogHeader
+    :columns="historyColumns"
-        tittle="ประวัติแก้ไขประวัติการศึกษา"
+    :visible-columns="historyVisibleColumns"
-        :close="closeHistoryDialog"
+    :title="`ประวัติแก้ไขประวัติการศึกษา`"
-      />
+    :fetch-data="fetchDataHistory"
-      <q-separator />
+  />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-          v-model:pagination="paginationHistory"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value === "" ? "-" : col.value }}
-                </div>
-              </q-td>
-              <q-td auto-width> </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 
   <DialogSortEducation
     v-model:modal="modalSort"

src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -10,12 +10,13 @@ import { checkPermission } from "@/utils/permissions";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/SpecialSkill";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/SpecialSkill";
 import type { ResFileData } from "@/modules/04_registryPerson/interface/index/Main";
 
 import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -49,88 +50,8 @@ const mode = ref<string>("table"); //การแสดงของ Table card
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
-//Table
-const keyword = ref<string>(""); //คำต้นหา
-const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
-const rowsMain = ref<ResponseObject[]>([]); //รายการความสามารถ
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "field",
-    align: "left",
-    label: "ด้าน",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px; width: 50px;",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "reference",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "reference",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "field",
-  "detail",
-  "remark",
-  "reference",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
-const dialog = ref<boolean>(false); //แสดง popup ข้อมูลความสามารถพิเศษ
+const baseColumns = ref<QTableColumn[]>([
-const dialogStatus = ref<string>("create"); ////สถานะข้อมูลความสามารถพิเศษ
-const editId = ref<string>(""); //idที่ต้องการแก้ไข
-
-const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
-const historyRows = ref<ResponseObject[]>([]); //รายการประวัติ
-const historyRowsMain = ref<ResponseObject[]>([]); //รายการประวัติ
-const historyKeyword = ref<string>(""); //คำต้นหาประวัติ
-const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "field",
     align: "left",
@@ -199,7 +120,7 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyVisibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "field",
   "detail",
   "remark",
@@ -207,10 +128,30 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
+
+//Table
+const keyword = ref<string>(""); //คำต้นหา
+const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
+const rowsMain = ref<ResponseObject[]>([]); //รายการความสามารถ
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const dialog = ref<boolean>(false); //แสดง popup ข้อมูลความสามารถพิเศษ
+const dialogStatus = ref<string>("create"); ////สถานะข้อมูลความสามารถพิเศษ
+const editId = ref<string>(""); //idที่ต้องการแก้ไข
+const historyId = ref<string>("");
+
+const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
+const historyColumns = ref<QTableColumn[]>(baseColumns.value);
+const historyVisibleColumns = ref<string[]>(baseVisibleColumns.value);
+
 //ฟอร์มข้อมูลความสามารถพิเศษ
 const specialSkill = reactive<RequestItemsObject>({
   field: "", //ด้าน
@@ -218,16 +159,53 @@ const specialSkill = reactive<RequestItemsObject>({
   remark: "", //หมายเหตุ
   reference: "", //เอกสารอ้างอิง
   profileId: id.value,
-  dateStart: null,
-  dateEnd: null,
 });
 
 /** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
+      showLoader();
+
+      const url = isEdit.value
+        ? config.API.profileNewAbilityByAbilityId(editId.value, empType.value)
+        : config.API.profileNewAbility(empType.value);
+
+      const method = isEdit.value ? http.patch : http.post;
+
+      const body = {
+        ...specialSkill,
+        dateEnd: null,
+        dateStart: null,
+        profileId: isEdit.value
+          ? undefined
+          : empType.value === ""
+          ? id.value
+          : undefined,
+        profileEmployeeId: isEdit.value
+          ? undefined
+          : empType.value !== ""
+          ? id.value
+          : undefined,
+
+        isUpload: !isEdit.value ? undefined : isUpload.value,
+      };
+      await method(url, body)
+        .then(async (res) => {
+          if (fileUpload.value && res.data.result) {
+            await uploadProfile(res.data.result);
+          }
+          await fetchData(id.value);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -285,80 +263,29 @@ async function fetchData(id: string) {
 }
 
 /**
- * function fetch ประวัติการแก้ไขความสามรรถพิเศษ
+ * function ดู ระวัติการแก้ไขความสามรรถพิเศษ
  * @param id  ความสามรรถพิเศษ
  */
-async function fetchHistoryData(id: string) {
+async function onOpenHistoryData(id: string) {
-  showLoader();
+  historyId.value = id;
-  await http
+  historyDialog.value = true;
-    .get(config.API.profileNewAbilityHisByAbilityId(id, empType.value))
-    .then(async (res) => {
-      historyRows.value = await res.data.result;
-      historyRowsMain.value = await res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
-/** function เพิ่มข้อมูลความสามรรถพิเศษ*/
+/** function fetch ประวัติการแก้ไขความสามรรถพิเศษ*/
-async function addData() {
+async function fetchDataHistory() {
   showLoader();
-  await http
+  try {
-    .post(config.API.profileNewAbility(empType.value), {
+    const res = await http.get(
-      ...specialSkill,
+      config.API.profileNewAbilityHisByAbilityId(historyId.value, empType.value)
-      dateStart: null,
+    );
-      dateEnd: null,
-      profileId: empType.value === "" ? id.value : undefined,
-      profileEmployeeId: empType.value !== "" ? id.value : undefined,
-    })
-    .then(async (res) => {
-      if (fileUpload.value && res.data.result) {
-        await uploadProfile(res.data.result);
-      }
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 
-/**
+    const data = res.data.result;
- * function บันทึกการแก้ไขข้อมูล
+    return data;
- * @param idData ความสามรรถพิเศษ
+  } catch (err) {
- */
+    messageError($q, err);
-async function editData(idData: string) {
+  } finally {
-  showLoader();
+    hideLoader();
-  await http
+  }
-    .patch(config.API.profileNewAbilityByAbilityId(idData, empType.value), {
-      ...specialSkill,
-      dateStart: null,
-      dateEnd: null,
-      profileId: undefined,
-      isUpload: !isEdit.value ? undefined : isUpload.value,
-    })
-    .then(async (res) => {
-      if (fileUpload.value && idData) {
-        await uploadProfile(idData);
-      }
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
 /**
@@ -420,8 +347,7 @@ async function isUploadFn(id: string) {
     .patch(config.API.profileNewAbilityByAbilityId(id, empType.value), {
       isUpload: fileUpload.value ? true : false,
     })
-    .then(async (res) => {})
+    .then(async () => {})
-
     .catch((e) => {
       messageError($q, e);
     })
@@ -467,13 +393,6 @@ function closeDialog() {
   clearForm();
 }
 
-/** function ปิด popup  รายการประวัติ*/
-function closeHistoryDialog() {
-  historyDialog.value = false;
-  historyKeyword.value = "";
-  historyRows.value = [];
-}
-
 /** ฟังก์ค้นหาข้อมูลรายการความสามาพิเศษ */
 function serchDataTable() {
   rows.value = onSearchDataTable(
@@ -483,15 +402,6 @@ function serchDataTable() {
   );
 }
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขความสามารถพิเศษ */
-function serchDataTableHistory() {
-  historyRows.value = onSearchDataTable(
-    historyKeyword.value,
-    historyRowsMain.value,
-    historyColumns.value ? historyColumns.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(id.value);
@@ -600,10 +510,7 @@ onMounted(() => {
             round
             color="deep-purple"
             icon="mdi-history"
-            @click="
+            @click="onOpenHistoryData(props.row.id)"
-              fetchHistoryData(props.row.id);
-              historyDialog = true;
-            "
           >
             <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
           </q-btn>
@@ -634,7 +541,7 @@ onMounted(() => {
             dense
             round
             icon="mdi-file-document-outline"
-            @click="onDownloadFile(props.row.profileId)"
+            @click="onDownloadFile(props.row.id)"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
@@ -653,10 +560,7 @@ onMounted(() => {
               round
               color="deep-purple"
               icon="mdi-history"
-              @click="
+              @click="onOpenHistoryData(props.row.id)"
-                fetchHistoryData(props.row.id);
-                historyDialog = true;
-              "
             >
               <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
             </q-btn>
@@ -841,7 +745,7 @@ onMounted(() => {
                           round
                           color="primary"
                           icon="mdi-download"
-                          @click="onDownloadFile(id)"
+                          @click="onDownloadFile(editId)"
                         />
 
                         <q-btn
@@ -872,75 +776,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- ประวัติแก้ไขความสามารถพิเศษ -->
-  <q-dialog v-model="historyDialog" persistent>
+  <DialogHistory
-    <q-card style="width: 900px; max-width: 80vw">
+    v-model:modal="historyDialog"
-      <dialog-header
+    :columns="historyColumns"
-        tittle="ประวัติแก้ไขความสามารถพิเศษ"
+    :visible-columns="historyVisibleColumns"
-        :close="closeHistoryDialog"
+    :title="`ประวัติแก้ไขความสามารถพิเศษ`"
-      />
+    :fetch-data="fetchDataHistory"
-      <q-separator />
+  />
-      <q-card-section>
-        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          bordered
-          dense
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-          v-model:pagination="historyPagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props" v-if="mode === 'table'">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>{{ col.value ? col.value : "-" }}</div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped>

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -7,7 +7,10 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
+
+import type { QTableColumn } from "quasar";
 import type {
   DataPositions,
   DataCommandCode,
@@ -21,10 +24,7 @@ import type { FormSalary } from "@/modules/04_registryPerson/interface/request/S
 import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const { findOrgName } = useCounterMixin();
@@ -49,7 +49,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
-  convertDateToAPI
+  convertDateToAPI,
 } = useCounterMixin();
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@@ -61,7 +61,7 @@ const keyword = ref<string>(""); //คำค้นหา
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
 const commandId = ref<string>("");
-const baseColumns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
     align: "left",
@@ -86,7 +86,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format(val, row) {
       return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}.${row.posNo}`
+        ? `${row.posNoAbb}${row.posNo}`
         : row.posNo
         ? row.posNo
         : "-";
@@ -281,20 +281,35 @@ const baseColumns = ref<QTableProps["columns"]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const columns = computed(() => {
+const baseVisibleColumns = ref<string[]>([
-  if (empType.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-const visibleColumns = ref<string[]>([
   "commandDateAffect",
   "posNo",
   "positionName",
@@ -309,11 +324,48 @@ const visibleColumns = ref<string[]>([
   "commandDateSign",
   "organization",
   "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
+
+const columns = computed<QTableColumn[]>(() => {
+  if (empType.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value.filter(
+    (e: QTableColumn) =>
+      e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAd"
+  );
+});
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter(
+    (e: string) => e !== "lastUpdateFullName" && e !== "lastUpdatedAd"
+  )
+);
 const pagination = ref({
   sortBy: "",
 });
 
+const columnsHistory = computed<QTableColumn[]>(() => {
+  if (empType.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 const formData = reactive<FormSalary>({
   commandCode: "", //ประเภทคำสั่ง
   commandNo: "", //เลขที่คำสั่ง
@@ -325,6 +377,7 @@ const formData = reactive<FormSalary>({
   positionName: "", //ตำแหน่ง
   positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
   positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
+  positionCee: "", //ตำแหน่งซี
   positionLine: "", // สายงาน
   positionPathSide: "", //ด้าน/สาขา
   positionExecutive: "", //ตำแหน่งทางการบริหาร
@@ -498,9 +551,9 @@ async function fetchDataOptionExecutive() {
  * @param status แก่ไข , เพิ่ม
  */
 async function updateSelectType(val: string, status: boolean = false) {
-  const listLevel = dataLevel.value.find(
+  const listLevel = val
-    (e: DataPosType) => e.posTypeName === val
+    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
-  );
+    : null;
 
   if (listLevel) {
     store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
@@ -512,6 +565,9 @@ async function updateSelectType(val: string, status: boolean = false) {
     }));
 
     formData.positionLevel = !status ? "" : formData.positionLevel;
+  } else {
+    store.posLevelData = [];
+    formData.positionLevel = "";
   }
 }
 
@@ -558,6 +614,7 @@ async function onClickOpenDialog(
   formData.positionName = statusEdit ? data.positionName : "";
   formData.positionType = statusEdit ? data.positionType : "";
   formData.positionLevel = statusEdit ? data.positionLevel : "";
+  formData.positionCee = statusEdit ? data.positionCee : "";
   formData.positionLine = statusEdit ? data.positionLine : "";
   formData.positionPathSide = statusEdit ? data.positionPathSide : "";
   formData.positionExecutive = statusEdit ? data.positionExecutive : "";
@@ -693,6 +750,22 @@ function onClikcHistory(id: string) {
   modalHistory.value = true;
 }
 
+/** function fetch ข้อมูลประวัติการแก้ไข*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileListSalaryHistoryNew(salaryId.value, empType.value)
+    );
+
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 const classInput = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -724,6 +797,7 @@ onMounted(async () => {
   }
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -860,7 +934,8 @@ onMounted(async () => {
 
         <q-card-section style="max-height: 100%" class="scroll">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
+            <div class="col-xs-12 col-sm-12 col-md-8">
+              <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
               <q-select
                 outlined
                 :class="classInput(true)"
@@ -880,7 +955,6 @@ onMounted(async () => {
                 fill-input
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']"
                 @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
                     )"
@@ -895,7 +969,43 @@ onMounted(async () => {
               </q-select>
             </div>
 
-            <div class="col-xs-6 col-sm-12 col-md-6">
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
+              <datepicker
+                v-model="formData.commandDateAffect"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(true)"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    borderless
+                    :model-value="date2Thai(formData.commandDateAffect)"
+                    :label="`${'วันที่คำสั่งมีผล'}`"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        color="primary"
+                        class="cursor-pointer"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-6 col-sm-12 col-md-8">
               <div class="row q-col-gutter-sm">
                 <div class="col-6">
                   <q-input
@@ -909,10 +1019,9 @@ onMounted(async () => {
                     :label="`${'เลขที่คำสั่ง'}`"
                   />
                 </div>
-                <label class="col-1 flex justify-center items-center text-bold"
+                <label class="col-1 flex justify-center items-center">/</label>
-                  >/</label
-                >
                 <div class="col-5">
+                  <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.commandYear"
@@ -937,7 +1046,6 @@ onMounted(async () => {
                             : formData.commandYear + 543
                         "
                         :label="`${'พ.ศ.'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -954,47 +1062,8 @@ onMounted(async () => {
               </div>
             </div>
 
-            <div class="col-xs-6 col-sm-6 col-md-3">
+            <div class="col-xs-6 col-sm-6 col-md-4">
-              <datepicker
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
-                v-model="formData.commandDateAffect"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :class="classInput(true)"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    borderless
-                    :model-value="date2Thai(formData.commandDateAffect)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือกวันที่คำสั่งมีผล'}`,
-                        ]"
-                    :label="`${'วันที่คำสั่งมีผล'}`"
-                    hide-bottom-space
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        color="primary"
-                        class="cursor-pointer"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-
-            <div class="col-xs-6 col-sm-6 col-md-3">
               <datepicker
                 v-model="formData.commandDateSign"
                 :locale="'th'"
@@ -1013,11 +1082,6 @@ onMounted(async () => {
                     dense
                     borderless
                     :model-value="date2Thai(formData.commandDateSign)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือก วันที่ลงนาม'}`,
-                        ]"
                     :label="`${'วันที่ลงนาม'}`"
                     hide-bottom-space
                   >
@@ -1034,6 +1098,10 @@ onMounted(async () => {
               </datepicker>
             </div>
 
+            <div class="col-12">
+              <q-separator />
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
                 :class="classInput(true)"
@@ -1049,6 +1117,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1058,12 +1127,12 @@ onMounted(async () => {
                 v-model="formData.posNo"
                 hide-bottom-space
                 :label="`${'ตำแหน่งเลขที่'}`"
-                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
               >
               </q-input>
             </div>
 
             <div class="col-xs-12 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1073,11 +1142,11 @@ onMounted(async () => {
                 v-model="formData.positionName"
                 :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
                 hide-bottom-space
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']"
               />
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
               <q-select
                 ref="positionType Ref"
                 outlined
@@ -1096,9 +1165,9 @@ onMounted(async () => {
                 use-input
                 hide-selected
                 fill-input
+                clearable
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
@@ -1114,6 +1183,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
               <q-select
                 :class="classInput(true)"
                 :disable="!formData.positionType"
@@ -1122,7 +1192,6 @@ onMounted(async () => {
                 lazy-rules
                 borderless
                 v-model="formData.positionLevel"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']"
                 :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
                 emit-value
                 map-options
@@ -1147,6 +1216,20 @@ onMounted(async () => {
               </q-select>
             </div>
 
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-input
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.positionCee"
+                hide-bottom-space
+                :label="`${'ระดับซี'}`"
+              >
+              </q-input>
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
                 outlined
@@ -1404,7 +1487,16 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
+  <!-- <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" /> -->
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขเงินเดือน`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
+
   <DialogPreviewCommand
     v-model:modal="modalCommand"
     v-model:command="command"

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue

@@ -1,436 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { useQuasar } from "quasar";
-
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const route = useRoute();
-const store = useSalaryDataStore();
-const {
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  pathRegistryEmp,
-  onSearchDataTable,
-  findOrgName,
-} = useCounterMixin();
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const salaryId = defineModel<string>("salaryId", { required: true });
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const keyword = ref<string>(""); //คำค้นหา
-const baseColumns = ref<QTableProps["columns"]>([
-  {
-    name: "commandDateAffect",
-    align: "left",
-    label: "วันที่คำสั่งมีผล",
-    sortable: true,
-    field: "commandDateAffect",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}.${row.posNo}`
-        : row.posNo
-        ? row.posNo
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionName",
-    align: "left",
-    label: empType.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: empType.value === "-employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: empType.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    format(val, row) {
-      return `${
-        row.positionLevel
-          ? row.positionLevel
-          : row.positionCee
-          ? row.positionCee
-          : "-"
-      }`;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(v, row) {
-      return row.amount
-        ? `${row.amount.toLocaleString()}${
-            row.amountSpecial !== 0 && row.amountSpecial
-              ? ` (${row.amountSpecial.toLocaleString()})`
-              : ""
-          }`
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "commandNo",
-    format(val, row) {
-      return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
-        : "";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandCode",
-    align: "left",
-    label: "ประเภทคำสั่ง",
-    sortable: true,
-    field: "commandCode",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return store.convertCommandCodeName(val);
-    },
-
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandDateSign",
-    align: "left",
-    label: "วันที่ลงนาม",
-    sortable: true,
-    field: "commandDateSign",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return findOrgName({
-        root: row.orgRoot,
-        child1: row.orgChild1,
-        child2: row.orgChild2,
-        child3: row.orgChild3,
-        child4: row.orgChild4,
-      });
-    },
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "commandDateAffect",
-  "posNo",
-  "positionName",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "commandNo",
-  "commandCode",
-  "commandDateSign",
-  "organization",
-  "remark",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const columns = computed(() => {
-  if (empType.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวัติการแก้ไข*/
-function fetchListHistory() {
-  showLoader();
-  http
-    .get(config.API.profileListSalaryHistoryNew(salaryId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
-      rowsMain.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ชันปิด Popup*/
-function closeDialog() {
-  modal.value = false;
-  keyword.value = "";
-  rows.value = [];
-}
-
-/** ฟังก์ค้นหาข้อมูลรายการวินัย */
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    keyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(
-  () => modal.value,
-  () => {
-    modal.value && fetchListHistory();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
-        :close="closeDialog"
-      />
-      <q-separator color="grey-4" />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="keyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="pagination"
-          :visible-columns="visibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -8,12 +8,12 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
 import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -26,6 +26,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const id = ref<string>("");
@@ -52,11 +53,7 @@ const formData = reactive<RequestNoPaidObject>({
   refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
 });
 
-//Table
+const baseColumns = ref<QTableColumn[]>([
-const rows = ref<RowList[]>([]); //รายการ
-const rowsMain = ref<RowList[]>([]); //รายการ
-const keyword = ref<string>(""); //คำค้นหา
-const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
@@ -102,7 +99,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
   {
     name: "refCommandDate",
     align: "left",
@@ -116,34 +112,92 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "lastUpdatedAt",
+    name: "lastUpdateFullName",
     align: "left",
-    label: "วันที่แก้ไข",
+    label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "lastUpdatedAt",
+    field: "lastUpdateFullName",
-    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const visibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "date",
-  "detail",
   "reference",
+  "detail",
   "refCommandNo",
   "refCommandDate",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+
+//Table
+const rows = ref<RowList[]>([]); //รายการ
+const rowsMain = ref<RowList[]>([]); //รายการ
+const keyword = ref<string>(""); //คำค้นหา
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** funciton ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
-    isStatusEdit.value ? editData() : saveData();
+    showLoader();
+    const url = isStatusEdit.value
+      ? config.API.profileNewNoPaidById(id.value, empType.value)
+      : config.API.profileNewNoPaid(empType.value);
+
+    const methods = isStatusEdit.value ? http.patch : http.post;
+
+    await methods(url, {
+      ...formData,
+      date: convertDateToAPI(formData.date),
+      refCommandDate: convertDateToAPI(formData.refCommandDate),
+      profileId: isStatusEdit.value
+        ? undefined
+        : empType.value === ""
+        ? profileId.value
+        : undefined,
+      profileEmployeeId: isStatusEdit.value
+        ? undefined
+        : empType.value !== ""
+        ? profileId.value
+        : undefined,
+    })
+      .then(async () => {
+        await getData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClickCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -152,7 +206,10 @@ function onSubmit() {
  * @param StatusEdit แก้ไข , เพิ่ม
  * @param data ข้อมูล
  */
-function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
+function onClickOpenDialog(
+  StatusEdit: boolean = false,
+  data: RowList = {} as RowList
+) {
   isStatusEdit.value = StatusEdit;
   id.value = StatusEdit ? data.id : "";
   formData.date = StatusEdit ? data.date : null;
@@ -186,55 +243,27 @@ async function getData() {
     });
 }
 
-/** function เพิ่มข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
-function saveData() {
-  showLoader();
-  http
-    .post(config.API.profileNewNoPaid(empType.value), {
-      ...formData,
-      profileId: empType.value === "" ? profileId.value : undefined,
-      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      onClickCloseDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** function แก้ไขข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
-function editData() {
-  showLoader();
-  http
-    .patch(config.API.profileNewNoPaidById(id.value, empType.value), {
-      ...formData,
-      profileId: undefined,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      onClickCloseDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /** function เปิดข้อมูลประวัติการแก้ไช*/
 function onClickHistory(rowId: string) {
   id.value = rowId;
   modalHistory.value = true;
 }
 
+/** fetch รายการข้อมูลประวัติการแก้ไช*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewNoPaidHisById(id.value, empType.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 function serchDataTable() {
   rows.value = onSearchDataTable(
     keyword.value,
@@ -569,7 +598,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue

@@ -1,246 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-//Table
-const filter = ref<string>(""); //คำค้นหา
-const rows = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const rowsMain = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "date",
-    align: "left",
-    label: "วัน เดือน ปี",
-    sortable: true,
-    field: "date",
-    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" }),
-  },
-  {
-    name: "reference",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "reference",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "date",
-  "reference",
-  "detail",
-  "refCommandNo",
-  "refCommandDate",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** fetch รายการข้อมูลประวัติการแก้ไช*/
-async function getHistory() {
-  showLoader();
-  await http
-    .get(config.API.profileNewNoPaidHisById(id.value, empType.value))
-    .then(async (res) => {
-      rows.value = await res.data.result;
-      rowsMain.value = await res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ชันปิด Popup*/
-function closeDialog() {
-  modal.value = false;
-  rows.value = [];
-}
-
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    getHistory();
-    filter.value = "";
-  } else {
-    filter.value = "";
-  }
-});
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
-        :close="closeDialog"
-      />
-      <q-separator color="grey-4" />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="filter"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="pagination"
-          :visible-columns="visibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>

src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue

@@ -70,15 +70,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   name: "document",
-  //   align: "center",
-  //   label: "หลักฐานอ้างอิง",
-  //   sortable: false,
-  //   field: "document",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
   {
     name: "status",
     align: "left",
@@ -105,7 +96,6 @@ const visibleColumns = ref<string[]>([
   "fullname",
   "topic",
   "detail",
-  // "document",
   "status",
   "remark",
 ]);
@@ -117,9 +107,9 @@ const statusOption = ref<DataOption[]>(store.optionStatus); //รายการ
 const requestId = ref<string>(""); //id รายการแก้ไข
 
 /** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
-function fetchListRequset() {
+async function fetchListRequset() {
   showLoader();
-  http
+  await http
     .get(
       config.API.requestEditByType(
         routerName.value == "registryNewRequestEditEMP" ? "-employee" : ""
@@ -167,7 +157,6 @@ function clearStatus() {
  */
 function filterOption(val: string, update: Function) {
   update(() => {
-    status.value = val ? "" : status.value;
     statusOption.value = store.optionStatus.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
@@ -309,21 +298,7 @@ onMounted(() => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <!-- <div v-if="col.name === 'document'">
-                <q-btn
-                  icon="mdi-download"
-                  round
-                  dense
-                  flat
-                  color="primary"
-                  @click.pervent="onDownloadFile(props.row.id)"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                </q-btn>
-              </div> -->
-              <!-- <div v-else class="table_ellipsis2"> -->
               {{ col.value ? col.value : "-" }}
-              <!-- </div> -->
             </q-td>
           </q-tr>
         </template>

src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue

@@ -192,7 +192,6 @@ function clearStatus() {
  */
 function filterOption(val: string, update: Function) {
   update(() => {
-    status.value = val ? "" : status.value;
     statusOption.value = store.optionStatusIDP.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
@@ -284,6 +283,7 @@ watch(
   }
 );
 
+/**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   props.isIdp && fetchData();
 });

src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue

@@ -203,7 +203,6 @@ onMounted(() => {
       <q-card-section>
         <div class="row q-col-gutter-sm">
           <!-- สถานะ -->
-          <!-- v-if="isDone == 'PENDING'" -->
           <q-form
             class="col-12"
             greedy

src/modules/04_registryPerson/interface/index/Main.ts

@@ -97,19 +97,19 @@ interface InsigniasType {
 }
 
 interface InsigniasTypeSub {
-  id:string;
+  id: string;
-  createdAt:Date;
+  createdAt: Date;
-  createdUserId:string;
+  createdUserId: string;
-  lastUpdatedAt:Date;
+  lastUpdatedAt: Date;
-  lastUpdateUserId:string;
+  lastUpdateUserId: string;
-  createdFullName:string;
+  createdFullName: string;
-  lastUpdateFullName:string;
+  lastUpdateFullName: string;
-  name:string;
+  name: string;
-  shortName:string;
+  shortName: string;
-  level:string;
+  level: string;
-  isActive:string;
+  isActive: string;
-  note:string;
+  note: string;
-  insigniaTypeId:string;
+  insigniaTypeId: string;
 }
 
 interface ResFileData {
@@ -118,6 +118,10 @@ interface ResFileData {
   path: string;
   pathname: string;
 }
+
+interface DataHistory {
+  [key: string]: string | number | Date | boolean;
+}
 export type {
   Pagination,
   DataOption,
@@ -132,8 +136,8 @@ export type {
   DataOptionEducation,
   DataOptionEducationLevel,
   Request,
-
   InsigniasType,
   InsigniasTypeSub,
-  ResFileData
+  ResFileData,
+  DataHistory,
 };

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

@@ -72,6 +72,7 @@ interface FormPostition {
   positionLine: string; // สายงาน
   positionPathSide: string; //ด้าน/สาขา
   positionExecutive: string; //ตำแหน่งทางการบริหาร
+  positionCee: string; //ระดับซี
   amount: number | null; //เงินเดือน
   amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
   orgRoot: string; //หน่วยงาน

src/modules/04_registryPerson/interface/request/DeclarationHonor.ts

@@ -8,7 +8,7 @@ interface RequestItemsObject {
   refCommandNo: string;
   type: string;
   isDate: boolean | string;
-  isUpload?: boolean|undefined;
+  isUpload?: boolean | undefined;
 }
 
 export type { RequestItemsObject };

src/modules/04_registryPerson/interface/request/ProfesLicense.ts

@@ -2,7 +2,7 @@ interface RequestItemsObject {
   certificateType: string;
   issuer: string;
   certificateNo: string;
-  issueDate: Date;
+  issueDate: Date | null;
   expireDate: Date | null;
   profileId: string;
 }

src/modules/04_registryPerson/interface/request/Salary.ts

@@ -9,6 +9,7 @@ interface FormSalary {
   positionName: string; //ตำแหน่ง
   positionType: string; //ประเภทตำแหน่ง, กลุ่มงาน
   positionLevel: string; //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionCee: string; //ระดับซี
   positionLine: string; // สายงาน
   positionPathSide: string; //ด้าน/สาขา
   positionExecutive: string; //ตำแหน่งทางการบริหาร

src/modules/04_registryPerson/interface/request/SpecialSkill.ts

@@ -3,8 +3,6 @@ interface RequestItemsObject {
   detail: string;
   remark: string;
   reference: string;
-  dateStart: Date | null;
-  dateEnd: Date | null;
   profileId: string;
 }
 

src/modules/04_registryPerson/interface/request/Training.ts

@@ -1,4 +1,5 @@
 interface RequestItemsObject {
+  id?: string;
   name: string;
   topic: string;
   yearly: number | null;
@@ -9,8 +10,8 @@ interface RequestItemsObject {
   dateOrder: Date | null;
   startDate: Date;
   endDate: Date;
-  startYear: number;
+  startYear: number | null;
-  finishYear: number;
+  finishYear: number | null;
   profileId: string;
   isDate: boolean;
 }

src/modules/04_registryPerson/interface/response/ProfesLicense.ts

@@ -1,5 +1,6 @@
 //ข้อมูล
 interface ResponseObject {
+  id: string;
   issuer: string;
   certificateType: string;
   certificateNo: string;

src/modules/04_registryPerson/views/listView.vue

@@ -344,6 +344,7 @@ async function fetchTree() {
   if (data) {
     isLoad.value = true;
     node.value = data;
+    hideLoader();
   }
 }
 

src/modules/04_registryPerson/views/requestEditView.vue

@@ -2,7 +2,6 @@
 import { onBeforeMount, onMounted, ref } from "vue";
 
 import { useRoute, useRouter } from "vue-router";
-
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
@@ -18,9 +17,8 @@ const isEmployee = ref<boolean>(
 );
 
 onBeforeMount(async () => {
-  isIDP.value = await (route.name?.toString() == "registryNewRequestEditEMP"
+  isIDP.value =
-    ? false
+    route.name?.toString() == "registryNewRequestEditEMP" ? false : true;
-    : true);
 });
 
 onMounted(() => {

src/modules/05_placement/components/AppointMent/AppointMentDetail.vue

@@ -25,6 +25,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  convertDateToAPI
 } = useCounterMixin();
 
 const paramsId = route.params.id; //id รายการที่เลือก
@@ -90,7 +91,7 @@ function putAppointment() {
         positionNumberOld: posNo.value,
         amountOld: salary.value.toString().replace(/,/g, ""),
         reason: reason.value,
-        positionDate: date.value,
+        positionDate: convertDateToAPI(date.value),
       };
       showLoader();
       await http

src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue

@@ -29,6 +29,7 @@ const {
   hideLoader,
   success,
   findOrgName,
+  convertDateToAPI
 } = mixin;
 
 const dataId = route.params.id as string;
@@ -83,8 +84,8 @@ function onSubmit() {
       const body = {
         organizationPositionOld: organizationPositionOld.value,
         organization: organization.value,
-        dateStart: dateStart.value,
+        dateStart: convertDateToAPI(dateStart.value),
-        dateEnd: dateEnd.value,
+        dateEnd: convertDateToAPI(dateEnd.value),
         reason: reason.value,
       };
       await http

src/modules/05_placement/components/Other/OtherDetail.vue

@@ -29,6 +29,7 @@ const {
   dialogConfirm,
   findOrgName,
   success,
+  convertDateToAPI,
 } = mixin;
 
 const paramsId = route.params.id;
@@ -98,8 +99,8 @@ function onSubmit() {
         positionLevelOld: positionLevelOld.value,
         positionNumberOld: posNo.value,
         amountOld: salary.value.toString().replace(/,/g, ""),
-        positionDate: date.value,
+        positionDate: convertDateToAPI(date.value),
-        militaryDate: militaryDate.value,
+        militaryDate: convertDateToAPI(militaryDate.value),
         reason: reason.value,
       };
       await http

src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, reactive, type PropType, ref } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -20,8 +20,6 @@ import type {
   Family,
   AddressData,
   AddressOps,
-  Address,
-  optionData,
 } from "@/modules/05_placement/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
@@ -34,10 +32,9 @@ const idCard = defineModel<string>("idCard", { required: true });
 
 const $q = useQuasar();
 const route = useRoute();
-const router = useRouter();
 const mixin = useCounterMixin();
 const profileStore = useProfileDataStore();
-const { changeRetireText, changeBirth } = profileStore;
+const { changeBirth } = profileStore;
 const {
   showLoader,
   hideLoader,
@@ -45,6 +42,7 @@ const {
   dialogConfirm,
   modalError,
   success,
+  convertDateToAPI,
 } = mixin;
 const store = useLinkageStore();
 
@@ -116,80 +114,26 @@ function closeDialog() {
 }
 
 function onSubmit() {
-  const body = {
-    citizenId: formInformations.idCard,
-    prefix: formInformations.prefixId,
-    firstName: formInformations.firstname,
-    lastName: formInformations.lastname,
-    gender: formInformations.genderId,
-    nationality: formInformations.nationality,
-    race: formInformations.race,
-    religion: formInformations.religionId,
-    birthDate: formInformations.dateOfBirth,
-    bloodGroup: formInformations.bloodGroupId,
-    relationship: formInformations.relationshipId,
-    telephoneNumber: formInformations.telephone,
-
-    registrationSame: addressData.value.registSame == "1",
-    registrationAddress: addressData.value.registAddress,
-    registrationSubDistrictId: registAddress.subDistrictId,
-    registrationDistrictId: registAddress.districtId,
-    registrationProvinceId: registAddress.provinceId,
-    registrationZipCode: registAddress.zipCode,
-    currentAddress:
-      addressData.value.registSame == "1"
-        ? addressData.value.registAddress
-        : addressData.value.currentAddress,
-    currentSubDistrictId:
-      addressData.value.registSame == "1"
-        ? registAddress.subDistrictId
-        : currentAddress.subDistrictId,
-    currentDistrictId:
-      addressData.value.registSame == "1"
-        ? registAddress.districtId
-        : currentAddress.districtId,
-    currentProvinceId:
-      addressData.value.registSame == "1"
-        ? registAddress.provinceId
-        : currentAddress.provinceId,
-    currentZipCode:
-      addressData.value.registSame == "1"
-        ? registAddress.zipCode
-        : currentAddress.zipCode,
-
-    couple: familyData.value.couple == "1",
-    couplePrefix: familyData.value.marryPrefixId,
-    coupleFirstName: familyData.value.marryFirstName,
-    coupleLastName: familyData.value.marryLastName,
-    coupleLastNameOld: "",
-    coupleCareer: familyData.value.marryOccupation,
-
-    fatherPrefix: familyData.value.fatherPrefixId,
-    fatherFirstName: familyData.value.fatherFirstName,
-    fatherLastName: familyData.value.fatherLastName,
-    fatherCareer: familyData.value.fatherOccupation,
-
-    motherPrefix: familyData.value.motherPrefixId,
-    motherFirstName: familyData.value.motherFirstName,
-    motherLastName: familyData.value.motherLastName,
-    motherCareer: familyData.value.motherOccupation,
-  };
-
   dialogConfirm($q, async () => {
     if (age.value == false) {
       modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
       return;
     } else {
-      showLoader();
+      try {
-      await upDateInfomation();
+        showLoader();
-      await upDateAddress();
+        await upDateInfomation();
-      await upDateFamily();
+        await upDateAddress();
+        await upDateFamily();
 
-      success($q, "บันทึกข้อมูลสำเร็จ");
+        success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
+        closeDialog();
-      await props.getAll?.();
+        await props.getAll?.();
-      await changeBirth(formInformations.dateOfBirth ?? new Date());
+        await changeBirth(formInformations.dateOfBirth ?? new Date());
-      hideLoader();
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
     }
   });
 }
@@ -222,49 +166,12 @@ async function amiRequest() {
 
   familyData.value.fatherFirstName = data.value.fatherName;
   familyData.value.motherFirstName = data.value.motherName;
-
-  // data.value = {
-  //   titleCode: 3,
-  //   titleDesc: "นาย",
-  //   titleName: "นาย",
-  //   titleSex: 1,
-  //   firstName: "สุพลชัย",
-  //   middleName: "",
-  //   lastName: "พูลสวัสดิ์",
-  //   genderCode: 1,
-  //   genderDesc: "ชาย",
-  //   dateOfBirth: 25211228,
-  //   nationalityCode: 99,
-  //   nationalityDesc: "ไทย",
-  //   ownerStatusDesc: "เจ้าบ้าน",
-  //   statusOfPersonCode: 0,
-  //   statusOfPersonDesc: "บุคคลนี้มีภูมิลำเนาอยู่ในบ้านนี้",
-  //   dateOfMoveIn: 25580728,
-  //   age: 45,
-
-  //   fatherPersonalID: 3102100621479,
-  //   fatherName: "บุญเชิด",
-  //   fatherNationalityCode: 99,
-  //   fatherNationalityDesc: "ไทย",
-
-  //   motherPersonalID: 3102100621487,
-  //   motherName: "พยอม",
-  //   motherNationalityCode: 99,
-  //   motherNationalityDesc: "ไทย",
-
-  //   fullnameAndRank: "นายสุพลชัย พูลสวัสดิ์",
-  //   englishTitleDesc: "MR.",
-  //   englishFirstName: "SUPHONCHAI",
-  //   englishMiddleName: "",
-  //   englishLastName: "PHOONSAWAT",
-  // };
 }
 
 /**
  * อัพเดตข้อมูลส่วนตัว
  */
 async function upDateInfomation() {
-  showLoader();
   const body: any = {
     citizenId: formInformations.idCard,
     prefix: formInformations.prefixId,
@@ -274,24 +181,18 @@ async function upDateInfomation() {
     nationality: formInformations.nationality,
     race: formInformations.race,
     religion: formInformations.religionId,
-    birthDate: formInformations.dateOfBirth,
+    birthDate: convertDateToAPI(formInformations.dateOfBirth),
     bloodGroup: formInformations.bloodGroupId,
     relationship: formInformations.relationshipId,
     telephoneNumber: formInformations.telephone,
   };
-  showLoader();
   await http
     .put(
       config.API.placementInformationId(route.params.personalId.toString()),
       body
     )
-    .then(async () => {})
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -332,12 +233,10 @@ async function upDateAddress() {
       config.API.placementAddressId(route.params.personalId.toString()),
       body
     )
-    .then(async () => {})
+
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    });
-    })
-    .finally(() => {});
 }
 
 /** อัพเดตข้อมูลครอบครัว */
@@ -360,12 +259,9 @@ async function upDateFamily() {
   };
   await http
     .put(config.API.placementFamilyId(route.params.personalId.toString()), body)
-    .then(async () => {})
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    });
-    })
-    .finally(() => {});
 }
 
 /** เช็คค่า modal เมื่อเป็น true ใช้งาน ฟังชั่น */

src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue

@@ -57,6 +57,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
+  convertDateToAPI,
 } = mixin;
 const route = useRoute();
 const id = ref<string>("");
@@ -263,7 +264,7 @@ const clickNext = async () => {
 /**
  * กดดูข้อมูลต่อไป
  */
-const getData = () => {
+async function getData() {
   const row = rows.value[rowIndex.value];
   certificateNo.value = row.certificateNo;
   issuer.value = row.issuer;
@@ -271,12 +272,12 @@ const getData = () => {
   expireDate.value = row.expireDate;
   certificateType.value = row.certificateType;
   id.value = row.id;
-};
+}
 
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
-const checkRowPage = () => {
+async function checkRowPage() {
   editRow.value = false;
   next.value = true;
   previous.value = true;
@@ -286,7 +287,7 @@ const checkRowPage = () => {
   if (rowIndex.value - 1 < 0) {
     previous.value = false;
   }
-};
+}
 
 /**
  * กดปุ่มแก้ไขใน dialog
@@ -302,7 +303,7 @@ const clickEdit = () => {
  */
 const clickAdd = async () => {
   editRow.value = false;
-  await addData();
+  addData();
 };
 
 /**
@@ -310,9 +311,9 @@ const clickAdd = async () => {
  */
 const clickSave = async () => {
   if (modalEdit.value) {
-    await dialogConfirm($q, () => editData());
+    dialogConfirm($q, () => editData());
   } else {
-    await dialogConfirm($q, () => saveData());
+    dialogConfirm($q, () => saveData());
   }
 };
 
@@ -326,8 +327,8 @@ const saveData = async () => {
       id: id.value,
       certificateNo: certificateNo.value,
       issuer: issuer.value,
-      issueDate: new Date(issueDate.value),
+      issueDate: convertDateToAPI(new Date(issueDate.value)),
-      expireDate: new Date(expireDate.value),
+      expireDate: convertDateToAPI(new Date(expireDate.value)),
       certificateType: certificateType.value,
     })
     .then(async () => {
@@ -353,8 +354,8 @@ const editData = async () => {
       id: id.value,
       certificateNo: certificateNo.value,
       issuer: issuer.value,
-      issueDate: new Date(issueDate.value),
+      issueDate: convertDateToAPI(new Date(issueDate.value)),
-      expireDate: new Date(expireDate.value),
+      expireDate: convertDateToAPI(new Date(expireDate.value)),
       certificateType: certificateType.value,
     })
     .then(async () => {

src/modules/05_placement/components/PersonalDetail/Information/Education.vue

@@ -38,6 +38,7 @@ const {
   hideLoader,
   dialogRemove,
   dialogConfirm,
+  convertDateToAPI,
 } = mixin;
 
 const props = defineProps({
@@ -444,15 +445,15 @@ const saveData = async () => {
       durationYear: Number(durationYear.value),
       other: other.value,
       fundName: fundName.value,
-      finishDate: dateToISO(finishDate.value),
+      finishDate: convertDateToAPI(finishDate.value),
       startDate:
         isDate.value == "true"
-          ? new Date(startDate2.value)
+          ? convertDateToAPI(new Date(startDate2.value))
-          : new Date(`${startDate.value}-01-01`),
+          : convertDateToAPI(new Date(`${startDate.value}-01-01`)),
       endDate:
         isDate.value == "true"
-          ? new Date(endDate2.value)
+          ? convertDateToAPI(new Date(endDate2.value))
-          : new Date(`${endDate.value}-01-01`),
+          : convertDateToAPI(new Date(`${endDate.value}-01-01`)),
       isDate: isDate.value == "true",
     })
     .then(async () => {
@@ -492,12 +493,12 @@ const editData = async () => {
       finishDate: new Date(finishDate.value),
       startDate:
         isDate.value == "true"
-          ? new Date(startDate2.value)
+          ? convertDateToAPI(new Date(startDate2.value))
-          : new Date(`${startDate.value}-01-01`),
+          : convertDateToAPI(new Date(`${startDate.value}-01-01`)),
       endDate:
         isDate.value == "true"
-          ? new Date(endDate2.value)
+          ? convertDateToAPI(new Date(endDate2.value))
-          : new Date(`${endDate.value}-01-01`),
+          : convertDateToAPI(new Date(`${endDate.value}-01-01`)),
       isDate: isDate.value == "true",
     })
     .then(async () => {

src/modules/05_placement/components/PersonalDetail/Information/Information.vue

@@ -33,6 +33,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
+  convertDateToAPI,
 } = mixin;
 
 const props = defineProps({
@@ -208,7 +209,7 @@ const editData = async () => {
       nationality: informaData.value.nationality,
       race: informaData.value.race,
       religion: informaData.value.religionId,
-      birthDate: informaData.value.dateOfBirth,
+      birthDate: convertDateToAPI(informaData.value.dateOfBirth),
       bloodGroup: informaData.value.bloodGroupId,
       relationship: informaData.value.relationshipId,
       telephoneNumber: informaData.value.telephone,

src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue

@@ -36,6 +36,7 @@ const {
   messageError,
   dialogMessageNotify,
   dialogConfirm,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /**props*/
@@ -233,7 +234,7 @@ async function onClickSubmit() {
         posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
         posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
         posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
-        reportingDate: datePos.value,
+        reportingDate: convertDateToAPI(datePos.value),
         posmasterId: dataPosMaster.id,
       };
 

src/modules/05_placement/components/PersonalList/Table.vue

@@ -39,6 +39,7 @@ const {
   dialogConfirm,
   date2Thai,
   onSearchDataTable,
+  convertDateToAPI,
 } = mixin;
 
 /** รับค่ามาจากหน้าหลัก */
@@ -732,7 +733,9 @@ function onSubmitDate() {
   dialogConfirm($q, () => {
     showLoader();
     http
-      .put(config.API.clearDate(rowId.value), { date: reportingDate.value })
+      .put(config.API.clearDate(rowId.value), {
+        date: convertDateToAPI(reportingDate.value),
+      })
       .then(async () => {
         await Promise.all([getTable(), props.statCard()]);
         await success($q, "บันทึกข้อมูลสำเร็จ");

src/modules/05_placement/components/Receive/receiveDetail.vue

@@ -38,7 +38,7 @@ const {
   showLoader,
   hideLoader,
   success,
-  dateToISO,
+  convertDateToAPI,
   dialogConfirm,
 } = mixin;
 
@@ -454,7 +454,7 @@ function saveData() {
         lastname: informaData.value.lastname,
         dateOfBirth:
           informaData.value.birthDate !== null
-            ? dateToISO(informaData.value.birthDate)
+            ? convertDateToAPI(informaData.value.birthDate)
             : null,
         gender: informaData.value.genderId,
         nationality: informaData.value.nationality,

src/modules/05_placement/components/Repatriate/RepatriateDetail.vue

@@ -28,6 +28,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  convertDateToAPI,
   findOrgName,
 } = useCounterMixin();
 
@@ -95,7 +96,7 @@ function onSubmit() {
         amountOld: salary.value,
         organization: organization.value,
         date: date.value,
-        dateRepatriation: dateRepatriation.value,
+        dateRepatriation: convertDateToAPI(dateRepatriation.value),
         reason: reason.value,
       };
       showLoader();

src/modules/05_placement/components/Transfer/TransferDetail.vue

@@ -33,6 +33,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  convertDateToAPI,
 } = mixin;
 
 const myForm = ref<QForm | null>(null);
@@ -252,7 +253,7 @@ function onSubmit() {
         organization: organization.value,
         reason: reason.value,
         organizationPositionOld: organizationPositionOld.value,
-        date: date.value,
+        date: convertDateToAPI(date.value),
         positionTypeOld: positionTypeOld.value,
         positionLevelOld: positionLevelOld.value,
         positionNumberOld: posNo.value,

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue

@@ -24,7 +24,7 @@ const {
   showLoader,
   hideLoader,
   success,
-  dateToISO,
+  convertDateToAPI,
   dialogConfirm,
 } = mixin;
 
@@ -228,8 +228,8 @@ function savaForm() {
 function save() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     knowledge_level: knowledge_level.value,
     skill_level: skill_level.value,
     competency_level: competency_level.value,
@@ -256,7 +256,7 @@ function save() {
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-    commander_dated: dateToISO(dateAutherise.value),
+    commander_dated: convertDateToAPI(dateAutherise.value),
   };
 
   dialogConfirm($q, async () => {
@@ -266,12 +266,12 @@ function save() {
         config.API.editFormEvaluateCommader(assignId.value, evaluate_id.value),
         data
       )
-      .then((res: any) => {
+      .then(() => {
         status.value = false;
         success($q, "บันทึกสำเร็จ");
         hideLoader();
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
         hideLoader();
       });
@@ -304,7 +304,9 @@ onMounted(async () => {
       <div v-if="!status">
         <q-btn
           v-if="
-            !checkRoutePermisson && probationStore.dataPermissions?.tab4.isEdit && !isCheckFile
+            !checkRoutePermisson &&
+            probationStore.dataPermissions?.tab4.isEdit &&
+            !isCheckFile
           "
           dense
           flat

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue

@@ -18,7 +18,7 @@ const {
   showLoader,
   hideLoader,
   success,
-  dateToISO,
+  convertDateToAPI,
   dialogConfirm,
   dialogMessageNotify,
 } = mixin;
@@ -197,8 +197,8 @@ async function fecthAssign(id: string) {
 function putformData() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     knowledge_level: knowledge_level.value,
     skill_level: skill_level.value,
     competency_level: competency_level.value,
@@ -225,7 +225,7 @@ function putformData() {
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-    commander_dated: dateToISO(dateAutherise.value),
+    commander_dated: convertDateToAPI(dateAutherise.value),
   };
   dialogConfirm($q, async () => {
     showLoader();

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue

@@ -30,7 +30,7 @@ const {
   messageError,
   showLoader,
   hideLoader,
-  dateToISO,
+  convertDateToAPI,
   success,
   dialogConfirm,
 } = mixin;
@@ -364,8 +364,8 @@ function savaForm() {
 function putformData() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     knowledge_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
@@ -401,11 +401,11 @@ function putformData() {
     behavior_result: Number(behavior_result.value),
     sum_score: (Number(score1Per60.value) + Number(score2.value)) / 2,
     sum_percent: percent_sum.value,
-    chairman_dated: dateToISO(dateAutherise.value),
+    chairman_dated: convertDateToAPI(dateAutherise.value),
     develop_result: Number(develop_result.value),
     evaluate_result: Number(evaluate_result.value),
-    director1_dated: dateToISO(director1_dated.value),
+    director1_dated: convertDateToAPI(director1_dated.value),
-    director2_dated: dateToISO(director2_dated.value),
+    director2_dated: convertDateToAPI(director2_dated.value),
   };
 
   dialogConfirm($q, async () => {

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue

@@ -27,7 +27,7 @@ const {
   messageError,
   showLoader,
   hideLoader,
-  dateToISO,
+  convertDateToAPI,
   success,
   dialogConfirm,
   dialogMessageNotify,
@@ -336,8 +336,8 @@ async function savaForm() {
 const putformData = () => {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     knowledge_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
@@ -374,10 +374,10 @@ const putformData = () => {
     sum_score: (Number(score1Per60.value) + Number(score2.value)) / 2,
     sum_percent: percent_sum.value,
     develop_result: Number(develop_result.value),
-    chairman_dated: dateToISO(dateAutherise.value),
+    chairman_dated: convertDateToAPI(dateAutherise.value),
     evaluate_result: Number(evaluate_result.value),
-    director1_dated: dateToISO(director1_dated.value),
+    director1_dated: convertDateToAPI(director1_dated.value),
-    director2_dated: dateToISO(director2_dated.value),
+    director2_dated: convertDateToAPI(director2_dated.value),
   };
   dialogConfirm($q, async () => {
     showLoader();

src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue

@@ -24,6 +24,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
+  convertDateToAPI,
   dialogMessageNotify,
 } = mixin;
 const route = useRoute();
@@ -187,8 +188,8 @@ async function savaForm() {
  */
 async function postData(action: string) {
   const data = {
-    start_date: date_start.value,
+    start_date: convertDateToAPI(date_start.value),
-    date_finish: date_finish.value,
+    date_finish: date_finish.value ? convertDateToAPI(date_finish.value) : null,
     develop_complete: props.tab === "save1" ? 0 : develop.value,
     pass_result: result.value,
     reson: reson.value,
@@ -201,7 +202,7 @@ async function postData(action: string) {
     authority_pos: authority_pos.value,
     authority_type: authority_type.value,
     authority_level: authority_level.value,
-    authority_dated: authority_dated.value,
+    authority_dated: convertDateToAPI(authority_dated.value),
   };
   if (action === "post") {
     showLoader();

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -27,7 +27,7 @@ const {
   date2Thai,
   success,
   notifyError,
-  dateToISO,
+  convertDateToAPI,
   messageError,
   hideLoader,
   showLoader,
@@ -278,8 +278,8 @@ function savaForm() {
 function putformData() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -309,7 +309,7 @@ function putformData() {
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-    assessor_dated: dateToISO(dateAutherise.value),
+    assessor_dated: convertDateToAPI(dateAutherise.value),
   };
 
   dialogConfirm($q, () =>
@@ -380,7 +380,9 @@ onMounted(async () => {
       <div v-if="!status">
         <q-btn
           v-if="
-            !checkRoutePermisson && probationStore.dataPermissions?.tab2.isEdit && !isCheckFile
+            !checkRoutePermisson &&
+            probationStore.dataPermissions?.tab2.isEdit &&
+            !isCheckFile
           "
           dense
           flat

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue

@@ -21,8 +21,7 @@ const mixin = useCounterMixin();
 const {
   date2Thai,
   success,
-  notifyError,
+  convertDateToAPI,
-  dateToISO,
   messageError,
   dialogConfirm,
   dialogMessageNotify,
@@ -252,8 +251,8 @@ function savaForm() {
 function putformData() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -284,7 +283,7 @@ function putformData() {
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-    assessor_dated: dateToISO(dateAutherise.value),
+    assessor_dated: convertDateToAPI(dateAutherise.value),
   };
   dialogConfirm($q, async () => await saveformdata(data));
 }

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue

@@ -26,6 +26,7 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
+  convertDateToAPI
 } = mixin;
 
 const assignId = ref<string>(route.params.form.toString());
@@ -257,8 +258,8 @@ async function fecthFormdata(id: string) {
 function putformData() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -289,7 +290,7 @@ function putformData() {
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-    assessor_dated: dateToISO(dateAutherise.value),
+    assessor_dated: convertDateToAPI(dateAutherise.value),
   };
   dialogConfirm($q, async () => await saveformdata(data));
 }

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue

@@ -32,6 +32,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
+  convertDateToAPI
 } = mixin;
 
 const assignId = ref<string>(route.params.form.toString());
@@ -288,8 +289,8 @@ function savaForm() {
 function putformData() {
   const data = {
     evaluate_no: evaluate_no.value,
-    start_date: start_date.value,
+    start_date: convertDateToAPI(start_date.value),
-    date_finish: date_finish.value,
+    date_finish: convertDateToAPI(date_finish.value),
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -319,7 +320,7 @@ function putformData() {
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-    assessor_dated: dateToISO(dateAutherise.value),
+    assessor_dated: convertDateToAPI(dateAutherise.value),
   };
 
   dialogConfirm($q, () =>

src/modules/07_insignia/components/3_result/DialogResults.vue

@@ -25,6 +25,7 @@ const {
   showLoader,
   hideLoader,
   notifyError,
+  convertDateToAPI,
 } = mixin;
 
 /**
@@ -215,15 +216,17 @@ function onSubmit() {
         insigniaId: brand.value, // insigniaID
         number: Advertise.value,
         issue: issue.value,
-        dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
+        dateReceive: receivedate.value
+          ? convertDateToAPI(receivedate.value)
+          : "", // วันที่ได้รับเครื่องราชฯ
         organizationOrganizationSend: affiliationRequest.value,
         organizationOrganizationReceive: affiliationReceived.value,
-        date: announceDate.value, // วันที่กิจนุเบก
+        date: announceDate.value ? convertDateToAPI(announceDate.value) : "", // วันที่กิจนุเบก
         volumeNo: volume.value, // เล่ม
         section: episode.value, //ตอนที่
         page: duty.value, //หน้าที่
         no: announced.value,
-        datePayment: invoiceDate.value, //วันที่จ่าย
+        datePayment: convertDateToAPI(invoiceDate.value), //วันที่จ่าย
         typePayment: payment.value, // รูปแบบการจ่าย
         address: addressPayment.value, //ที่อยู่
       };

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -24,6 +24,7 @@ const {
   showLoader,
   hideLoader,
   notifyError,
+  convertDateToAPI,
 } = mixin;
 
 /**
@@ -136,13 +137,15 @@ async function onSubmit() {
     if (props.action == "addData") {
       await http
         .post(config.API.insigniaManageBorrow(), {
-          borrowDate: receivedate.value,
+          borrowDate: receivedate.value
+            ? convertDateToAPI(receivedate.value)
+            : "",
           insigniaNoteProfileId: insigniaNoteProfileId.value,
         })
         .then(async () => {
           await props.closeAndFecth();
           await success($q, "บันทึกข้อมูลสำเร็จ");
-          await clearData();
+          clearData();
         })
         .catch((err) => {
           messageError($q, err);
@@ -151,14 +154,16 @@ async function onSubmit() {
     } else {
       await http
         .put(config.API.insigniaManageBorrowReturn(props.profileId), {
-          returnDate: returndate.value,
+          returnDate: returndate.value
+            ? convertDateToAPI(returndate.value)
+            : "",
           returnOrganizationId: OrganazationId.value,
           returnReason: reason.value,
         })
         .then(async () => {
           await props.closeAndFecth();
-          await clearData();
           await success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
         })
         .catch((err) => {
           messageError($q, err);

src/modules/13_salary/components/01_Salary/DialogFormMain.vue

@@ -26,6 +26,7 @@ const {
   hideLoader,
   messageError,
   success,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -77,9 +78,7 @@ const title = computed(() => {
   return name;
 });
 
-/**
+/** fiunction fetch ข้อมูลประเภทตำแหน่ง*/
- * fiunction fetch ข้อมูลประเภทตำแหน่ง
- */
 function fetchPosType() {
   http
     .get(config.API.salaryPosType)
@@ -97,9 +96,7 @@ function fetchPosType() {
     });
 }
 
-/**
+/** fiunction fetch ข้อมูลระดับตำแหน่ง*/
- * fiunction fetch ข้อมูลระดับตำแหน่ง
- */
 function fetchPosLevel(id: string) {
   const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
   const listOption =
@@ -144,9 +141,7 @@ function fetchSalaryDetail(id: string) {
     });
 }
 
-/**
+/**callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
- * callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog
- */
 watch(
   () => modal.value,
   async () => {
@@ -167,17 +162,13 @@ watch(
   }
 );
 
-/**
+/** function ปืด Dialog*/
- * function ปืด Dialog
- */
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
-/**
+/** function เคลียข้อมูล form*/
- * function เคลียข้อมูล form
- */
 function clearFormData() {
   formData.name = "";
   formData.posTypeId = "";
@@ -191,9 +182,7 @@ function clearFormData() {
   isReadonly.value = false;
 }
 
-/**
+/** function บันทึกข้อมูลผังบัญชีเงินเดือน*/
- * function บันทึกข้อมูลผังบัญชีเงินเดือน
- */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -202,7 +191,12 @@ function onSubmit() {
         props.typeAction === "add"
           ? config.API.salaryChart
           : config.API.salaryChartByid(salaryId.value);
-      await http[props.typeAction === "add" ? "post" : "put"](url, formData);
+      await http[props.typeAction === "add" ? "post" : "put"](url, {
+        ...formData,
+        date: convertDateToAPI(formData.date),
+        startDate: convertDateToAPI(formData.startDate),
+        endDate: convertDateToAPI(formData.endDate),
+      });
       await props.fetchData?.();
       await success($q, "บันทีกข้อมูลสำเร็จ");
       closeDialog();
@@ -214,9 +208,7 @@ function onSubmit() {
   });
 }
 
-/**
+/**  function checkEndDate*/
- *  function checkEndDate
- */
 function checkEndDate() {
   if (formData.endDate !== null && formData.startDate !== null) {
     if (formData.endDate < formData.startDate) {

src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeChart.vue

@@ -22,6 +22,7 @@ const {
   hideLoader,
   messageError,
   success,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /** props*/
@@ -85,7 +86,12 @@ function onSubmit() {
       const url = !props.isStatusEdit
         ? config.API.salaryEmployeeChart
         : config.API.salaryEmployeeChartByid(props.data.id);
-      await http[!props.isStatusEdit ? "post" : "put"](url, formData);
+      await http[!props.isStatusEdit ? "post" : "put"](url, {
+        ...formData,
+        date: convertDateToAPI(formData.date),
+        startDate: convertDateToAPI(formData.startDate),
+        endDate: convertDateToAPI(formData.endDate),
+      });
       await props.fetchData?.();
       success($q, "บันทีกข้อมูลสำเร็จ");
       closeDialog();

src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeRate.vue

@@ -156,8 +156,8 @@ const getClass = (val: boolean) => {
                 v-model="formData.salaryNo"
                 label="ลำดับชั้น"
                 :rules="[
-                  (val) => !!val || 'กรุณากรอกลำดับชั้น',
+                  (val:number) => !!val || 'กรุณากรอกลำดับชั้น',
-                  (val) =>
+                  (val:number) =>
                     Number(val) === Math.floor(val) ||
                     Number(val) === Math.floor(val) + 0.5 ||
                     `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
@@ -179,7 +179,7 @@ const getClass = (val: boolean) => {
                 mask="###,###,###,###"
                 reverse-fill-mask
                 :rules="[
-                  (val) =>
+                  (val:string) =>
                     !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
                 ]"
                 lazy-rules
@@ -201,7 +201,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 hide-bottom-space
                 :rules="[
-                  (val) =>
+                  (val:string) =>
                     !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
                 ]"
               />

src/modules/13_salary/components/03_salaryRound/DialogForm.vue

@@ -22,11 +22,12 @@ const {
   success,
   showLoader,
   hideLoader,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
-const effective = defineModel<Date | null | string>("effective", {
+const effective = defineModel<Date | null>("effective", {
   required: true,
 });
 const isRead = defineModel<boolean>("isRead", { required: true });
@@ -79,7 +80,7 @@ function onSubmit() {
     const body = {
       period: period.value,
       isActive: isActive.value,
-      effectiveDate: effective.value,
+      effectiveDate: convertDateToAPI(effective.value),
       year: year.value,
     };
     try {

src/modules/13_salary/components/04_salaryLists/TabMain.vue

@@ -35,6 +35,7 @@ const props = defineProps({
   periodId: { type: String, require: true },
   roundFilter: { type: Object, require: true },
   snapShot: { type: String, require: true },
+  revisionId: { type: String, require: true },
 });
 
 const total = ref<number>();
@@ -325,6 +326,7 @@ function onClickDownload(data: DataOption, type: string = "xlsx") {
           : `${props?.roundFilter?.year}-09-30`,
       nodeId: props.rootId,
       isRetirement: data.id === "go2-01" ? true : undefined,
+      revisionId: props.revisionId,
     };
     const pathApi =
       data.id === "go2-01"

src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue

@@ -146,7 +146,6 @@ function onClickAddPerson(data: DataPerson) {
   const body: DataPersonReq = {
     id: store.groupId,
     type: store.tabType,
-
     ...data,
   };
 

src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue

@@ -35,6 +35,7 @@ const props = defineProps({
   periodId: { type: String, require: true },
   roundFilter: { type: Object, require: true },
   snapShot: { type: String, require: true },
+  revisionId: { type: String, require: true },
 });
 
 const splitterModel = ref<number>(13);
@@ -315,6 +316,7 @@ async function onClickDownload(data: DataOption, type: string = "xlsx") {
           ? `${props?.roundFilter?.year}-03-31`
           : `${props?.roundFilter?.year}-09-30`,
       nodeId: props.rootId,
+      revisionId: props.revisionId,
     };
     await http
       .post(config.API.leaveReportLeaveday("employee"), formData)

src/modules/13_salary/views/03_salaryRound.vue

@@ -211,12 +211,12 @@ function editPopup(data: RowList, status: string) {
 function dialogClose(id: string) {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      http
+      await http
         .get(config.API.salaryPeriod() + `/close/${id}`)
-        .then(() => {
+        .then(async () => {
-          getData();
+          await getData();
           success($q, "ลบข้อมูลสำเร็จ");
         })
         .catch((e) => {

src/modules/13_salary/views/04_salaryLists.vue

@@ -530,6 +530,7 @@ onMounted(async () => {
         :root-id="agencyFilter"
         :round-filter="roundFilter"
         :snap-shot="snapFilter"
+        :revision-id="roundFilter.revisionId"
       />
       <q-card v-else class="q-pa-sm">
         <div class="q-pa-sm">

src/modules/13_salary/views/05_salaryListsEmployee.vue

@@ -531,6 +531,7 @@ onMounted(async () => {
         :root-id="agencyFilter"
         :round-filter="roundFilter"
         :snap-shot="snapFilter"
+        :revision-id="roundFilter.revisionId"
       />
       <q-card v-else class="q-pa-sm">
         <div class="q-pa-sm">

src/modules/15_development/components/Target.vue

@@ -1,3 +1,4 @@
+divdiv
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
@@ -80,6 +81,7 @@ const formGroupTarget = reactive<FormGroupTargetPlannedGoal>({
       position: "",
       posTypeId: null,
       posLevelId: null,
+      posExecutive: "",
     },
   ],
 });
@@ -95,6 +97,7 @@ const addGroupTargetData = async () => {
     position: "",
     posTypeId: null,
     posLevelId: null,
+    posExecutive: "",
   });
 };
 
@@ -148,6 +151,15 @@ const columnsPlannedGoals = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "amount",
     align: "left",
@@ -256,6 +268,7 @@ async function fetchData(id: string) {
       plannedGoals.value = data.plannedGoals;
       plannedGoalsData.value = data.plannedGoals;
       plannedPeoples.value = data.plannedPeoples;
+      console.log(plannedGoals.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -275,6 +288,7 @@ function onClickOpenDialog(type: string, target: string) {
           position: "",
           posTypeId: null,
           posLevelId: null,
+          posExecutive: "",
         },
       ]),
         (newModalGroupTarget.value = true);
@@ -306,6 +320,7 @@ function onSubmitGroup() {
                     position: v.position ? v.position : "",
                     posTypePlannedId: v.posTypeId ? v.posTypeId : null,
                     posLevelPlannedId: v.posLevelId ? v.posLevelId : null,
+                    posExecutive: v.posExecutive ? v.posExecutive : "",
                   }))
                 : [],
             type:
@@ -506,6 +521,7 @@ function onOpenDialog(data: any) {
     position: pos.position,
     posTypeId: pos.posTypeId || null,
     posLevelId: pos.posLevelId || null,
+    posExecutive: pos.posExecutive,
   }));
   newModalGroupTarget.value = true;
 }
@@ -618,6 +634,15 @@ onMounted(() => {
                     {{ props.row.type ? `- ${props.row.type}` : "-" }}
                   </div>
                 </div>
+
+                <div v-else-if="col.name === 'posExecutive'">
+                  <div
+                    v-if="props.row.groupTarget !== 'OUTSIDERS'"
+                    v-for="row in props.row.position"
+                  >
+                    {{ `${row.posExecutive ?? "-"}` }}
+                  </div>
+                </div>
                 <div v-else class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
                 </div>
@@ -770,6 +795,7 @@ onMounted(() => {
                       formGroupTarget.position = props.row.position;
                       formGroupTarget.posType = props.row.posTypeId;
                       formGroupTarget.posLevel = props.row.posLevelId;
+
                       modalGroupTarget = true;
                     }
                   "
@@ -1070,7 +1096,7 @@ onMounted(() => {
   </q-dialog>
 
   <q-dialog v-model="newModalGroupTarget" persistent>
-    <q-card style="width: 700px">
+    <q-card style="min-width: 50%">
       <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
         <DialogHeader
           :tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
@@ -1244,9 +1270,29 @@ onMounted(() => {
               ]"
                 />
               </div>
+
               <div
-                class="col-1 q-mt-sm"
+                class="col"
                 v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+              >
+                <q-input
+                  outlined
+                  dense
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="items.posExecutive"
+                  label="ตำแหน่งทางการบริหาร"
+                />
+              </div>
+
+              <div
+                class="col-1"
+                v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+                style="
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                "
               >
                 <q-btn
                   flat

src/modules/15_development/interface/request/Main.ts

@@ -51,6 +51,7 @@ interface PositionsType {
   position: string;
   posTypeId: string | null;
   posLevelId: string | null;
+  posExecutive: string;
 }
 interface FormGroupRelate {
   relate: string;

src/modules/18_command/components/DialogCreateCommandORG.vue

@@ -28,6 +28,7 @@ const {
   dialogConfirm,
   hideLoader,
   date2Thai,
+  convertDateToAPI,
 } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -145,8 +146,8 @@ function onSubmit() {
     showLoader();
     const body = {
       commandTypeId: commandType.value,
-      commandAffectDate: commandAffectDate.value,
+      commandAffectDate: convertDateToAPI(commandAffectDate.value),
-      commandExcecuteDate: commandExcecuteDate.value,
+      commandExcecuteDate: convertDateToAPI(commandExcecuteDate.value),
       commandYear: commandYear.value,
       commandNo: commandNo.value,
       persons: selected.value ? dataMapToSend.value : [],

src/modules/18_command/components/Step/1_Detail.vue

@@ -22,6 +22,7 @@ const {
   date2Thai,
   success,
   dialogConfirm,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /**
@@ -70,7 +71,11 @@ async function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     await http
-      .put(config.API.commandAction(commandId.value, "tab1"), formData)
+      .put(config.API.commandAction(commandId.value, "tab1"), {
+        ...formData,
+        commandAffectDate: convertDateToAPI(formData.commandAffectDate),
+        commandExcecuteDate: convertDateToAPI(formData.commandExcecuteDate),
+      })
       .then(async () => {
         await props.fetchDataCommandList();
         success($q, "บันทึกข้อมูลสำเร็จ");

src/modules/18_command/components/Step/Dialog2_Salary.vue

@@ -47,31 +47,6 @@ function checkCommandSysId() {
     readonly.value = true;
   }
 }
-
-// const chechCommandCode = computed(() => {
-//   const listCommandCode = [
-//     "C-PM-01",
-//     "C-PM-02",
-//     "C-PM-03",
-//     "C-PM-04",
-//     "C-PM-05",
-//     "C-PM-07",
-//     "C-PM-08",
-//     "C-PM-09",
-//     "C-PM-21",
-//     "C-PM-22",
-//     "C-PM-24",
-//     "C-PM-29",
-//     "C-PM-38",
-//     "C-PM-39",
-//   ];
-//   if (listCommandCode.includes(props.commandCode)) {
-//     return true;
-//   } else {
-//     return false;
-//   }
-// });
-
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();

src/modules/18_command/components/Step/View0_Live.vue

@@ -238,8 +238,6 @@ function onConfirmOrder() {
           })
           .then(async () => {
             await router.push(`/command/view/${commandId.value}`);
-            // fetchData?.();
-            // isCheckAuthority.value = true;
           })
           .catch((err) => {
             messageError($q, err);

src/modules/20_positionTemp/components/DialogFormPosition.vue

@@ -11,7 +11,7 @@ import config from "@/app.config";
  */
 import type { QTableProps } from "quasar";
 import type {
-  FormDataPosition,
+  FormDataPositionTemp,
   DataOption,
   RowDetailPositions,
   ListMenu,
@@ -86,11 +86,11 @@ const listMenu = ref<ListMenu[]>([
 const rows = ref<RowDetailPositions[]>([]); //รายกานข้อมูลอัตรากำลัง
 const rowsPositionSelect = ref<RowDetailPositions[]>([]); //รายการตำแหน่ง
 
-const formData = reactive<FormDataPosition>({
+const formData = reactive<FormDataPositionTemp>({
-  shortName: props.shortName,
+  // shortName: props.shortName,
-  prefixNo: "",
+  // prefixNo: "",
-  positionNo: "",
+  // positionNo: "",
-  suffixNo: "",
+  // suffixNo: "",
   reason: "",
 });
 
@@ -146,9 +146,9 @@ async function fetchPosition(id: string) {
     .then((res) => {
       const data = res.data.result;
 
-      formData.prefixNo = data.posMasterNoPrefix;
+      // formData.prefixNo = data.posMasterNoPrefix;
-      formData.positionNo = data.posMasterNo;
+      // formData.positionNo = data.posMasterNo;
-      formData.suffixNo = data.posMasterNoSuffix;
+      // formData.suffixNo = data.posMasterNoSuffix;
       formData.reason = data.reason;
       rows.value = data.positions.map((e: any) => ({
         ...e,
@@ -178,9 +178,9 @@ function onSubmit() {
         posLevelId: e.posLevelId, //*ระดับตำแหน่ง
       }));
       const body = {
-        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+        // posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-        posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
+        // posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
-        posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        // posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
         reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
         orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
         orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
@@ -326,9 +326,9 @@ watch(
         rowsPositionSelect.value = [];
         search.value = "";
         rows.value = [];
-        formData.prefixNo = "";
+        // formData.prefixNo = "";
-        formData.positionNo = "";
+        // formData.positionNo = "";
-        formData.suffixNo = "";
+        // formData.suffixNo = "";
       } else {
         props.rowId && fetchPosition(props.rowId);
       }
@@ -368,7 +368,7 @@ watch(
                 </div>
                 <div class="col-12"><q-separator /></div>
                 <div class="row q-col-gutter-sm col-12 q-pa-sm">
-                  <div class="row col-8 q-col-gutter-sm">
+                  <!-- <div class="row col-8 q-col-gutter-sm">
                     <div class="col-12">
                       <q-input
                         v-model="formData.shortName"
@@ -417,8 +417,8 @@ watch(
                         label="Suffix ตำแหน่งเลขที่"
                       />
                     </div>
-                  </div>
+                  </div> -->
-                  <div class="col-4">
+                  <div class="col-12">
                     <q-input
                       v-model="formData.reason"
                       :class="inputEdit(isReadonly)"
@@ -426,8 +426,6 @@ watch(
                       outlined
                       for="#reason"
                       label="หมายเหตุ"
-                      type="textarea"
-                      rows="4"
                     />
                   </div>
 

src/modules/20_positionTemp/components/TableMain.vue

@@ -122,15 +122,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
+  // {
-    name: "posMasterNo",
+  //   name: "posMasterNo",
-    align: "left",
+  //   align: "left",
-    label: "ตำแหน่งเลขที่",
+  //   label: "ตำแหน่งเลขที่",
-    sortable: false,
+  //   sortable: false,
-    field: "posMasterNo",
+  //   field: "posMasterNo",
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-  },
+  // },
   {
     name: "positionName",
     align: "left",
@@ -393,7 +393,7 @@ watch(
           <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
         </q-btn>
 
-        <q-btn
+        <!-- <q-btn
           v-if="checkPermission($route)?.attrIsUpdate"
           flat
           round
@@ -403,7 +403,7 @@ watch(
           @click="onClickSort()"
         >
           <q-tooltip>จัดลำดับ</q-tooltip>
-        </q-btn>
+        </q-btn> -->
 
         <q-btn
           v-if="checkPermission($route)?.attrIsUpdate"

src/modules/20_positionTemp/interface/index/Main.ts

@@ -33,6 +33,10 @@ interface FormDataPosition {
   reason: string;
 }
 
+interface FormDataPositionTemp {
+  reason: string;
+}
+
 interface FormDataNewStructure {
   orgRevisionId: string;
   orgRevisionName: string;
@@ -150,4 +154,5 @@ export type {
   FormPositionSelectRef,
   NewPagination,
   DataDocumentList,
+  FormDataPositionTemp,
 };

src/modules/21_report/views/02_reportRegistry.vue

@@ -1169,6 +1169,28 @@ watch(
                       </q-select>
                     </div>
                     <div class="col-12"><q-separator /></div>
+                    <div
+                      class="col-12 q-px-sm"
+                      v-if="employeeClass === 'officer'"
+                    >
+                      <q-input
+                        dense
+                        v-model="positionArea"
+                        borderless
+                        label=" ด้าน/สาขา"
+                        class="bg-white full-width"
+                      >
+                        <template v-if="positionArea" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="positionArea = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
                     <div class="col-12 q-px-sm">
                       <q-select
                         label="เพศ"
@@ -1301,28 +1323,7 @@ watch(
                     <div class="col-12" v-if="employeeClass === 'officer'">
                       <q-separator />
                     </div>
-                    <div
+
-                      class="col-12 q-px-sm"
-                      v-if="employeeClass === 'officer'"
-                    >
-                      <q-input
-                        dense
-                        v-model="positionArea"
-                        borderless
-                        label=" ด้าน/สาขา"
-                        class="bg-white full-width"
-                      >
-                        <template v-if="positionArea" v-slot:append>
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="positionArea = ''"
-                            class="cursor-pointer"
-                            style="opacity: 0.6"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
                     <div class="col-12 q-pa-sm">
                       <div class="text-grey-8 text-caption">ช่วงเวลาบรรจุ</div>
                       <div class="col-12">