hrms-mgt/src/modules/11_discipline/components/4_Order/OrderPage.vue
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 cfc073e30c ปรับ interfeac
2023-10-19 15:39:18 +07:00

75 lines
2 KiB
Vue

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
// import step
import step01 from "@/modules/11_discipline/components/4_Order/Step01.vue";
import step02 from "@/modules/11_discipline/components/4_Order/Step02.vue";
import step03 from "@/modules/11_discipline/components/4_Order/Step03.vue";
const router = useRouter();
const step = ref<number>(1);
// nextStep
const nextStep = async () => {
localStorage.setItem("currentStep", step.value.toString());
step.value++;
};
// previousStep
const previousStep = async () => {
localStorage.setItem("currentStep", step.value.toString());
step.value--;
};
</script>
<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.push(`/discipline-order`)"
/>
ออกคำสงลงโทษทางว
</div>
<div class="col-12 q-mt-sm">
<q-card flat bordered>
<q-stepper
v-model="step"
ref="stepper"
animated
active-color="pirmary"
active-icon="none"
header-class="bg-grey-1 "
>
<q-step
:name="1"
prefix="1"
title="รายละเอียดการออกคำสั่ง"
:done="step > 1"
>
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
</q-step>
<q-step :name="2" prefix="2" title="เลือกรายชื่อ" :done="step > 2">
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
</q-step>
<q-step
:name="3"
prefix="3"
title="รายละเอียดคำสั่งและแนบท้าย"
:done="step > 3"
>
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
</q-step>
</q-stepper>
</q-card>
</div>
</template>
<style scoped></style>