แก้ bug

src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue

@@ -0,0 +1,99 @@
+<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)"
+    />
+    ออกคำสั่งบรรจุ
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      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"
+        :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 } from "vue";
+import type { QStepper } from "quasar";
+
+const step01 = defineAsyncComponent(
+  () =>
+    import("@/modules/05_placement/components/OrderPlacement/step/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () =>
+    import("@/modules/05_placement/components/OrderPlacement/step/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () =>
+    import("@/modules/05_placement/components/OrderPlacement/step/step03.vue")
+);
+const step04 = defineAsyncComponent(
+  () =>
+    import("@/modules/05_placement/components/OrderPlacement/step/step04.vue")
+);
+
+const router = useRouter();
+const step = ref<number>(1);
+const stepper = ref<QStepper>();
+
+const nextStep = () => {
+  stepper.value!.next();
+};
+
+const previousStep = () => {
+  stepper.value!.previous();
+};
+</script>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+</style>