ปรับ req field ของระบบประเมิน เมนูสมรรถนะ

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

@@ -1,6 +1,21 @@
 div
 <script setup lang="ts">
 import { ref, reactive } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
+const router = useRouter();
+const store = useKPIDataStore();
+
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -27,7 +42,27 @@ function ocClickAdd() {
 }
 
 function onSubmit() {
-  console.log(formData);
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.competencyName,
+      definition: formData.definition,
+      levels: formData.levels,
+      evaluation: formData.evaluation,
+    };
+    // showLoader()
+    //   http
+    //   .put(config.API.???,body)
+    //   .then((res)=>{
+    //     success($q,'บันทึกสำเร็จ')
+    //     router.push(`/KPI-competency`)
+    //   }).catch((e)=>{
+    //     messageError($q,e)
+    //   }).finally(()=>{
+    //     hideLoader()
+    //   })
+    console.log(body);
+  });
 }
 </script>
 
@@ -97,7 +132,18 @@ function onSubmit() {
                 <span>{{ items.level }}</span>
               </div>
               <div class="col-9">
+                <q-field
+                  class="q_field_p_none"
+                  ref="fieldRef"
+                  v-model="formData.levels[index].description"
+                  label-slot
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                  hide-bottom-space
+                >
+                  <template #control>
                     <q-editor
+                      class="full-width"
                       v-model="formData.levels[index].description"
                       :dense="$q.screen.lt.md"
                       min-height="5rem"
@@ -124,6 +170,8 @@ function onSubmit() {
                         verdana: 'Verdana',
                       }"
                     />
+                  </template>
+                </q-field>
               </div>
             </div>
           </q-card-section>
@@ -136,8 +184,6 @@ function onSubmit() {
           dense
           type="textarea"
           outlined
-          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
-          hide-bottom-space
         />
       </div>
       <div class="col-12"><q-separator /></div>

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

@@ -1,5 +1,18 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
+const router = useRouter;
+const store = useKPIDataStore();
 
 interface DetailLevelType {
   level_01: any;
@@ -40,7 +53,31 @@ const formData = reactive<FormGroup>({
 });
 
 function onSubmit() {
-  console.log(formData);
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.definition,
+      definition: formData.definition,
+      levels1: formScore.score1,
+      levels2: formScore.score2,
+      levels3: formScore.score3,
+      levels4: formScore.score4,
+      levels5: formScore.score5,
+      evaluation: formData.evaluation,
+    };
+    // showLoader()
+    //   http
+    //   .put(config.API.???,body)
+    //   .then((res)=>{
+    //     success($q,'บันทึกสำเร็จ')
+    //     router.push(`/KPI-competency`)
+    //   }).catch((e)=>{
+    //     messageError($q,e)
+    //   }).finally(()=>{
+    //     hideLoader()
+    //   })
+    console.log(body);
+  });
 }
 </script>
 
