hrms-mgt/src/modules/10_order/components/Detail.vue

<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>