From 7f5c887e297ace7a96c0451d81cd86ab3caef6cb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 29 Apr 2024 13:24:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20=3D>=20tab=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B7=E0=B9=88=E0=B8=99=E0=B9=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/14_KPI/api.KPI.ts                     |   2 +
 .../components/detailList/02_Evaluator.vue    | 283 +++++++++++++++++-
 .../14_KPI/components/detailList/05_File.vue  |  33 +-
 .../14_KPI/components/detailList/TabMain.vue  |   6 +-
 src/modules/14_KPI/interface/response/Main.ts |  16 +-
 5 files changed, 320 insertions(+), 20 deletions(-)

diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 5149ddd7c..7132bd98b 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -9,12 +9,14 @@ const kpiPlan = `${env.API_URI}/kpi/plan`;
 const kpiCapacity = `${env.API_URI}/kpi/capacity`;
 const kpiLink = `${env.API_URI}/kpi/link`;
 const KpiUser = `${env.API_URI}/kpi/user`;
+const KpiFile = `${env.API_URI}/salary/file`;
 export default {
   KPI,
   /** รอบการประเมินผล*/
   kpiPeriod,
   kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
   kpiEvaluation,
+  kpiFile: KpiFile,
 
   /** role */
   kpiRoleMainList: `${KPI}/role`,
diff --git a/src/modules/14_KPI/components/detailList/02_Evaluator.vue b/src/modules/14_KPI/components/detailList/02_Evaluator.vue
index 6bee11c56..9a00c9219 100644
--- a/src/modules/14_KPI/components/detailList/02_Evaluator.vue
+++ b/src/modules/14_KPI/components/detailList/02_Evaluator.vue
@@ -1,3 +1,284 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { QTableProps } from "quasar";
+// import type { FormComment } from "@/modules/08_KPI/interface/request/index";
+import type { ResEvaluator } from "@/modules/14_KPI/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();
+
+const evaluatorId = ref<string>(route.params.id.toString());
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
+
+const props = defineProps({
+  type: {
+    type: String,
+    require: true,
+  },
+});
+
+/** Table*/
+const visibleColumns = ref<string[]>(["topic", "reason"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อ",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px;",
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "ความคิดเห็น",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px;",
+  },
+]);
+const rows = ref<ResEvaluator[]>([]);
+const filterKeyword = ref<string>("");
+
+const modal = ref<boolean>(false);
+// const formComment = reactive<FormComment>({
+//   topic: "",
+//   reason: "",
+// });
+// const optionTopicMain = ref<string[]>([
+//   "เห็นชอบตัวชี้วัดผลสัมฤทธิ์ของงาน รายการสมรรถนะ และน้ำหนักคะแนนของผู้ใต้บังคับบัญชา",
+//   "ส่งกลับให้แก้ไข",
+//   "บันทึกคำปรึกษาแนะนำ",
+//   "บันทึกความเห็น",
+//   "เห็นด้วยกับผลการประเมิน",
+//   "บันทึกข้อเสนอแนะการพัฒนา",
+// ]);
+// const optionTopic = ref<string[]>(optionTopicMain.value);
+
+function fetchList() {
+  showLoader();
+  http
+    .get(config.API.kpiUserEvaluation + `/${props.type}/${evaluatorId.value}`)
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// function openDialog() {
+//   modal.value = true;
+// }
+
+// function closeDialog() {
+//   modal.value = false;
+//   formComment.topic = "";
+//   formComment.reason = "";
+// }
+
+// function createValue(val: string, done: Function) {
+//   if (val.length > 0) {
+//     if (!optionTopic.value.includes(val)) {
+//       optionTopic.value.push(val);
+//     }
+//     done(val);
+//   }
+// }
+
+// function filterFn(val: string, update: Function) {
+//   update(() => {
+//     optionTopic.value = optionTopicMain.value.filter(
+//       (v: string) => v.indexOf(val) > -1
+//     );
+//   });
+// }
+
+// function onSubmit() {
+//   dialogConfirm($q, () => {
+//     showLoader();
+//     http
+//       .put(
+//         config.API.kpiUserEvaluation + `/${props.type}/${evaluatorId.value}`,
+//         formComment
+//       )
+//       .then(() => {
+//         fetchList();
+//         closeDialog();
+//         success($q, "บันทึกข้อมูลสำเร็จ");
+//       })
+//       .catch((err) => {
+//         messageError($q, err);
+//       })
+//       .finally(() => {
+//         hideLoader();
+//       });
+//   });
+// }
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+onMounted(() => {
+  fetchList();
+});
+</script>
 <template>
-  <div class="q-pa-md">ผู้ประเมิน</div>
+  <div class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <q-btn v-if="isReadonly" flat round dense icon="add" color="blue-4">
+        <q-tooltip>เสนอความคิดเห็น</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-col-gutter-sm">
+        <q-input
+          outlined
+          dense
+          debounce="300"
+          v-model="filterKeyword"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+    <div class="col-12">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        dense
+        class="custom-table"
+        :visible-columns="visibleColumns"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        no-data-label="ไม่มีข้อมูล"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </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.id" style="width: 50%">
+              {{ col.value ? col.value : "-" }}
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ rows.length }} รายการ
+          <q-pagination
+            v-model="pagination.page"
+            active-color="primary"
+            color="dark"
+            :max="scope.pagesNumber"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </div>
+
+  <!-- <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader :tittle="'เสนอความคิดเห็น'" :close="closeDialog" />
+      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-12">
+              <q-select
+                class="inputgreen"
+                dense
+                outlined
+                v-model="formComment.topic"
+                use-input
+                input-debounce="0"
+                @new-value="createValue"
+                :options="optionTopic"
+                @filter="filterFn"
+                hide-bottom-space
+                lazy-rules
+                label="หัวข้อ"
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณาเลือกหัวข้อ'}`,
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formComment.reason"
+                class="inputgreen"
+                dense
+                outlined
+                type="textarea"
+                label="ควาดคิดเห็น"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณากรอกความคิดเห็น'}`,
+                ]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog> -->
 </template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/components/detailList/05_File.vue b/src/modules/14_KPI/components/detailList/05_File.vue
