ผูก API ในส่วนของ KPI สมรรถนะ

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

@@ -1,12 +1,22 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
 
-import type { QTableProps } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from '@/app.config'
+import { useRoute } from "vue-router";
 
+import type { FormCapacityList } from '@/modules/08_KPI/interface/request/index'
+const route = useRoute()
+const id = ref<string>(route.params.id as string);
+const idCapacity = ref<string|null>(null)
+const dataCapacity = ref<any>()
+
+const $q = useQuasar()
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai,messageError,showLoader,hideLoader,dialogRemove,success } = mixin;
 
 const type = defineModel<string>("type", { required: true });
 const name = defineModel<any>("name", { required: true });
@@ -15,20 +25,20 @@ const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 
 const visibleColumns = ref<string[]>([
-  "capacity",
+  "name",
   "level",
-  "scoreLevel",
+  "point",
   "weight",
-  "evaluationResults",
+  "summary",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "capacity",
+    name: "name",
     align: "left",
     label: "รายการสมรรถนะ",
     sortable: true,
-    field: "capacity",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -46,11 +56,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "scoreLevel",
+    name: "point",
     align: "left",
     label: "ระดับคะแนนตามเกณฑ์การประเมิน",
     sortable: true,
-    field: "scoreLevel",
+    field: "point",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -68,11 +78,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "evaluationResults",
+    name: "summary",
     align: "left",
     label: "ผลการประเมิน",
     sortable: true,
-    field: "evaluationResults",
+    field: "summary",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -84,8 +94,49 @@ function onAdd() {
   modal.value = true;
 }
 
-const rows = ref<any>([]);
-function fetchList() {}
+const rows = ref<FormCapacityList[]>([]);
+
+
+function getData(){
+  showLoader()
+  http
+  .get(config.API.kpiUserCapacity+`?id=${id.value}&type=${type.value}`)
+  .then((res)=>{
+    
+    const data = res.data.result.data
+    rows.value = data
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    hideLoader()
+  })
+}
+
+function onEdit(data:FormCapacityList){
+  modal.value = true;
+  dataCapacity.value = data
+  idCapacity.value = data.id
+}
+
+function onDelete(id:string){
+  dialogRemove($q,()=>{
+    showLoader()
+    http
+    .delete(config.API.kpiUserCapacity+`/${id}`)
+    .then((res)=>{
+      success($q,'ลบข้อมูลสำเร็จ')
+      getData()
+    }).catch((e)=>{
+      messageError($q,e)
+    }).finally(()=>{
+      hideLoader()
+    })
+  })
+}
+
+onMounted(()=>{
+  getData()
+})
 </script>
 
 <template>
@@ -139,13 +190,33 @@ function fetchList() {}
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                icon="edit"
+                color="edit"
+                @click.stop.pervent="onEdit(props.row)"
+              >
+                <q-tooltip>แก้ไข </q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
       </q-table>
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" v-model:competency-type="type" />
+  <Dialog v-model:modal="modal" v-model:competency-type="type" v-model:id="idCapacity" :data-capacity="dataCapacity" :get-data-list="getData"/>
 </template>
 
 <style scoped>