From 11ced9f05ab70676cb6c5e23408e9e2b8d2c0733 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 22 Apr 2024 09:39:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=99=E0=B8=B9=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue |  10 +-
 src/modules/08_KPI/router.ts                 |  19 ++
 src/modules/08_KPI/views/main.vue            |   2 +-
 src/modules/08_KPI/views/mainEvaluator.vue   | 255 +++++++++++++++++++
 4 files changed, 284 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/08_KPI/views/mainEvaluator.vue

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 55082e4..600b514 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -83,12 +83,20 @@ const items = ref<any>([
   },
   {
     icon: "mdi-account-box-outline",
-    title: "KPI",
+    title: "ขอรับการประเมิน (KPI)",
     sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
     color: "red-2",
     path: "/KPI",
     active: false,
   },
+  {
+    icon: "mdi-elevator",
+    title: "ทำการประเมิน (KPI)",
+    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+    color: "red-2",
+    path: "/KPI-evaluator",
+    active: false,
+  },
   {
     icon: "mdi-school",
     title: "ทุนการศึกษา/ฝึกอบรม",
diff --git a/src/modules/08_KPI/router.ts b/src/modules/08_KPI/router.ts
index d180e69..e0cc5c1 100644
--- a/src/modules/08_KPI/router.ts
+++ b/src/modules/08_KPI/router.ts
@@ -4,6 +4,7 @@
 
 const KPIPage = () => import("@/modules/08_KPI/views/main.vue");
 const FormPage = () => import("@/modules/08_KPI/views/form.vue");
+const KPIMainEvaluator = () => import("@/modules/08_KPI/views/mainEvaluator.vue");
 
 export default [
   {
@@ -33,4 +34,22 @@ export default [
       Key: [8.2],
     },
   },
+  {
+    path: "/KPI-evaluator",
+    name: "KPIMainEvaluator",
+    component: KPIMainEvaluator,
+    meta: {
+      Auth: true,
+      Key: [8.3],
+    },
+  },
+  {
+    path: "/KPI-evaluator/:id",
+    name: "KPIEditEvaluator",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.4],
+    },
+  },
 ];
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 953c436..e92b50b 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -113,7 +113,7 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        รายการประเมินผลการปฏิบัติราชการระดับบุคคล
+        รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
new file mode 100644
index 0000000..8c5911d
--- /dev/null
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const router = useRouter();
+
+const filterKeyword = ref<string>("");
+
+const rows = ref<any>();
+
+const round = ref<string>("ID1");
+const roundOp = ref<DataOptions[]>([
+  {
+    id: "ID1",
+    name: "รอบเมษา",
+  },
+]);
+
+const visibleColumns = ref<string[]>(["name", "createDate", "status", "result"]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ผู้ขอรับการประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createDate",
+    align: "left",
+    label: "วันที่สร้างแบบประเมิน",
+    sortable: true,
+    field: "createDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการประเมิน",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "result",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** ดึงข้อมูล */
+function getData() {
+  const data = [
+    {
+      id: "ID1",
+      name: "สมศรี ใจดี",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+    {
+      id: "ID1",
+      name: "สมจิตร ใจดี",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onEdit(id:string){
+  router.push(`/KPI-evaluator/${id}`)
+}
+onMounted(async () => {
+  getData();
+});
+</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.push(`/`)"
+        />
+        รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <q-select
+              v-model="round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              style="min-width: 200px"
+              emit-value
+              map-options
+            />
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></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>
+
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+          >
+            <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-th auto-width />
+              </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" @click="onEdit(props.row.id)">
+                  <div v-if="col.name == 'createDate'">
+                  {{ col.value ? date2Thai(col.value):'-' }}
+                </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  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>