From 3941cd8ab65f7b059bfb50f58ed480b1cc16cac9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 4 Apr 2024 13:10:37 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B8=81=20API=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=82=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   |   6 +
 .../components/FollowResult.vue               |  83 ++----------
 .../15_development/components/Other.vue       | 108 ++++++++++-----
 .../15_development/components/Target.vue      | 123 +++++++++---------
 4 files changed, 160 insertions(+), 160 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 1da06b539..e55e2c727 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -50,6 +50,7 @@ function updateAgency(name: string) {
             dense
             lazy-rules
             outlined
+            class="inputgreen"
             :model-value="Number(store.formAddProject.year) + 543"
             :label="`${'ปีงบประมาณ'}`"
           >
@@ -69,7 +70,9 @@ function updateAgency(name: string) {
       <q-input
         dense
         outlined
+        class="inputgreen"
         v-model="formData.org"
+        inputgreen
         label="ชื่อหน่วยงานที่รับผิดชอบ"
         hide-bottom-space
         lazy-rules
@@ -83,6 +86,7 @@ function updateAgency(name: string) {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-input
         outlined
+        class="inputgreen"
         dense
         v-model="store.formAddProject.projectName"
         label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
@@ -99,6 +103,7 @@ function updateAgency(name: string) {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-input
         outlined
+        class="inputgreen"
         dense
         v-model="store.formAddProject.reason"
         label="หลักการและเหตุผล"
@@ -110,6 +115,7 @@ function updateAgency(name: string) {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-input
         outlined
+        class="inputgreen"
         dense
         v-model="store.formAddProject.objective"
         label="วัตถุประสงค์"
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index 4ece0fca5..33142ff80 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watchEffect } from "vue";
+import { reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
@@ -15,80 +15,16 @@ const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
-const formData = reactive<FormFollowResult>({
-  metricType: "",
-  indicators: "",
-  target: "",
-  calculation: "",
-  measuRement: "",
-  results: "",
-  obstacles: "",
-  suggestions: "",
-  project: "",
-});
-
-const group = ref<any[]>([]);
-const metricTypeOp = ref<DataOption[]>([
-  {
-    id: "id1",
-    name: "name1",
-  },
-  {
-    id: "id2",
-    name: "name2",
-  },
-  {
-    id: "id3",
-    name: "name3",
-  },
-]);
 const projectOp = ref<DataOption[]>([
   {
     id: "OFFER",
-    name: "โครงการที่ เสนอขอ TN",
+    name: "โครงการที่เสนอขอ TN",
   },
   {
     id: "NOOFFER",
-    name: "โครงการที่ ไม่ เสนอขอ TN",
+    name: "โครงการที่ไม่เสนอขอ TN",
   },
 ]);
-
-const optionsTNFirst = ref<DataOptionCheckBox[]>([
-  {
-    label: "ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ",
-    value: store.formAddProject.isPassAllocate,
-  },
-  {
-    label:
-      "ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: store.formAddProject.isPassNoAllocate,
-  },
-  {
-    label: "ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: store.formAddProject.isNoPass,
-  },
-]);
-const optionsTNSecon = ref<DataOptionCheckBox[]>([
-  {
-    label: "แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ",
-    value: store.formAddProject.isBudget,
-  },
-  {
-    label: "แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: store.formAddProject.isOutBudget,
-  },
-]);
-
-watchEffect(() => {});
-
-onMounted(() => {
-  optionsTNFirst.value.forEach((checkbox, index) => {
-    if (index === 0) checkbox.value = store.formAddProject.isPassAllocate;
-    else if (index === 1)
-      checkbox.value = store.formAddProject.isPassNoAllocate;
-    else if (index === 2) checkbox.value = store.formAddProject.isNoPass;
-  });
-});
 </script>
 <template>
   <div class="row q-pa-md q-col-gutter-sm">
@@ -109,6 +45,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="ประเภทตัวชี้วัด"
         v-model="store.formAddProject.metricType"
         hide-bottom-space
@@ -118,6 +55,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="ตัวชี้วัด"
         v-model="store.formAddProject.indicators"
         hide-bottom-space
@@ -127,6 +65,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="เป้าหมาย"
         v-model="store.formAddProject.target"
         hide-bottom-space
@@ -136,6 +75,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.calculation"
         hide-bottom-space
         label="วิธีการคำนวณ/เครื่องมือ"
@@ -146,6 +86,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.measuRement"
         hide-bottom-space
         label="ระยะเวลาวัดผล"
@@ -155,9 +96,10 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.results"
         hide-bottom-space
-        label="ผลการดำเนิน"
+        label="ผลการดำเนินการ"
         type="textarea"
       />
     </div>
@@ -165,6 +107,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.obstacles"
         hide-bottom-space
         label="ปัญหาอุปสรรค"
@@ -175,6 +118,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.suggestions"
         hide-bottom-space
         label="ข้อเสนอเเนะ"
@@ -198,6 +142,7 @@ onMounted(() => {
         hide-bottom-space
         map-options
         emit-value
+        class="inputgreen"
       />
     </div>
     <div v-if="store.formAddProject.project !== ''" class="col-12">
@@ -205,7 +150,7 @@ onMounted(() => {
         <div class="col-12">
           <q-checkbox
             v-model="store.formAddProject.isPassAllocate"
-            label="ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ"
+            label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
           />
         </div>
         <div class="col-12">
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 12daf60f0..3c9fa9c03 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -16,28 +16,8 @@ const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
   useCounterMixin();
 
-const formData = reactive<FormFollowOther>({
-  dateStart: null,
-  dateEnd: null,
-  totalDate: 0,
-  address: "",
-  province: "",
-  budget: "",
-  accept: null,
-  receive: null,
-  approved: null,
-  budgetPay: null,
-  issues: "",
-  chance: "",
-  effects: "",
-  riskLevel: "",
-  riskManagement: "",
-  benefits: "",
-  topicsIssues: "",
-  trainingStudy: "",
-});
-
 const provinceOp = ref<DataOption[]>([]);
+const provinceOpMain = ref<DataOption[]>([]);
 const budgetOp = ref<DataOption[]>([
   {
     id: "REGULATIONBUDGET",
@@ -53,24 +33,18 @@ const budgetOp = ref<DataOption[]>([
   },
 ]);
 
-const options = ref<any>([
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-]);
-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,
       }));
+      provinceOpMain.value = provinceOp.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -80,6 +54,32 @@ const getProvince = async () => {
     });
 };
 
+function changeDateStart() {
+  if (
+    store.formAddProject.dateStart !== null &&
+    store.formAddProject.dateEnd !== null
+  ) {
+    const startDate = new Date(store.formAddProject.dateStart);
+    const endDate = new Date(store.formAddProject.dateEnd);
+    if (startDate > endDate) {
+      store.formAddProject.dateEnd = null;
+    }
+  }
+}
+
+/**
+ * Fuction Filter จังหวัด
+ * @param val ค่าตัวพิมพ์ค้นหา
+ * @param update ทุกครั้งที่พิมพ์ค่า
+ */
+const filterSelector = (val: any, update: Function) => {
+  update(() => {
+    provinceOp.value = provinceOpMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
 onMounted(() => {
   getProvince();
 });
@@ -96,6 +96,8 @@ onMounted(() => {
         :locale="'th'"
         autoApply
         :enableTimePicker="false"
+        week-start="0"
+        @update:model-value="changeDateStart()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -103,6 +105,7 @@ onMounted(() => {
         }}</template>
         <template #trigger>
           <q-input
+            class="inputgreen"
             dense
             outlined
             :model-value="
@@ -131,6 +134,8 @@ onMounted(() => {
         :locale="'th'"
         autoApply
         :enableTimePicker="false"
+        week-start="0"
+        :min-date="store.formAddProject.dateStart"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -140,6 +145,7 @@ onMounted(() => {
           <q-input
             dense
             outlined
+            class="inputgreen"
             :model-value="
               store.formAddProject.dateEnd
                 ? date2Thai(store.formAddProject.dateEnd)
@@ -163,6 +169,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="รวมระยะเวลา (วัน)"
         v-model="store.formAddProject.totalDate"
         mask="#"
@@ -177,6 +184,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.address"
         label="ที่อยู่"
       />
@@ -192,7 +200,19 @@ onMounted(() => {
         option-value="id"
         emit-value
         map-options
-      />
+        class="inputgreen"
+        use-input
+        @filter="
+        (inputValue:any, doneFn:Function) =>
+          filterSelector(inputValue, doneFn, )
+      "
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
     </div>
     <div class="col-12 q-mt-md">
       <span class="text-weight-medium text-body1">งบประมาณ</span>
@@ -208,6 +228,7 @@ onMounted(() => {
         option-value="id"
         emit-value
         map-options
+        class="inputgreen"
       />
     </div>
     <div class="col-12">
@@ -216,6 +237,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.accept"
             label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
             mask="###,###,###,###,###"
@@ -226,6 +248,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.receive"
             mask="###,###,###,###,###"
             reverse-fill-mask
@@ -236,6 +259,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.approved"
             hide-bottom-space
             mask="###,###,###,###,###"
@@ -247,6 +271,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.budgetPay"
             mask="###,###,###,###,###"
             reverse-fill-mask
@@ -264,6 +289,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.issues"
         label="ประเด็นความเสี่ยง"
         type="textarea"
@@ -273,6 +299,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.chance"
         label="โอกาสที่จะเกิด"
         type="textarea"
@@ -282,6 +309,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.effects"
         label="ผลกระทบจากการเกิด"
         type="textarea"
@@ -291,6 +319,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.riskLevel"
         label="ระดับความเสี่ยง"
       />
@@ -299,6 +328,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.riskManagement"
         label="เเนวทางการบริหารความเสี่ยง"
         type="textarea"
@@ -313,6 +343,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.expect"
         label="ประโยชน์ที่คาดว่าจะได้รับ"
         type="textarea"
@@ -325,6 +356,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.topicAcademic"
         label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
       />
@@ -333,6 +365,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.addressAcademic"
         label="สถานที่ฝึกอบรม ศึกษาดูงาน"
       />
@@ -342,13 +375,24 @@ onMounted(() => {
         outlined
         dense
         v-model="store.formAddProject.provinceActualId"
-        label="จังหวัด(ข้อมูลวิชาการ)"
+        label="จังหวัด"
         :options="provinceOp"
         option-label="name"
         option-value="id"
         emit-value
         map-options
-      />
+        class="inputgreen"
+        use-input
+        @filter="
+        (inputValue:any, doneFn:Function) =>
+          filterSelector(inputValue, doneFn, )
+      "
+        ><template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
     </div>
   </div>
 </template>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 9d77d1126..af10e78dd 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -94,6 +94,7 @@ const columnsActualGoals = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => Number(val),
   },
 ]);
 
@@ -117,6 +118,7 @@ const columnsRelated = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => Number(val),
   },
 ]);
 
@@ -195,67 +197,63 @@ function onClickOpenDialog(type: string, target: string) {
 }
 
 function onSubmitGroup() {
-  dialogConfirm($q, () => {
-    if (isTarget.value === "planned") {
-      const data = [];
-      data.push(formGroupTarget);
-      const list = data.map((e) => ({
-        groupTarget: e.groupTarget,
-        groupTargetSub: e.groupTargetSub,
-        position: e.position,
-        posTypePlannedId: e.posType,
-        posLevelPlannedId: e.level,
-        type: e.type,
-        amount: Number(e.amount),
-      }));
-      plannedGoals.value.push(...list);
-      store.formAddProject.plannedGoals = plannedGoals.value;
-    } else {
-      const data = [];
-      data.push(formGroupTarget);
-      const list = data.map((e) => ({
-        groupTarget: e.groupTarget,
-        groupTargetSub: e.groupTargetSub,
-        position: e.position,
-        posTypeActualId: e.posType,
-        posLevelActualId: e.level,
-        type: e.type,
-        amount: Number(e.amount),
-      }));
-      actualGoals.value.push(...list);
-      store.formAddProject.actualGoals = actualGoals.value;
-    }
-    setTimeout(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      onClickCloseDialog();
-    }, 500);
-  });
+  if (isTarget.value === "planned") {
+    const data = [];
+    data.push(formGroupTarget);
+    const list = data.map((e) => ({
+      groupTarget: e.groupTarget,
+      groupTargetSub: e.groupTargetSub,
+      position: e.position,
+      posTypePlannedId: e.posType,
+      posLevelPlannedId: e.level,
+      type: e.type,
+      amount: Number(e.amount),
+    }));
+    plannedGoals.value.push(...list);
+    store.formAddProject.plannedGoals = plannedGoals.value;
+  } else {
+    const data = [];
+    data.push(formGroupTarget);
+    const list = data.map((e) => ({
+      groupTarget: e.groupTarget,
+      groupTargetSub: e.groupTargetSub,
+      position: e.position,
+      posTypeActualId: e.posType,
+      posLevelActualId: e.level,
+      type: e.type,
+      amount: Number(e.amount),
+    }));
+    actualGoals.value.push(...list);
+    store.formAddProject.actualGoals = actualGoals.value;
+  }
+  setTimeout(() => {
+    onClickCloseDialog();
+  }, 100);
 }
 
 function onSubmitRelate() {
-  dialogConfirm($q, () => {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    if (isTarget.value === "planned") {
-      const data = [];
-      data.push(formGroupRelate);
-      const list = data.map((e) => ({
-        groupTarget: e.relate,
-        amount: Number(e.amount),
-      }));
-      plannedPeoples.value.push(...list);
-      store.formAddProject.plannedPeoples = plannedPeoples.value;
-    } else {
-      const data = [];
-      data.push(formGroupRelate);
-      const list = data.map((e) => ({
-        groupTarget: e.relate,
-        amount: Number(e.amount),
-      }));
-      actualPeoples.value.push(...list);
-      store.formAddProject.actualPeoples = actualPeoples.value;
-    }
+  if (isTarget.value === "planned") {
+    const data = [];
+    data.push(formGroupRelate);
+    const list = data.map((e) => ({
+      groupTarget: e.relate,
+      amount: Number(e.amount),
+    }));
+    plannedPeoples.value.push(...list);
+    store.formAddProject.plannedPeoples = plannedPeoples.value;
+  } else {
+    const data = [];
+    data.push(formGroupRelate);
+    const list = data.map((e) => ({
+      groupTarget: e.relate,
+      amount: Number(e.amount),
+    }));
+    actualPeoples.value.push(...list);
+    store.formAddProject.actualPeoples = actualPeoples.value;
+  }
+  setTimeout(() => {
     onClickCloseDialog();
-  });
+  }, 100);
 }
 
 function onclickDelete(index: number, type: string) {
@@ -277,8 +275,6 @@ function onclickDelete(index: number, type: string) {
       default:
         break;
     }
-
-    success($q, "ลบข้อมูลสำเร็จ");
   });
 }
 
@@ -616,6 +612,7 @@ onMounted(() => {
                 map-options
                 emit-value
                 lazy-rules
+                class="inputgreen"
                 @update:model-value="updateGroupTarget"
                 :rules="[
                 (val:string) =>
@@ -630,6 +627,7 @@ onMounted(() => {
               <q-select
                 dense
                 outlined
+                class="inputgreen"
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
@@ -658,6 +656,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
+                class="inputgreen"
                 v-model="formGroupTarget.position"
                 label="ตำแหน่ง"
                 :rules="[
@@ -675,6 +674,7 @@ onMounted(() => {
                 outlined
                 hide-bottom-space
                 lazy-rules
+                class="inputgreen"
                 v-model="formGroupTarget.posType"
                 :options="posTypeOp"
                 option-label="name"
@@ -699,6 +699,7 @@ onMounted(() => {
                 outlined
                 hide-bottom-space
                 lazy-rules
+                class="inputgreen"
                 v-model="formGroupTarget.level"
                 :options="posLevelOp"
                 option-label="name"
@@ -720,6 +721,7 @@ onMounted(() => {
               <q-input
                 outlined
                 dense
+                class="inputgreen"
                 hide-bottom-space
                 v-model="formGroupTarget.type"
                 label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
@@ -734,6 +736,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
+                class="inputgreen"
                 v-model="formGroupTarget.amount"
                 label="จำนวน(คน)"
                 mask="#"
@@ -775,6 +778,7 @@ onMounted(() => {
               <q-select
                 dense
                 outlined
+                class="inputgreen"
                 v-model="formGroupRelate.relate"
                 :options="peoplesOp"
                 label="ผู้เกี่ยวข้อง"
@@ -795,6 +799,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
+                class="inputgreen"
                 v-model="formGroupRelate.amount"
                 label="จำนวน(คน)"
                 mask="#"