แบบประเมิน => dialog ประเมิน

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

@@ -1,16 +1,28 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
 import type { QTableProps } from "quasar";
 
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const store = useKpiDataStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("data", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
 
 /** table*/
 const columns = ref<QTableProps["columns"]>([
@@ -90,18 +102,44 @@ const visibleColumns = ref<string[]>([
   "evaluationResults",
 ]);
 
-const answer3 = ref<number>(0);
-
 function closeDialog() {
   modal.value = false;
 }
+
+function updateAchievement(index: number, data: any) {
+  switch (data.point) {
+    case 1:
+      rows.value[index].achievement = data.achievement1;
+      break;
+    case 2:
+      rows.value[index].achievement = data.achievement2;
+      break;
+    case 3:
+      rows.value[index].achievement = data.achievement3;
+      break;
+    case 4:
+      rows.value[index].achievement = data.achievement4;
+      break;
+    case 5:
+      rows.value[index].achievement = data.achievement5;
+      break;
+  }
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+  console.log(rows.value);
+}
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
+
       <q-separator />
-      <q-card-section class="q-pt-none">
+      <q-card-section>
         <div class="col-12 q-pa-sm">
           <q-table
             ref="table"
@@ -122,7 +160,6 @@ function closeDialog() {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
@@ -136,24 +173,33 @@ function closeDialog() {
                       color="grey"
                       :color-selected="store.ratingColors"
                       label="ระดับการประเมินพฤติกรรม"
+                      @update:model-value="
+                        updateAchievement(props.rowIndex, props.row)
+                      "
                     >
                       <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
                       </template>
                     </q-rating>
                   </div>
+                  <div v-else-if="col.name === 'achievement'">
+                    {{ props.row.achievement }}
+                  </div>
+                  <div v-else-if="col.name === 'evaluationResults'">
+                    {{ (props.row.point / 5) * props.row.weight }}
+                  </div>
                   <div v-else>
                     {{ col.value ? col.value : "-" }}
                   </div>
@@ -163,6 +209,12 @@ function closeDialog() {
           </q-table>
         </div>
       </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" @click="onSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>