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

<script setup lang="ts">
import { onMounted, ref } 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 componentMap: any = {
  Detail,
  ListPersons,
  ReceivedCopy,
  Attached,
};

const readonly = ref<boolean>(route.name === "commandViewDetailPage");
const tabs = ref<string>("Detail");
const tabsManu = ref([
  { label: "รายละเอียดคำสั่ง", name: "Detail" },
  { label: "รายชื่อผู้ออกคำสั่ง", name: "ListPersons" },
  { label: "รายชื่อผู้ได้รับสำเนาคำสั่ง", name: "ReceivedCopy" },
  { label: "คำสั่งและบัญชีแนบท้าบ", name: "Attached" },
]);

onMounted(() => {
  store.readonly = readonly.value;
});
</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"
          v-for="(panel, index) in tabsManu"
          :key="index"
          :name="panel.name"
        >
          <q-card>
            <component :is="componentMap[panel.name]" />
          </q-card>
        </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>
</template>

<style scoped></style>