From e62175a4d7e03df8961f10e6f0e28ea5b550b2ae Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 27 Dec 2023 10:03:36 +0700
Subject: [PATCH] =?UTF-8?q?popup=20=E0=B8=82=E0=B8=B1=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=AD=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/DialogMain.vue     | 201 +++++++++++++++++-
 1 file changed, 195 insertions(+), 6 deletions(-)

diff --git a/src/modules/06_evaluate/components/DialogMain.vue b/src/modules/06_evaluate/components/DialogMain.vue
index 6393079..1cd9500 100644
--- a/src/modules/06_evaluate/components/DialogMain.vue
+++ b/src/modules/06_evaluate/components/DialogMain.vue
@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { onMounted, ref, watch } from "vue";
 
 const router = useRouter();
 const $q = useQuasar();
@@ -25,6 +26,15 @@ const props = defineProps({
   },
 });
 
+const step = ref<number>(1);
+function nextStep() {
+  step.value++;
+}
+
+function prevStep() {
+  step.value--;
+}
+
 function onCklicNext() {
   dialogConfirm(
     $q,
@@ -36,25 +46,204 @@ function onCklicNext() {
     "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
   );
 }
+
+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: 700px; max-width: 80vw">
+    <q-card style="width: 800px; max-width: 90vw">
       <DialogHeader
-        :tittle="props.menu ? props.menu.label : ''"
+        :tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
         :close="props.close"
+        elevated
       />
       <q-separator />
 
-      <q-card-section class="q-pt-none"> </q-card-section>
+      <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
-          dense
+          outline
           color="public"
-          label="ดำเนินการต่อ"
-          @click="onCklicNext()"
+          label="ก่อนหน้า"
+          @click="prevStep()"
+        />
+        <q-btn
+          unelevated
+          :outline="!(step == 9)"
+          color="public"
+          :label="step == 9 ? 'ดำเนินการต่อ' : 'ถัดไป'"
+          @click="step == 9 ? onCklicNext() : nextStep()"
         />
       </q-card-actions>
     </q-card>