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 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 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); //ref components รายละเอียดคำสั่ง
const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null); //ref components รายชื่อผู้ออกคำสั่ง
const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
  null
); //ref components รายชื่อผู้ได้รับสำเนาคำสั่ง
const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null); //ref components คำสั่งและบัญชีแนบท้าบ

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: "รายชื่อผู้ออกคำสั่ง",
    name: "ListPersons",
  },
  {
    label: "รายชื่อผู้ได้รับสำเนาคำสั่ง",
    name: "ReceivedCopy",
  },
  { label: "คำสั่งและบัญชีแนบท้าบ", name: "Attached" },
]);

/**
 * ฟังก์ชันเช็คการเปลี่นรแปลงของข้อมูล
 *
 * ถ้ามีการเปลี่นยแปลง กำหนด  'isChangeData' เป็น true
 */
function onCheckChangeData() {
  isChangeData.value = true;
}

/**
 * ดูการเปลี่ยนแปลงของ 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();
  }
});

/**
 * ทำงานเมื่อ Components ถูกเรียกใช้งาน
 *
 * กำหนดค่า `store.readonly` เมื่อ  route.name เป็น "commandViewDetailPage" จะอ่านข้อมูลได้อย่างเดียว
 */
onMounted(() => {
  store.readonly = route.name === "commandViewDetailPage";
});
</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>