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

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import type { FormCompetency } from "@/modules/14_KPI/interface/request/Main";

const router = useRouter();

const formData = reactive<FormCompetency>({
  competencyType: "",
  competencyName: "",
  definition: "",
  level_1: ["", "", "", "", "", ""],
  level_2: "",
  level_3: "",
  level_4: "",
  level_5: "",
  evaluation: "",
});

const competencyTypeOp = ref<DataOption[]>([
  {
    id: "ID1",
    name: "สมรรถนะหลัก",
  },
  {
    id: "ID2",
    name: "สมรรถนะประจำกลุ่มงาน",
  },
  {
    id: "ID3",
    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
  },
  {
    id: "ID4",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
  },
  {
    id: "ID5",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
  },
]);

const itemsFormCard = ref<any>([
  {
    id: "",
    name: "",
  },
]);

function ocClickAdd() {
  if (itemsFormCard.value.length !== 6) {
    const data = {
      id: "",
      name: "",
    };
    itemsFormCard.value.push(data);
  }
}

/** บันทึก */
function onSubmit() {
  console.log(formData);
}
</script>

<template>
  <div>
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    <span class="toptitle text-dark">เพิ่มสมรรถนะ</span>
  </div>
  <q-card flat bordered>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-select
              v-model="formData.competencyType"
              outlined
              label="เลือกประเภทสมรรถนะ"
              dense
              option-label="name"
              option-value="id"
              :options="competencyTypeOp"
              emit-value
              map-options
              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="formData.competencyName"
              dense
              outlined
              label="ชื่อสมรรถนะ"
              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="formData.definition"
              label="คำจำกัดความ"
              dense
              type="textarea"
              outlined
              :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-12">
            <q-card flat bordered>
              <q-card-section class="bg-grey-4">
                <div
                  class="row items-center text-dark text-body2 text-weight-medium"
                >
                  <div class="col-3">
                    <div class="row items-center">
                      <div class="col-1">
                        <q-btn
                          dense
                          flat
                          round
                          color="primary"
                          icon="add"
                          @click="ocClickAdd"
                        >
                          <q-tooltip>เพิ่ม</q-tooltip></q-btn
                        >
                      </div>
                      <div class="col-11 text-center">
                        <span>ระดับสมรรถนะ</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
                  </div>
                </div>
              </q-card-section>
              <q-card-section>
                <div
                  class="row q-pa-sm"
                  v-for="(items, index) in itemsFormCard"
                  key="index"
                >
                  <div
                    class="col-3 text-center self-center text-body1 text-weight-medium"
                  >
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="col-9">
                    <!-- <q-input
                      v-model="formData.level_1"
                      label="คำอธิบาย"
                      dense
                      outlined
                    /> -->
                    <q-editor
                      v-model="formData.level_1[index]"
                      :dense="$q.screen.lt.md"
                      :toolbar="[
                        [
                          {
                            label: $q.lang.editor.align,
                            icon: $q.iconSet.editor.align,
                            fixedLabel: true,
                            list: 'only-icons',
                            options: ['left', 'center', 'right', 'justify'],
                          },
                          {
                            label: $q.lang.editor.align,
                            icon: $q.iconSet.editor.align,
                            fixedLabel: true,
                            options: ['left', 'center', 'right', 'justify'],
                          },
                        ],
                        [
                          'bold',
                          'italic',
                          'strike',
                          'underline',
                          'subscript',
                          'superscript',
                        ],
                        ['token', 'hr', 'link', 'custom_btn'],
                        ['print', 'fullscreen'],
                        [
                          {
                            label: $q.lang.editor.formatting,
                            icon: $q.iconSet.editor.formatting,
                            list: 'no-icons',
                            options: [
                              'p',
                              'h1',
                              'h2',
                              'h3',
                              'h4',
                              'h5',
                              'h6',
                              'code',
                            ],
                          },
                          {
                            label: $q.lang.editor.fontSize,
                            icon: $q.iconSet.editor.fontSize,
                            fixedLabel: true,
                            fixedIcon: true,
                            list: 'no-icons',
                            options: [
                              'size-1',
                              'size-2',
                              'size-3',
                              'size-4',
                              'size-5',
                              'size-6',
                              'size-7',
                            ],
                          },
                          {
                            label: $q.lang.editor.defaultFont,
                            icon: $q.iconSet.editor.font,
                            fixedIcon: true,
                            list: 'no-icons',
                            options: [
                              'default_font',
                              'arial',
                              'arial_black',
                              'comic_sans',
                              'courier_new',
                              'impact',
                              'lucida_grande',
                              'times_new_roman',
                              'verdana',
                            ],
                          },
                          'removeFormat',
                        ],
                        ['quote', 'unordered', 'ordered', 'outdent', 'indent'],

                        ['undo', 'redo'],
                        ['viewsource'],
                      ]"
                      :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',
                      }"
                    />
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>

          <div class="col-12">
            <q-input
              v-model="formData.definition"
              label="กำหนดเกณฑ์การประเมิน"
              dense
              type="textarea"
              outlined
              :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
              hide-bottom-space
            />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <div class="text-right q-pa-sm">
        <q-btn
          dense
          unelevated
          label="บันทึก"
          id="onSubmit"
          type="submit"
          color="public"
          class="q-px-md"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </div>
    </q-form>
  </q-card>
</template>