148 lines
No EOL
3.1 KiB
Vue
148 lines
No EOL
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
|
|
|
const store = useEvaluateDetailStore();
|
|
</script>
|
|
|
|
<template>
|
|
<q-stepper
|
|
v-model="store.step"
|
|
vertical
|
|
animated
|
|
flat
|
|
header-nav
|
|
ref="stepper"
|
|
:bordered="false"
|
|
class="stepEva text-grey-8"
|
|
>
|
|
<q-step
|
|
keep-alive
|
|
:name="1"
|
|
prefix="1"
|
|
title="ตรวจสอบคุณสมบัติ"
|
|
:done="store.step >= 1"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="2"
|
|
prefix="2"
|
|
title="จัดเตรียมเอกสารเล่ม 1"
|
|
:done="store.step >= 2"
|
|
:disable="store.currentStep < 2"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="3"
|
|
prefix="3"
|
|
title="ตรวจสอบเอกสารเล่ม 1"
|
|
:done="store.step >= 3"
|
|
:disable="store.currentStep < 3"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="4"
|
|
prefix="4"
|
|
title="รอตรวจสอบคุณสมบัติ"
|
|
:done="store.step >= 4"
|
|
:disable="store.currentStep < 4"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="5"
|
|
prefix="5"
|
|
title="ประกาศบนเว็บไซต์"
|
|
:done="store.step >= 5"
|
|
:disable="store.currentStep < 5"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="6"
|
|
prefix="6"
|
|
title="จัดเตรียมเอกสารเล่ม 2"
|
|
:done="store.step >= 6"
|
|
:disable="store.currentStep < 6"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="7"
|
|
prefix="7"
|
|
title="ตรวจสอบเอกสารเล่ม 2"
|
|
:done="store.step >= 7"
|
|
:disable="store.currentStep < 7"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="8"
|
|
prefix="8"
|
|
title="รอพิจารณาผลการประเมิน"
|
|
:done="store.step >= 8"
|
|
:disable="store.currentStep < 8"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="9"
|
|
prefix="9"
|
|
title="เสร็จสิ้น"
|
|
:done="store.step >= 9"
|
|
:disable="store.currentStep < 9"
|
|
class="subStep"
|
|
>
|
|
</q-step>
|
|
</q-stepper>
|
|
</template>
|
|
|
|
<style>
|
|
.stepEva {
|
|
padding: 0px !important;
|
|
}
|
|
.subStep .q-stepper__tab {
|
|
padding: 10px 10px !important;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* steppe active */
|
|
.stepEva .q-stepper__tab--active .q-stepper__title {
|
|
color: #34373c !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
.stepEva .q-stepper__tab--active .q-stepper__dot {
|
|
color: white !important;
|
|
border: 1.5px solid #02a998;
|
|
}
|
|
|
|
.stepEva .q-stepper__tab--active .q-stepper__dot span {
|
|
color: #02a998;
|
|
}
|
|
|
|
/* steppe done */
|
|
.stepEva .q-stepper__tab--done .q-stepper__dot {
|
|
color: #02a998;
|
|
}
|
|
|
|
.stepEva.q-stepper--vertical .q-stepper__dot:before,
|
|
.stepEva.q-stepper--vertical .q-stepper__dot:after {
|
|
width: 1px;
|
|
background: #c8d3db;
|
|
}
|
|
.stepEva .q-stepper__tab .q-stepper__title {
|
|
color: #9a9a9a;
|
|
font-weight: 400;
|
|
}
|
|
</style> |