แก้ พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)

src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,6 +9,16 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
+
+const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
+  required: true,
+});
+
+const sortedDataListCriteria = computed(() => {
+  return dataListCriteria.value.sort((a, b) => a.level - b.level);
+});
+
 const props = defineProps({
   getData: Function,
   default: () => console.log("not function"),
@@ -170,24 +180,16 @@ function onSubmit() {
                           :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
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="i.level"
+                            v-slot:[`tip-${index+1}`]
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
                           </template>
                         </q-rating>
                       </div>