From 08e5d2b1e14c29992d88db51399b47d969bdb589 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 6 Feb 2024 16:33:56 +0700
Subject: [PATCH] =?UTF-8?q?UI=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=B9=80=E0=B8=8A=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A7=E0=B8=8A=E0=B8=B2=E0=B8=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/ExpertPage.vue     | 262 ++++++++++++++++++
 src/modules/06_evaluate/router.ts             |  11 +-
 .../06_evaluate/views/EvaluateMain.vue        |   8 +
 3 files changed, 280 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/06_evaluate/components/ExpertPage.vue

diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
new file mode 100644
index 0000000..076035b
--- /dev/null
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+
+const formData = reactive<any>({
+  subject: "",
+  author: "",
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+});
+
+const router = useRouter();
+
+const files = [
+{
+    id: "file1",
+    fileName: "แบบพิจารณาคุณสมบัติบุคคล",
+    pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    id: "file2",
+    fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    id: "file3",
+    fileName:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    pathName:
+      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+  },
+  {
+    id: "file4",
+    fileName: "แบบประเมินคุณลักษณะบุคคล",
+    pathName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    id: "file5",
+    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  },
+  {
+    id: "file6",
+    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
+];
+
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param name ชื้อไฟล์
+ */
+async function downloadFile(name: string) {
+  //   showLoader();
+  //   await http
+  //     .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
+  //     .then((res) => {
+  //       const link = res.data.downloadUrl;
+  //       const type = res.data.fileType;
+  //       const fileName = res.data.fileName;
+  //       getPDF(link, type, fileName);
+  //     })
+  //     .catch((e) => {})
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+}
+
+function onCilckSave() {
+  alert("save demo");
+}
+</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-pa-md q-col-gutter-y-md">
+          <div class="col-12">
+            <q-card bordered class="cardSp1 col-12">
+              <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
+                ผลงาน
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12 q-pa-sm">
+                <div class="row q-col-gutter-sm">
+                  <q-input
+                    ref="performanceRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อผลงาน"
+                    v-model="formData.subject"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                  <q-input
+                    ref="performanceOwnerRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formData.author"
+                    label="เจ้าของผลงาน"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <!-- เลือกผู้เซ็นเอกสาร -->
+          <div class="col-12">
+            <q-card bordered class="cardSp1 col-12">
+              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                เลือกผู้เซ็นเอกสาร
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12 q-pa-sm">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-12 row">
+                    <div class="text-weight-medium q-pt-xs q-pl-sm">
+                      ผู้บังคับบัญชาชั้นต้น
+                    </div>
+                    <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                      <q-input
+                        ref="commanderFullnameRef"
+                        dense
+                        class="col-xs-12 col-sm-6"
+                        outlined
+                        label="ชื่อ-นามสกุล"
+                        v-model="formData.commanderFullname"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                        ]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        ref="commanderPositionRef"
+                        class="col-xs-12 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formData.commanderPosition"
+                        label="ตำแหน่ง"
+                        :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="row q-col-gutter-sm col-12">
+                  <div class="col-xs-12 col-sm-12 row">
+                    <div class="text-weight-medium q-pl-sm q-pt-sm">
+                      ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                    </div>
+                    <div class="row col-12 q-col-gutter-md q-pa-sm">
+                      <q-input
+                        ref="commanderAboveFullnameRef"
+                        dense
+                        class="col-xs-12 col-sm-6"
+                        outlined
+                        v-model="formData.commanderAboveFullname"
+                        label="ชื่อ-นามสกุล"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                        ]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        ref="commanderAbovePositionRef"
+                        class="col-xs-12 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formData.commanderAbovePosition"
+                        label="ตำแหน่ง"
+                        :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="col-12">
+            <q-card bordered class="cardSp1 col-12">
+              <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
+                >
+                  <q-item clickable v-ripple>
+                    <q-item-section class="text-grey-9">{{
+                      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"
+                            @click="downloadFile(file.pathName)"
+                          >
+                            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                          </q-btn>
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+ 
+            </q-card>
+            <div class="q-pt-sm q-gutter-sm" align="right">
+              <q-btn
+                unelevated
+                label="บันทึกข้อมูล"
+                color="public"
+                @click="onCilckSave()"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/06_evaluate/router.ts b/src/modules/06_evaluate/router.ts
index f57a7f8..6a1d5d7 100644
--- a/src/modules/06_evaluate/router.ts
+++ b/src/modules/06_evaluate/router.ts
@@ -2,7 +2,7 @@ const evaluateMain = () =>
   import("@/modules/06_evaluate/views/EvaluateMain.vue");
 const evaluateStep = () =>
   import("@/modules/06_evaluate/components/EvaluateStepMain.vue");
-
+const expertPage = () => import('@/modules/06_evaluate/components/ExpertPage.vue')
 export default [
   {
     path: "/evaluate",
@@ -32,4 +32,13 @@ export default [
       Key: [7],
     },
   },
+  {
+    path: "/evaluate/expert",
+    name: "evaluate-expert",
+    component: expertPage,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
 ];
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 1c3bf2a..87b4b1e 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -48,6 +48,10 @@ function onclickAddEvaluate(data: ListMenu) {
   menu.value = data;
 }
 
+function openExpert(){
+router.push('/evaluate/expert')
+}
+
 /** ตัวแปร Paging*/
 const page = ref<number>(1);
 const pageSize = ref<number>(25);
@@ -192,6 +196,10 @@ watch(
                       <q-item-section>{{ item.label }}</q-item-section>
                       <q-tooltip>{{ item.label }}</q-tooltip>
                     </q-item>
+                    <q-item clickable v-close-popup @click.stop="openExpert">
+                      <q-item-section>ประเมินเชี่ยวชาญ</q-item-section>
+                      <q-tooltip>ประเมินเชี่ยวชาญ</q-tooltip>
+                    </q-item>
                   </q-list>
                 </q-menu>
                 <q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>