ปรับสมรรถนะ

src/modules/14_KPI/components/competency/01ListCompetency.vue

@@ -5,10 +5,14 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const store = useKPIDataStore();
+
 const router = useRouter();
 const rows = ref<any>();
 
@@ -52,7 +56,6 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
-const competencyType = ref<string>("ID1");
 const filterKeyword = ref<string>("");
 
 const visibleColumns = ref<string[]>(["competency"]);
@@ -130,7 +133,7 @@ onMounted(async () => {
 <template>
   <q-toolbar style="padding: 0">
     <q-select
-      v-model="competencyType"
+      v-model="store.competencyType"
       outlined
       label="ประเภทสมรรถนะ"
       dense

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

@@ -7,11 +7,13 @@ import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup
 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: "",
@@ -92,7 +94,7 @@ function onSubmit() {
       <div class="row q-col-gutter-sm">
         <div class="col-12">
           <q-select
-            v-model="formData.competencyType"
+            v-model="store.competencyType"
             outlined
             label="เลือกประเภทสมรรถนะ"
             dense
@@ -106,11 +108,11 @@ function onSubmit() {
           />
         </div>
 
-        <FormMain v-if="formData.competencyType === 'ID1'" />
-        <FormGroup v-else-if="formData.competencyType === 'ID2'" />
-        <FormExecutive v-else-if="formData.competencyType === 'ID3'" />
-        <FormExecutivePosition v-else-if="formData.competencyType === 'ID4'" />
-        <FormExecutiveLevel v-else-if="formData.competencyType === 'ID5'" />
+        <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

src/modules/14_KPI/components/competency/Forms/01_FormMain.vue

@@ -76,12 +76,12 @@ function onSubmit() {
                     >
                   </div>
                   <div class="col-11 text-center">
-                    <span>ระดับสมรรถนะ</span>
+                    <span>ระดับ</span>
                   </div>
                 </div>
               </div>
               <div class="col-4">
-                <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+                <span>คำอธิบายระดับ</span>
               </div>
             </div>
           </q-card-section>

src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue

@@ -13,6 +13,7 @@ interface FormGroup {
   name: string;
   definition: string;
   detailLevel: DetailLevelType[];
+  evaluation: string;
 }
 
 const fieldLabels = {
@@ -35,76 +36,112 @@ const formData = reactive<FormGroup>({
   name: "",
   definition: "",
   detailLevel: [],
+  evaluation: "",
 });
-</script>
-<template>
-  <div class="col-12">
-    <q-input label="ชื่อสมรรถนะ" outlined v-model="formData.name" dense />
-  </div>
-  <div class="col-12">
-    <q-input
-      label="คำจำกัดความ"
-      outlined
-      v-model="formData.definition"
-      dense
-      type="textarea"
-    />
-  </div>
-  <div class="col-12">
-    <q-card flat bordered>
-      <q-card-section class="bg-grey-4 q-pa-sm">
-        <div class="row text-dark text-body2 text-weight-medium">
-          <div class="text-center col-4">ระดับสมรรถนะ</div>
-          <div class="col-8">คำอธิบายระดับ</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-4 text-center text-body1 text-weight-bold self-center">
-              {{ fieldLabels[field as keyof typeof fieldLabels] }}
-            </div>
-            <div class="col-8 text-left">
-              <q-editor
-                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',
-                }"
-              />
+function onSubmit() {
+  console.log(formData);
+}
+</script>
+
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <q-input label="ชื่อสมรรถนะ" outlined v-model="formData.name" dense />
+      </div>
+      <div class="col-12">
+        <q-input
+          label="คำจำกัดความ"
+          outlined
+          v-model="formData.definition"
+          dense
+          type="textarea"
+        />
+      </div>
+      <div class="col-12">
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-4 q-pa-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-4">ระดับ</div>
+              <div class="col-8">มาตรฐานพฤติกรรม</div>
             </div>
-          </div>
-          <div
-            class="col-12"
-            v-if="index !== Object.keys(fieldLabels).length - 1"
-          >
-            <q-separator />
-          </div>
-        </div>
-      </q-card-section>
-    </q-card>
-  </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-4 text-center text-body1 text-weight-bold self-center"
+                >
+                  {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                </div>
+                <div class="col-8 text-left">
+                  <q-editor
+                    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',
+                    }"
+                  />
+                </div>
+              </div>
+              <div
+                class="col-12"
+                v-if="index !== Object.keys(fieldLabels).length - 1"
+              >
+                <q-separator />
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-12">
+        <q-input
+          v-model="formData.evaluation"
+          label="กำหนดเกณฑ์การประเมิน"
+          dense
+          type="textarea"
+          outlined
+          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12 row justify-end">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          class="q-px-md"
+          type="submit"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+  </q-form>
 </template>

src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue

@@ -137,10 +137,10 @@ onMounted(() => {
                 </div>
               </div>
               <div class="col-3 text-center">
-                <span>ระดับตำแห่นง</span>
+                <span>ระดับ</span>
               </div>
               <div class="col-6">
-                <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+                <span>มาตรฐานพฤติกรรม</span>
               </div>
             </div>
           </q-card-section>

src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue

@@ -105,7 +105,8 @@ async function onSubmit() {
                   label-slot
                   borderless
                   :rules="[
-                    (val) => !!val || 'กรุณากรอก L1 ระดับ หัวหน้าฝ่ายในสังกัด',
+                    (val) =>
+                      !!val || 'กรุณาระบุคำอธิบาย L1 ระดับ หัวหน้าฝ่ายในสังกัด',
                   ]"
                   hide-bottom-space
                 >
@@ -158,7 +159,8 @@ async function onSubmit() {
                   borderless
                   :rules="[
                     (val) =>
-                      !!val || 'กรุณากรอก L2 ระดับ ผู้ช่วยผู้อำนวยการเขต',
+                      !!val ||
+                      'กรุณาระบุคำอธิบาย L2 ระดับ ผู้ช่วยผู้อำนวยการเขต',
                   ]"
                   hide-bottom-space
                 >
@@ -210,7 +212,8 @@ async function onSubmit() {
                   label-slot
                   borderless
                   :rules="[
-                    (val) => !!val || 'กรุณากรอก L3 ระดับ ผู้อำนวยการเขต',
+                    (val) =>
+                      !!val || 'กรุณาระบุคำอธิบาย L3 ระดับ ผู้อำนวยการเขต',
                   ]"
                   hide-bottom-space
                 >

src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue

@@ -105,7 +105,8 @@ async function onSubmit() {
                   label-slot
                   borderless
                   :rules="[
-                    (val) => !!val || 'กรุณากรอก L1 ประเภทอำนวยการ ระดับสูง',
+                    (val) =>
+                      !!val || 'กรุณาระบุคำอธิบาย L1 ประเภทอำนวยการ ระดับสูง',
                   ]"
                   hide-bottom-space
                 >
@@ -157,7 +158,8 @@ async function onSubmit() {
                   label-slot
                   borderless
                   :rules="[
-                    (val) => !!val || 'กรุณากรอก L2 ประเภทบริหาร ระดับสูง',
+                    (val) =>
+                      !!val || 'กรุณาระบุคำอธิบาย L2 ประเภทบริหาร ระดับสูง',
                   ]"
                   hide-bottom-space
                 >

src/modules/14_KPI/store/KPIStore.ts

@@ -1,6 +1,9 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-// store 
+// store
 export const useKPIDataStore = defineStore("KPIDataStore", () => {
-  return {};
+  const competencyType = ref<string>("ID1");
+
+  return { competencyType };
 });