UI ออกคำสั่ง

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

@@ -1,11 +1,91 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+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(() => {
-  console.log("mounted");
+  store.readonly = readonly.value;
 });
 </script>
 
-<template>detail</template>
+<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>