From 24adce7fa8ebd3db4621f515a87ec85fc1f71417 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 14 Dec 2023 12:23:34 +0700
Subject: [PATCH] =?UTF-8?q?-=20router=20=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9A=E0=B8=B8=E0=B8=84?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A5=20-=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   2 +-
 .../12_Evaluate/components/Detail/Stepper.vue |  73 +++
 .../12_Evaluate/components/Detail/Tab1.vue    | 132 +++++
 .../12_Evaluate/components/Detail/Tab2.vue    | 122 +++++
 .../components/Detail/step/step1.vue          | 117 +++++
 .../components/Detail/step/step2.vue          | 483 ++++++++++++++++++
 .../components/Detail/step/step3.vue          |  80 +++
 .../components/Detail/step/step4.vue          |  22 +
 .../components/Detail/step/step5.vue          |  26 +
 .../components/Detail/step/step6.vue          | 106 ++++
 .../components/Detail/step/step7.vue          |  33 ++
 .../components/Detail/step/step8.vue          |  22 +
 .../components/Detail/step/step9.vue          |  22 +
 .../components/Detail/viewstep/viewPDF.vue    | 180 +++++++
 .../components/Detail/viewstep/viewStep1.vue  |   7 +
 .../components/Detail/viewstep/viewStep3.vue  |  34 ++
 .../components/Detail/viewstep/viewStep7.vue  |  17 +
 .../12_Evaluate/components/DetailPage.vue     |   0
 .../12_Evaluate/interface/index/Main.ts       |  87 +---
 src/modules/12_Evaluate/router.ts             |  21 +-
 .../12_Evaluate/store/EvaluateDetail.ts       |  28 +
 src/modules/12_Evaluate/views/DetailPage.vue  |  51 ++
 .../12_Evaluate/{ => views}/MainPage.vue      |   0
 src/router/index.ts                           |   4 +-
 24 files changed, 1571 insertions(+), 98 deletions(-)
 create mode 100644 src/modules/12_Evaluate/components/Detail/Stepper.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/Tab1.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/Tab2.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step1.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step2.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step3.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step4.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step5.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step6.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step7.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step8.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/step/step9.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/viewstep/viewPDF.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/viewstep/viewStep1.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/viewstep/viewStep3.vue
 create mode 100644 src/modules/12_Evaluate/components/Detail/viewstep/viewStep7.vue
 delete mode 100644 src/modules/12_Evaluate/components/DetailPage.vue
 create mode 100644 src/modules/12_Evaluate/store/EvaluateDetail.ts
 create mode 100644 src/modules/12_Evaluate/views/DetailPage.vue
 rename src/modules/12_Evaluate/{ => views}/MainPage.vue (100%)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 16fc0106a..f03753da2 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -489,7 +489,7 @@ const menuList = readonly<any[]>([
     activeIcon: "evaluate",
     label: "ประเมินบุคคล",
     path: "evaluate",
-    role: "order", // evaluate
+    role: "discipline", // evaluate
   },
 ]);
 
