From 7e99b5fc4b8996cfe4cc701af2fb491911723f7c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 13 Dec 2023 15:24:59 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_assess/componenst/Stepper.vue  |  73 +++
 src/modules/06_assess/componenst/Tab1.vue     | 108 ++++
 src/modules/06_assess/componenst/Tab2.vue     | 108 ++++
 .../06_assess/componenst/step/step1.vue       |  56 ++
 .../06_assess/componenst/step/step2.vue       | 483 ++++++++++++++++++
 .../06_assess/componenst/step/step3.vue       |  80 +++
 .../06_assess/componenst/step/step4.vue       |   7 +
 .../06_assess/componenst/step/step5.vue       |   7 +
 .../06_assess/componenst/step/step6.vue       |   7 +
 .../06_assess/componenst/step/step7.vue       |   7 +
 .../06_assess/componenst/step/step8.vue       |   7 +
 .../06_assess/componenst/step/step9.vue       |   7 +
 .../06_assess/componenst/viewstep/viewPDF.vue | 180 +++++++
 .../componenst/viewstep/viewStep1.vue         |   9 +
 .../componenst/viewstep/viewStep3.vue         |  34 ++
 src/modules/06_assess/router.ts               |  13 +
 src/modules/06_assess/store.ts                |  28 +
 src/modules/06_assess/views/AssessMain.vue    |  65 +++
 src/router/index.ts                           |  96 ++--
 19 files changed, 1328 insertions(+), 47 deletions(-)
 create mode 100644 src/modules/06_assess/componenst/Stepper.vue
 create mode 100644 src/modules/06_assess/componenst/Tab1.vue
 create mode 100644 src/modules/06_assess/componenst/Tab2.vue
 create mode 100644 src/modules/06_assess/componenst/step/step1.vue
 create mode 100644 src/modules/06_assess/componenst/step/step2.vue
 create mode 100644 src/modules/06_assess/componenst/step/step3.vue
 create mode 100644 src/modules/06_assess/componenst/step/step4.vue
 create mode 100644 src/modules/06_assess/componenst/step/step5.vue
 create mode 100644 src/modules/06_assess/componenst/step/step6.vue
 create mode 100644 src/modules/06_assess/componenst/step/step7.vue
 create mode 100644 src/modules/06_assess/componenst/step/step8.vue
 create mode 100644 src/modules/06_assess/componenst/step/step9.vue
 create mode 100644 src/modules/06_assess/componenst/viewstep/viewPDF.vue
 create mode 100644 src/modules/06_assess/componenst/viewstep/viewStep1.vue
 create mode 100644 src/modules/06_assess/componenst/viewstep/viewStep3.vue
 create mode 100644 src/modules/06_assess/router.ts
 create mode 100644 src/modules/06_assess/store.ts
 create mode 100644 src/modules/06_assess/views/AssessMain.vue