@@ -48,7 +85,14 @@ function onSubmit() {
   <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 />
+        <q-input
+          label="ชื่อสมรรถนะ"
+          outlined
+          v-model="formData.name"
+          dense
+          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+          hide-bottom-space
+        />
       </div>
       <div class="col-12">
         <q-input
@@ -57,6 +101,8 @@ function onSubmit() {
           v-model="formData.definition"
           dense
           type="textarea"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
+          hide-bottom-space
         />
       </div>
       <div class="col-12">
@@ -79,7 +125,18 @@ function onSubmit() {
                   {{ fieldLabels[field as keyof typeof fieldLabels] }}
                 </div>
                 <div class="col-8 text-left">
+                  <q-field
+                    class="q_field_p_none"
+                    ref="fieldRef"
+                    v-model="formScore[field]"
+                    label-slot
+                    borderless
+                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                    hide-bottom-space
+                  >
+                    <template #control>
                       <q-editor
+                        class="full-width"
                         v-model="formScore[field]"
                         :dense="$q.screen.lt.md"
                         min-height="5rem"
@@ -106,6 +163,8 @@ function onSubmit() {
                           verdana: 'Verdana',
                         }"
                       />
+                    </template>
+                  </q-field>
                 </div>
               </div>
               <div
@@ -125,8 +184,6 @@ function onSubmit() {
           dense
           type="textarea"
           outlined
-          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
-          hide-bottom-space
         />
       </div>
       <div class="col-12"><q-separator /></div>

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

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
+const router = useRouter
+const store = useKPIDataStore();
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -76,10 +80,30 @@ function updateSelectType(val: string, index: number) {
   formData.form[index].posLevel = "";
 }
 
+
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData);
+    const body = {
-  });
+    competencyType:store.competencyType,
+    competencyName:formData.competencyName,
+    definition:formData.definition,
+    postype:formData.form,
+    evaluation:formData.evaluation,
+  }
+// showLoader()
+//   http
+//   .put(config.API.???,body)
+//   .then((res)=>{
+//     success($q,'บันทึกสำเร็จ')
+//     router.push(`/KPI-competency`)
+//   }).catch((e)=>{
+//     messageError($q,e)
+//   }).finally(()=>{
+//     hideLoader()
+//   })
+console.log(body)
+  })
+
 }
 
 onMounted(() => {
@@ -184,7 +208,18 @@ onMounted(() => {
                 />
               </div>
               <div class="col-6">
+                <q-field
+                  class="q_field_p_none"
+                  ref="fieldRef"
+                  v-model="formData.form[index].description"
+                  label-slot
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                  hide-bottom-space
+                >
+                  <template #control>
                     <q-editor
+                      class="full-width"
                       v-model="formData.form[index].description"
                       :dense="$q.screen.lt.md"
                       min-height="5rem"
@@ -211,7 +246,20 @@ onMounted(() => {
                         verdana: 'Verdana',
                       }"
                     />
+                  </template>
+                </q-field>
+                <q-field
+                  class="q_field_p_none"
+                  ref="fieldRef"
+                  v-model="formData.form[index].description2"
+                  label-slot
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                  hide-bottom-space
+                >
+                  <template #control>
                     <q-editor
+                      class="full-width"
                       v-model="formData.form[index].description2"
                       :dense="$q.screen.lt.md"
                       min-height="5rem"
@@ -238,6 +286,8 @@ onMounted(() => {
                         verdana: 'Verdana',
                       }"
                     />
+                  </template>
+                </q-field>
               </div>
               <div class="col-12"><q-separator /></div>
             </div>
@@ -251,8 +301,6 @@ onMounted(() => {
           dense
           type="textarea"
           outlined
-          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
-          hide-bottom-space
         />
       </div>
       <div class="col-12"><q-separator /></div>

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -22,6 +24,7 @@ const {
   date2Thai,
 } = mixin;
 
+const store = useKPIDataStore();
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -31,8 +34,31 @@ const formData = reactive({
   level3: "",
   evaluation: "",
 });
-async function onSubmit() {
+
-  dialogConfirm($q, async () => {});
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.competencyName,
+      definition: formData.definition,
+      levels1: formData.level1,
+      levels2: formData.level2,
+      levels3: formData.level3,
+      evaluation: formData.evaluation,
+    };
+    // showLoader()
+    //   http
+    //   .put(config.API.???,body)
+    //   .then((res)=>{
+    //     success($q,'บันทึกสำเร็จ')
+    //     router.push(`/KPI-competency`)
+    //   }).catch((e)=>{
+    //     messageError($q,e)
+    //   }).finally(()=>{
+    //     hideLoader()
+    //   })
+    console.log(body);
+  });
 }
 </script>
 
@@ -51,7 +77,18 @@ async function onSubmit() {
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
+          <q-field
+            class="q_field_p_none"
+            ref="fieldRef"
+            v-model="formData.definition"
+            label-slot
+            borderless
+            :rules="[(val) => !!val || 'กรุณากรอกคำจำกัดความ']"
+            hide-bottom-space
+          >
+            <template #control>
               <q-editor
+                class="full-width"
                 v-model="formData.definition"
                 :dense="$q.screen.lt.md"
                 min-height="7rem"
@@ -79,6 +116,8 @@ async function onSubmit() {
                   verdana: 'Verdana',
                 }"
               />
+            </template>
+          </q-field>
         </div>
       </q-card-section>
       <div class="col-12">

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

@@ -2,8 +2,9 @@
 import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,7 +22,7 @@ const {
   success,
   date2Thai,
 } = mixin;
-
+const store = useKPIDataStore();
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -31,8 +32,29 @@ const formData = reactive({
   evaluation: "",
 });
 
-async function onSubmit() {
+function onSubmit() {
-  dialogConfirm($q, async () => {});
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.competencyName,
+      definition: formData.definition,
+      levels1: formData.level1,
+      levels2: formData.level2,
+      evaluation: formData.evaluation,
+    };
+    // showLoader()
+    //   http
+    //   .put(config.API.???,body)
+    //   .then((res)=>{
+    //     success($q,'บันทึกสำเร็จ')
+    //     router.push(`/KPI-competency`)
+    //   }).catch((e)=>{
+    //     messageError($q,e)
+    //   }).finally(()=>{
+    //     hideLoader()
+    //   })
+    console.log(body);
+  });
 }
 </script>
 
@@ -51,7 +73,18 @@ async function onSubmit() {
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
+          <q-field
+          class="q_field_p_none"
+            ref="fieldRef"
+            v-model="formData.definition"
+            label-slot
+            borderless
+            :rules="[(val) => !!val || 'กรุณากรอกคำจำกัดความ']"
+            hide-bottom-space
+          >
+            <template #control>
               <q-editor
+                class="full-width"
                 v-model="formData.definition"
                 :dense="$q.screen.lt.md"
                 min-height="7rem"
@@ -79,6 +112,8 @@ async function onSubmit() {
                   verdana: 'Verdana',
                 }"
               />
+            </template>
+          </q-field>
         </div>
       </q-card-section>
       <div class="col-12">

src/style/quasar-variables.sass

@@ -136,6 +136,9 @@ $muti-tab: #87d4cc
 .q-tree
     color: #c8d3db
 
+.q_field_p_none .q-field__control-container
+    padding-top: 0 !important
+
 .input-alert .q-field--outlined .q-field__control
     border: 1px solid red !important
     background-color: rgb(255, 216, 216)