Merge branch 'develop' into devTee

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

@@ -86,6 +86,10 @@ const itemDownload = ref<ItemsMenu[]>([
   },
 ]);
 
+const statusOpt = ref<DataOption[]>([
+  { id: "ONGOING", name: "กำลังดำเนินการ" },
+  { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
+]);
 /** formQuery*/
 const formQuery = reactive<FormQueryListProject>({
   year: new Date().getFullYear(),
@@ -93,6 +97,7 @@ const formQuery = reactive<FormQueryListProject>({
   pageSize: 10,
   org: "1",
   keyword: "",
+  status: "ONGOING",
 });
 const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
 
@@ -104,7 +109,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;
@@ -203,6 +208,7 @@ onMounted(() => {
           autoApply
           year-picker
           :enableTimePicker="false"
+          style="width: 150px"
           @update:model-value="fetchListProjectNew"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
@@ -239,6 +245,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

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const nodes = ref<any>([
+  {
+    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
+    children: [
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        children: [
+          {
+            orgTreeName: "ยุทธศาสตร์ที่ 2",
+            children: [
+              {
+                orgTreeName: "ยุทธศาสตร์ที่ 3",
+                children: [
+                  {
+                    orgTreeName: "ยุทธศาสตร์ที่ 4",
+                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        children: [
+          {
+            orgTreeName: "ยุทธศาสตร์ที่ 2",
+            children: [
+              {
+                orgTreeName: "ยุทธศาสตร์ที่ 3",
+                children: [
+                  {
+                    orgTreeName: "ยุทธศาสตร์ที่ 4",
+                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
+    children: [
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
+      },
+    ],
+  },
+]);
+const filter = ref<string>("");
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const expanded = ref<Array<any>>([]);
+const nodeId = ref<string>("");
+
+function updateSelected(data: any) {
+  console.log(data);
+  nodeId.value = data.orgTreeName;
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
+  <q-card flat bordered class="q-pa-md">
+    <div class="row q-col-gutter-sm q-pl-sm">
+      <q-toolbar class="text-primary">
+        <q-btn dense flat round color="primary" icon="add">
+          <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
+        </q-btn>
+
+        <q-input dense outlined v-model="filter" label="ค้นหา">
+          <template v-slot:append>
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="filter = ''"
+            />
+            <q-icon v-else name="search" color="grey-5" />
+          </template>
+        </q-input>
+      </q-toolbar>
+    </div>
+    <q-tree
+      class="q-pa-sm q-gutter-sm"
+      dense
+      :nodes="nodes"
+      node-key="orgTreeName"
+      label-key="orgTreeName"
+      :filter="filter"
+      :no-results-label="notFound"
+      :no-nodes-label="noData"
+      v-model:expanded="expanded"
+    >
+      <template v-slot:default-header="prop">
+        <q-item
+          clickable
+          :active="nodeId == prop.node.orgTreeName"
+          @click.stop="updateSelected(prop.node)"
+          active-class="my-list-link text-primary text-weight-medium"
+          class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+        >
+          <div>
+            <div class="text-weight-medium">
+              {{ prop.node.orgTreeName }}
+            </div>
+          </div>
+        </q-item>
+      </template>
+    </q-tree>
+  </q-card>
+</template>
+
+<style scoped></style>