no message

src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue

@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -11,6 +12,7 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
+const dataListCapacityDetails = ref<ListCapacity[]>([]);
 const route = useRoute();
 const idParam = ref<string>(route.params.id as string);
 
@@ -78,10 +80,13 @@ const fieldLabels = {
 const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
 
 function clickList(index: string, data: any) {
-  showLoader()
-  setTimeout(()=>{
-    hideLoader()
-  },100)
+  const dataCapacityDetails = data.capacityDetails.sort(
+    (a: any, b: any) => a.level - b.level
+  );
+  showLoader();
+  setTimeout(() => {
+    hideLoader();
+  }, 100);
   formScore.score1 = "";
   formScore.score2 = "";
   formScore.score3 = "";
@@ -93,11 +98,12 @@ function clickList(index: string, data: any) {
   formDetail.type = data.type;
   formDetail.name = data.name;
   formDetail.definition = data.description;
-  formScore.score1 = data.capacityDetails[0].description;
-  formScore.score2 = data.capacityDetails[1].description;
-  formScore.score3 = data.capacityDetails[2].description;
-  formScore.score4 = data.capacityDetails[3].description;
-  formScore.score5 = data.capacityDetails[4].description;
+  dataListCapacityDetails.value = dataCapacityDetails;
+  // formScore.score1 = dataCapacityDetails[0].description;
+  // formScore.score2 = dataCapacityDetails[1].description;
+  // formScore.score3 = dataCapacityDetails[2].description;
+  // formScore.score4 = dataCapacityDetails[3].description;
+  // formScore.score5 = dataCapacityDetails[4].description;
 }
 
 /** ปิด dialog */
@@ -119,6 +125,8 @@ function closeDialog() {
   idProps.value = null;
   weight.value = null;
   expectedLevel.value = null;
+
+  dataListCapacityDetails.value = [];
 }
 
 /** เรียกใช้ class */
@@ -192,6 +200,11 @@ function getDataById() {
       const list = listTargetMain.value;
       const data = res.data.result;
       const target = list.find((item: any) => item.name == data.name);
+
+      const dataListCriteria = target.capacityDetails.sort(
+        (a: any, b: any) => a.level - b.level
+      );
+
       listCheck.value = data.name as string;
       formDetail.name = data.name;
 
@@ -202,11 +215,8 @@ function getDataById() {
       formDetail.type = target.type;
       formDetail.name = target.name;
       formDetail.definition = target.description;
-      formScore.score1 = target.capacityDetails[0].description;
-      formScore.score2 = target.capacityDetails[1].description;
-      formScore.score3 = target.capacityDetails[2].description;
-      formScore.score4 = target.capacityDetails[3].description;
-      formScore.score5 = target.capacityDetails[4].description;
+
+      dataListCapacityDetails.value = dataListCriteria;
     })
     .catch((e) => {})
     .finally(() => {});
@@ -406,33 +416,35 @@ watch(
                     </div>
                   </q-card>
                 </div>
-                <div class="col-7 row">
+                <div class="col-7">
                   <q-card bordered class="col-12 row no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
-                      <div class="col-4 text-center">ระดับสมรรถนะ</div>
+                      <div class="col-4 text-center">
+                        <span>ระดับสมรรถนะ</span>
+                      </div>
                       <div class="col-8 text-center">
-                        พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย
+                        <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
                       </div>
                     </div>
                     <div
-                      v-for="(field, index) in Object.keys(fieldLabels)"
-                      :key="index + 1"
-                      class="col-12"
+                      v-if="dataListCapacityDetails.length == 0"
+                      class="q-pa-md text-weight-bold "
                     >
-                      <div class="row col-12 q-py-sm">
-                        <div class="col-4 text-center text-body2">
-                          {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                      <span>ไม่พบข้อมูลสมรรถนะ</span>
+                    </div>
+                    <div
+                      v-for="(item, index) in dataListCapacityDetails"
+                      :key="item.id"
+                    >
+                      <div :class="`row q-pa-sm`">
+                        <div class="col-4 text-center self-start text-body1">
+                          <span>{{ item.level }}</span>
                         </div>
-                        <div class="col-8 text-left">
-                          <span v-html="formScore[field]"></span>
+                        <div class="col-8">
+                          <span v-html="item.description"></span>
                         </div>
                       </div>
-                      <div
-                        class="col-12"
-                        v-if="index !== Object.keys(fieldLabels).length - 1"
-                      >
-                        <q-separator />
-                      </div>
+                      <q-separator />
                     </div>
                   </q-card>
                 </div>

src/modules/08_KPI/interface/request/index.ts

@@ -41,5 +41,11 @@ interface ListCriteria {
   level: number;
   description: string;
 }
+interface ListCapacity {
+  id: string;
+  level: number;
+  description: string;
+  capacityId:string
+}
 
-export type { FormProfile, FormDataAssigned, FormCapacityList,ListCriteria };
+export type { FormProfile, FormDataAssigned, FormCapacityList,ListCriteria,ListCapacity };