158 lines
No EOL
4.1 KiB
Vue
158 lines
No EOL
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { defineAsyncComponent, ref,onMounted } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const orderId_params = route.params.id;
|
|
const orderId = ref<string>('')
|
|
const step = ref<number>(0);
|
|
const step01 = defineAsyncComponent(
|
|
() => import("@/modules/13_salary/components/Command/step01.vue")
|
|
);
|
|
const step02 = defineAsyncComponent(
|
|
() => import("@/modules/13_salary/components/Command/step02.vue")
|
|
);
|
|
const step03 = defineAsyncComponent(
|
|
() => import("@/modules/13_salary/components/Command/step03.vue")
|
|
);
|
|
const step04 = defineAsyncComponent(
|
|
() => import("@/modules/13_salary/components/Command/step04.vue")
|
|
);
|
|
|
|
const nextStep = async () => {
|
|
localStorage.setItem("currentStep", step.value.toString());
|
|
if (orderId.value) {
|
|
await http
|
|
.put(config.API.nextStep(orderId.value))
|
|
.then(() => {
|
|
router.push(
|
|
`/salary/command/detail/${orderId.value}?step=${step.value + 1}`
|
|
);
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
};
|
|
|
|
const previousStep = async () => {
|
|
localStorage.setItem("currentStep", step.value.toString());
|
|
if (orderId.value) {
|
|
await http
|
|
.put(config.API.prevStep(orderId.value))
|
|
.then(() => {
|
|
router.push(
|
|
`/salary/command/detail/${orderId.value}?step=${step.value - 1}`
|
|
);
|
|
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
};
|
|
|
|
function destroyLocalStorage(){
|
|
localStorage.clear();
|
|
};
|
|
|
|
onMounted(() => {
|
|
destroyLocalStorage()
|
|
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();
|
|
}
|
|
});
|
|
</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(`/salary/command`)"
|
|
/>
|
|
ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง
|
|
</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>
|
|
<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> |