ui k api

src/modules/14_KPI/components/competency/AddPage.vue

@@ -0,0 +1,171 @@
+<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: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+  },
+  {
+    id: "ID6",
+    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>