From 6d8c062a42497c39e6ac39c89b54ab7170e91843 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 9 Apr 2024 13:03:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=9E=E0=B8=B1=E0=B8=92=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=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     |  11 ++
 .../15_development/components/Other.vue       |  32 +++++
 .../components/ProjectDetail.vue              | 104 +++++++++++++++-
 .../15_development/interface/request/Main.ts  |  10 +-
 .../15_development/store/developmentStore.ts  |  19 ++-
 src/modules/15_development/views/MainPage.vue | 113 +++++++++++-------
 6 files changed, 240 insertions(+), 49 deletions(-)

diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index deac5e1b1..c52f40b9b 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -86,6 +86,17 @@ function fetchDataProject(id: string) {
       store.formAddProject.actualGoals = actualGoals;
       store.formAddProject.actualPeoples = actualPeoples;
 
+      // ลักษณะโครงการ
+      store.formAddProject.projectDay = store.formAddProject.projectDay
+        ? Number(store.formAddProject.projectDay)
+        : null;
+      store.formAddProject.projectNigth = store.formAddProject.projectNigth
+        ? Number(store.formAddProject.projectNigth)
+        : null;
+      store.formAddProject.projectModal = store.formAddProject.projectModal
+        ? Number(store.formAddProject.projectModal)
+        : null;
+
       /** การติดตามผลดารประเมิน*/
       store.formAddProject.metricType = data.metricType;
       store.formAddProject.indicators = data.indicators;
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 26bcd73e9..b2e7665e1 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -31,6 +31,20 @@ const budgetOp = ref<DataOption[]>([
     name: "เงินนอกงบประมาณ",
   },
 ]);
+const budgetSubOp = ref<DataOption[]>([
+  {
+    id: "1",
+    name: "เงินบำรุง",
+  },
+  {
+    id: "2",
+    name: "เงินกองทุน",
+  },
+  {
+    id: "3",
+    name: "เงินอุดหนุน",
+  },
+]);
 
 const getProvince = async () => {
   showLoader();
@@ -92,6 +106,8 @@ const filterSelector = (val: string, update: Function) => {
   });
 };
 
+const multiple = ref(null);
+
 onMounted(() => {
   getProvince();
 });
