แบบประเมิน => class rating

src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue

@@ -1,6 +1,211 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
+import type { QTableProps } from "quasar";
+
+const store = useKpiDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("data", { required: true });
+
+/** table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "includingName",
+    align: "left",
+    label: "ตัวชี้วัด",
+    sortable: true,
+    field: "includingName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "ค่าเป้าหมาย",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "achievement",
+    align: "left",
+    label: "ผลสำเร็จของงาน",
+    sortable: true,
+    field: "achievement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "includingName",
+  "target",
+  "point",
+  "weight",
+  "achievement",
+  "evaluationResults",
+]);
+
+const answer3 = ref<number>(0);
+
+function closeDialog() {
+  modal.value = false;
+}
+</script>
 <template>
-  <div></div>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="col-12 q-pa-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            hide-pagination
+            class="custom-table2"
+            :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-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">
+                  <div v-if="col.name === 'point'">
+                    <q-rating
+                      v-model="props.row.point"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.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>

src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue

@@ -5,10 +5,12 @@ import { useRoute } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import type { QTableProps } from "quasar";
+
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
 import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
+import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
 
-import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -30,12 +32,6 @@ const props = defineProps({
   fetchList: { type: Function, required: true },
 });
 
-const kpiUserPlannedId = ref<string>("");
-const filterKeyword = ref<string>("");
-const modal = ref<boolean>(false);
-const modalAssigned = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-
 const visibleColumns = ref<string[]>([
   "includingName",
   "target",
@@ -44,7 +40,6 @@ const visibleColumns = ref<string[]>([
   "achievement",
   "evaluationResults",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "includingName",
@@ -114,6 +109,13 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const kpiUserPlannedId = ref<string>("");
+const filterKeyword = ref<string>("");
+const modal = ref<boolean>(false);
+const modalAssigned = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const moalEvaluate = ref<boolean>(false);
+
 function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
   kpiUserPlannedId.value = id;
@@ -124,7 +126,9 @@ function onAdd(edit: boolean = false, id: string = "") {
   }
 }
 
-function onEvaluate() {}
+function onEvaluate() {
+  moalEvaluate.value = true;
+}
 
 function onDelete(id: string) {
   dialogRemove($q, async () => {
@@ -270,6 +274,8 @@ watch(
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
   />
+
+  <DialogEvaluate v-model:modal="moalEvaluate" v-model:data="rows" />
 </template>
 <style scoped>
 .custom-table2 {

src/modules/08_KPI/store.ts

@@ -170,6 +170,14 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+
   return {
     tabMain,
     dataProfile,
@@ -181,6 +189,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     checkCompetency,
     checkCompetencyDefaultCompetencyLevel,
     defaultCompetencyCoreLevel,
-    defaultCompetencyGroupLevel
+    defaultCompetencyGroupLevel,
+    ratingColors,
   };
 });