UI ประเมินผล

src/modules/06_assess/componenst/Tab1.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
@@ -15,6 +15,7 @@ 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 ViewStep7 from "@/modules/06_assess/componenst/viewstep/viewStep7.vue";
 
 import { useAssessStore } from "@/modules/06_assess/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -38,6 +39,10 @@ function onCilckprPeviousStep() {
       store.step--;
     });
 }
+
+onMounted(() => {
+  store.step = 1;
+});
 </script>
 
 <template>
@@ -54,7 +59,12 @@ function onCilckprPeviousStep() {
       <div class="row q-col-gutter-md col-12">
         <div
           :class="
-            store.step === 2
+            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'
           "
@@ -73,11 +83,15 @@ function onCilckprPeviousStep() {
             </q-card-section>
           </q-card>
         </div>
-        <div class="col-xs-12 col-sm-7 row" v-if="store.step !== 2">
+        <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" /> </q-card-section
+              <ViewStep3 v-if="store.step === 3" />
+              <ViewStep7 v-if="store.step === 7" /> </q-card-section
           ></q-card>
         </div>
       </div>

src/modules/06_assess/componenst/Tab2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
@@ -15,6 +15,7 @@ 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 ViewStep7 from "@/modules/06_assess/componenst/viewstep/viewStep7.vue";
 
 import { useAssessStore } from "@/modules/06_assess/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -38,6 +39,10 @@ function onCilckprPeviousStep() {
       store.step--;
     });
 }
+
+onMounted(() => {
+  store.step = 1;
+});
 </script>
 
 <template>
@@ -54,7 +59,12 @@ function onCilckprPeviousStep() {
       <div class="row q-col-gutter-md col-12">
         <div
           :class="
-            store.step === 2
+            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'
           "
@@ -73,11 +83,15 @@ function onCilckprPeviousStep() {
             </q-card-section>
           </q-card>
         </div>
-        <div class="col-xs-12 col-sm-7 row" v-if="store.step !== 2">
+        <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" /> </q-card-section
+              <ViewStep3 v-if="store.step === 3" />
+              <ViewStep7 v-if="store.step === 7" /> </q-card-section
           ></q-card>
         </div>
       </div>

src/modules/06_assess/componenst/step/step1.vue

@@ -1,53 +1,114 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { reactive } from "vue";
 
-const feature1 = ref<boolean>(false);
+const formData = reactive<any>({
-const feature2 = ref<boolean>(false);
+  isEducationalQft: false, // คุณวุฒิการศึกษา
-const feature3 = ref<boolean>(false);
+  isGovermantServiceHtr: false, // ประวัติการรับราชการ
-const feature4 = ref<boolean>(false);
+  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
-const feature5 = ref<boolean>(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="feature1" />
+        <q-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isEducationalQft"
+        />
       </q-item-section>
       <q-item-section>
-        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
+        <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-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isGovermantServiceHtr"
+        />
       </q-item-section>
       <q-item-section>
-        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
+        <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-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isOperatingExp"
+        />
       </q-item-section>
       <q-item-section>
-        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
+        <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-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isMinPeriodOfTenure"
+        />
       </q-item-section>
       <q-item-section>
-        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
+        <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-checkbox
+          keep-color
+          color="primary"
+          v-model="formData.isHaveSpecificQft"
+        />
       </q-item-section>
       <q-item-section>
-        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
+        <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>

src/modules/06_assess/componenst/step/step4.vue

@@ -1,7 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("WAIT_CHECK_DOC_V1");
+</script>
 
 <template>
-  <div><h1>4</h1></div>
+  <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>

src/modules/06_assess/componenst/step/step5.vue

@@ -1,7 +1,26 @@
-<script setup lang="ts"></script>
+<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><h1>5</h1></div>
+  <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>

src/modules/06_assess/componenst/step/step6.vue

@@ -1,7 +1,106 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import ViewPDF from "@/modules/06_assess/componenst/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><h1>6</h1></div>
+  <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>

src/modules/06_assess/componenst/step/step7.vue

@@ -1,7 +1,33 @@
-<script setup lang="ts"></script>
+<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>
-  <div><h1>7</h1></div>
+  <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>

src/modules/06_assess/componenst/step/step8.vue

@@ -1,7 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("WAIT_CHECK_DOC_V2");
+</script>
 
 <template>
-  <div><h1>8</h1></div>
+  <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>

src/modules/06_assess/componenst/step/step9.vue

@@ -1,7 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const status = ref<string>("DONE");
+</script>
 
 <template>
-  <div><h1>9</h1></div>
+  <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>

src/modules/06_assess/componenst/viewstep/viewStep1.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>
+  <div>ข้อมูลคุณสมบัติ</div>
-    <h1>VIEW 1</h1>
-  </div>
 </template>
 
 <style scoped></style>

src/modules/06_assess/componenst/viewstep/viewStep7.vue

@@ -0,0 +1,17 @@
+<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-panels>
+</template>
+
+<style scoped></style>

src/modules/06_assess/store.ts

@@ -3,7 +3,6 @@ import { ref } from "vue";
 
 export const useAssessStore = defineStore("asses", () => {
   const tabMenu = ref<string>("1");
-
   const step = ref<number>(1);
   const titel = ref<string[]>([
     "ตรวจสอบคุณสมบัติ",