diff --git a/src/modules/12_Evaluate/components/Detail/Stepper.vue b/src/modules/12_Evaluate/components/Detail/Stepper.vue
new file mode 100644
index 000000000..c4eecdb71
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/Stepper.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
+</script>
+
+<template>
+  <q-stepper
+    v-model="store.step"
+    vertical
+    animated
+    flat
+    ref="stepper"
+    :bordered="false"
+  >
+    <q-step
+      keep-alive
+      :name="1"
+      prefix="1"
+      title="ตรวจสอบคุณสมบัติ"
+      :done="store.step > 1"
+    >
+    </q-step>
+
+    <q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
+    </q-step>
+
+    <q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
+    </q-step>
+
+    <q-step
+      :name="4"
+      prefix="4"
+      title="รอตรวจสอบคุณสมบัติ"
+      :done="store.step > 4"
+    >
+    </q-step>
+
+    <q-step
+      :name="5"
+      prefix="5"
+      title="ประกาศบนเว็บไซต์"
+      :done="store.step > 5"
+    >
+    </q-step>
+
+    <q-step
+      :name="6"
+      prefix="6"
+      title="จัดเตรียมเอกสารเล่ม 2"
+      :done="store.step > 6"
+    >
+    </q-step>
+
+    <q-step
+      :name="7"
+      prefix="7"
+      title="ตรวจสอบเอกสารเล่ม 2"
+      :done="store.step > 7"
+    >
+    </q-step>
+
+    <q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="store.step > 8">
+    </q-step>
+
+    <q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="store.step > 9">
+    </q-step>
+  </q-stepper>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/Tab1.vue b/src/modules/12_Evaluate/components/Detail/Tab1.vue
new file mode 100644
index 000000000..630d9e1f9
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/Tab1.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { 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>
diff --git a/src/modules/12_Evaluate/components/Detail/Tab2.vue b/src/modules/12_Evaluate/components/Detail/Tab2.vue
new file mode 100644
index 000000000..1e8f6ef1b
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/Tab2.vue
@@ -0,0 +1,122 @@
+<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>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step1.vue b/src/modules/12_Evaluate/components/Detail/step/step1.vue
new file mode 100644
index 000000000..0281cc05d
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step1.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+
+const formData = reactive<any>({
+  isEducationalQft: false, // คุณวุฒิการศึกษา
+  isGovermantServiceHtr: false, // ประวัติการรับราชการ
+  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
+  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
+  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
+  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
+  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
+});
+</script>
+
+<template>
+  <q-list>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isEducationalQft"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>คุณวุฒิการศึกษา </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isGovermantServiceHtr"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>ประวัติการรับราชการ </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isOperatingExp"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isMinPeriodOfTenure"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label
+          >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก</q-item-label
+        >
+      </q-item-section>
+    </q-item>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isHaveSpecificQft"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label
+          >มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
+          ในมาตรฐานกำหนดตำแหน่ง</q-item-label
+        >
+      </q-item-section>
+    </q-item>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isHaveProLicense"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label
+          >มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
+          คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล วิศวกรโยธา
+          สถาปนิก ฯลฯ)</q-item-label
+        >
+      </q-item-section>
+    </q-item>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isHaveMinPeriodOrHoldPos"
+        />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label
+          >มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคย
+          ดำรงตำแหน่งในสายงานที่จะคัดเลือก
+          ตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
+        >
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step2.vue b/src/modules/12_Evaluate/components/Detail/step/step2.vue
new file mode 100644
index 000000000..3da70da2a
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step2.vue
@@ -0,0 +1,483 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const fileEvaluation1 = ref<any>();
+const fileEvaluation2 = ref<any>();
+const fileEvaluation3 = ref<any>();
+const fileEvaluation4 = ref<any>();
+const fileEvaluation5 = ref<any>();
+const fileEvaluation6 = ref<any>();
+
+const modalView = ref<boolean>(false);
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+
+function onClickViewPDF(file: any) {
+  pdfSrc.value = file.webkitRelativePath;
+  modalView.value = true;
+}
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <!-- แบบพิจารณาคุณสมบัติบุคคล -->
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          แบบพิจารณาคุณสมบัติบุคคล
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation1"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                  @click="onClickViewPDF(fileEvaluation1)"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation1"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          แบบแสดงรายละเอียดการเสนอผลงาน
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation2"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation2"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล -->
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation3"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation3"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- แบบประเมินคุณลักษณะบุคคล -->
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          แบบประเมินคุณลักษณะบุคคล
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation4"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation4"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก -->
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation5"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation5"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!--ผลงานที่จะส่งประเมิน -->
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          ผลงานที่จะส่งประเมิน
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation6"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation6"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+
+  <!-- Dialog Full Screen -->
+  <q-dialog
+    v-model="modalView"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <div class="q-pa-md">
+        <div class="row items-start items-center">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+        <div class="row items- items-center">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+        </div>
+        <div class="row items- items-end">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step3.vue b/src/modules/12_Evaluate/components/Detail/step/step3.vue
new file mode 100644
index 000000000..6a7fe3103
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step3.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const selectedItem = ref(1);
+
+function handleItemClick(itemNumber: number) {
+  store.tabPanels = itemNumber.toString();
+  selectedItem.value = itemNumber;
+}
+</script>
+
+<template>
+  <q-list separator>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 1 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(1)"
+    >
+      <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
+    </q-item>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 2 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(2)"
+    >
+      <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
+    </q-item>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 3 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(3)"
+    >
+      <q-item-section
+        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล</q-item-section
+      >
+    </q-item>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 4 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(4)"
+    >
+      <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
+    </q-item>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 5 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(5)"
+    >
+      <q-item-section> แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก </q-item-section>
+    </q-item>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 6 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(6)"
+    >
+      <q-item-section> ผลงานที่จะส่งประเมิน </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step4.vue b/src/modules/12_Evaluate/components/Detail/step/step4.vue
new file mode 100644
index 000000000..d5522c0cd
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step4.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("WAIT_CHECK_DOC_V1");
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 text-center">
+      <q-badge
+        v-if="status == 'WAIT_CHECK_DOC_V1'"
+        outline
+        color="orange-5"
+        label="รอตรวจสอบคุณสมบัติ"
+        class="q-pa-sm"
+        style="font-size: 16px"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step5.vue b/src/modules/12_Evaluate/components/Detail/step/step5.vue
new file mode 100644
index 000000000..4caf80f55
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step5.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("ANNOUNCE_WEB");
+const website = ref<string>("https://bma-ehr.frappet.com/");
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 text-center q-">
+      <q-badge
+        v-if="status == 'ANNOUNCE_WEB'"
+        outline
+        color="primary"
+        label="ประกาศบนเว็บไซต์"
+        class="q-pa-sm"
+        style="font-size: 16px"
+      />
+      <div>
+        <a :href="website" target="_blank">{{ website }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step6.vue b/src/modules/12_Evaluate/components/Detail/step/step6.vue
new file mode 100644
index 000000000..909a62c5f
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step6.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ViewPDF from "@/modules/12_evaluate/components/Detail/viewstep/viewPDF.vue";
+
+const fileEvaluation1 = ref<any>();
+
+const pdfSrc = ref<any>();
+
+const modalView = ref<boolean>(false);
+function onClickViewPDF(file: any) {
+  pdfSrc.value = file.webkitRelativePath;
+  modalView.value = true;
+}
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-6">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เอกสารเล่ม 2
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <!-- <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  class="col-12"
+                  outline
+                  icon="download"
+                  label="ดาวน์โหลดต้นแบบ"
+                  color="primary"
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div> -->
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluation1"
+                  class="col-12"
+                  outline
+                  icon="visibility"
+                  label="ดูไฟล์เอกสาร"
+                  color="primary"
+                  @click="onClickViewPDF(fileEvaluation1)"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-11 row">
+                <q-file
+                  v-model="fileEvaluation1"
+                  class="col-12"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+
+  <!-- Dialog Full Screen -->
+  <q-dialog
+    v-model="modalView"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+
+      <div class="q-pa-md">
+        <ViewPDF />
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step7.vue b/src/modules/12_Evaluate/components/Detail/step/step7.vue
new file mode 100644
index 000000000..547aa84cf
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step7.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const selectedItem = ref(1);
+
+function handleItemClick(itemNumber: number) {
+  store.tabPanels = itemNumber.toString();
+  selectedItem.value = itemNumber;
+}
+</script>
+
+<template>
+  <q-list separator>
+    <q-item
+      clickable
+      v-ripple
+      :active="selectedItem === 1 ? true : false"
+      active-class="text-primary"
+      @click="handleItemClick(1)"
+    >
+      <q-item-section>เอกสารเล่ม 2</q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step8.vue b/src/modules/12_Evaluate/components/Detail/step/step8.vue
new file mode 100644
index 000000000..e2416f325
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step8.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("WAIT_CHECK_DOC_V2");
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 text-center">
+      <q-badge
+        v-if="status == 'WAIT_CHECK_DOC_V2'"
+        outline
+        color="orange-5"
+        label="รอพิจารณาผลการประเมิน"
+        class="q-pa-sm"
+        style="font-size: 16px"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/step/step9.vue b/src/modules/12_Evaluate/components/Detail/step/step9.vue
new file mode 100644
index 000000000..cb2c3f36b
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/step/step9.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("DONE");
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 text-center">
+      <q-badge
+        v-if="status == 'DONE'"
+        outline
+        color="green"
+        label="เสร็จสิ้น"
+        class="q-pa-sm"
+        style="font-size: 16px"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/viewstep/viewPDF.vue b/src/modules/12_Evaluate/components/Detail/viewstep/viewPDF.vue
new file mode 100644
index 000000000..81faa83cb
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/viewstep/viewPDF.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const splitterModel = ref(14);
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+</script>
+
+<template>
+  <q-splitter
+    v-model="splitterModel"
+    horizontal
+    style="
+      height: 50vh;
+      border: 1px solid rgb(210, 210, 210);
+      border-radius: 5px;
+    "
+    before-class="overflow-hidden disable"
+    separator-class="bg-white disabled"
+  >
+    <template v-slot:before>
+      <div class="q-px-sm">
+        <div class="row items-start items-center">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:after>
+      <div class="q-pa-md">
+        <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+      </div>
+    </template>
+    <template v-slot:default>
+      <div class="q-pa-md">
+        <div class="row items-start items-center">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </q-splitter>
+  <!-- <q-card class="bg-white">
+    <div class="q-pa-md">
+      <div class="row items-start items-center">
+        <div class="col">
+          <q-btn
+            padding="xs"
+            icon="mdi-chevron-left"
+            color="grey-2"
+            text-color="grey-5"
+            size="md"
+            class="my-auto"
+            @click="backPage"
+            :disable="page == 1"
+          />
+        </div>
+        <div class="col-12 col-md-auto">
+          <div class="q-pa-md flex">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </div>
+        </div>
+        <div class="col text-right">
+          <q-btn
+            padding="xs"
+            icon="mdi-chevron-right"
+            color="grey-2"
+            text-color="grey-5"
+            size="md"
+            @click="nextPage"
+            :disable="page === numOfPages"
+          />
+        </div>
+      </div>
+      <div class="row items- items-center">
+        <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+      </div>
+      <div class="row items- items-end">
+        <div class="col">
+          <q-btn
+            padding="xs"
+            icon="mdi-chevron-left"
+            color="grey-2"
+            text-color="grey-5"
+            size="md"
+            class="my-auto"
+            @click="backPage"
+            :disable="page == 1"
+          />
+        </div>
+        <div class="col-12 col-md-auto">
+          <div class="q-pa-md flex">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </div>
+        </div>
+        <div class="col text-right">
+          <q-btn
+            padding="xs"
+            icon="mdi-chevron-right"
+            color="grey-2"
+            text-color="grey-5"
+            size="md"
+            @click="nextPage"
+            :disable="page === numOfPages"
+          />
+        </div>
+      </div>
+    </div>
+  </q-card> -->
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/viewstep/viewStep1.vue b/src/modules/12_Evaluate/components/Detail/viewstep/viewStep1.vue
new file mode 100644
index 000000000..9c84ddb58
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/viewstep/viewStep1.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>ข้อมูลคุณสมบัติ</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/viewstep/viewStep3.vue b/src/modules/12_Evaluate/components/Detail/viewstep/viewStep3.vue
new file mode 100644
index 000000000..fca3e2a02
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/viewstep/viewStep3.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import ViewPDF from "@/modules/12_evaluate/components/Detail/viewstep/viewPDF.vue";
+
+import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
+</script>
+
+<template>
+  <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
+    <q-tab-panel name="1">
+      <ViewPDF />
+    </q-tab-panel>
+
+    <q-tab-panel name="2">
+      <ViewPDF />
+    </q-tab-panel>
+
+    <q-tab-panel name="3">
+      <ViewPDF />
+    </q-tab-panel>
+    <q-tab-panel name="4">
+      <ViewPDF />
+    </q-tab-panel>
+    <q-tab-panel name="5">
+      <ViewPDF />
+    </q-tab-panel>
+    <q-tab-panel name="6">
+      <ViewPDF />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/Detail/viewstep/viewStep7.vue b/src/modules/12_Evaluate/components/Detail/viewstep/viewStep7.vue
new file mode 100644
index 000000000..34bbf2482
--- /dev/null
+++ b/src/modules/12_Evaluate/components/Detail/viewstep/viewStep7.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import ViewPDF from "@/modules/12_evaluate/components/Detail/viewstep/viewPDF.vue";
+
+import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
+</script>
+
+<template>
+  <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
+    <q-tab-panel name="1">
+      <ViewPDF />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_Evaluate/components/DetailPage.vue b/src/modules/12_Evaluate/components/DetailPage.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/modules/12_Evaluate/interface/index/Main.ts b/src/modules/12_Evaluate/interface/index/Main.ts
index 15bf08932..e4ea7770c 100644
--- a/src/modules/12_Evaluate/interface/index/Main.ts
+++ b/src/modules/12_Evaluate/interface/index/Main.ts
@@ -1,86 +1 @@
-interface DataOption {
-  id: string;
-  name: string;
-}
-interface DataOptionYear {
-  id: number;
-  name: string;
-}
-interface DataOptioGroup {
-  id: string;
-  name: string;
-
-  disable: Boolean;
-}
-
-interface DataNumberOption {
-  id: number;
-  name: string;
-}
-
-interface InvestigatefactsDataRowType {
-  id: string;
-  title: string;
-  respondentType: string;
-  offenseDetails: string;
-  investigationDetail: string;
-  dateInvestigate: string;
-  investigationStatusResult: string;
-  status: string;
-}
-
-interface investigateDisDataRowType {
-  id: string; //id รายการ
-  title: string; //เรื่องร้องเรียน
-  interrogated: string; //ผู้ถูกสอบสวน
-  descMistake: string; //ลักษณะความผิด
-  mistakeLevel: string; //ระดับโทษความผิด
-  mistakeCase: string; //กรณีความผิด
-  investigationDate: Date | null; //วันที่สอบสวน
-  status: string | null; //สถานะ
-  isResultConfirmed: Boolean; //ยืนยันผลเเล้ว/ยังไม่ได้ยืนยันผล
-}
-
-interface directorType {
-  id: string;
-  directorId?: string;
-  prefix: string;
-  firstName: string;
-  lastName: string;
-  position: string;
-  email: string;
-  phone: string;
-  total?: number;
-  duty?: string;
-}
-interface responseType {
-  id: string;
-  directorId?: string;
-  prefix: string;
-  firstName: string;
-  lastName: string;
-  position: string;
-  email: string;
-  phone: string;
-  total?: number;
-  duty?: string;
-  
-}
-
-interface FileLists {
-  id: string; //id เอกสาร
-  fileName: string; //ชื่่อเอกสาร
-  pathName: string; //link file
-}
-
-export type {
-  DataOption,
-  InvestigatefactsDataRowType,
-  investigateDisDataRowType,
-  directorType,
-  DataNumberOption,
-  responseType,
-  FileLists,
-  DataOptioGroup,
-  DataOptionYear,
-};
+export type {};
diff --git a/src/modules/12_Evaluate/router.ts b/src/modules/12_Evaluate/router.ts
index 48ee1c3f8..cde3765e9 100644
--- a/src/modules/12_Evaluate/router.ts
+++ b/src/modules/12_Evaluate/router.ts
@@ -1,25 +1,26 @@
-const Evaluate = () => import("@/modules/12_Evaluate/MainPage.vue");
-const EvaluateDetail = () =>
-  import("@/modules/12_Evaluate/components/DetailPage.vue");
+const mainPage = () => import("@/modules/12_evaluate/views/MainPage.vue");
+const detailPage = () =>
+  import("@/modules/12_evaluate/views/DetailPage.vue");
+
 export default [
   {
     path: "/evaluate",
     name: "evaluate",
-    component: Evaluate,
+    component: mainPage,
     meta: {
       Auth: true,
-      Key: [12],
-      Role: "evaluate",
+      Key: [1.1],
+      Role: "discipline",
     },
   },
   {
     path: "/evaluate/detail",
     name: "evaluateDetail",
-    component: EvaluateDetail,
+    component: detailPage,
     meta: {
       Auth: true,
-      Key: [12.1],
-      Role: "evaluate",
+      Key: [12.2],
+      Role: "discipline",
     },
   },
-];
+];
\ No newline at end of file
diff --git a/src/modules/12_Evaluate/store/EvaluateDetail.ts b/src/modules/12_Evaluate/store/EvaluateDetail.ts
new file mode 100644
index 000000000..0940a9c5e
--- /dev/null
+++ b/src/modules/12_Evaluate/store/EvaluateDetail.ts
@@ -0,0 +1,28 @@
+
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
+  const tabMenu = ref<string>("1");
+  const step = ref<number>(1);
+  const titel = ref<string[]>([
+    "ตรวจสอบคุณสมบัติ",
+    "จัดเตรียมเอกสาร",
+    "ตรวจสอบเอกสาร",
+    "รอตรวจสอบคุณสมบัติ",
+    "ประกาศบนเว็บไซต์",
+    "จัดเตรียมเอกสารเล่ม 2",
+    "ตรวจสอบเอกสารเล่ม 2",
+    "รอพิจารณาผล",
+    "เสร็จสิ้น",
+  ]);
+
+  const tabPanels = ref<string>("1");
+
+  return {
+    tabMenu,
+    step,
+    titel,
+    tabPanels,
+  };
+});
\ No newline at end of file
diff --git a/src/modules/12_Evaluate/views/DetailPage.vue b/src/modules/12_Evaluate/views/DetailPage.vue
new file mode 100644
index 000000000..035686b27
--- /dev/null
+++ b/src/modules/12_Evaluate/views/DetailPage.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import Tab1 from "@/modules/12_evaluate/components/Detail/Tab1.vue"; // ชำนาญการ
+import Tab2 from "@/modules/12_evaluate/components/Detail/Tab2.vue"; // ชำนาญการพิเศษ
+
+import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
+const router = useRouter();
+const $q = useQuasar();
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายละเอียดการประเมินของ นาวสาววารุณี แต้มคู
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+      <div class="col-12 row">
+        <q-card bordered class="col-12 row caedNone">
+          <q-card class="col-12 items-center">
+            <q-tabs
+              v-model="store.tabMenu"
+              dense
+              align="left"
+              inline-label
+              class="rounded-borders"
+              indicator-color="primary"
+              active-bg-color="teal-1"
+              active-class="text-primary"
+            >
+              <q-tab name="1" label="ชำนาญการ" />
+              <q-tab name="2" label="ชำนาญการพิเศษ" />
+            </q-tabs>
+            <q-separator />
+            <q-tab-panels v-model="store.tabMenu" animated>
+              <q-tab-panel name="1"> <Tab1 /></q-tab-panel>
+
+              <q-tab-panel name="2"> <Tab2 /></q-tab-panel>
+            </q-tab-panels>
+          </q-card>
+        </q-card>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/12_Evaluate/MainPage.vue b/src/modules/12_Evaluate/views/MainPage.vue
similarity index 100%
rename from src/modules/12_Evaluate/MainPage.vue
rename to src/modules/12_Evaluate/views/MainPage.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index effe76e05..af85ba9a4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,6 +15,7 @@ import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
 import ModuleOrder from "@/modules/10_order/router";
 import ModuleLeave from "@/modules/09_leave/router";
 import ModuleDiscipline from "@/modules/11_discipline/router"
+import ModuleEvaluate from "@/modules/12_evaluate/router"
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -47,7 +48,8 @@ const router = createRouter({
         ...ModuleRegistryEmployee,
         ...ModuleOrder,
         ...ModuleLeave,
-        ...ModuleDiscipline
+        ...ModuleDiscipline,
+        ...ModuleEvaluate
       ],
     },
     /**