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: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
  },
]);

/** บันทึก */
function onSubmit() {}
</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-item-section class="bg-grey-4">
                <div
                  class="row items-center text-dark text-body2 text-weight-medium"
                >
                  <div class="col-3 text-center">
                    <span>ระดับสมรรถนะ</span>
                  </div>
                  <div class="col-9">
                    <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
                  </div>
                </div>
              </q-item-section>
              <q-separator />
              <q-item-section>
                <div class="row q-pa-sm">
                  <div
                    class="col-3 text-center self-center text-body1 text-weight-medium"
                  >
                    <span>1</span>
                  </div>
                  <div class="col-9">
                    <q-input
                      v-model="formData.level_1"
                      label="คำอธิบาย"
                      dense
                      outlined
                    />
                  </div>
                </div>
              </q-item-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>