KPI + UI สรุปผล

src/modules/08_KPI/components/Tab/Topic/02_Competency.vue

@@ -16,7 +16,15 @@ import type {
   FormCapacityList,
   ListCriteria,
 } from "@/modules/08_KPI/interface/request/index";
+import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
+import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
+import DialogLevel from "@/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue";
 
+const modalLevel = ref<boolean>(false)
+const modalCompetncyByRow = ref<boolean>(false);
+const dataCompetncyByRow = ref<any[]>([]);
+const dataLevel = ref<any[]>([]);
+const modalCriteria = ref<boolean>(false);
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
 });
@@ -127,7 +135,6 @@ function getData(type: string) {
     .then(async (res) => {
       const data = res.data.result.data;
       rows.value[type] = data;
-      console.log("🚀 ~ .then ~ rows.value[type]:", rows.value[type])
       lists.value = await lists.value.filter((x: any) => x.type != type);
       lists.value.push({ type: type, data });
     })
@@ -257,8 +264,18 @@ watch(
   }
 );
 
-function onInfo(){
+function onInfo() {
+  modalCriteria.value = true;
+}
 
+function onAchievement(data: any) {
+  modalCompetncyByRow.value = true;
+  dataCompetncyByRow.value = data;
+}
+
+function onLevel(num:number,list:any){
+  dataLevel.value = list.filter((i:any)=> i.level == num)
+  modalLevel.value = true
 }
 
 onMounted(() => {
@@ -277,7 +294,7 @@ onMounted(() => {
           <div class="col">
             <span class="text-weight-medium">{{ item.name }}</span>
             <q-btn
-              v-if="isEditStep1"
+              v-if="!isEditStep1"
               class="q-ml-xs"
               flat
               round
@@ -324,7 +341,19 @@ onMounted(() => {
             <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>
+                <span v-if="col.name == 'point'" class="text-weight-medium">
+                  <q-btn
+                    flat
+                    icon="mdi-eye"
+                    color="info"
+                    round
+                    class="q-ml-xs"
+                    @click="onInfo"
+                  >
+                    <q-tooltip>เกณฑ์การประเมิน</q-tooltip> </q-btn
+                  >{{ col.label }}</span
+                >
+                <span v-else class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th auto-width />
             </q-tr>
@@ -338,7 +367,7 @@ onMounted(() => {
                   color="info"
                   round
                   class="q-ml-xs"
-                  @click="onInfo"
+                  @click="onAchievement(props.row.achievement)"
                 >
                   <q-tooltip>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</q-tooltip>
                 </q-btn>
@@ -374,6 +403,9 @@ onMounted(() => {
                       : "-"
                   }}
                 </div>
+                <div v-else-if="col.name == 'level'">
+                  <div @click="onLevel(props.row.level,props.row.achievement)" class="text-teal">{{ props.row.level }}</div>
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -388,25 +420,13 @@ onMounted(() => {
                   <q-btn
                     flat
                     round
-                    icon="mdi-developer-board"
+                    icon="mdi-account-details"
                     color="blue-6"
                     size="12px"
                     dense
                     @click="openPopupProgress(props.row.id)"
                   >
-                    <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    flat
-                    round
-                    icon="warning"
-                    color="red-5"
-                    size="12px"
-                    dense
-                    main="problem"
-                    @click="openPopupProblem(props.row.id)"
-                  >
-                    <q-tooltip>รายงานปัญหา</q-tooltip>
+                    <q-tooltip>บันทึกเหตุการณ์/พฤติกรรม</q-tooltip>
                   </q-btn>
                 </div>
 
@@ -561,6 +581,21 @@ onMounted(() => {
     v-model:type="type"
     :idList="idList"
   />
+
+  <DialogListCriteria
+    v-model:modal="modalCriteria"
+    v-model:dataListCriteria="dataListCriteria"
+  />
+
+  <DialogCompetncyByRow
+    v-model:modal="modalCompetncyByRow"
+    v-model:rows="dataCompetncyByRow"
+  />
+
+  <DialogLevel
+    v-model:modal="modalLevel"
+    v-model:rows="dataLevel"
+  />
 </template>
 
 <style scoped>