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

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

import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter, useRoute } from "vue-router";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import { useCounterMixin } from "@/stores/mixin";

import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";

import Main from "@/modules/18_command/components/Step/0_Main.vue"; //ประมวลผลคำสั่ง
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 $q = useQuasar();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
const router = useRouter();
const route = useRoute();
const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
const store = useCommandDetail();
const isAttachment = ref<boolean>(true);

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>("Main"); //Tab
const readonly = ref<boolean>(route.name === "commandViewDetailPage"); //อ่านได้อย่างเดียว
const isChangeData = ref<boolean>(false); //การเปลี่ยนแปลงของข้อมูล
//รายการ Tab ละเอียดคำสั่ง
const tabsManu = ref<ItemTabs[]>([
  { label: "ประมวลผลคำสั่ง", name: "Main" },
  { label: "รายละเอียดคำสั่ง", name: "Detail" },
  {
    label: "รายชื่อผู้ได้รับคำสั่ง",
    name: "ListPersons",
  },
  {
    label: "รายชื่อผู้ได้รับสำเนาคำสั่ง",
    name: "ReceivedCopy",
  },
  { label: "พรีวิวคำสั่ง", name: "Attached" },
]);

let formCommandList = reactive<FormDataDetail>({
  id: "",
  status: "",
  commandTypeName: "",
  commandNo: "",
  commandYear: null,
  detailHeader: "",
  detailBody: "",
  detailFooter: "",
  issue: null,
  commandAffectDate: null, //วันที่ลงนาม
  commandExcecuteDate: null, //วันที่คำสั่งมีผล
  commandSysId: "", // ประเภท คำสั่ง
});

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

/**
 * ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
 *
 * กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
 */
async function fetchDataCommandList() {
  showLoader();
  await http
    .get(config.API.commandAction(commandId.value, "tab1"))
    .then(async (res) => {
      const data = await res.data.result;
      formCommandList = data;
      store.dataCommand = data;
      //รอ API ส่งมา  isAttachment.value = data.isAttachment ;
      isAttachment.value = true; // จำลอง
      isChangeData.value = false; //จำลอง
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ดูการเปลี่ยนแปลงของ 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(async () => {
  store.readonly = route.name === "commandViewDetailPage";
  await fetchDataCommandList();
});
</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="Main">
          <q-card>
            <Main
              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="Detail">
          <q-card>
            <Detail
              ref="childDetailRef"
              v-model:is-change-data="isChangeData"
              :on-check-change-data="onCheckChangeData"
              :fetch-data-command-list="fetchDataCommandList"
              :form-command-list="formCommandList"
            />
          </q-card>
        </q-tab-panel>

        <q-tab-panel
        class="bg-grey-2"
          style="padding: 0px;"
          name="ListPersons"
        >
          <ListPersons
            ref="childListPersonsRef"
            v-model:is-change-data="isChangeData"
            :on-check-change-data="onCheckChangeData"
            :fetch-data-command-list="fetchDataCommandList"
            :command-sys-id="formCommandList?.commandSysId as string"
          />
        </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"
              v-model:is-attachment="isAttachment"
            />
          </q-card>
        </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>
</template>

<style scoped></style>