ui ฟอร์มบันทึกหลักเกณฑ์

src/modules/14_KPI/components/competency/04ListCriteria.vue

@@ -1,5 +1,135 @@
-<script setup lang="ts"></script>
+<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>
-  <div>หลักเกณฑ์</div>
+  <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>