diff --git a/src/modules/06_assess/componenst/Stepper.vue b/src/modules/06_assess/componenst/Stepper.vue
new file mode 100644
index 0000000..4b12080
--- /dev/null
+++ b/src/modules/06_assess/componenst/Stepper.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useAssessStore } from "@/modules/06_assess/store";
+
+const store = useAssessStore();
+</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/06_assess/componenst/Tab1.vue b/src/modules/06_assess/componenst/Tab1.vue
new file mode 100644
index 0000000..25b0570
--- /dev/null
+++ b/src/modules/06_assess/componenst/Tab1.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
+import Step1 from "@/modules/06_assess/componenst/step/step1.vue";
+import Step2 from "@/modules/06_assess/componenst/step/step2.vue";
+import Step3 from "@/modules/06_assess/componenst/step/step3.vue";
+import Step4 from "@/modules/06_assess/componenst/step/step4.vue";
+import Step5 from "@/modules/06_assess/componenst/step/step5.vue";
+import Step6 from "@/modules/06_assess/componenst/step/step6.vue";
+import Step7 from "@/modules/06_assess/componenst/step/step7.vue";
+import Step8 from "@/modules/06_assess/componenst/step/step8.vue";
+import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
+
+import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
+import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
+
+import { useAssessStore } from "@/modules/06_assess/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const store = useAssessStore();
+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--;
+    });
+}
+</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
+              ? '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 !== 2">
+          <q-card flat bordered class="col-12">
+            <q-card-section>
+              <ViewStep1 v-if="store.step === 1" />
+              <ViewStep3 v-if="store.step === 3" /> </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/06_assess/componenst/Tab2.vue b/src/modules/06_assess/componenst/Tab2.vue
new file mode 100644
index 0000000..f55aae3
--- /dev/null
+++ b/src/modules/06_assess/componenst/Tab2.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
+import Step1 from "@/modules/06_assess/componenst/step/step1.vue";
+import Step2 from "@/modules/06_assess/componenst/step/step2.vue";
+import Step3 from "@/modules/06_assess/componenst/step/step3.vue";
+import Step4 from "@/modules/06_assess/componenst/step/step4.vue";
+import Step5 from "@/modules/06_assess/componenst/step/step5.vue";
+import Step6 from "@/modules/06_assess/componenst/step/step6.vue";
+import Step7 from "@/modules/06_assess/componenst/step/step7.vue";
+import Step8 from "@/modules/06_assess/componenst/step/step8.vue";
+import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
+
+import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
+import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
+
+import { useAssessStore } from "@/modules/06_assess/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const store = useAssessStore();
+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--;
+    });
+}
+</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
+              ? '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 !== 2">
+          <q-card flat bordered class="col-12">
+            <q-card-section>
+              <ViewStep1 v-if="store.step === 1" />
+              <ViewStep3 v-if="store.step === 3" /> </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/06_assess/componenst/step/step1.vue b/src/modules/06_assess/componenst/step/step1.vue
new file mode 100644
index 0000000..f78b329
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step1.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const feature1 = ref<boolean>(false);
+const feature2 = ref<boolean>(false);
+const feature3 = ref<boolean>(false);
+const feature4 = ref<boolean>(false);
+const feature5 = ref<boolean>(false);
+</script>
+
+<template>
+  <q-list>
+    <q-item v-ripple>
+      <q-item-section avatar>
+        <q-checkbox keep-color color="primary" v-model="feature1" />
+      </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="feature2" />
+      </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="feature3" />
+      </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="feature4" />
+      </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="feature5" />
+      </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/06_assess/componenst/step/step2.vue b/src/modules/06_assess/componenst/step/step2.vue
new file mode 100644
index 0000000..3da70da
--- /dev/null
+++ b/src/modules/06_assess/componenst/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/06_assess/componenst/step/step3.vue b/src/modules/06_assess/componenst/step/step3.vue
new file mode 100644
index 0000000..35ba5b5
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step3.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useAssessStore } from "@/modules/06_assess/store";
+
+const store = useAssessStore();
+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/06_assess/componenst/step/step4.vue b/src/modules/06_assess/componenst/step/step4.vue
new file mode 100644
index 0000000..b721c10
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step4.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div><h1>4</h1></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/step/step5.vue b/src/modules/06_assess/componenst/step/step5.vue
new file mode 100644
index 0000000..565d958
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step5.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div><h1>5</h1></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/step/step6.vue b/src/modules/06_assess/componenst/step/step6.vue
new file mode 100644
index 0000000..600085f
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step6.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div><h1>6</h1></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/step/step7.vue b/src/modules/06_assess/componenst/step/step7.vue
new file mode 100644
index 0000000..7b879fa
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step7.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div><h1>7</h1></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/step/step8.vue b/src/modules/06_assess/componenst/step/step8.vue
new file mode 100644
index 0000000..5ff0b7b
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step8.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div><h1>8</h1></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/step/step9.vue b/src/modules/06_assess/componenst/step/step9.vue
new file mode 100644
index 0000000..c7632fc
--- /dev/null
+++ b/src/modules/06_assess/componenst/step/step9.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div><h1>9</h1></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/viewstep/viewPDF.vue b/src/modules/06_assess/componenst/viewstep/viewPDF.vue
new file mode 100644
index 0000000..81faa83
--- /dev/null
+++ b/src/modules/06_assess/componenst/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/06_assess/componenst/viewstep/viewStep1.vue b/src/modules/06_assess/componenst/viewstep/viewStep1.vue
new file mode 100644
index 0000000..dd5a948
--- /dev/null
+++ b/src/modules/06_assess/componenst/viewstep/viewStep1.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <h1>VIEW 1</h1>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_assess/componenst/viewstep/viewStep3.vue b/src/modules/06_assess/componenst/viewstep/viewStep3.vue
new file mode 100644
index 0000000..6ed9c92
--- /dev/null
+++ b/src/modules/06_assess/componenst/viewstep/viewStep3.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import ViewPDF from "@/modules/06_assess/componenst/viewstep/viewPDF.vue";
+
+import { useAssessStore } from "@/modules/06_assess/store";
+
+const store = useAssessStore();
+</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/06_assess/router.ts b/src/modules/06_assess/router.ts
new file mode 100644
index 0000000..3daea05
--- /dev/null
+++ b/src/modules/06_assess/router.ts
@@ -0,0 +1,13 @@
+const assessMain = () => import("@/modules/06_assess/views/AssessMain.vue");
+
+export default [
+  {
+    path: "/assess",
+    name: "assess",
+    component: assessMain,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
+];
diff --git a/src/modules/06_assess/store.ts b/src/modules/06_assess/store.ts
new file mode 100644
index 0000000..a96f9d9
--- /dev/null
+++ b/src/modules/06_assess/store.ts
@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useAssessStore = defineStore("asses", () => {
+  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,
+  };
+});
diff --git a/src/modules/06_assess/views/AssessMain.vue b/src/modules/06_assess/views/AssessMain.vue
new file mode 100644
index 0000000..c328aac
--- /dev/null
+++ b/src/modules/06_assess/views/AssessMain.vue
@@ -0,0 +1,65 @@
+<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/06_assess/componenst/Tab1.vue"; // ชำนาญการ
+import Tab2 from "@/modules/06_assess/componenst/Tab2.vue"; // ชำนาญการพิเศษ
+
+import { useAssessStore } from "@/modules/06_assess/store";
+
+const store = useAssessStore();
+const router = useRouter();
+const $q = useQuasar();
+</script>
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div>ประเมินผล</div>
+      </div>
+    </div>
+
+    <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>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 3d71f48..bf44f39 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,55 +1,57 @@
-import { createRouter, createWebHistory } from "vue-router"
+import { createRouter, createWebHistory } from "vue-router";
 
