Merge branch 'nice_dev' into develop

src/api/15_development/api.development.ts

@@ -16,6 +16,8 @@ export default {
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
   developmentMainById: (id: string) => `${development}/main/${id}`,
+  developmentMainTab: (tab: string, id: string) =>
+    `${development}/main/${tab}/${id}`,
 
   /** ทุนการศึกษา/ฝึกอบรม*/
   devScholarship,

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

@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type { FormData } from "@/modules/15_development/interface/request/Other";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
@@ -21,7 +22,6 @@ const {
   messageError,
   dialogConfirm,
 } = useCounterMixin();
-
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
 
@@ -55,7 +55,6 @@ const budgetSubOp = ref<DataOption[]>([
     name: "เงินอุดหนุน",
   },
 ]);
-
 const getProvince = async () => {
   showLoader();
   http
@@ -77,30 +76,81 @@ const getProvince = async () => {
     });
 };
 
+const formData = reactive<FormData>({
+  dateStart: null, //วันที่เริ่มต้น
+  dateEnd: null, //วันที่สิ้นสุด
+  totalDate: null, //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
+  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  budgetSub: "",
+  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+  issues: "", //ประเด็นความเสี่ยง
+  chance: null, //โอกาสที่จะเกิด
+  effects: null, //ผลกระทบจากการเกิด
+  riskLevel: "", //ระดับความเสี่ยง
+  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
+  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
+  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
+  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
+});
+
+function fetchData() {
+  http
+    .get(config.API.developmentMainTab("tab5", projectId.value))
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result;
+
+      formData.dateStart = data.dateStart;
+      formData.dateEnd = data.dateEnd;
+      formData.totalDate = data.totalDate;
+      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
+        address: e.address,
+        provinceId: e.provinceId,
+      }));
+
+      formData.budget = data.budget;
+      formData.accept = data.accept;
+      formData.receive = data.receive;
+      formData.approved = data.approved;
+      formData.budgetPay = data.budgetPay;
+      formData.issues = data.issues;
+      formData.chance = Number(data.chance);
+      formData.effects = Number(data.effects);
+      formData.riskLevel = data.riskLevel;
+      formData.riskManagement = data.riskManagement;
+      formData.expect = data.expect;
+      formData.topicAcademic = data.topicAcademic;
+      formData.addressAcademic = data.addressAcademic;
+      formData.provinceActualId = data.provinceActualId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 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 (formData.dateStart !== null && formData.dateEnd !== null) {
+    const startDate = new Date(formData.dateStart);
+    const endDate = new Date(formData.dateEnd);
     if (startDate > endDate) {
-      store.formAddProject.dateEnd = null;
-      store.formAddProject.totalDate = null;
+      formData.dateEnd = null;
+      formData.totalDate = null;
     } else {
-      store.formAddProject.totalDate = diffDay(
-        store.formAddProject.dateStart,
-        store.formAddProject.dateEnd
-      );
+      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
     }
   }
 }
 
 function changeDateEnd() {
-  store.formAddProject.totalDate = diffDay(
-    store.formAddProject.dateStart,
-    store.formAddProject.dateEnd
-  );
+  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
 }
 
 /**
@@ -117,11 +167,10 @@ const filterSelector = (val: string, update: Function) => {
 };
 
 async function calRiskLevel() {
-  if (store.formAddProject.chance && store.formAddProject.effects) {
+  if (formData.chance && formData.effects) {
     const riskLevel =
-      (await store.formAddProject.chance) * store.formAddProject.effects;
-
-    store.formAddProject.riskLevel =
+      (await Number(formData.chance)) * Number(formData.effects);
+    formData.riskLevel =
       riskLevel == 1
         ? "น้อยมาก"
         : riskLevel == 2
@@ -140,16 +189,55 @@ async function calRiskLevel() {
   }
 }
 
+function onClickAddLocation() {
+  const data = {
+    address: "",
+    provinceId: "",
+  };
+  formData.developmentAddresss.push(data);
+}
+
+function onClickDeleteLocation(index: number) {
+  formData.developmentAddresss.splice(index, 1);
+}
+
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-    // post
-    console.log("projectId===>", projectId.value);
-    hideLoader();
+    formData.totalDate = Number(formData.totalDate);
+    formData.accept =
+      typeof formData.accept === "string"
+        ? Number(formData.accept.replace(/,/g, ""))
+        : formData.accept;
+    formData.receive =
+      typeof formData.receive === "string"
+        ? Number(formData.receive.replace(/,/g, ""))
+        : formData.receive;
+    formData.approved =
+      typeof formData.approved === "string"
+        ? Number(formData.approved.replace(/,/g, ""))
+        : formData.approved;
+    formData.budgetPay =
+      typeof formData.budgetPay === "string"
+        ? Number(formData.budgetPay.replace(/,/g, ""))
+        : formData.budgetPay;
+
+    http
+      .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+      .then(() => {
+        fetchData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
 onMounted(() => {
+  fetchData();
   getProvince();
 });
 </script>
@@ -162,7 +250,7 @@ onMounted(() => {
       <div class="col-12 col-sm-6 col-md-3">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formAddProject.dateStart"
+          v-model="formData.dateStart"
           :locale="'th'"
           autoApply
           :enableTimePicker="false"
@@ -179,9 +267,7 @@ onMounted(() => {
               dense
               outlined
               :model-value="
-                store.formAddProject.dateStart
-                  ? date2Thai(store.formAddProject.dateStart)
-                  : null
+                formData.dateStart ? date2Thai(formData.dateStart) : null
               "
               :label="`${'วันที่เริ่มต้น'}`"
             >
@@ -200,12 +286,12 @@ onMounted(() => {
       <div class="col-12 col-sm-6 col-md-3">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formAddProject.dateEnd"
+          v-model="formData.dateEnd"
           :locale="'th'"
           autoApply
           :enableTimePicker="false"
           week-start="0"
-          :min-date="store.formAddProject.dateStart"
+          :min-date="formData.dateStart"
           @update:model-value="changeDateEnd()"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
@@ -218,9 +304,7 @@ onMounted(() => {
               outlined
               class="inputgreen"
               :model-value="
-                store.formAddProject.dateEnd
-                  ? date2Thai(store.formAddProject.dateEnd)
-                  : null
+                formData.dateEnd ? date2Thai(formData.dateEnd) : null
               "
               :label="`${'วันที่สิ้นสุด'}`"
             >
@@ -242,7 +326,7 @@ onMounted(() => {
           outlined
           class="inputgreen"
           label="รวมระยะเวลา (วัน)"
-          v-model="store.formAddProject.totalDate"
+          v-model="formData.totalDate"
           mask="#"
           reverse-fill-mask
         />
@@ -250,42 +334,71 @@ onMounted(() => {
 
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
-      </div>
-      <div class="col-8">
-        <q-input
-          outlined
+        <q-btn
           dense
-          class="inputgreen"
-          v-model="store.formAddProject.address"
-          label="ที่อยู่"
-        />
-      </div>
-      <div class="col-4">
-        <q-select
-          outlined
-          dense
-          v-model="store.formAddProject.provinceIds"
-          label="จังหวัด"
-          :options="provinceOp"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-          class="inputgreen"
-          use-input
-          multiple
-          @filter="
-        (inputValue:string, doneFn:Function) =>
-          filterSelector(inputValue, doneFn, )
-      "
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click="onClickAddLocation"
         >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
+          <q-tooltip>เพิ่มสถานที่ดำเนินการ</q-tooltip>
+        </q-btn>
       </div>
+      <div class="col-12" v-for="(item, index) in formData.developmentAddresss">
+        <div class="row q-col-gutter-sm">
+          <div class="col-8">
+            <q-input
+              outlined
+              dense
+              class="inputgreen"
+              v-model="formData.developmentAddresss[index].address"
+              label="ที่อยู่"
+            />
+          </div>
+          <div class="col-3">
+            <q-select
+              outlined
+              dense
+              v-model="formData.developmentAddresss[index].provinceId"
+              label="จังหวัด"
+              :options="provinceOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              class="inputgreen"
+              use-input
+              @filter="
+            (inputValue:string, 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-1 text-center">
+            <q-btn
+              v-if="index !== 0"
+              dense
+              flat
+              round
+              color="red"
+              icon="delete"
+              @click="onClickDeleteLocation(index)"
+            >
+              <q-tooltip>ลบ</q-tooltip></q-btn
+            >
+          </div>
+        </div>
+      </div>
+
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">งบประมาณ</span>
       </div>
@@ -293,7 +406,7 @@ onMounted(() => {
         <q-select
           outlined
           dense
-          v-model="store.formAddProject.budget"
+          v-model="formData.budget"
           label="ประเภทงบประมาณ"
           :options="budgetOp"
           option-label="name"
@@ -305,10 +418,10 @@ onMounted(() => {
       </div>
       <div class="col-2">
         <q-select
-          v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
+          v-if="formData.budget === 'OUTSIDEBUDGET'"
           outlined
           dense
-          v-model="store.formAddProject.budgetSub"
+          v-model="formData.budgetSub"
           label="ประเภทย่อย"
           :options="budgetSubOp"
           option-label="name"
@@ -325,7 +438,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.accept"
+              v-model="formData.accept"
               label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
               mask="###,###,###,###,###"
               reverse-fill-mask
@@ -336,7 +449,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.receive"
+              v-model="formData.receive"
               mask="###,###,###,###,###"
               reverse-fill-mask
               label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
@@ -347,7 +460,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.approved"
+              v-model="formData.approved"
               hide-bottom-space
               mask="###,###,###,###,###"
               label="จํานวนงบประมาณที่ได้รับอนุมัติ"
@@ -359,7 +472,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.budgetPay"
+              v-model="formData.budgetPay"
               mask="###,###,###,###,###"
               reverse-fill-mask
               label="จํานวนงบประมาณที่จ่ายจริง"
@@ -367,7 +480,6 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
       </div>
@@ -377,7 +489,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.issues"
+          v-model="formData.issues"
           label="ประเด็นความเสี่ยง"
           type="textarea"
         />
@@ -387,7 +499,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.chance"
+          v-model="formData.chance"
           label="โอกาสที่จะเกิด"
           :options="[1, 2, 3, 4]"
           @update:model-value="calRiskLevel"
@@ -398,7 +510,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.effects"
+          v-model="formData.effects"
           label="ผลกระทบจากการเกิด"
           :options="[1, 2, 3, 4]"
           @update:model-value="calRiskLevel"
@@ -411,7 +523,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.riskLevel"
+          v-model="formData.riskLevel"
           label="ระดับความเสี่ยง"
         />
       </div>
@@ -420,7 +532,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.riskManagement"
+          v-model="formData.riskManagement"
           label="เเนวทางการบริหารความเสี่ยง"
           type="textarea"
         />
@@ -435,7 +547,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.expect"
+          v-model="formData.expect"
           label="ประโยชน์ที่คาดว่าจะได้รับ"
           type="textarea"
         />
@@ -448,7 +560,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.topicAcademic"
+          v-model="formData.topicAcademic"
           label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
         />
       </div>
@@ -457,7 +569,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.addressAcademic"
+          v-model="formData.addressAcademic"
           label="สถานที่ฝึกอบรม ศึกษาดูงาน"
         />
       </div>
@@ -465,7 +577,7 @@ onMounted(() => {
         <q-select
           outlined
           dense
-          v-model="store.formAddProject.provinceActualId"
+          v-model="formData.provinceActualId"
           label="จังหวัด"
           :options="provinceOp"
           option-label="name"

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

@@ -0,0 +1,23 @@
+interface FormData {
+  dateStart: Date | null; //วันที่เริ่มต้น
+  dateEnd: Date | null; //วันที่สิ้นสุด
+  totalDate: number | null; //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: string; provinceId: string }]; //ที่อยู่ ,จังหวัด
+  budget: string; //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  budgetSub: string;
+  accept: number | string | null; //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: number | string | null; //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: number | string | null; //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: number | string | null; //จํานวนงบประมาณที่จ่ายจริง
+  issues: string; //ประเด็นความเสี่ยง
+  chance: number | null; //โอกาสที่จะเกิด
+  effects: number | null; //ผลกระทบจากการเกิด
+  riskLevel: string; //ระดับความเสี่ยง
+  riskManagement: string; //เเนวทางการบริหารความเสี่ยง
+  expect: string; //ประโยชน์ที่คาดว่าจะได้รับ
+  topicAcademic: string; //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+  addressAcademic: string; //สถานที่ฝึกอบรม ศึกษาดูงาน
+  provinceActualId: string;
+}
+
+export type { FormData };