ปรับโครงสร้างเมนู, เพิ่มเมนูในทะเบียนประวัติ

src/modules/10_order/components/Detail.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="toptitle text-dark 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), destroyLocalStorage()" />
+    ออกคำสั่ง
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper v-model="step" ref="stepper" color="primary" animated class="step" header-class="bg-grey-1">
+      <q-step :name="1" title="รายละเอียดการออกคำสั่ง" prefix="1" :done="step > 1" :header-nav="step > 1" />
+
+      <q-step :name="2" title="เลือกรายชื่อ" prefix="2" :done="step > 2" :header-nav="step > 2" />
+
+      <q-step :name="3" title="เลือกรายชื่อส่งสำเนาคำสั่ง" prefix="3" :done="step > 3" :header-nav="step > 3" />
+      <q-step :name="4" title="รายละเอียดคำสั่งและแนบท้าย" prefix="4" :done="step > 4" :header-nav="step > 4" />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+        <step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
+      </template>
+    </q-stepper>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
+import type { QStepper } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const route = useRoute();
+
+
+const orderId_params = route.params.orderid;
+
+const step01 = defineAsyncComponent(
+  () =>
+    import("@/modules/10_order/components/step/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () =>
+    import("@/modules/10_order/components/step/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () =>
+    import("@/modules/10_order/components/step/step03.vue")
+);
+const step04 = defineAsyncComponent(
+  () =>
+    import("@/modules/10_order/components/step/step04.vue")
+);
+
+const router = useRouter();
+const step = ref<number>(0);
+const stepper = ref<QStepper>();
+const orderId = ref<string>("");
+
+onUnmounted(() => {
+  destroyLocalStorage();
+});
+
+const nextStep = async () => {
+  stepper.value!.next();
+  localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.nextStep(orderId.value))
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+};
+const previousStep = async () => {
+  stepper.value!.previous();
+  localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.prevStep(orderId.value))
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+};
+const destroyLocalStorage = () => {
+  localStorage.clear();
+};
+
+onMounted(() => {
+  // console.log("route query===>", route.query)
+  if (route.query.step) {
+    step.value = Number(route.query.step)
+    localStorage.setItem("currentStep", step.value.toString());
+  } else {
+    const currentStep = localStorage.getItem("currentStep");
+    if (currentStep) {
+      step.value = Number(currentStep);
+    } else {
+      step.value = 1;
+    }
+  }
+
+  if (orderId_params !== undefined) {
+    orderId.value = orderId_params.toString();
+    //   console.log(orderId.value);
+  }
+});
+</script>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+
+.step .q-stepper__tab--done .q-stepper__title,
+.step .q-stepper__tab--active .q-stepper__title {
+  color: #35473c !important;
+  font-weight: 500;
+}
+
+.step .q-stepper__header--standard-labels .q-stepper__tab {
+  min-height: 60px;
+}
+</style>