-const MainLayout = () => import("@/views/MainLayout.vue")
-const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue")
+const MainLayout = () => import("@/views/MainLayout.vue");
+const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue");
 
-import ModuleTransfer from "@/modules/02_transfer/router.ts"
-import ModuleRetire from "@/modules/03_retire/router"
-import ModuleCheckin from "@/modules/04_checkin/router.ts"
-import ModuleLeave from "@/modules/05_leave/router.ts"
+import ModuleTransfer from "@/modules/02_transfer/router";
+import ModuleRetire from "@/modules/03_retire/router";
+import ModuleCheckin from "@/modules/04_checkin/router";
+import ModuleLeave from "@/modules/05_leave/router";
+import ModuAssesss from "@/modules/06_assess/router";
 // TODO: ใช้หรือไม่?
-import keycloak from "@/plugins/keycloak"
+import keycloak from "@/plugins/keycloak";
 
 const router = createRouter({
-	history: createWebHistory(import.meta.env.BASE_URL),
-	routes: [
-		{
-			path: "/",
-			name: "home",
-			component: MainLayout,
-			children: [
-				{
-					path: "/",
-					name: "dashboard",
-					component: Dashboard,
-					meta: {
-						Auth: true,
-						Key: [7],
-					},
-				},
-				...ModuleTransfer,
-				...ModuleRetire,
-				...ModuleCheckin,
-				...ModuleLeave
-			],
-		},
-	],
-})
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: MainLayout,
+      children: [
+        {
+          path: "/",
+          name: "dashboard",
+          component: Dashboard,
+          meta: {
+            Auth: true,
+            Key: [7],
+          },
+        },
+        ...ModuleTransfer,
+        ...ModuleRetire,
+        ...ModuleCheckin,
+        ...ModuleLeave,
+        ...ModuAssesss,
+      ],
+    },
+  ],
+});
 
 router.beforeEach((to, from, next) => {
-	if (to.meta.Auth) {
-		if (!keycloak.authenticated) {
-			keycloak.login({
-				redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
-				locale: "th",
-			})
-		} else {
-			next()
-		}
-	} else {
-		next()
-	}
-	//   next();
-})
+  if (to.meta.Auth) {
+    if (!keycloak.authenticated) {
+      keycloak.login({
+        redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
+        locale: "th",
+      });
+    } else {
+      next();
+    }
+  } else {
+    next();
+  }
+  //   next();
+});
 
-export default router
+export default router;