UI การติดตามการประเมินผล

src/modules/15_development/components/FollowResult.vue

@@ -15,6 +15,10 @@ const formData = reactive<FormFollowResult>({
   indicators: "",
   target: "",
   calculation: "",
+  measuRement: "",
+  results: "",
+  obstacles: "",
+  suggestions: "",
 });
 
 const metricTypeOp = ref<DataOption[]>([
@@ -47,6 +51,9 @@ onMounted(() => {
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-12">
+        <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
+      </div>
       <div class="col-12 col-sm-6 col-md-4">
         <q-select
           dense
@@ -56,6 +63,7 @@ onMounted(() => {
           :options="metricTypeOp"
           option-label="name"
           option-value="id"
+          hide-bottom-space
           :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
@@ -68,6 +76,7 @@ onMounted(() => {
           outlined
           label="ตัวชี้วัด"
           v-model="formData.indicators"
+          hide-bottom-space
           :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกตัวชี้วัด'}`,
@@ -80,6 +89,7 @@ onMounted(() => {
           outlined
           label="เป้าหมาย"
           v-model="formData.target"
+          hide-bottom-space
           :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกเป้าหมาย'}`,
@@ -91,6 +101,7 @@ onMounted(() => {
           outlined
           dense
           v-model="formData.calculation"
+          hide-bottom-space
           label="วิธีการคำนวณ/เครื่องมือ"
           type="textarea"
           :rules="[
@@ -99,6 +110,61 @@ onMounted(() => {
           ]"
         />
       </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.measuRement"
+          hide-bottom-space
+          label="ระยะเวลาวัดผล"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกระยะเวลาวัดผล'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.results"
+          hide-bottom-space
+          label="ผลการดำเนิน"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกผลการดำเนิน'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.obstacles"
+          hide-bottom-space
+          label="ปัญหาอุปสรรค"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกปัญหาอุปสรรค'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.suggestions"
+          hide-bottom-space
+          label="ข้อเสนอเเนะ"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกข้อเสนอเเนะ'}`,
+          ]"
+        />
+      </div>
     </div>
 
     <q-separator />

src/modules/15_development/interface/request/Main.ts

@@ -27,10 +27,14 @@ interface FormGroupRelate {
 }
 
 interface FormFollowResult {
-  metricType:string
-  indicators:string
-  target:string
-  calculation:string
+  metricType: string;
+  indicators: string;
+  target: string;
+  calculation: string;
+  measuRement: string;
+  results: string;
+  obstacles: string;
+  suggestions: string;
 }
 
 export type {