แบบประเมิน => เพิ่ม Dialog คำอธิบายผลสำเร็จของงาน

src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue

@@ -16,7 +16,6 @@ const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
-
 const {
   showLoader,
   hideLoader,

src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue

@@ -0,0 +1,111 @@
+divdiv
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+const dataAchievement = ref<any[]>([]);
+
+function fetchByid(id: string, type: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement(`${type}`) + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataAchievement.value = [
+        {
+          level: "5",
+          val: data.achievement5,
+        },
+        {
+          level: "4",
+          val: data.achievement4,
+        },
+        {
+          level: "3",
+          val: data.achievement3,
+        },
+        {
+          level: "2",
+          val: data.achievement2,
+        },
+        {
+          level: "1",
+          val: data.achievement1,
+        },
+      ];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function closeDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      const type =
+        numpage.value === 1
+          ? "planned"
+          : numpage.value === 2
+          ? "role"
+          : "special";
+      fetchByid(kpiUserPlannedId.value, type);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 45%">
+      <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-card bordered>
+          <div class="bg-grey-2 q-pa-sm">
+            <div
+              class="row text-dark text-body2 text-weight-medium text-weight-bold"
+            >
+              <div class="text-center col-6">ระดับคะแนน</div>
+              <div class="text-center col-6">ผลสำเร็จของงาน</div>
+            </div>
+          </div>
+          <q-separator />
+          <div v-for="(item, index) in dataAchievement" :key="item.id">
+            <div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-6 text-center text-body1">{{ item.level }}</div>
+              <div class="col-6 text-center self-center">
+                <span>{{ item.val }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -10,6 +10,7 @@ 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 DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
@@ -123,6 +124,7 @@ const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
+const modalViewInfo = ref<boolean>(false);
 
 function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
@@ -134,6 +136,11 @@ function onAdd(edit: boolean = false, id: string = "") {
   // }
 }
 
+function onClickView(id: string) {
+  kpiUserPlannedId.value = id;
+  modalViewInfo.value = true;
+}
+
 function onEvaluate() {
   modalEvaluate.value = true;
 }
@@ -249,6 +256,7 @@ watch(
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -263,6 +271,19 @@ watch(
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
+            <q-td>
+              <q-btn
+                flat
+                round
+                icon="info"
+                color="info"
+                size="12px"
+                dense
+                @click="onClickView(props.row.id)"
+              >
+                <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+              </q-btn></q-td
+            >
             <q-td v-for="col in props.cols" :key="col.id">
               <div v-if="col.name === 'point'">
                 <q-btn-group outline>
@@ -387,6 +408,13 @@ watch(
     :data="rows"
     :numpage="numpage"
   />
+
+  <DialogViewInfo
+    v-model:modal="modalViewInfo"
+    :numpage="numpage"
+    :isStatusEdit="isStatusEdit"
+    :kpiUserPlannedId="kpiUserPlannedId"
+  />
 </template>
 <style scoped>
 .custom-table2 {