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 FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";

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

const router = useRouter();
const store = useKPIDataStore();

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>
    <!-- @submit.prevent @validation-success="onSubmit" -->
    <!-- <q-form greedy> -->
    <q-card-section>
      <div class="row q-col-gutter-sm">
        <div class="col-12">
          <q-select
            v-model="store.competencyType"
            outlined
            label="เลือกประเภทสมรรถนะ"
            dense
            option-label="name"
            option-value="id"
            :options="competencyTypeOp"
            emit-value
            map-options
            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
            hide-bottom-space
          />
        </div>

        <FormMain v-if="store.competencyType === 'ID1'" />
        <FormGroup v-else-if="store.competencyType === 'ID2'" />
        <FormExecutive v-else-if="store.competencyType === 'ID3'" />
        <FormExecutivePosition v-else-if="store.competencyType === 'ID4'" />
        <FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" />

        <!-- <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-editor
                      v-model="formData.level_1[index]"
                      :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',
                      }"
                    />
                  </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>
    <!-- <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>