122 lines
3.9 KiB
Vue
122 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import Stepper from "@/modules/12_evaluate/components/Detail/Stepper.vue";
|
|
import Step1 from "@/modules/12_evaluate/components/Detail/step/step1.vue";
|
|
import Step2 from "@/modules/12_evaluate/components/Detail/step/step2.vue";
|
|
import Step3 from "@/modules/12_evaluate/components/Detail/step/step3.vue";
|
|
import Step4 from "@/modules/12_evaluate/components/Detail/step/step4.vue";
|
|
import Step5 from "@/modules/12_evaluate/components/Detail/step/step5.vue";
|
|
import Step6 from "@/modules/12_evaluate/components/Detail/step/step6.vue";
|
|
import Step7 from "@/modules/12_evaluate/components/Detail/step/step7.vue";
|
|
import Step8 from "@/modules/12_evaluate/components/Detail/step/step8.vue";
|
|
import Step9 from "@/modules/12_evaluate/components/Detail/step/step9.vue";
|
|
|
|
import ViewStep1 from "@/modules/12_evaluate/components/Detail/viewstep/viewStep1.vue";
|
|
import ViewStep3 from "@/modules/12_evaluate/components/Detail/viewstep/viewStep3.vue";
|
|
import ViewStep7 from "@/modules/12_evaluate/components/Detail/viewstep/viewStep7.vue";
|
|
|
|
import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
const store = useEvaluateDetailStore();
|
|
const mixin = useCounterMixin();
|
|
const { dialogConfirm } = mixin;
|
|
|
|
const $q = useQuasar();
|
|
|
|
function onCilckNextStep() {
|
|
store.step < 9 &&
|
|
dialogConfirm($q, () => {
|
|
store.step++;
|
|
});
|
|
}
|
|
|
|
function onCilckprPeviousStep() {
|
|
store.step > 1 &&
|
|
dialogConfirm($q, () => {
|
|
store.step--;
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
store.step = 1;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-xs-12 col-sm-3">
|
|
<div class="toptitle">ประเมินชำนาญการพิเศษ</div>
|
|
<Stepper />
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-9">
|
|
<div class="toptitle">
|
|
{{ store.step }}.{{ store.titel[store.step - 1] }}
|
|
</div>
|
|
<div class="row q-col-gutter-md col-12">
|
|
<div
|
|
:class="
|
|
store.step === 2 ||
|
|
store.step === 4 ||
|
|
store.step === 5 ||
|
|
store.step === 6 ||
|
|
store.step === 8 ||
|
|
store.step === 9
|
|
? 'col-xs-12 col-sm-12 row'
|
|
: 'col-xs-12 col-sm-5 row'
|
|
"
|
|
>
|
|
<q-card flat bordered class="col-12 q-pa-md">
|
|
<q-card-section>
|
|
<Step1 v-if="store.step === 1" />
|
|
<Step2 v-if="store.step === 2" />
|
|
<Step3 v-if="store.step === 3" />
|
|
<Step4 v-if="store.step === 4" />
|
|
<Step5 v-if="store.step === 5" />
|
|
<Step6 v-if="store.step === 6" />
|
|
<Step7 v-if="store.step === 7" />
|
|
<Step8 v-if="store.step === 8" />
|
|
<Step9 v-if="store.step === 9" />
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<div
|
|
class="col-xs-12 col-sm-7 row"
|
|
v-if="store.step === 1 || store.step === 3 || store.step === 7"
|
|
>
|
|
<q-card flat bordered class="col-12">
|
|
<q-card-section>
|
|
<ViewStep1 v-if="store.step === 1" />
|
|
<ViewStep3 v-if="store.step === 3" />
|
|
<ViewStep7 v-if="store.step === 7" /> </q-card-section
|
|
></q-card>
|
|
</div>
|
|
</div>
|
|
<div class="q-mt-md q-gutter-md" align="right">
|
|
<q-btn
|
|
v-if="store.step !== 1"
|
|
unelevated
|
|
outline
|
|
label="ย้อนกลับ"
|
|
color="public"
|
|
@click="onCilckprPeviousStep"
|
|
/>
|
|
<q-btn
|
|
unelevated
|
|
label="ดำเนินการต่อ"
|
|
color="public"
|
|
@click="onCilckNextStep"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.q-stepper--vertical .q-stepper__step-inner {
|
|
padding: 0;
|
|
}
|
|
</style>
|