From c7fca7f372ec1dfc0b76fc6544a2d3f8ecda1378 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 11 Apr 2024 16:13:19 +0700
Subject: [PATCH] =?UTF-8?q?updated=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=20tab=20=E0=B8=A5=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A9=E0=B8=93=E0=B8=B0=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=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/MainTab.vue     |   1 +
 .../components/ProjectDetail.vue              | 261 +++++++++++-------
 .../15_development/interface/index/Main.ts    |  20 +-
 .../15_development/store/developmentStore.ts  |   3 +
 4 files changed, 189 insertions(+), 96 deletions(-)

diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index badbce8f2..b2e3889c8 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -217,6 +217,7 @@ function getStatus(id: string) {
     .get(config.API.developmentMainStatus(id)) // change path
     .then((res) => {
       status.value = res.data.result.status;
+      store.projectStatus = res.data.result.status;
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 3bc44b536..9f28230a3 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -1,30 +1,31 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type {
+  DataOption,
+  FormProjectDetail,
+} from "@/modules/15_development/interface/index/Main";
 
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const { showLoader, hideLoader, dialogConfirm, messageError, success } =
+  useCounterMixin();
 
-const projectTypeOp = ref<DataOption[]>([
-  { id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" },
-  { id: "MISSION_PROJECT", name: "โครงการตามภารกิจประจำของหน่วยงาน" },
-  { id: "NEW_PROJECT", name: "โครงการใหม่" },
-  { id: "ONGOING_PROJEC", name: "โครงการต่อเนื่อง" },
-]);
-const projectCharacteristicsOp = ref<DataOption[]>([
-  { id: "GO_BACK", name: "ไป-กลับ" },
-  { id: "HOLD", name: "พักค้าง" },
-  { id: "GO_BACK_HOLD", name: "ไป-กลับและพักค้าง" },
+const projectTypeOp = ref<String[]>([
+  "โครงการตามยุทธศาสตร์",
+  "โครงการตามภารกิจประจำของหน่วยงาน",
+  "โครงการใหม่",
+  "โครงการต่อเนื่อง",
 ]);
 // const projectTechniquesOp = ref<DataOption[]>([
 //   { id: "TRAINING", name: "การอบรม" },
@@ -38,24 +39,85 @@ const projectCharacteristicsOp = ref<DataOption[]>([
 // ]);
 
 const projectTechniquesOp = ref<any[]>([
-  { value: "TRAINING", label: "การอบรม" },
-  { value: "MEETING", label: "การประชุม" },
-  { value: "SEMINAR", label: "การสัมมนา" },
-  { value: "STUDY_TOUR", label: "การศึกษาดูงาน" },
-  { value: "ACADEMIC_SEMINAR", label: "การสัมมนาทางวิชาการ" },
-  { value: "WORKSHOP", label: "การสัมมนาเชิงปฏิบัติการ" },
-  { value: "SPECIAL_LECTURE", label: "การบรรยายพิเศษ" },
-  { value: "STUDY_TRAINING", label: "การฝึกศึกษา" },
+  { value: "การอบรม", label: "การอบรม" },
+  { value: "การประชุม", label: "การประชุม" },
+  { value: "การสัมมนา", label: "การสัมมนา" },
+  { value: "การศึกษาดูงาน", label: "การศึกษาดูงาน" },
+  { value: "การสัมมนาทางวิชาการ", label: "การสัมมนาทางวิชาการ" },
+  { value: "การสัมมนาเชิงปฏิบัติการ", label: "การสัมมนาเชิงปฏิบัติการ" },
+  { value: "การบรรยายพิเศษ", label: "การบรรยายพิเศษ" },
+  { value: "การฝึกศึกษา", label: "การฝึกศึกษา" },
 ]);
 
-function onSubmit() {
+const formData = reactive<FormProjectDetail>({
+  developmentProjectTypes: [],
+  projectModal: null,
+  isBackPlanned: false,
+  isHoldPlanned: false,
+  projectDayBackPlanned: null,
+  projectDayHoldPlanned: null,
+  projectNigthHoldPlanned: null,
+  developmentProjectTechniquePlanneds: [],
+  isBackActual: false,
+  isHoldActual: false,
+  projectDayBackActual: null,
+  projectDayHoldActual: null,
+  projectNigthHoldActual: null,
+  developmentProjectTechniqueActuals: [],
+});
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.developmentMainTab("tab3", projectId.value))
+    .then((res) => {
+      const data = res.data.result;
+
+      formData.developmentProjectTypes = data.developmentProjectTypes;
+      formData.projectModal = data.projectModal;
+      formData.isBackPlanned = data.isBackPlanned;
+      formData.isHoldPlanned = data.isHoldPlanned;
+      formData.projectDayBackPlanned = data.projectDayBackPlanned;
+      formData.projectDayHoldPlanned = data.projectDayHoldPlanned;
+      formData.projectNigthHoldPlanned = data.projectNigthHoldPlanned;
+      formData.developmentProjectTechniquePlanneds =
+        data.developmentProjectTechniquePlanneds;
+      formData.isBackActual = data.isBackActual;
+      formData.isHoldActual = data.isHoldActual;
+      formData.projectDayBackActual = data.projectDayBackActual;
+      formData.projectDayHoldActual = data.projectDayHoldActual;
+      formData.projectNigthHoldActual = data.projectNigthHoldActual;
+      formData.developmentProjectTechniqueActuals =
+        data.developmentProjectTechniqueActuals;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-    // post
-    console.log("projectId===>", projectId.value);
-    hideLoader();
+
+    await http
+      .put(config.API.developmentMainTab("tab3", projectId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
   });
 }
+
+onMounted(() => {
+  fetchData();
+});
 </script>
 
 <template>
@@ -65,20 +127,21 @@ function onSubmit() {
         <q-select
           dense
           outlined
-          v-model="store.formAddProject.projectType"
+          v-model="formData.developmentProjectTypes"
           :options="projectTypeOp"
           label="ประเภทโครงการ"
           option-label="name"
           option-value="id"
           emit-value
           map-options
+          multiple
         />
       </div>
       <div class="col-12 col-sm-6 col-md-4">
         <q-input
           dense
           outlined
-          v-model="store.formAddProject.projectModal"
+          v-model="formData.projectModal"
           label="จำนวน (รุ่น)"
           mask="#"
           reverse-fill-mask
@@ -90,12 +153,13 @@ function onSubmit() {
       <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>
 
       <div class="col-12 q-py-md">
-        <q-label>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+        <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
         <q-option-group
+          :disable="store.projectStatus === 'FINISH'"
           keep-color
           color="primary"
           dense
-          v-model="store.formAddProject.projectTechniques"
+          v-model="formData.developmentProjectTechniquePlanneds"
           :options="projectTechniquesOp"
           type="checkbox"
           inline
@@ -105,19 +169,21 @@ function onSubmit() {
       <div class="row col-12 q-col-gutter-sm">
         <div class="col-12 col-sm-2">
           <q-checkbox
+            :disable="store.projectStatus === 'FINISH'"
             keep-color
             color="primary"
             dense
             value="GO_BLACK"
             label="ไป-กลับ"
-            v-model="store.formAddProject.projectCharacteristics"
+            v-model="formData.isBackPlanned"
           ></q-checkbox>
         </div>
         <div class="col-12 col-sm-3">
           <q-input
+            :readonly="store.projectStatus === 'FINISH'"
             dense
             outlined
-            v-model="store.formAddProject.projectDay"
+            v-model="formData.projectDayBackPlanned"
             label="จำนวน (วัน)"
             mask="#"
             reverse-fill-mask
@@ -127,19 +193,21 @@ function onSubmit() {
       <div class="row col-12 q-col-gutter-sm">
         <div class="col-12 col-sm-2">
           <q-checkbox
+            :disable="store.projectStatus === 'FINISH'"
             keep-color
             color="primary"
             dense
             value="HOLD"
             label="พักค้าง"
-            v-model="store.formAddProject.projectCharacteristics"
+            v-model="formData.isHoldPlanned"
           ></q-checkbox>
         </div>
         <div class="col-12 col-sm-3">
           <q-input
+            :readonly="store.projectStatus === 'FINISH'"
             dense
             outlined
-            v-model="store.formAddProject.projectDay"
+            v-model="formData.projectDayHoldPlanned"
             label="จำนวน (วัน)"
             mask="#"
             reverse-fill-mask
@@ -147,9 +215,10 @@ function onSubmit() {
         </div>
         <div class="col-12 col-sm-3">
           <q-input
+            :readonly="store.projectStatus === 'FINISH'"
             dense
             outlined
-            v-model="store.formAddProject.projectNigth"
+            v-model="formData.projectNigthHoldPlanned"
             label="จำนวน (คืน)"
             mask="#"
             reverse-fill-mask
@@ -157,74 +226,76 @@ function onSubmit() {
         </div>
       </div>
 
-      <div class="col-12"><q-separator class="q-my-md" /></div>
+      <div class="q-col-gutter-sm" v-if="store.projectStatus === 'FINISH'">
+        <div class="col-12"><q-separator class="q-my-md" /></div>
 
-      <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
-      <div class="col-12 q-py-md">
-        <q-label>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
-        <q-option-group
-          keep-color
-          color="primary"
-          dense
-          v-model="store.formAddProject.projectTechniques"
-          :options="projectTechniquesOp"
-          type="checkbox"
-          inline
-        />
-      </div>
-
-      <div class="row col-12 q-col-gutter-sm">
-        <div class="col-12 col-sm-2">
-          <q-checkbox
+        <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
+        <div class="col-12 q-py-md">
+          <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+          <q-option-group
             keep-color
             color="primary"
             dense
-            value="GO_BLACK"
-            label="ไป-กลับ"
-            v-model="store.formAddProject.projectCharacteristics"
-          ></q-checkbox>
-        </div>
-        <div class="col-12 col-sm-3">
-          <q-input
-            dense
-            outlined
-            v-model="store.formAddProject.projectDay"
-            label="จำนวน (วัน)"
-            mask="#"
-            reverse-fill-mask
+            v-model="formData.developmentProjectTechniqueActuals"
+            :options="projectTechniquesOp"
+            type="checkbox"
+            inline
           />
         </div>
-      </div>
-      <div class="row col-12 q-col-gutter-sm">
-        <div class="col-12 col-sm-2">
-          <q-checkbox
-            keep-color
-            color="primary"
-            dense
-            value="HOLD"
-            label="พักค้าง"
-            v-model="store.formAddProject.projectCharacteristics"
-          ></q-checkbox>
+
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-12 col-sm-2">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              value="GO_BLACK"
+              label="ไป-กลับ"
+              v-model="formData.isBackActual"
+            ></q-checkbox>
+          </div>
+          <div class="col-12 col-sm-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.projectDayBackActual"
+              label="จำนวน (วัน)"
+              mask="#"
+              reverse-fill-mask
+            />
+          </div>
         </div>
-        <div class="col-12 col-sm-3">
-          <q-input
-            dense
-            outlined
-            v-model="store.formAddProject.projectDay"
-            label="จำนวน (วัน)"
-            mask="#"
-            reverse-fill-mask
-          />
-        </div>
-        <div class="col-12 col-sm-3">
-          <q-input
-            dense
-            outlined
-            v-model="store.formAddProject.projectNigth"
-            label="จำนวน (คืน)"
-            mask="#"
-            reverse-fill-mask
-          />
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-12 col-sm-2">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              value="HOLD"
+              label="พักค้าง"
+              v-model="formData.isHoldActual"
+            ></q-checkbox>
+          </div>
+          <div class="col-12 col-sm-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.projectDayHoldActual"
+              label="จำนวน (วัน)"
+              mask="#"
+              reverse-fill-mask
+            />
+          </div>
+          <div class="col-12 col-sm-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.projectNigthHoldActual"
+              label="จำนวน (คืน)"
+              mask="#"
+              reverse-fill-mask
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 836c9a170..e5a713896 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -62,6 +62,23 @@ interface ItemsDownload {
   color: string;
 }
 
+interface FormProjectDetail {
+  developmentProjectTypes: [];
+  projectModal: string | null;
+  isBackPlanned: boolean;
+  isHoldPlanned: boolean;
+  projectDayBackPlanned: string | null;
+  projectDayHoldPlanned: string | null;
+  projectNigthHoldPlanned: string | null;
+  developmentProjectTechniquePlanneds: [];
+  isBackActual: boolean;
+  isHoldActual: boolean;
+  projectDayBackActual: string | null;
+  projectDayHoldActual: string | null;
+  projectNigthHoldActual: string | null;
+  developmentProjectTechniqueActuals: [];
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -69,5 +86,6 @@ export type {
   NewPagination,
   FormFilter,
   DataPerson,
-  ItemsDownload
+  ItemsDownload,
+  FormProjectDetail,
 };
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 2629c8ea6..454f4e889 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -8,6 +8,7 @@ import type { FormAddProject } from "@/modules/15_development/interface/request/
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
+    const projectStatus = ref<string>("ONGOING");
     const statusEdit = ref<boolean>(false);
     const formAddProject = reactive<FormAddProject>({
       year: new Date().getFullYear(), //ปีงบประมาณ*
@@ -123,6 +124,7 @@ export const useDevelopmentDataStore = defineStore(
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
     const rows = ref<any[]>([]);
+
     return {
       formAddProject,
       clearFormAddProject,
@@ -130,6 +132,7 @@ export const useDevelopmentDataStore = defineStore(
       columns,
       rows,
       statusEdit,
+      projectStatus,
     };
   }
 );