371 lines
14 KiB
Vue
371 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useQuasar } from "quasar";
|
|
|
|
/** import Components*/
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
/** import Store*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
|
|
|
/** use*/
|
|
const router = useRouter();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const store = useEvaluateStore();
|
|
const slide = ref<string>("1");
|
|
|
|
const { dialogConfirm } = mixin;
|
|
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
},
|
|
menu: {
|
|
type: Object,
|
|
require: true,
|
|
},
|
|
close: {
|
|
type: Function,
|
|
},
|
|
});
|
|
|
|
const step = ref<number>(1);
|
|
|
|
/** function click ดำเนินการต่อ */
|
|
function onCklicNext() {
|
|
const type = props.menu ? props.menu.val?.toLowerCase() : "";
|
|
store.step = 1;
|
|
store.currentStep = 1;
|
|
store.statusUpload = false;
|
|
router.push(`/evaluate/add/${type}`);
|
|
}
|
|
|
|
/** function Callblck ทำงานเมื่อ props มีการเปลี่ยนแปลง */
|
|
watch(props, () => {
|
|
step.value = 1;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="props.modal">
|
|
<q-card style="width: 800px; max-width: 90vw; border-radius: 8px">
|
|
<DialogHeader
|
|
class="text-center text-edit"
|
|
:tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
|
|
:close="props.close"
|
|
elevated
|
|
/>
|
|
<q-separator />
|
|
<q-carousel
|
|
v-model="slide"
|
|
transition-prev="slide-right"
|
|
transition-next="slide-left"
|
|
swipeable
|
|
animated
|
|
control-type="regular"
|
|
control-color="grey-5"
|
|
navigation
|
|
padding
|
|
arrows
|
|
height="auto"
|
|
class="text-dark rounded-borders"
|
|
>
|
|
<template v-slot:navigation-icon="{ active, btnProps, onClick }">
|
|
<q-btn
|
|
v-if="active"
|
|
size="xs"
|
|
:icon="btnProps.icon"
|
|
color="edit"
|
|
flat
|
|
round
|
|
dense
|
|
@click="onClick"
|
|
/>
|
|
<q-btn
|
|
v-else
|
|
size="xs"
|
|
:icon="btnProps.icon"
|
|
color="grey"
|
|
flat
|
|
round
|
|
dense
|
|
@click="onClick"
|
|
/>
|
|
</template>
|
|
<q-carousel-slide name="1" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page1.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-1-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
ตรวจสอบคุณสมบัติ
|
|
</div>
|
|
</div>
|
|
ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="2" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page2.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-2-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
จัดเตรียมเอกสารเล่ม 1
|
|
</div>
|
|
</div>
|
|
ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ
|
|
และอัปโหลดเข้าสู่ระบบ
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="3" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page3.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-3-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
ตรวจสอบเอกสารเล่ม 1
|
|
</div>
|
|
</div>
|
|
ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="4" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page4.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-4-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
รอตรวจสอบคุณสมบัติ
|
|
</div>
|
|
</div>
|
|
ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ
|
|
และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="5" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page5.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-5-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
ประกาศบนเว็บไซต์
|
|
</div>
|
|
</div>
|
|
เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="6" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page6.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-6-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
จัดเตรียมเอกสารเล่ม 2
|
|
</div>
|
|
</div>
|
|
ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2
|
|
โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน<br />
|
|
กรณีผู้จะเกษียณอายุราชการให้ส่งผลงาน
|
|
ก่อนวันที่จะเกษียณอายุราชการไม่น้อยกว่า 90 วัน
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="7" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page7.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-7-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
ตรวจสอบเอกสารเล่ม 2
|
|
</div>
|
|
</div>
|
|
ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="8" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page8.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-8-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
รอพิจารณาผล
|
|
</div>
|
|
</div>
|
|
เจ้าหน้าที่ทำการพิจารณาผลการประเมิน
|
|
และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ
|
|
และอัปโหลดเข้าสู่ระบบ
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
|
|
<q-carousel-slide name="9" class="no-wrap">
|
|
<q-card bordered>
|
|
<q-card-section class="bg-grey-2" style="height: 150px">
|
|
<div class="text-center">
|
|
<q-img
|
|
class="absolute-center"
|
|
src="@/modules/06_evaluate/components/img/page9.png"
|
|
spinner-color="white"
|
|
style="height: auto; max-width: 100px"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions vertical align="left" class="q-pa-lg">
|
|
<div class="flex">
|
|
<q-icon
|
|
name="mdi-numeric-9-circle"
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<div class="q-pl-sm text-weight-bold text-dark">เสร็จสิ้น</div>
|
|
</div>
|
|
เสร็จสิ้นการประเมิน
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
<q-separator />
|
|
<q-card-actions align="right" class="bg-edit q-px-md">
|
|
<q-btn
|
|
style="border-radius: 10px; padding: 5px 20px"
|
|
unelevated
|
|
icon-right="mdi-arrow-right"
|
|
outline
|
|
color="white"
|
|
label="ข้าม"
|
|
@click="onCklicNext"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|