ทะเบียนประวัติ ==> ข้อมูลผลงาน

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) => {
+    );
+    return res.data.result;
+  } catch (err) {
     messageError($q, err);
-    })
+  } finally {
-    .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) => {
+    );
+    return res.data.result;
+  } catch (err) {
     messageError($q, err);
-    })
+  } finally {
-    .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
-        tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-        :close="
-          () => (
-            (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"
-        >
+    :title="`ประวัติแก้ไขเครื่องราชอิสริยาภรณ์`"
-          >
+    :columns="columnsHistory"
-          <template v-slot:header="props">
+    :fetch-data="fetchDataHistory"
-            <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">
-        <DialogHeader
-          tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
-          :close="
-            () => (
-              (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"
-        >
+    :title="`ประวัติแก้ไขประกาศเกียรติคุณ`"
-          >
+    :columns="columnsHistory"
-          <template v-slot:header="props">
+    :fetch-data="fetchDataHistory"
-            <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
-        tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
-        :close="
-          () => (
-            (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"
-        >
+    :title="`ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ`"
-          >
+    :columns="columnsHistory"
-          <template v-slot:header="props">
+    :fetch-data="fetchDataHistory"
-            <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/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/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;