hrms-user/src/modules/06_evaluate/components/DialogMain.vue

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import DialogHeader from "@/components/DialogHeader.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { onMounted, ref, watch } from "vue";

const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useEvaluateStore();

const { dialogConfirm } = mixin;

const props = defineProps({
  modal: {
    type: Boolean,
  },
  menu: {
    type: Object,
    require: true,
  },
  close: {
    type: Function,
  },
});

const step = ref<number>(1);
function nextStep() {
  step.value++;
}

function prevStep() {
  step.value--;
}

function onCklicNext() {
  dialogConfirm(
    $q,
    () => {
      const type = props.menu ? props.menu.val?.toLowerCase() : "";
      store.step = 1;
      store.currentStep = 1;
      router.push(`/evaluate/add/${type}`);
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}

const thumbStyle = ref<any>({
  right: "4px",
  borderRadius: "5px",
  backgroundColor: "var(--q-primary)",
  width: "5px",
  opacity: 0.75,
});

const barStyle = ref<any>({
  right: "2px",
  borderRadius: "9px",
  backgroundColor: "var(--q-primary)",
  width: "9px",
  opacity: 0.2,
});

watch(props, () => {
  step.value = 1;
});
</script>

<template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 800px; max-width: 90vw">
      <DialogHeader
        :tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
        :close="props.close"
        elevated
      />
      <q-separator />

      <q-scroll-area
        :thumb-style="thumbStyle"
        :bar-style="barStyle"
        style="height: 500px"
      >
        <q-card-section class="q-pt-none">
          <p class="q-mt-md">
            การ{{ props.menu ? props.menu.label : "" }}มีทั้งหมด 9 ขั้นตอน
          </p>

          <q-stepper
            v-model="step"
            class="q-pt-none"
            vertical
            animated
            flat
            ref="stepper"
            :bordered="false"
            header-nav
          >
            <q-step
              keep-alive
              :name="1"
              prefix="1"
              title="ตรวจสอบคุณสมบัติ"
              icon="settings"
              :done="step > 1"
            >
              ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
              โดยมีหัวข้อตรวจสอบดังนี้
              <ol>
                <li>คุณวุฒิการศึกษา</li>
                <li>ประวัติการรับราชการ</li>
                <li>ประสบการณ์ในการปฏิบัติงาน</li>
                <li>
                  ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
                </li>
                <li>
                  มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
                  ในมาตรฐานกำหนดตำแหน่ง
                </li>
                <li>
                  มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
                  คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล
                  วิศวกรโยธา สถาปนิก ฯลฯ)
                </li>
                <li>
                  มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคย
                  ดำรงตำแหน่งในสายงานที่จะคัดเลือก
                  ตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
                </li>
              </ol>
            </q-step>

            <q-step
              :name="2"
              prefix="2"
              title="จัดเตรียมเอกสารเล่ม 1"
              :done="step >= 2"
            >
              ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ
              และอัปโหลดเข้าสู่ระบบ โดยมีรายการเอกสารดังนี้
              <ol>
                <li>แบบพิจารณาคุณสมบัติบุคคล</li>
                <li>แบบแสดงรายละเอียดการเสนอผลงาน</li>
                <li>
                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
                  (เอกสารแบบ ก.)
                </li>
                <li>แบบประเมินคุณลักษณะบุคคล</li>
                <li>แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)</li>
                <li>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</li>
              </ol>
            </q-step>

            <q-step
              :name="3"
              prefix="3"
              title="ตรวจสอบเอกสารเล่ม 1"
              :done="step >= 3"
            >
              ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
            </q-step>

            <q-step
              :name="4"
              prefix="4"
              title="รอตรวจสอบคุณสมบัติ"
              :done="step >= 4"
            >
              ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ
              และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
            </q-step>

            <q-step
              :name="5"
              prefix="5"
              title="ประกาศบนเว็บไซต์"
              :done="step >= 5"
            >
              เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
            </q-step>

            <q-step
              :name="6"
              prefix="6"
              title="จัดเตรียมเอกสารเล่ม 2"
              :done="step >= 6"
            >
              ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2
              โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน
            </q-step>

            <q-step
              :name="7"
              prefix="7"
              title="ตรวจสอบเอกสารเล่ม 2"
              :done="step >= 7"
            >
              ผู้ประเมินทำการตรวจสอบเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
            </q-step>

            <q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="step >= 8">
              เจ้าหน้าที่ทำการพิจารณาผลการประเมิน
              และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ
              และอัปโหลดเข้าสู่ระบบ
              โดยมีรายการเอกสารที่เกี่ยวข้องกับการประเมินดังนี้
              <ol>
                <li>
                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
                  (เอกสารแบบ ค)
                </li>
                <li>บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)</li>
                <li>แบบประเมินผลงาน (เอกสารหมายเลข 16)</li>
                <li>แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)</li>
                <li>แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)</li>
                <li>แบบสรุปผลการประเมิน (เอกสารแบบ ง)</li>
              </ol>

              ผู้ประเมินสามารถแก้ไขเอกสารเล่ม 2 โดยการอัปโหลดเอกสารเล่ม 2
              (ฉบับแก้ไข) ได้
            </q-step>

            <q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="step >= 9">
              เสร็จสิ้นการประเมิน
            </q-step>
          </q-stepper>
        </q-card-section>
      </q-scroll-area>

      <q-separator />
      <q-card-actions align="right">
        <q-btn
          v-if="step > 1"
          unelevated
          outline
          color="public"
          label="ก่อนหน้า"
          @click="prevStep()"
        />
        <q-btn
          unelevated
          :outline="!(step == 9)"
          color="public"
          :label="step == 9 ? 'ดำเนินการต่อ' : 'ถัดไป'"
          @click="step == 9 ? onCklicNext() : nextStep()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>