หน้ารายการประเมิน

src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 const props = defineProps({
   columns: {
-    type: Object,
+    type: Array as () => any[],
+    require: true,
+  },
+  row: {
+    type: Array as () => any[],
     require: true,
   },
 });
@@ -11,12 +15,14 @@ const props = defineProps({
   <d-table
     ref="table"
     :columns="props.columns"
+    :rows="props.row"
     row-key="name"
     flat
     bordered
     dense
     class="custom-header-table"
-    style="width: 580px"
+    style="width: 610px"
+    :rows-per-page-options="[10, 25, 50, 100]"
   >
     <!-- <template v-slot:header="props">
       <q-tr :props="props">

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 const store = useEvaluateDetailStore();
 
+const props = defineProps({
+  type: {
+    type: String,
+  },
+});
+
 const splitterModel = ref(14);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
@@ -24,11 +30,18 @@ function backPage() {
   }
 }
 
-watch(()=>store.log, () => {
-  if(store.log === 1){
-    numOfPages.value = store.numOfPagesStore;
-    pdfSrc.value = store.pdfSrcStore;
+watch(
+  () => store.log,
+  () => {
+    if (store.log === 1) {
+      numOfPages.value = store.numOfPagesStore;
+      pdfSrc.value = store.pdfSrcStore;
+    }
   }
+);
+onMounted(() => {
+  numOfPages.value = store.numOfPagesStore;
+  pdfSrc.value = store.pdfSrcStore;
 });
 </script>
 
@@ -36,10 +49,10 @@ watch(()=>store.log, () => {
   <q-splitter
     v-model="splitterModel"
     horizontal
-    style="
-      height: 50vh;
-      border: 1px solid rgb(210, 210, 210);
-      border-radius: 5px;
+    :style="
+      props.type !== 'popup'
+        ? 'height: 50vh; border: 1px solid rgb(210, 210, 210);border-radius: 5px;'
+        : 'border: 1px solid rgb(210, 210, 210);border-radius: 5px;'
     "
     before-class="overflow-hidden disable"
     separator-class="bg-white disabled"

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue

@@ -50,10 +50,8 @@ const formDetail = reactive({
 
 onMounted(() => {
   if (props.data) {
-    // formDetail.userId = props.data.id;
-    // formDetail.citizenId = props.data.citizenId;
     formDetail.prefix = props.data.prefix;
-    formDetail.fullName = `${props.data.firstName}  ${props.data.lastName}`;
+    formDetail.fullName = props.data.fullName;
     formDetail.position = props.data.position;
     formDetail.oc = props.data.oc;
     formDetail.salary = props.data.salary
@@ -64,10 +62,12 @@ onMounted(() => {
     formDetail.birthDate =
       props.data.birthDate && date2Thai(props.data.birthDate);
     formDetail.govAge = props.data.govAge;
-    formDetail.educations = props.data.educations;
+    formDetail.educations = props.data.education;
 
-    formDetail.certificates = props.data.certificates
-      ? props.data.certificates.map((e: CertificatesForm) => ({
+    console.log(props.data.certificate);
+
+    formDetail.certificates = props.data.certificate
+      ? props.data.certificate.map((e: CertificatesForm) => ({
           certificateNo: e.certificateNo,
           certificateType: e.certificateType,
           expireDate: date2Thai(e.expireDate),
@@ -75,6 +75,9 @@ onMounted(() => {
           issuer: e.issuer,
         }))
       : [];
+
+    console.log(formDetail.certificates);
+
     formDetail.salaries = props.data.salaries
       ? props.data.salaries.map((e: any) => ({
           amount: e.amount,
@@ -102,8 +105,8 @@ onMounted(() => {
         }))
       : [];
 
-    formDetail.trainings = props.data.trainings
-      ? props.data.trainings.map((e: any) => ({
+    formDetail.trainings = props.data.training
+      ? props.data.training.map((e: any) => ({
           dateOrder: date2Thai(e.dateOrder),
           department: e.department,
           duration: e.duration,
@@ -116,7 +119,7 @@ onMounted(() => {
           yearly: e.yearly,
         }))
       : [];
-    formDetail.assessments = props.data.assessments;
+    formDetail.assessments = props.data.assessment;
   }
 });
 </script>

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue

@@ -1,12 +1,38 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
 
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 const store = useEvaluateDetailStore();
+
+const modalPerview = ref<boolean>(false);
 </script>
 
 <template>
+  <div class="col-12 row">
+    <q-space />
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="download"
+      target="_blank"
+      :href="store.urlDownloadFile"
+    >
+      <q-tooltip>ดาวน์โหลด</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="mdi-fullscreen"
+      @click="modalPerview = true"
+      ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
+    >
+  </div>
+
   <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
     <q-tab-panel name="1">
       <ViewPDF />
@@ -29,6 +55,22 @@ const store = useEvaluateDetailStore();
       <ViewPDF />
     </q-tab-panel>
   </q-tab-panels>
+
+  <q-dialog v-model="modalPerview" full-width fullHeight>
+    <q-card>
+      <q-card-section>
+        <DialogHeader :close="() => (modalPerview = false)" />
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <ViewPDF :type="'popup'" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style>
+.q-tab-panel {
+  padding: 0px;
+}
+</style>

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue

@@ -1,17 +1,54 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
 
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 const store = useEvaluateDetailStore();
+
+const modalPerview = ref<boolean>(false);
 </script>
 
 <template>
-  <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
-    <q-tab-panel name="1">
-      <ViewPDF />
-    </q-tab-panel>
-  </q-tab-panels>
+  <div class="col-12 row">
+    <q-space />
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="download"
+      target="_blank"
+      :href="store.urlDownloadFile"
+    >
+      <q-tooltip>ดาวน์โหลด</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="mdi-fullscreen"
+      @click="modalPerview = true"
+      ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
+    >
+  </div>
+  <!-- <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
+    <q-tab-panel name="1"> -->
+  <ViewPDF />
+  <!-- </q-tab-panel>
+  </q-tab-panels> -->
+
+  <q-dialog v-model="modalPerview" full-width fullHeight>
+    <q-card>
+      <q-card-section>
+        <DialogHeader :close="() => (modalPerview = false)" />
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <ViewPDF :type="'popup'" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>