From 1a234278f1c9243062409aa4dc859b77157010bf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 29 Apr 2024 09:55:15 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=20=3D=20?=
 =?UTF-8?q?>=20tab=20=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=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

---
 src/api/KPI/api.kpis.ts                       |  14 +-
 .../08_KPI/components/Tab/01_Assessment.vue   |   2 +-
 .../08_KPI/components/Tab/02_Evaluator.vue    | 158 +++++++++++++++++-
 src/modules/08_KPI/components/Tab/TabMain.vue |   6 +-
 4 files changed, 169 insertions(+), 11 deletions(-)

diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index 7786e09..f6245f7 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -7,8 +7,8 @@ const kpiPlan = `${env.API_URI}/kpi/plan`;
 const kpiRole = `${env.API_URI}/kpi/role`;
 const KpiCapacity = `${env.API_URI}/kpi/capacity`;
 const KpiFile = `${env.API_URI}/salary/file`;
-const KpiEvaluation = `${env.API_URI}/kpi/evaluation`;
-const Kpiorg = `${env.API_URI}/org/profile/commander`
+const KpiEvaluationInfo = `${env.API_URI}/kpi/evaluation`;
+const Kpiorg = `${env.API_URI}/org/profile/commander`;
 
 const KpiUser = `${env.API_URI}/kpi/user`;
 const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
@@ -24,12 +24,14 @@ export default {
   kpiAchievementPoint: (type: string) => `${kpiAchievement}/${type}/point`,
 
   /** ผลสัมฤทธิ์ของงาน*/
-
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
-
   kpiUserCapacity: `${KpiUser}/capacity`,
-  KpiEvaluation,
+  KpiEvaluationInfo,
   Kpiorg,
-  kpiEvaluationCheck:`${kpiEvaluation}/check`,
+  kpiEvaluationCheck: `${kpiEvaluation}/check`,
+
+  /**ประเมิน*/
+
+
 };
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index cd82371..cb05dd0 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -146,7 +146,7 @@ const resultWork = computed(() => {
 
 function getCriteria() {
   http
-    .get(config.API.KpiEvaluation)
+    .get(config.API.KpiEvaluationInfo)
     .then((res) => {
       const data = res.data.result.data;
       dataListCriteria.value = data;
diff --git a/src/modules/08_KPI/components/Tab/02_Evaluator.vue b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
index 6bee11c..f2968e9 100644
--- a/src/modules/08_KPI/components/Tab/02_Evaluator.vue
+++ b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
@@ -1,3 +1,159 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+import type { QTableProps } from "quasar";
+
+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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "ความคิดเห็น",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any[]>([]);
+const filterKeyword = ref<string>("");
+
+onMounted(() => {
+  console.log(props.type);
+});
+</script>
 <template>
-  <div class="q-pa-md">ผู้ประเมิน</div>
+  <div class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <q-btn 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">
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        dense
+        hide-pagination
+        class="custom-table"
+        :visible-columns="visibleColumns"
+        :rows-per-page-options="[20]"
+        no-data-label="ไม่มีข้อมูล"
+      >
+        <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">
+              <div>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.custom-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 4c7f5d0..7fffbd6 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -83,9 +83,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>