@@ -244,6 +260,21 @@ onMounted(() => {
         class="inputgreen"
       />
     </div>
+    <div class="col-2">
+      <q-select
+        v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
+        outlined
+        dense
+        v-model="store.formAddProject.budgetSub"
+        label="ประเภทย่อย"
+        :options="budgetSubOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        class="inputgreen"
+      />
+    </div>
     <div class="col-12">
       <div class="row q-col-gutter-x-sm">
         <div class="col-3">
@@ -396,6 +427,7 @@ onMounted(() => {
         map-options
         class="inputgreen"
         use-input
+        multiple
         @filter="
         (inputValue:string, doneFn:Function) =>
           filterSelector(inputValue, doneFn, )
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index aeb796c49..a564464ac 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -1,12 +1,112 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
+
+/**importType*/
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
+const store = useDevelopmentDataStore();
+
+const projectTypeOp = ref<DataOption[]>([
+  { id: "1", name: "โครงการตามยุทธศาสตร์" },
+  { id: "2", name: "โครงการตามภารกิจประจำของหน่วยงาน" },
+  { id: "3", name: "โครงการใหม่" },
+  { id: "4", name: "โครงการต่อเนื่อง" },
+]);
+const projectCharacteristicsOp = ref<DataOption[]>([
+  { id: "1", name: "ไป-กลับ" },
+  { id: "2", name: "พักค้าง" },
+  { id: "3", name: "ไป-กลับและพักค้าง" },
+]);
+const projectTechniquesOp = ref<DataOption[]>([
+  { id: "1", name: "การอบรม" },
+  { id: "2", name: "การประชุม" },
+  { id: "3", name: "การสัมมนา" },
+  { id: "4", name: "การศึกษาดูงาน" },
+  { id: "5", name: "การสัมมนาทางวิชาการ" },
+  { id: "6", name: "การสัมมนาเชิงปฏิบัติการ" },
+  { id: "7", name: "การบรรยายพิเศษ" },
+  { id: "8", name: "การฝึกศึกษา" },
+]);
 
 onMounted(() => {
   console.log("ลักษณะโครงการ");
 });
 </script>
 <template>
-  <div>ลักษณะโครงการ</div>
+  <div class="row q-pa-md q-col-gutter-sm">
+    <div class="col-12 col-sm-12 col-md-4">
+      <q-select
+        dense
+        outlined
+        v-model="store.formAddProject.projectType"
+        :options="projectTypeOp"
+        label="ประเภทโครงการ"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-select
+        dense
+        outlined
+        v-model="store.formAddProject.projectCharacteristics"
+        :options="projectCharacteristicsOp"
+        label="ลักษณะ"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-2">
+      <q-input
+        dense
+        outlined
+        v-model="store.formAddProject.projectDay"
+        label="จำนวน (วัน)"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-2">
+      <q-input
+        v-if="store.formAddProject.projectCharacteristics !== '1'"
+        dense
+        outlined
+        v-model="store.formAddProject.projectNigth"
+        label="จำนวน (คืน)"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-select
+        dense
+        outlined
+        v-model="store.formAddProject.projectTechniques"
+        :options="projectTechniquesOp"
+        label="เทคนิควิธีการที่ใช้ในการพัฒนา"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-2">
+      <q-input
+        dense
+        outlined
+        v-model="store.formAddProject.projectModal"
+        label="จำนวน (รุ่น)"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index ba505dbd0..64a26deed 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -2,6 +2,7 @@ interface FormQueryListProject {
   year: number;
   page: number;
   pageSize: number;
+  org: string;
   keyword: string;
 }
 
@@ -140,6 +141,7 @@ interface FormAddProject {
   address: string;
   provinceId: string | null;
   budget: string;
+  budgetSub: string;
   accept: number | string | null;
   receive: number | string | null;
   approved: number | string | null;
@@ -152,11 +154,17 @@ interface FormAddProject {
   expect: string;
   topicAcademic: string;
   addressAcademic: string;
-  provinceActualId: string | null;
+  provinceActualId: any;
   actualPeoples: People[];
   plannedPeoples: People[];
   actualGoals: actualGoals[];
   plannedGoals: PlannedGoals[];
+  projectType: string;
+  projectCharacteristics: string;
+  projectDay: number | null;
+  projectNigth: number | null;
+  projectTechniques: string;
+  projectModal: number | null;
 }
 
 interface People {
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index a47b307d6..dd8767ae1 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -8,7 +8,7 @@ import type { FormAddProject } from "@/modules/15_development/interface/request/
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
-    const statusEdit = ref<boolean>(false)
+    const statusEdit = ref<boolean>(false);
     const formAddProject = reactive<FormAddProject>({
       year: new Date().getFullYear(), //ปีงบประมาณ*
       projectName: "", //ชื่อโครงการ/กิจกรรม/หลักสูตร*
@@ -34,6 +34,7 @@ export const useDevelopmentDataStore = defineStore(
       address: "", //ที่อยู่
       provinceId: null, //จังหวัด
       budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+      budgetSub:"",
       accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
       receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
       approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
@@ -81,6 +82,14 @@ export const useDevelopmentDataStore = defineStore(
         //   amount: null, //จำนวน(คน)
         // },
       ], //เป้าหมายตามแผน กลุ่มเป้าหมาย
+
+      // ลักษณะโครงการ
+      projectType: "",
+      projectCharacteristics: "",
+      projectDay: null,
+      projectNigth: null,
+      projectTechniques: "",
+      projectModal: null,
     });
 
     function clearFormAddProject() {
@@ -96,6 +105,14 @@ export const useDevelopmentDataStore = defineStore(
       formAddProject.actualGoals = [];
       formAddProject.actualPeoples = [];
 
+      // ลักษณะโครงการ
+      formAddProject.projectType = "";
+      formAddProject.projectCharacteristics = "";
+      formAddProject.projectDay = null;
+      formAddProject.projectNigth = null;
+      formAddProject.projectTechniques = "";
+      formAddProject.projectModal = null;
+
       /** การติดตามผลดารประเมิน*/
       formAddProject.metricType = "";
       formAddProject.indicators = "";
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 3d454207d..79aac489f 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 
 /**importType*/
 import type {
+  DataOption,
   ItemsMenu,
   NewPagination,
 } from "@/modules/15_development/interface/index/Main";
@@ -22,6 +23,7 @@ const router = useRouter();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 /** หัวตาราง */
+const rows = ref<ResListProject[]>([]); // ข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -82,10 +84,12 @@ const formQuery = reactive<FormQueryListProject>({
   year: new Date().getFullYear(),
   page: 1,
   pageSize: 10,
+  org: "1",
   keyword: "",
 });
+const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
+
 const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
-const rows = ref<ResListProject[]>([]); // ข้อมูลรายการ
 
 /** funciton  fetch รายการโครงการ*/
 function fetchListProject() {
@@ -134,6 +138,11 @@ watch(
   }
 );
 
+function fetchListProjectNew() {
+  formQuery.page = 1;
+  fetchListProject();
+}
+
 onMounted(() => {
   fetchListProject();
 });
@@ -145,50 +154,64 @@ onMounted(() => {
   </div>
   <q-card flat bordered class="q-pa-md">
     <q-toolbar style="padding: 0">
-      <datepicker
-        menu-class-name="modalfix"
-        v-model="formQuery.year"
-        :locale="'th'"
-        autoApply
-        year-picker
-        :enableTimePicker="false"
-        @update:model-value="fetchListProject"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            lazy-rules
-            outlined
-            :model-value="Number(formQuery.year) + 543"
-            :label="`${'ปีงบประมาณ'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
-      <q-toolbar-title>
-        <q-btn
-          flat
-          round
-          dense
-          icon="add"
-          color="primary"
-          @click="onClickAddOrView()"
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formQuery.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="fetchListProjectNew"
         >
-          <q-tooltip>เพิ่ม</q-tooltip>
-        </q-btn>
-      </q-toolbar-title>
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              lazy-rules
+              outlined
+              :model-value="Number(formQuery.year) + 543"
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-select
+          dense
+          outlined
+          v-model="formQuery.org"
+          :options="orgOp"
+          label="หน่วยงาน"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          @update:model-value="fetchListProjectNew"
+        />
+        <q-toolbar-title>
+          <q-btn
+            flat
+            round
+            dense
+            icon="add"
+            color="primary"
+            @click="onClickAddOrView()"
+          >
+            <q-tooltip>เพิ่ม</q-tooltip>
+          </q-btn>
+        </q-toolbar-title>
+      </div>
 
       <q-space />
       <div class="row q-gutter-sm">
@@ -222,7 +245,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            @keyup.enter="fetchListProject"
+            @keyup.enter="fetchListProjectNew"
           >
             <template v-slot:append>
               <q-icon v-if="formQuery.keyword == ''" name="search" />