edit go to step order process

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

@@ -156,7 +156,7 @@
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="redirectToPage(props.row.orderId)"
+                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)"
               >
                 <q-td key="Order" :props="props">
                   {{ props.row.Order }}
@@ -399,8 +399,23 @@ const OriginalDataFetch = async () => {
 };
 
 // ดูรายการหน้าต่อไป
-const redirectToPage = (id?: string) => {
-  router.push(`/placement/order/detail/${id}`);
+const redirectToPage = (id?: string, status?: string) => {
+ let step = 1;
+  switch (status) {
+    case 'จัดทำร่างคำสั่ง':
+      step = 1;
+      break;
+      case 'บัญชีแนบท้าย':
+      step = 2;
+      break;
+      case 'เลือกผู้ได้รับสำเนาคำสั่ง':
+      step = 3;
+      break;
+      case 'รอผู้มีอำนาจลงนาม':
+      step = 4;
+      break;
+  }
+  router.push(`/placement/order/detail/${id}?step=${step}`);
 };
 
 const clickDelete = (id: string) => {

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

@@ -1,56 +1,16 @@
 <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()"
-    />
+    <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-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="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"
-      />
+      <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" />
@@ -70,6 +30,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 const route = useRoute();
 
+
 const orderId_params = route.params.orderid;
 const probationData = useProbationDataStore();
 const { stepOrder, setStepOrder } = probationData;
@@ -92,13 +53,14 @@ const step04 = defineAsyncComponent(
 );
 
 const router = useRouter();
-const step = ref<number>(1);
+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());
@@ -115,7 +77,7 @@ const nextStep = async () => {
 };
 const previousStep = async () => {
   stepper.value!.previous();
-  localStorage.setItem("currentStep", step.value.toString());
+  // localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.prevStep(orderId.value))
@@ -130,14 +92,24 @@ const previousStep = async () => {
 const destroyLocalStorage = () => {
   localStorage.clear();
 };
+
 onMounted(() => {
-  const currentStep = localStorage.getItem("currentStep");
-  if (currentStep) {
-    step.value = Number(currentStep);
+  // 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);
+    //   console.log(orderId.value);
   }
 });
 </script>
@@ -145,11 +117,13 @@ onMounted(() => {
 .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;
 }