รายการคำสั่ง ==> API

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 
 import { useRouter, useRoute } from "vue-router";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
@@ -13,25 +13,51 @@ const router = useRouter();
 const route = useRoute();
 const store = useCommandDetail();
 
-const componentMap: any = {
-  Detail,
-  ListPersons,
-  ReceivedCopy,
-  Attached,
-};
+const childDetailRef = ref<InstanceType<typeof Detail> | null>(null);
+const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null);
+const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
+  null
+);
+const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null);
 
 const readonly = ref<boolean>(route.name === "commandViewDetailPage");
+const isChangeData = ref<boolean>(false);
+
 const tabs = ref<string>("Detail");
 const tabsManu = ref([
   { label: "รายละเอียดคำสั่ง", name: "Detail" },
-  { label: "รายชื่อผู้ออกคำสั่ง", name: "ListPersons" },
-  { label: "รายชื่อผู้ได้รับสำเนาคำสั่ง", name: "ReceivedCopy" },
+  {
+    label: "รายชื่อผู้ออกคำสั่ง",
+    name: "ListPersons",
+  },
+  {
+    label: "รายชื่อผู้ได้รับสำเนาคำสั่ง",
+    name: "ReceivedCopy",
+  },
   { label: "คำสั่งและบัญชีแนบท้าบ", name: "Attached" },
 ]);
 
+/**
+ * function เช็คการแกไข้ข้อมูล
+ */
+function onCheckChangeData() {
+  isChangeData.value = true;
+}
+
 onMounted(() => {
   store.readonly = readonly.value;
 });
+
+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();
+    }
+  }
+});
 </script>
 
 <template>
@@ -73,14 +99,43 @@ onMounted(() => {
       <q-separator />
 
       <q-tab-panels v-model="tabs" animated>
-        <q-tab-panel
-          style="padding: 0px"
-          v-for="(panel, index) in tabsManu"
-          :key="index"
-          :name="panel.name"
-        >
+        <q-tab-panel style="padding: 0px" name="Detail">
           <q-card>
-            <component :is="componentMap[panel.name]" />
+            <Detail
+              ref="childDetailRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
+          </q-card>
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="ListPersons">
+          <q-card>
+            <ListPersons
+              ref="childListPersonsRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
+          </q-card>
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="ReceivedCopy">
+          <q-card>
+            <ReceivedCopy
+              ref="childReceivedCopyRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
+          </q-card>
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="Attached">
+          <q-card>
+            <Attached
+              ref="childAttachedRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
           </q-card>
         </q-tab-panel>
       </q-tab-panels>