ออกคำสั่ง ==> รายละเอียด API Tab 3

src/modules/18_command/views/detail.vue

@@ -4,27 +4,29 @@ import { onMounted, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 
+import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
+
 import Detail from "@/modules/18_command/components/Step/1_Detail.vue"; //รายละเอียดคำสั่ง
 import ListPersons from "@/modules/18_command/components/Step/2_ListPersons.vue"; //รายชื่อผู้ออกคำสั่ง
-import ReceivedCopy from "@/modules/18_command/components/Step/3_ReceivedCopy.vue"; //รายชื่อผู้ออกคำสั่ง
+import ReceivedCopy from "@/modules/18_command/components/Step/3_ReceivedCopy.vue"; //รายชื่อผู้ได้รับสำเนาคำสั่ง
 import Attached from "@/modules/18_command/components/Step/4_Attached.vue"; //คำสั่งและบัญชีแนบท้าบ
 
 const router = useRouter();
 const route = useRoute();
 const store = useCommandDetail();
 
-const childDetailRef = ref<InstanceType<typeof Detail> | null>(null);
-const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null);
+const childDetailRef = ref<InstanceType<typeof Detail> | null>(null); //ref components รายละเอียดคำสั่ง
+const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null); //ref components รายชื่อผู้ออกคำสั่ง
 const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
   null
-);
-const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null);
+); //ref components รายชื่อผู้ได้รับสำเนาคำสั่ง
+const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null); //ref components คำสั่งและบัญชีแนบท้าบ
 
-const readonly = ref<boolean>(route.name === "commandViewDetailPage");
-const isChangeData = ref<boolean>(false);
-
-const tabs = ref<string>("Detail");
-const tabsManu = ref([
+const tabs = ref<string>("Detail"); //Tab
+const readonly = ref<boolean>(route.name === "commandViewDetailPage"); //อ่านได้อย่างเดียว
+const isChangeData = ref<boolean>(false); //การเปลี่ยนแปลงของข้อมูล
+//รายการ Tab ละเอียดคำสั่ง
+const tabsManu = ref<ItemTabs[]>([
   { label: "รายละเอียดคำสั่ง", name: "Detail" },
   {
     label: "รายชื่อผู้ออกคำสั่ง",
@@ -38,25 +40,40 @@ const tabsManu = ref([
 ]);
 
 /**
- * function เช็คการแกไข้ข้อมูล
+ * ฟังก์ชันเช็คการเปลี่นรแปลงของข้อมูล
+ *
+ * ถ้ามีการเปลี่นยแปลง กำหนด  'isChangeData' เป็น true
  */
 function onCheckChangeData() {
   isChangeData.value = true;
 }
 
-onMounted(() => {
-  store.readonly = readonly.value;
+/**
+ * ดูการเปลี่ยนแปลงของ tabs เมื่อมีการเปลี่ยนแปลง
+ *
+ * เช็คการเปลี่ยนแปลงของข้อมูล ถ้าการเปลี่ยนแปลงของข้อมูลจะบันทึกข้อมูล
+ */
+watch(tabs, (newValue, oldValue) => {
+  //เช็คการเปลี่ยนแปลงของข้อมูล
+  if (isChangeData.value) {
+    const refMap: { [key: string]: any } = {
+      Detail: childDetailRef,
+      ListPersons: childListPersonsRef,
+      ReceivedCopy: childReceivedCopyRef,
+      Attached: childAttachedRef,
+    };
+
+    refMap[oldValue]?.value?.onSubmit();
+  }
 });
 
-watch(tabs, (newValue, oldValue) => {
-  console.log(`Count changed from ${oldValue} to ${newValue}`);
-  if (isChangeData.value) {
-    // เรียกใช้ฟังก์ชันของ component ลูก
-    if (oldValue === "Detail") {
-      console.log(childDetailRef.value);
-      childDetailRef.value?.onSubmit();
-    }
-  }
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ * กำหนดค่า `store.readonly` เมื่อ  route.name เป็น "commandViewDetailPage" จะอ่านข้อมูลได้อย่างเดียว
+ */
+onMounted(() => {
+  store.readonly = route.name === "commandViewDetailPage";
 });
 </script>
 

src/modules/18_command/views/lists.vue

@@ -18,8 +18,7 @@ const $q = useQuasar();
 const store = useCommandListStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalAdd = ref<boolean>(false);
-
+//รายการ Tab รายการคำสั่ง
 const tabsManu = ref<ItemTabs[]>([
   { label: "แบบร่าง", name: "DRAFT" },
   { label: "รอผู้มีอำนาจ", name: "PENDING" },
@@ -27,14 +26,18 @@ const tabsManu = ref<ItemTabs[]>([
   { label: "ออกคำสั่งเสร็จสิ้น", name: "REPORTED" },
   { label: "ยกเลิก", name: "CANCEL" },
 ]);
-
+//ฟอร์มช้อมูลการค้นหา
 const queryParams = reactive<FormQuery>({
-  page: 1,
-  pageSize: 10,
-  year: new Date().getFullYear(),
-  keyword: "",
+  page: 1, //หน้า
+  pageSize: 10, //จำนวนต่อหน้า
+  year: new Date().getFullYear(), //ปีงบประมาณ
+  keyword: "", //คำค้นหา
 });
+const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
+ */
 async function fetchListCommand() {
   showLoader();
   await http