ทะเบียนประวัติ ==> อื่นๆ

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>