แก้ไข display 1.ตรวจสอบคุณสมบัติ

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,8 +11,9 @@ import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 const route = useRoute();
+const $q = useQuasar();
 const mixins = useCounterMixin();
-const { showLoader, hideLoader, date2Thai } = mixins;
+const { showLoader, hideLoader, date2Thai, messageError } = mixins;
 
 // const evaluateId = ref<string>(route.params.id.toString());
 
@@ -75,6 +77,10 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const row = ref<any>();
 
+/**
+ * function เรียกข้อมูลประวัติการประเมิน
+ * @param id การประเมิน
+ */
 async function fetchListHistory(id: string) {
   const thaiOptions: Intl.DateTimeFormatOptions = {
     hour: "2-digit",
@@ -95,14 +101,16 @@ async function fetchListHistory(id: string) {
       }));
 
       row.value = list;
-      console.log(row.value);
     })
-    .catch((err) => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
 }
 
+/** callbaclFunction เรียกข้อมูลประวัติการประเมิน ทำงานเมื่อ props.modal === true*/
 watch(
   () => props.modal,
   () => {

src/modules/06_evaluate/components/viewstep/tableStep1.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     :rows="props.row"
     dense
     :rows-per-page-options="[10, 25, 50, 100]"
-    style="width: 610px"
+    virtual-scroll
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -30,18 +30,6 @@ const props = defineProps({
         </q-th>
       </q-tr>
     </template>
-    <!-- <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{ props.rowIndex + 1 }}
-          </div>
-          <div>
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template> -->
   </q-table>
 </template>
 
@@ -61,7 +49,6 @@ const props = defineProps({
 
   .q-table thead tr th {
     position: sticky;
-    z-index: 1;
   }
   /* this will be the loading indicator */
   .q-table thead tr:last-child th {

src/modules/06_evaluate/components/viewstep/viewPDF.vue

@@ -2,12 +2,6 @@
 import { ref, onMounted, watch } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
-
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
 const props = defineProps({
   pdfSrc: {
     type: String,
@@ -19,6 +13,7 @@ const props = defineProps({
 
 const loadPDF = ref<boolean>(false);
 
+/** function loadfile PDF*/
 async function loadpdfData() {
   loadPDF.value = false;
   const pdfData = await usePDF(`${props.pdfSrc}`);
@@ -37,6 +32,8 @@ watch(
     await loadpdfData();
   }
 );
+
+/** lifecycleHook*/
 onMounted(async () => {
   await loadpdfData();
 });

src/modules/06_evaluate/components/viewstep/viewStep1.vue

@@ -5,16 +5,20 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importType*/
 import type {
   EducationForm,
   CertificatesForm,
 } from "@/modules/06_evaluate/interface/evalute";
 
+/** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
 
+/** use*/
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 const $q = useQuasar();
@@ -55,6 +59,7 @@ const formDetail = reactive({
   assessments: [],
 });
 
+/** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
   showLoader();
   await http
@@ -73,7 +78,6 @@ async function fetchDetail() {
       formDetail.birthDate = data.birthDate && date2Thai(data.birthDate);
       formDetail.govAge = data.govAge;
       formDetail.educations = data.educations;
-
       formDetail.certificates = data.certificates.map(
         (e: CertificatesForm) => ({
           certificateNo: e.certificateNo,
@@ -194,6 +198,10 @@ async function fetchCheckSpec(data: any) {
   formDetail.assessments = data.assessments;
 }
 
+/**
+ * function convertตัวเลข
+ * @param x
+ */
 function formattedNumber(x: number) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
@@ -205,38 +213,153 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-scroll-area style="height: 450px; max=width: 100%">
-    <div class="q-pa-xs">
-      <q-card class="q-gutter-md" style="max-width: 100%">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
-          </div>
-          <q-separator />
+  <q-scroll-area style="height: 500px">
+    <q-card class="q-gutter-md" style="width: 690px;">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+        </div>
+        <q-separator />
 
-          <div class="row q-pa-sm">
+        <div class="row q-pa-sm">
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.prefix"
+              label="คำนำหน้าชื่อ"
+            ></q-input>
+          </div>
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.fullName"
+              label="ชื่อ - นามสกุล"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              :model-value="formDetail.birthDate"
+              readonly
+              label="วันเดือนปีเกิด"
+            >
+              <template v-slot:prepend>
+                <q-icon class="size-icon" name="o_calendar_today" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.position"
+              label="ตำแหน่ง"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.posNo"
+              label="ตำแหน่งเลขที่"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.oc"
+              label="สังกัด"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.salary"
+              label="เงินเดือน"
+            />
+          </div>
+
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.positionLevel"
+              label="ระดับปัจจุบัน"
+            />
+          </div>
+
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.positionLevel"
+              label="ระดับที่ประเมิน"
+            />
+          </div>
+
+          <div class="col-xs-6 col-sm-4 col-md-3">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.govAge"
+              label="อายุราชการ"
+            />
+          </div>
+        </div>
+      </q-card>
+
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
+        </div>
+        <q-separator />
+        <div v-if="formDetail.educations && formDetail.educations.length > 0">
+          <div
+            class="row q-pa-sm"
+            v-for="(education, index) in formDetail.educations"
+            :key="index"
+          >
             <div class="col-xs-6 col-sm-4 col-md-3">
               <q-input
                 borderless
                 readonly
-                :model-value="formDetail.prefix"
-                label="คำนำหน้าชื่อ"
-              ></q-input>
-            </div>
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="formDetail.fullName"
-                label="ชื่อ - นามสกุล"
+                :model-value="education.educationLevel"
+                label="ระดับศึกษา"
               />
             </div>
+
             <div class="col-xs-6 col-sm-4 col-md-3">
               <q-input
                 borderless
-                :model-value="formDetail.birthDate"
                 readonly
-                label="วันเดือนปีเกิด"
+                :model-value="education.institute"
+                label="สถานศึกษา"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.startDate)"
+                readonly
+                label="ตั้งแต่"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="size-icon" name="o_calendar_today" />
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.endDate)"
+                readonly
+                label="ถึง"
               >
                 <template v-slot:prepend>
                   <q-icon class="size-icon" name="o_calendar_today" />
@@ -246,33 +369,22 @@ onMounted(async () => {
             <div class="col-xs-6 col-sm-4 col-md-3">
               <q-input
                 borderless
+                :model-value="date2Thai(education.finishDate)"
                 readonly
-                :model-value="formDetail.position"
-                label="ตำแหน่ง"
-              />
+                label="วันที่สำเร็จการศึกษา"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="size-icon" name="o_calendar_today" />
+                </template>
+              </q-input>
             </div>
+
             <div class="col-xs-6 col-sm-4 col-md-3">
               <q-input
                 borderless
                 readonly
-                :model-value="formDetail.posNo"
-                label="ตำแหน่งเลขที่"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="formDetail.oc"
-                label="สังกัด"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="formDetail.salary"
-                label="เงินเดือน"
+                :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
+                label="วุฒิการศึกษาในตําแหน่ง"
               />
             </div>
 
@@ -280,8 +392,8 @@ onMounted(async () => {
               <q-input
                 borderless
                 readonly
-                :model-value="formDetail.positionLevel"
-                label="ระดับปัจจุบัน"
+                :model-value="education.degree"
+                label="วุฒิการศึกษา"
               />
             </div>
 
@@ -289,8 +401,16 @@ onMounted(async () => {
               <q-input
                 borderless
                 readonly
-                :model-value="formDetail.positionLevel"
-                label="ระดับที่ประเมิน"
+                :model-value="education.field"
+                label="สาขาวิชา/ทาง"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.fundName"
+                label="ทุน"
               />
             </div>
 
@@ -298,211 +418,86 @@ onMounted(async () => {
               <q-input
                 borderless
                 readonly
-                :model-value="formDetail.govAge"
-                label="อายุราชการ"
+                :model-value="education.gpa"
+                label="เกรดเฉลี่ย"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-6">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.country"
+                label="ประเทศ"
               />
             </div>
           </div>
-        </q-card>
-
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
-          </div>
-          <q-separator />
-          <div v-if="formDetail.educations && formDetail.educations.length > 0">
-            <div
-              class="row q-pa-sm"
-              v-for="(education, index) in formDetail.educations"
-              :key="index"
-            >
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.educationLevel"
-                  label="ระดับศึกษา"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.institute"
-                  label="สถานศึกษา"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.startDate)"
-                  readonly
-                  label="ตั้งแต่"
-                >
-                  <template v-slot:prepend>
-                    <q-icon class="size-icon" name="o_calendar_today" />
-                  </template>
-                </q-input>
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.endDate)"
-                  readonly
-                  label="ถึง"
-                >
-                  <template v-slot:prepend>
-                    <q-icon class="size-icon" name="o_calendar_today" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.finishDate)"
-                  readonly
-                  label="วันที่สำเร็จการศึกษา"
-                >
-                  <template v-slot:prepend>
-                    <q-icon class="size-icon" name="o_calendar_today" />
-                  </template>
-                </q-input>
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
-                  label="วุฒิการศึกษาในตําแหน่ง"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.degree"
-                  label="วุฒิการศึกษา"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.field"
-                  label="สาขาวิชา/ทาง"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.fundName"
-                  label="ทุน"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.gpa"
-                  label="เกรดเฉลี่ย"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-6">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.country"
-                  label="ประเทศ"
-                />
-              </div>
-            </div>
-          </div>
-          <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
-          <q-separator />
-        </q-card>
-
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
-          </div>
-          <q-separator />
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <TableData
-                :columns="columnsCertificates"
-                :row="formDetail.certificates"
-              />
-            </div>
-          </div>
-        </q-card>
-
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
-          </div>
-          <q-separator />
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <TableData :columns="columnSalaries" :row="formDetail.salaries" />
-            </div>
-          </div>
-        </q-card>
-
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
-          </div>
-          <q-separator />
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <TableData
-                :columns="columnTraining"
-                :row="formDetail.trainings"
-              />
-            </div>
-          </div>
-        </q-card>
-
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
-          </div>
-          <q-separator />
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              -
-              <!-- <TableData
-                :columns="columnTraining"
-                :row="formDetail.Trainings"
-              /> -->
-            </div>
-          </div>
-        </q-card>
-
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm"
-              >ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span
-            >
-          </div>
-          <q-separator />
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <TableData :columns="columnProjectsProposed" />
-            </div>
-          </div>
-        </q-card>
+        </div>
+        <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
+        <q-separator />
       </q-card>
-    </div>
+
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
+        </div>
+        <q-separator />
+        <div class="row q-pa-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <TableData
+              :columns="columnsCertificates"
+              :row="formDetail.certificates"
+            />
+          </div>
+        </div>
+      </q-card>
+
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
+        </div>
+        <q-separator />
+        <div class="row q-pa-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <TableData :columns="columnSalaries" :row="formDetail.salaries" />
+          </div>
+        </div>
+      </q-card>
+
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
+        </div>
+        <q-separator />
+        <div class="row q-pa-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <TableData :columns="columnTraining" :row="formDetail.trainings" />
+          </div>
+        </div>
+      </q-card>
+
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
+        </div>
+        <q-separator />
+        <div class="row q-pa-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">-</div>
+        </div>
+      </q-card>
+
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-bold row items-center bg-grey-2">
+          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
+        </div>
+        <q-separator />
+        <div class="row q-pa-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <TableData :columns="columnProjectsProposed" />
+          </div>
+        </div>
+      </q-card>
+    </q-card>
   </q-scroll-area>
 </template>