From 963448531f52be9783287555cd67fff56f306506 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 20 Dec 2023 14:00:56 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=84=E0=B8=B3=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/Tab1.vue                |  11 +-
 .../components/Detail/step/step4.vue          | 259 +++++++-
 .../components/Detail/step/step5.vue          | 188 +++++-
 .../components/Detail/step/step8.vue          | 599 +++++++++++++++++-
 .../components/Detail/step/step9.vue          |   5 +-
 5 files changed, 1018 insertions(+), 44 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index 9e0ade062..1b9e678f2 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -199,7 +199,7 @@ onMounted(() => {
               : 'col-xs-12 col-sm-5 row'
           "
         >
-          <q-card flat bordered class="col-12 q-pa-md">
+          <q-card flat bordered class="col-12 ">
             <q-card-section>
               <Step1 v-if="store.step === 1" />
               <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
@@ -225,14 +225,7 @@ onMounted(() => {
           ></q-card>
         </div>
       </div>
-      <div class="q-mt-md q-gutter-md" align="right">
-        <q-btn
-          unelevated
-          label="ดำเนินการต่อ"
-          color="public"
-          @click="onCilckNextStep"
-        />
-      </div>
+
     </div>
   </div>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index d5522c0cd..fca4bfd6c 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -1,22 +1,261 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+
+const mesasger = ref<string>("");
+const title = ref<string>("");
+const modalEvaluation = ref<boolean>(false);
+const fileEvaluationUpload = ref<any>();
 const status = ref<string>("WAIT_CHECK_DOC_V1");
+const files = [
+  {
+    id: "x1",
+    fileName: "แบบพิจารณาคุณสมบัติบุคคล",
+    pathName: "12",
+  },
+  {
+    id: "x2",
+    fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    pathName: "12",
+  },
+  {
+    id: "x3",
+    fileName:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
+    pathName: "12",
+  },
+  {
+    id: "x4",
+    fileName: "แบบประเมินคุณลักษณะบุคคล",
+    pathName: "12",
+  },
+  {
+    id: "x5",
+    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    pathName: "12",
+  },
+  {
+    id: "x6",
+    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    pathName: "12",
+  },
+];
+
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  // showLoader();
+  // const data = Object.assign(
+  //   { fullName: fullName.value },
+  //   tp === "EV1_005" || tp === "EV1_007"
+  //     ? { organizationName: "หน่วยงาน" }
+  //     : null,
+  //   tp === "EV1_007" ? { positionName: "ตำแหน่ง" } : null,
+  //   tp === "EV1_007" ? { positionLeaveName: "ระดับ" } : null
+  // );
+  // const body = {
+  //   template: tp,
+  //   reportName: templateName,
+  //   data: data,
+  // };
+  // await genReport(body, fileName);
+}
+
+/** ติดต่อผู้ขอประเมิน */
+function openPopUp() {
+  console.log("12");
+  modalEvaluation.value = true;
+}
+
+function downloadFile(name: string) {
+  console.log("11");
+}
+
+/** ส่งไปประกาศบนเว็บไซต์ */
+function onWebSite(){
+
+}
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 text-center">
-      <q-badge
-        v-if="status == 'WAIT_CHECK_DOC_V1'"
-        outline
-        color="orange-5"
-        label="รอตรวจสอบคุณสมบัติ"
-        class="q-pa-sm"
-        style="font-size: 16px"
-      />
+  <div class="row q-col-gutter-md">
+    <div class="col-12">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เอกสารเล่มที่ 1
+        </div>
+        <div class="col-12"><q-separator /></div>
+
+        <q-list
+          v-for="file in files"
+          :key="file.id"
+          class="full-width"
+          bordered
+          separator
+        >
+          <q-item clickable v-ripple>
+            <q-item-section>{{ file.fileName }}</q-item-section>
+            <q-item-section avatar>
+              <div class="row">
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadFile(file.pathName)"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12">
+      <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"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_008',
+                      'template-4',
+                      'แบบประเมินคุณลักษณะบุคคล'
+                    )
+                  "
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 col-sm-6 row">
+                <q-btn
+                  v-if="fileEvaluationUpload"
+                  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="fileEvaluationUpload"
+                  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-pl-none">
+                <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-12">
+      <div class="q-mt-xs q-gutter-md" align="right">
+        <q-btn label="ติดต่อผู้ขอประเมิน" color="info" @click="openPopUp" />
+        <q-btn
+          unelevated
+          label="ส่งไปประกาศบนเว็บไซต์"
+          color="public"
+          @click="onWebSite"
+        />
+      </div>
     </div>
   </div>
+
+
+
+
+
+  <q-dialog v-model="modalEvaluation" persistent>
+    <q-card style="min-width: 60vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          ติดต่อผู้ขอประเมิน
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalEvaluation = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <q-card-section class="q-pa-md bg-grey-1">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              v-model="title"
+              label="หัวข้อ"
+              outlined
+              dense
+              bg-color="white"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="mesasger"
+              label="ข้อความ"
+              type="textarea"
+              outlined
+              dense
+              bg-color="white"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <div class="row justify-end q-px-md q-py-sm items-center">
+        <q-btn
+          dense
+          color="public"
+          id="onSubmit"
+          class="q-px-md q-py-xs"
+          label="ส่งข้อความ"
+        >
+        </q-btn>
+
+      </div>
+
+
+
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
index 4caf80f55..8a197148c 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@@ -1,23 +1,187 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+const fileEvaluation5 = ref<any>();
 const status = ref<string>("ANNOUNCE_WEB");
 const website = ref<string>("https://bma-ehr.frappet.com/");
+
+const files = [
+  {
+    id: "x1",
+    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    pathName: "12",
+  },
+  {
+    id: "x2",
+    fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
+    pathName: "12",
+  },
+  {
+    id: "x3",
+    fileName: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    pathName: "12",
+  },
+];
+
+const listFile = [
+  {
+    id: "x1",
+    fileName: "เอกสาร 1",
+    pathName: "12",
+  },
+  {
+    id: "x2",
+    fileName: "เอกสาร 2",
+    pathName: "12",
+  },
+];
+
+function downloadFile(name: string) {
+  console.log("download");
+}
+
+function deleteFile(name: string) {
+  console.log("delete");
+}
+
+function save() {
+  console.log("save");
+}
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 text-center q-">
-      <q-badge
-        v-if="status == 'ANNOUNCE_WEB'"
-        outline
-        color="primary"
-        label="ประกาศบนเว็บไซต์"
-        class="q-pa-sm"
-        style="font-size: 16px"
-      />
-      <div>
-        <a :href="website" target="_blank">{{ website }}</a>
+  <div class="row q-gutter-sm">
+    <div class="col-12">
+      <q-banner inline-actions bordered class="bg-red-1 text-red border-red">
+        <q-icon name="mdi-information-outline" size="20px" />
+        ประกาศเมื่อวันที่ 20 พ.ค. 2566 ถึงวันที่ 20 ธ.ค. 2566
+      </q-banner>
+    </div>
+
+    <div class="col-12">
+      <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>
+
+        <q-list
+          v-for="file in files"
+          :key="file.id"
+          class="full-width"
+          bordered
+          separator
+        >
+          <q-item clickable v-ripple>
+            <q-item-section>{{ file.fileName }}</q-item-section>
+            <q-item-section avatar>
+              <div class="row">
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadFile(file.pathName)"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12">
+      <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 q-mb-xs">
+              <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"
+                  label="อัปโหลดไฟล์"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-1 self-center text-center q-pl-none">
+                <q-btn flat round dense color="primary" icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+            <div v-if="listFile.length > 0">
+              <q-list
+                v-for="file in listFile"
+                :key="file.id"
+                class="full-width"
+                bordered
+                separator
+              >
+                <q-item clickable v-ripple>
+                  <q-item-section>{{ file.fileName }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row">
+                      <div>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="blue"
+                          icon="mdi-download-outline"
+                          @click="downloadFile(file.pathName)"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="red"
+                          icon="mdi-trash-can-outline"
+                          @click="deleteFile(file.pathName)"
+                        >
+                          <q-tooltip>ลบไฟล์</q-tooltip>
+                        </q-btn>
+                      </div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+            <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+              </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div class="col-12">
+      <div class="q-mt-xs q-gutter-md" align="right">
+        <q-btn
+          unelevated
+          label="บันทึกแจ้งผลการประกาศคัดเลือก"
+          color="public"
+          @click="save"
+        />
       </div>
     </div>
   </div>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
index e2416f325..42fb52569 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@@ -1,22 +1,601 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+const modalConfirm = ref<boolean>(false);
+const modalView = ref<boolean>(false);
+const pdfSrc = ref<any>();
+
+const nameOfWork = ref<string>("");
+const nameOfOwner = ref<string>("");
+const position = ref<string>("");
 const status = ref<string>("WAIT_CHECK_DOC_V2");
+const fileEvaluation91 = ref<any>();
+const fileEvaluation92 = ref<any>();
+const fileEvaluation93 = ref<any>();
+const fileEvaluation94 = ref<any>();
+const fileEvaluation95 = ref<any>();
+const fileEvaluation96 = ref<any>();
+
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  // showLoader();
+  // const data = Object.assign(
+  //   { fullName: fullName.value },
+  //   tp === "EV1_005" || tp === "EV1_007"
+  //     ? { organizationName: "หน่วยงาน" }
+  //     : null,
+  //   tp === "EV1_007" ? { positionName: "ตำแหน่ง" } : null,
+  //   tp === "EV1_007" ? { positionLeaveName: "ระดับ" } : null
+  // );
+  // const body = {
+  //   template: tp,
+  //   reportName: templateName,
+  //   data: data,
+  // };
+  // await genReport(body, fileName);
+}
+
+function onClickViewPDF(file: any) {
+  pdfSrc.value = file.webkitRelativePath;
+  modalView.value = true;
+}
+
+function openConfirmEvalution() {
+  modalConfirm.value = true;
+}
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 text-center">
-      <q-badge
-        v-if="status == 'WAIT_CHECK_DOC_V2'"
-        outline
-        color="orange-5"
-        label="รอพิจารณาผลการประเมิน"
-        class="q-pa-sm"
-        style="font-size: 16px"
-      />
+  <div class="row q-col-gutter-sm">
+    <div class="col-12">
+      <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-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"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-6 row">
+                          <q-btn
+                            v-if="fileEvaluation91"
+                            class="col-12"
+                            outline
+                            icon="visibility"
+                            label="ดูไฟล์เอกสาร"
+                            color="primary"
+                            @click="onClickViewPDF(fileEvaluation91)"
+                          >
+                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-10 row">
+                          <q-file
+                            v-model="fileEvaluation91"
+                            class="col-12"
+                            outlined
+                            dense
+                            hide-bottom-space
+                            lazy-rules
+                            label="อัปโหลดไฟล์"
+                            accept=".pdf"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                          </q-file>
+                        </div>
+                        <div class="col-2 self-center text-center q-pl-none">
+                          <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">
+                    บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
+                  </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"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-6 row">
+                          <q-btn
+                            v-if="fileEvaluation92"
+                            class="col-12"
+                            outline
+                            icon="visibility"
+                            label="ดูไฟล์เอกสาร"
+                            color="primary"
+                            @click="onClickViewPDF(fileEvaluation92)"
+                          >
+                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-10 row">
+                          <q-file
+                            v-model="fileEvaluation92"
+                            class="col-12"
+                            outlined
+                            dense
+                            hide-bottom-space
+                            lazy-rules
+                            label="อัปโหลดไฟล์"
+                            accept=".pdf"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                          </q-file>
+                        </div>
+                        <div class="col-2 self-center text-center q-pl-none">
+                          <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">
+                    แบบประเมินผลงาน (เอกสารหมายเลข 16)
+                  </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"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-6 row">
+                          <q-btn
+                            v-if="fileEvaluation93"
+                            class="col-12"
+                            outline
+                            icon="visibility"
+                            label="ดูไฟล์เอกสาร"
+                            color="primary"
+                            @click="onClickViewPDF(fileEvaluation93)"
+                          >
+                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-10 row">
+                          <q-file
+                            v-model="fileEvaluation93"
+                            class="col-12"
+                            outlined
+                            dense
+                            hide-bottom-space
+                            lazy-rules
+                            label="อัปโหลดไฟล์"
+                            accept=".pdf"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                          </q-file>
+                        </div>
+                        <div class="col-2 self-center text-center q-pl-none">
+                          <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">
+                    แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
+                  </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"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-6 row">
+                          <q-btn
+                            v-if="fileEvaluation94"
+                            class="col-12"
+                            outline
+                            icon="visibility"
+                            label="ดูไฟล์เอกสาร"
+                            color="primary"
+                            @click="onClickViewPDF(fileEvaluation94)"
+                          >
+                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-10 row">
+                          <q-file
+                            v-model="fileEvaluation94"
+                            class="col-12"
+                            outlined
+                            dense
+                            hide-bottom-space
+                            lazy-rules
+                            label="อัปโหลดไฟล์"
+                            accept=".pdf"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                          </q-file>
+                        </div>
+                        <div class="col-2 self-center text-center q-pl-none">
+                          <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">
+                    แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
+                  </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"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-6 row">
+                          <q-btn
+                            v-if="fileEvaluation95"
+                            class="col-12"
+                            outline
+                            icon="visibility"
+                            label="ดูไฟล์เอกสาร"
+                            color="primary"
+                            @click="onClickViewPDF(fileEvaluation95)"
+                          >
+                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-10 row">
+                          <q-file
+                            v-model="fileEvaluation95"
+                            class="col-12"
+                            outlined
+                            dense
+                            hide-bottom-space
+                            lazy-rules
+                            label="อัปโหลดไฟล์"
+                            accept=".pdf"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                          </q-file>
+                        </div>
+                        <div class="col-2 self-center text-center q-pl-none">
+                          <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"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-6 row">
+                          <q-btn
+                            v-if="fileEvaluation96"
+                            class="col-12"
+                            outline
+                            icon="visibility"
+                            label="ดูไฟล์เอกสาร"
+                            color="primary"
+                            @click="onClickViewPDF(fileEvaluation96)"
+                          >
+                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div class="col-xs-12 col-sm-10 row">
+                          <q-file
+                            v-model="fileEvaluation96"
+                            class="col-12"
+                            outlined
+                            dense
+                            hide-bottom-space
+                            lazy-rules
+                            label="อัปโหลดไฟล์"
+                            accept=".pdf"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                          </q-file>
+                        </div>
+                        <div class="col-2 self-center text-center q-pl-none">
+                          <q-btn
+                            flat
+                            round
+                            dense
+                            color="primary"
+                            icon="mdi-upload"
+                            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div class="col-12">
+      <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-12 row">
+                <q-btn
+                  class="col-12"
+                  icon="download"
+                  label="ดาวน์โหลด"
+                  color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_005',
+                      'template-1',
+                      'แบบพิจารณาคุณสมบัติบุคคล'
+                    )
+                  "
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <div class="col-12">
+      <div class="q-mt-xs q-gutter-md" align="right">
+        <q-btn
+          unelevated
+          label="ยืนยันผลการพิจารณา"
+          color="public"
+          @click="openConfirmEvalution"
+        />
+      </div>
     </div>
   </div>
+
+  <q-dialog v-model="modalConfirm" persistent>
+    <q-card style="min-width: 60vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          ยืนยันผลการพิจารณา
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalConfirm = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <q-card-section class="q-pa-md bg-grey-1">
+        <div class="row q-col-gutter-sm">
+          <div class="col-4">
+            <q-input
+              v-model="nameOfWork"
+              label="ชื่อผลงาน"
+              outlined
+              dense
+              bg-color="white"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              v-model="nameOfOwner"
+              label="ชื่อเจ้าของผลงาน"
+              outlined
+              dense
+              bg-color="white"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              v-model="position"
+              label="ตำแหน่งที่ได้รับ"
+              outlined
+              dense
+              bg-color="white"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <div class="row justify-end q-px-md q-py-sm items-center">
+        <q-btn
+          dense
+          color="public"
+          id="onSubmit"
+          class="q-px-md q-py-xs"
+          label="ยืนยัน"
+        >
+        </q-btn>
+      </div>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue
index cb2c3f36b..9fe0b5281 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue
@@ -7,11 +7,10 @@ const status = ref<string>("DONE");
 <template>
   <div class="row">
     <div class="col-12 text-center">
-      <q-badge
-        v-if="status == 'DONE'"
+      <q-btn
         outline
         color="green"
-        label="เสร็จสิ้น"
+        label="คัดลอก URL"
         class="q-pa-sm"
         style="font-size: 16px"
       />