index cf76d7ddc..3136506a1 100644
--- a/src/modules/14_KPI/components/detailList/05_File.vue
+++ b/src/modules/14_KPI/components/detailList/05_File.vue
@@ -19,6 +19,7 @@ const {
   messageError,
   dialogRemove,
 } = useCounterMixin();
+
 interface ArrayFileList {
   id: string;
   pathName: string;
@@ -31,18 +32,20 @@ const documentFile = ref<any>(null);
 const fileList = ref<ArrayFileList[]>([]);
 
 async function getData() {
-  // showLoader();
-  // await http
-  //   .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`)
-  //   .then((res) => {
-  //     fileList.value = res.data;
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  console.log(config.API.kpiFile);
+
+  showLoader();
+  await http
+    .get(config.API.kpiFile + `/KPI/ไฟล์เอกสาร/${id.value}`)
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function uploadFileDoc(uploadUrl: string, file: any) {
@@ -69,7 +72,6 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
 }
 async function clickUpload(file: any) {
   // const fileName = { fileName: file.name };
-
   // dialogConfirm(
   //   $q,
   //   async () => {
@@ -106,7 +108,7 @@ async function clickUpload(file: any) {
 function downloadFile(fileName: string) {
   showLoader();
   http
-    .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+    .get(config.API.kpiFile + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
     .then((res) => {
       const data = res.data.downloadUrl;
       window.open(data, "_blank");
@@ -127,7 +129,7 @@ function deleteFile(fileName: string) {
   dialogRemove($q, async () => {
     showLoader();
     http
-      .delete(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+      .delete(config.API.kpiFile + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
 
       .then((res) => {
         success($q, `ลบไฟล์สำเร็จ`);
@@ -215,6 +217,7 @@ onMounted(() => {
                 >
 
                 <q-btn
+                  v-if="!isReadonly"
                   size="12px"
                   flat
                   round
diff --git a/src/modules/14_KPI/components/detailList/TabMain.vue b/src/modules/14_KPI/components/detailList/TabMain.vue
index feab75fde..9fa876e73 100644
--- a/src/modules/14_KPI/components/detailList/TabMain.vue
+++ b/src/modules/14_KPI/components/detailList/TabMain.vue
@@ -77,9 +77,9 @@ const splitterModel = ref<number>(12);
           class="q-pa-none"
         >
           <Assessment v-if="store.tabMain === '1'" />
-          <Evaluator v-if="store.tabMain === '2'" />
-          <CommanderAbove v-if="store.tabMain === '3'" />
-          <CommanderAboveOneStep v-if="store.tabMain === '4'" />
+          <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
+          <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
+          <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
           <File v-if="store.tabMain === '5'" />
         </q-tab-panel>
       </q-tab-panels>
diff --git a/src/modules/14_KPI/interface/response/Main.ts b/src/modules/14_KPI/interface/response/Main.ts
index 1fdf8ce0e..2d8cea4d2 100644
--- a/src/modules/14_KPI/interface/response/Main.ts
+++ b/src/modules/14_KPI/interface/response/Main.ts
@@ -26,4 +26,18 @@ interface capacityDetails {
   level: string;
 }
 
-export type { ResRound, ResDataCapacity };
+interface ResEvaluator {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  kpiUserEvaluationId: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  reason: string;
+  topic: string;
+  type: string;
+}
+
+export type { ResRound, ResDataCapacity, ResEvaluator };