hrms-mgt/src/modules/14_KPI/components/competency/04ListCriteria.vue

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";

const fieldLabels = {
  score5: "5",
  score4: "4",
  score3: "3",
  score2: "2",
  score1: "1",
};

const formScore = reactive<any>({
  score5: "",
  score4: "",
  score3: "",
  score2: "",
  score1: "",
});

interface FormScore {
  score5: string;
  score4: string;
  score3: string;
  score2: string;
  score1: string;
  [key:string]:any
}

function onSubmit() {
const array = ref<any>([])

  for (const key in formScore) {
    if (formScore.hasOwnProperty(key)) {
      if (key in formScore) {
        const scoreObj: Partial<FormScore> = {}; // กำหนด scoreObj ให้เป็น Partial<FormScore>
        scoreObj[key] = formScore[key];
        array.value.push(scoreObj)
      }
    }
  }
  const body = {
    formScore: array.value ,
  };
  console.log(body);
}
</script>

<template>
  <q-card flat bordered>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section class="bg-grey-3 q-pa-sm">
        <div class="row text-dark text-body2 text-weight-medium">
          <div class="text-center col-8">เกณฑ์การประเมิน</div>
          <div class="text-center col-4">ระดับคะแนน</div>
        </div>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <div
          v-for="(field, index) in Object.keys(fieldLabels)"
          :key="index + 1"
        >
          <div class="row q-pa-sm">
            <div class="col-8 text-left">
              <q-field
                class="q_field_p_none"
                ref="fieldRef"
                v-model="formScore[field]"
                label-slot
                borderless
                :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
                hide-bottom-space
              >
                <template #control>
                  <q-editor
                    class="full-width"
                    v-model="formScore[field]"
                    :dense="$q.screen.lt.md"
                    min-height="5rem"
                    :toolbar="[
                      [
                        'bold',
                        'italic',
                        'strike',
                        'underline',
                        'subscript',
                        'superscript',
                      ],

                      ['unordered', 'ordered'],
                    ]"
                    :fonts="{
                      arial: 'Arial',
                      arial_black: 'Arial Black',
                      comic_sans: 'Comic Sans MS',
                      courier_new: 'Courier New',
                      impact: 'Impact',
                      lucida_grande: 'Lucida Grande',
                      times_new_roman: 'Times New Roman',
                      verdana: 'Verdana',
                    }"
                  />
                </template>
              </q-field>
              <!-- <q-input
              v-model="formScore[field]"
              dense
              outlined
              class="inputgreen"
              label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
              :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
              hide-bottom-space
            /> -->
            </div>
            <div
              class="col-4 text-center text-body1 text-weight-bold self-center"
            >
              {{ fieldLabels[field as keyof typeof fieldLabels] }}
            </div>
          </div>
          <div
            class="col-12"
            v-if="index !== Object.keys(fieldLabels).length - 1"
          >
            <q-separator />
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="บันทึก" color="secondary" type="submit"
          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-form>
  </q-card>
</template>