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

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 />

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

@@ -2,33 +2,44 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
-import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
+import type { FormFollowOther } from "@/modules/15_development/interface/request/Main";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
+  useCounterMixin();
 
-const formData = reactive<FormFollowResult>({
+const formData = reactive<FormFollowOther>({
-  metricType: "",
+  dateStart: null,
-  indicators: "",
+  dateEnd: null,
-  target: "",
+  totalDate: 0,
-  calculation: "",
+  address: "",
+  province: "",
+  budget: "",
+  accept: null,
+  receive: null,
+  approved: null,
+  budgetPay: null,
+  issues:''
 });
 
-const metricTypeOp = ref<DataOption[]>([
+const provinceOp = ref<DataOption[]>([]);
+const budgetOp = ref<DataOption[]>([
   {
     id: "id1",
-    name: "name1",
+    name: "งบ1",
   },
   {
     id: "id2",
-    name: "name2",
+    name: "งบ2",
   },
   {
     id: "id3",
-    name: "name3",
+    name: "งบ3",
   },
 ]);
 
@@ -40,62 +51,248 @@ function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
+const getProvince = async () => {
+  showLoader();
+  http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+      provinceOp.value = data.map((item: DataOption) => ({
+        id: item.id,
+        name: item.name,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
+  getProvince();
 });
 </script>
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <div class="row q-pa-md q-col-gutter-sm">
-      <div class="col-12 col-sm-6 col-md-4">
+      <div class="col-12">
-        <q-select
+        <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formData.dateStart"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              :model-value="
+                formData.dateStart ? date2Thai(formData.dateStart) : null
+              "
+              :label="`${'วันที่เริ่มรับสมัคร'}`"
+              hide-bottom-space
+              :rules="[
+            (val:string) =>
+              !!val || `${'กรุณาเลือกวันที่เริ่มรับสมัคร'}`,
+          ]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formData.dateEnd"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              :model-value="
+                formData.dateEnd ? date2Thai(formData.dateEnd) : null
+              "
+              :label="`${'วันที่สิ้นสุดรับสมัคร'}`"
+              hide-bottom-space
+              :rules="[
+            (val:string) =>
+              !!val || `${'กรุณาเลือกวันที่สิ้นสุดรับสมัคร'}`,
+          ]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <q-input
           dense
           outlined
-          label="ประเภทตัวชี้วัด"
+          label="รวมระยะเวลา (วัน)"
-          v-model="formData.metricType"
+          v-model="formData.totalDate"
-          :options="metricTypeOp"
+        />
+      </div>
+
+      
+      <div class="col-12 q-mt-md">
+        <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
+      </div>
+      <div class="col-8">
+        <q-input
+          outlined
+          dense
+          v-model="formData.address"
+          hide-bottom-space
+          label="ที่อยู่"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกที่อยู่'}`,
+          ]"
+        />
+      </div>
+      <div class="col-4">
+        <q-select
+          outlined
+          dense
+          v-model="formData.province"
+          hide-bottom-space
+          label="จังหวัด"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณาเลือกจังหวัด'}`,
+          ]"
+          :options="provinceOp"
           option-label="name"
           option-value="id"
-          :rules="[
+          emit-value
-            (val:string) =>
+          map-options
-              !!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
-          ]"
         />
       </div>
-      <div class="col-12 col-sm-6 col-md-4">
+      <div class="col-12 q-mt-md">
-        <q-input
+        <span class="text-weight-medium text-body1">งบประมาณ</span>
-          dense
+      </div>
+      <div class="col-4">
+        <q-select
           outlined
-          label="ตัวชี้วัด"
-          v-model="formData.indicators"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกตัวชี้วัด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-input
           dense
-          outlined
+          v-model="formData.budget"
-          label="เป้าหมาย"
+          hide-bottom-space
-          v-model="formData.target"
+          label="ประเภทงบประมาณ"
           :rules="[
             (val:string) =>
-              !!val || `${'กรุณากรอกเป้าหมาย'}`,
+              !!val || `${'กรุณาเลือกประเภทงบประมาณ'}`,
           ]"
+          :options="budgetOp"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
         />
       </div>
+      <div class="col-12">
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              v-model="formData.accept"
+              hide-bottom-space
+              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
+              :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ขอรับการจัดสรรฯ'}`,
+          ]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              v-model="formData.receive"
+              hide-bottom-space
+              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
+              :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับการจัดสรรฯ'}`,
+          ]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              v-model="formData.approved"
+              hide-bottom-space
+              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
+              :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับอนุมัติ'}`,
+          ]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              v-model="formData.budgetPay"
+              hide-bottom-space
+              label="จํานวนงบประมาณที่จ่ายจริง"
+              :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกจํานวนงบประมาณที่จ่ายจริง'}`,
+          ]"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 q-mt-md">
+        <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
+      </div>
+
       <div class="col-12">
         <q-input
           outlined
           dense
-          v-model="formData.calculation"
+          v-model="formData.issues"
-          label="วิธีการคำนวณ/เครื่องมือ"
+          hide-bottom-space
+          label="ประเด็นความเสี่ยง"
           type="textarea"
           :rules="[
             (val:string) =>
-              !!val || `${'กรุณากรอกวิธีการคำนวณ/เครื่องมือ'}`,
+              !!val || `${'กรุณากรอกประเด็นความเสี่ยง'}`,
           ]"
         />
       </div>

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

@@ -3,4 +3,9 @@ interface DataOption {
   name: string;
 }
 
-export type { DataOption };
+interface DataOptionCheckBox {
+  label: string;
+  value: string;
+}
+
+export type { DataOption,DataOptionCheckBox };

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

@@ -35,6 +35,21 @@ interface FormFollowResult {
   results: string;
   obstacles: string;
   suggestions: string;
+  project: string;
+}
+
+interface FormFollowOther {
+  dateStart: Date | null;
+  dateEnd: Date | null;
+  totalDate: number;
+  address: string;
+  province: string;
+  budget: string;
+  accept: number|null;
+  receive: number|null;
+  approved: number|null;
+  budgetPay: number|null;
+  issues:string
 }
 
 export type {
@@ -43,4 +58,5 @@ export type {
   FormGroupTarget,
   FormGroupRelate,
   FormFollowResult,
+  FormFollowOther,
 };