UI KPI

src/modules/08_KPI/views/TabMain.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useKpiDataStore } from '@/modules/08_KPI/store'
+
+import Assessment from '@/modules/08_KPI/components/Tab/01_Assessment.vue'
+import CommanderAbove from '@/modules/08_KPI/components/Tab/02_CommanderAbove.vue'
+import CommanderAboveOneStep from '@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue'
+import File from '@/modules/08_KPI/components/Tab/04_File.vue'
+
+const store = useKpiDataStore()
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    label: "ผู้ขอรับการประเมิน",
+  },
+  {
+    name: "2",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไป",
+  },
+  {
+    name: "3",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
+  },
+  {
+    name: "4",
+    label: "ไฟล์เอกสาร",
+  },
+]);
+
+const splitterModel = ref<number>(15);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs v-model="store.tabMain" vertical class="text-blue">
+        <q-tab
+          class="hover-tab"
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          :icon="tab.icon"
+          :label="tab.label"
+        />
+      </q-tabs>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+        class="q-px-md"
+      >
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+        >
+          <Assessment v-if="store.tabMain === '1'" />
+          <CommanderAbove v-if="store.tabMain === '2'" />
+          <CommanderAboveOneStep v-if="store.tabMain === '3'" />
+          <File v-if="store.tabMain === '4'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+  opacity: 1 !important;
+}
+</style>

src/modules/08_KPI/views/form.vue

@@ -1,7 +1,56 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { ref, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import TabMain from '@/modules/08_KPI/views/TabMain.vue'
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
+
+const route = useRoute()
+const id = route.params.id as string;
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+
+const formProfile = reactive<FormProfile>({
+  fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
+  prefix: "นางสาว",
+  firstName: "กัณฐิมา",
+  lastName: "กาฬสินธุ์",
+  position: "หัวหน้าสำนักงาน",
+  type: "บริหาร",
+  level: "ชำนาญการพิเศษ",
+  status: "จัดเตรียมข้อมูล",
+  score: "100",
+  avartar:
+    "https://edm-s3.frappet.synology.me/edm/%E0%B8%97%E0%B8%B0%E0%B9%80%E0%B8%9A%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A7%E0%B8%B1%E0%B8%95%E0%B8%B4/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C/1526d9d3-d8b1-43ab-81b5-a84dfbe99202/profile-1526d9d3-d8b1-43ab-81b5-a84dfbe99202?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b63sTDiLkQPT06cpirTh%2F20240405%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240405T100811Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a6b8cb6b4f1ffd4edff045ad9fd91bc9a7eb5e00c45c5283bd8bf8f8e1ff5bf0",
+});
 
 const router = useRouter();
+
+function getProfile() {
+  showLoader();
+  http
+    .get(config.API.profileBykeycloak())
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(() => {
+  getProfile();
+});
 </script>
 
 <template>
@@ -18,10 +67,87 @@ const router = useRouter();
           class="q-mr-sm"
           @click="router.push(`/KPI`)"
         />
-        เพิ่ม/แก้ไข
+        {{ id ? `แก้ไขแบบประเมิน`:`เพิ่มแบบประเมิน` }}
       </div>
       <div class="col-12">
-        <q-card bordered class="q-pa-md"> เพิ่ม/แก้ไข </q-card>
+        <q-card bordered flatclass="relative-position">
+          <div class="column">
+            <div class="row items-center">
+              <div class="offset-2 col-10">
+                <q-toolbar class="q-pl-none">
+                  <span class="text-h6 text-bold text-primary">{{
+                    formProfile.fullName ? formProfile.fullName : "-"
+                  }}</span>
+                  <q-space />
+                  <div class="q-gutter-x-sm">
+                    <q-btn
+                      unelevated
+                      round
+                      icon="mdi-file-eye-outline"
+                      color="grey-2"
+                      text-color="primary"
+                    >
+                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                    </q-btn>
+                    <q-btn unelevated round color="grey-2" text-color="blue-5">
+                      <q-icon name="mdi-briefcase-eye-outline" />
+                      <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                </q-toolbar>
+              </div>
+            </div>
+            <div
+              class="absolute"
+              style="left: 3%; top: 50%; transform: translateY(-50%)"
+            >
+              <q-avatar size="150px">
+                <img :src="formProfile.avartar" />
+              </q-avatar>
+            </div>
+
+            <div class="row items-center bg-teal-1">
+              <div class="offset-2 col-10">
+                <div class="row q-gutter-x-lg no-wrap text-weight-medium">
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                      <span class="text-weight-bold">{{ formProfile.position }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ประเภท</span>
+                      <span class="text-weight-bold">{{ formProfile.type }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ระดับชั้นงาน</span>
+                      <span class="text-weight-bold">{{ formProfile.level }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">สถานะการประเมิน</span>
+                      <span class="text-weight-bold">{{ formProfile.status }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">คะแนนประเมิน</span>
+                      <span class="text-weight-bold text-primary">{{ formProfile.score }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+
+        <q-card class="q-mt-md rounded">
+          <TabMain />
+        </q-card>
       </div>
     </div>
   </div>

src/modules/08_KPI/views/main.vue

@@ -1,7 +1,102 @@
 <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[]>(["createDate", "status", "result"]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    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",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+    {
+      id: "ID1",
+      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/${id}`)
+}
+onMounted(async () => {
+  getData();
+});
 </script>
 
 <template>
@@ -18,11 +113,133 @@ const router = useRouter();
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        KPI
+        รายการประเมินผลการปฏิบัติราชการระดับบุคคล
       </div>
       <div class="col-12">
-        <q-card bordered class="q-pa-md"> หน้าหลัก </q-card>
+        <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-btn flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
+              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+            </q-btn>
+            <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>