ปรับฟอร์มบันทึกโครงการตาม tab

src/modules/15_development/views/MainPage.vue

@@ -81,6 +81,10 @@ const itemDownload = ref<ItemsMenu[]>([
   },
 ]);
 
+const statusOpt = ref<DataOption[]>([
+  { id: "ONGOING", name: "กำลังดำเนินการ" },
+  { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
+]);
 /** formQuery*/
 const formQuery = reactive<FormQueryListProject>({
   year: new Date().getFullYear(),
@@ -88,6 +92,7 @@ const formQuery = reactive<FormQueryListProject>({
   pageSize: 10,
   org: "1",
   keyword: "",
+  status: "ONGOING",
 });
 const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
 
@@ -99,7 +104,7 @@ function fetchListProject() {
   http
     .get(
       config.API.developmentMain +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -183,6 +188,7 @@ onMounted(() => {
           autoApply
           year-picker
           :enableTimePicker="false"
+          style="width: 150px"
           @update:model-value="fetchListProjectNew"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
@@ -219,6 +225,18 @@ onMounted(() => {
             </q-input>
           </template>
         </datepicker>
+        <q-select
+          dense
+          outlined
+          v-model="formQuery.status"
+          :options="statusOpt"
+          label="สถานะโครงการ"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          @update:model-value="fetchListProjectNew"
+        />
         <q-select
           dense
           outlined