updated โครงการ tab ลักษณะโครงการ

2024-04-11 16:13:19 +07:00 · 2024-04-11 16:13:19 +07:00 · c7fca7f372
commit c7fca7f372
parent 2360aaceb5
4 changed files with 189 additions and 96 deletions
--- 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);
--- 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>
--- 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,
 };
--- 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,
    };
  }
 );