การติดตามประเมินผล และอื่นๆ

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

@@ -3,7 +3,10 @@ import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type {
+  DataOption,
+  DataOptionCheckBox,
+} from "@/modules/15_development/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -19,8 +22,10 @@ const formData = reactive<FormFollowResult>({
   results: "",
   obstacles: "",
   suggestions: "",
+  project: '',
 });
 
+const group = ref<any[]>([]);
 const metricTypeOp = ref<DataOption[]>([
   {
     id: "id1",
@@ -35,6 +40,42 @@ const metricTypeOp = ref<DataOption[]>([
     name: "name3",
   },
 ]);
+const projectOp = ref<DataOption[]>([
+  {
+    id: "true",
+    name: "โครงการที่ เสนอขอ TN",
+  },
+  {
+    id: "false",
+    name: "โครงการที่ ไม่ เสนอขอ TN",
+  },
+]);
+
+const optionsTNFirst = ref<DataOptionCheckBox[]>([
+  {
+    label: "ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ",
+    value: "id1",
+  },
+  {
+    label:
+      "ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
+    value: "id2",
+  },
+  {
+    label: "ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
+    value: "id3",
+  },
+]);
+const optionsTNSecon = ref<DataOptionCheckBox[]>([
+  {
+    label: "แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ",
+    value: "id1",
+  },
+  {
+    label: "แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
+    value: "id2",
+  },
+]);
 
 const options = ref<any>([
   "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
@@ -165,6 +206,38 @@ onMounted(() => {
           ]"
         />
       </div>
+      <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
+          outlined
+          label="ประเภทโครงการ"
+          v-model="formData.project"
+          :options="projectOp"
+          option-label="name"
+          option-value="id"
+          hide-bottom-space
+          map-options
+          emit-value
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกประเภทโครงการ'}`,
+          ]"
+        />
+      </div>
+      <div v-if="formData.project !== ''" class="col-12">
+        <q-option-group
+          :options="
+            formData.project !== 'false' ? optionsTNFirst : optionsTNSecon
+          "
+          type="checkbox"
+          v-model="group"
+        />
+      </div>
     </div>
 
     <q-separator />