hrms-mgt/src/modules/18_command/views/detail.vue

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";

import { useRouter, useRoute } from "vue-router";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";

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 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 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: "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>
  <div class="toptitle col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    {{
      route.name === "commandEditDetailPage"
        ? "แก้ไขรายละเอียดคำสั่ง"
        : "รายละเอียดคำสั่ง"
    }}
  </div>

  <q-card class="q-mt-sm">
    <q-card-section style="padding: 0px">
      <q-separator />
      <q-tabs
        v-model="tabs"
        inline-label
        align="left"
        indicator-color="primary"
        active-color="primary bg-teal-1"
      >
        <q-tab
          v-for="(tab, index) in tabsManu"
          :key="index"
          :name="tab.name"
          :label="tab.label"
        />
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="tabs" animated>
        <q-tab-panel style="padding: 0px" name="Detail">
          <q-card>
            <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>
    </q-card-section>
  </q-card>
</template>

<style scoped></style>