Refactoring code module 04_registryPerson

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps, QForm } from "quasar";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insignia";
-import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
 import type {
   DataOption,
   DataOptionInsignia,
@@ -18,6 +18,8 @@ import type {
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Insignia";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const store = useInsigniaDataStore();
@@ -32,54 +34,46 @@ const {
   dialogConfirm,
   pathRegistryEmp,
 } = mixin;
+
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const id = ref<string>("");
-const insigniaType = ref<string>("");
+const id = ref<string>(""); //id ที่ต้องการแก้ไข
+const insigniaType = ref<string>(""); //ลำดับชั้น
 const insigniaForm = reactive<RequestItemsObject>({
-  year: 0,
-  no: "",
-  volume: "",
-  section: "",
-  page: "",
-  receiveDate: null,
-  insigniaId: "",
-  dateAnnounce: null,
-  issue: "",
-  volumeNo: "",
-  refCommandDate: null,
-  refCommandNo: "",
-  note: "",
+  year: 0, //ปีที่ยื่นขอพระราชทานเครื่องราชฯ
+  receiveDate: null, //วันที่ได้รับ
+  insigniaId: "", //ชื่อเครื่องราชฯ
+  no: "", //ลำดับที่
+  issue: "", //ราชกิจจาฯ ฉบับที่
+  volumeNo: "", //เล่มที่
+  volume: "", //เล่ม
+  section: "", //ตอน
+  page: "", //หน้า
+  dateAnnounce: null, //วันที่ประกาศในราชกิจจาฯ
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'
+  note: "", //หมายเหตุ
 });
 
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const isEdit = ref<boolean>(false);
-const modal = ref<boolean>(false);
-const modeView = ref<string>("table");
-const filterSearch = ref("");
-const filterHistory = ref<string>("");
-const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<RequestItemsObject[]>([]);
-
-const Ops = ref<InsigniaOps>({
-  insigniaOptions: [],
-});
+const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //แสดง popup ข้อมูลเครื่องราชอิสริยาภรณ์
+const modeView = ref<string>("table"); //การแสดงผล Table,Card
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
+//ข้อมูลเครื่องราช
 const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
+//ต้วลือกรายการครื่องราช
+const Ops = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
 
+//Table Main
 const rows = ref<ResponseObject[]>([]);
+const filterSearch = ref("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -239,6 +233,30 @@ const columns = ref<QTableProps["columns"]>([
       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",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table ประวัติแก้ไข
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -410,22 +428,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       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",
-]);
 const visibleColumnsHistory = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -443,6 +445,10 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์
@@ -629,6 +635,9 @@ function clearData() {
   insigniaForm.note = "";
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   await fetchData();
   store.insigniaOption.length === 0 ? await fetchInsignia() : "";
@@ -1145,7 +1154,7 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-        :close="() => (modalHistory = false)"
+        :close="() => ((modalHistory = false), (rowsHistory = []))"
       />
       <q-separator />