From 9f0aa6487c35e59f64da1239e21272264a744280 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 18 Apr 2024 15:07:01 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20=3D>=20=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   | 128 ++--
 .../15_development/interface/request/Main.ts  |  11 +
 src/modules/15_development/views/MainPage.vue | 584 ++++++++++--------
 3 files changed, 402 insertions(+), 321 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index e2f80d0ac..187812b5b 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -40,7 +40,6 @@ const formData = reactive<FormBasicinfo>({
 
 const orgName = ref<string>("");
 const node = ref<any>([]);
-const nodeId = ref<string>("");
 const filter = ref<string>("");
 const expanded = ref<any>([]);
 
@@ -56,15 +55,18 @@ async function fetchData(id: string) {
       formData.objective = data.objective;
       formData.nodeId = data.nodeId;
 
-      const test = await searchAndReplace(node.value, formData?.nodeId);
-      console.log(test);
-
-      const parts = test.orgName.split("/");
-      for (let i = 0; i < parts.length; i++) {
-        const arrangedParts = parts[i];
-        expanded.value.push(arrangedParts);
+      if (node.value && formData?.nodeId) {
+        const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
+        if (nodeTree) {
+          expanded.value = [];
+          const parts = nodeTree?.orgName.split("/");
+          for (let i = 0; i < parts.length; i++) {
+            const arrangedParts = parts[i - 1];
+            expanded.value.push(arrangedParts);
+          }
+          updateSelected(nodeTree);
+        }
       }
-      updateSelected(test);
     })
     .catch((err) => {
       messageError($q, err);
@@ -129,9 +131,6 @@ async function fetchTree(id: string) {
 }
 
 function updateSelected(data: any) {
-  console.log(expanded.value);
-
-  nodeId.value = data.orgTreeId;
   orgName.value = data.orgTreeName;
   formData.node = data.orgLevel;
   formData.nodeId = data.orgTreeId;
@@ -163,60 +162,54 @@ onMounted(async () => {
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card bordered class="col-12 row caedNone">
       <div class="col-xs-12 col-sm-3 row">
-        <div class="col-12 row no-wrap bg-grey-1">
-          <div class="col-12 q-py-sm q-px-sm">
-            <q-card-section
-              class="q-pt-none q-pa-sm scroll"
-              style="max-height: 65vh"
+        <div class="col-12 row no-wrap">
+          <div class="col-12 q-py-sm q-px-sm q-gutter-sm">
+            <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-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filter"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
             >
-              <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-tree
-                dense
-                :nodes="node"
-                node-key="orgTreeName"
-                label-key="orgTreeName"
-                v-model:expanded="expanded"
-                :filter="filter"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    clickable
-                    @click.stop="updateSelected(prop.node)"
-                    :active="formData.nodeId === prop.node.orgTreeId"
-                    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 class="text-weight-light text-grey-8">
-                        {{
-                          prop.node.orgCode == null ? null : prop.node.orgCode
-                        }}
-                        {{
-                          prop.node.orgTreeShortName == null
-                            ? null
-                            : prop.node.orgTreeShortName
-                        }}
-                      </div>
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  @click.stop="updateSelected(prop.node)"
+                  :active="formData.nodeId === prop.node.orgTreeId"
+                  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>
-                  </q-item>
-                </template>
-              </q-tree>
-            </q-card-section>
+                    <div class="text-weight-light text-grey-8">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
           </div>
 
           <div class="col-12 row">
@@ -344,6 +337,13 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.tree-container {
+  overflow: auto;
+  height: 70vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
 .my-list-link {
   color: rgb(118, 168, 222);
   border-radius: 5px;
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index 610fa1921..ddb7eade0 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -5,6 +5,8 @@ interface FormQueryListProject {
   org: string;
   keyword: string;
   status: string;
+  node: number | null;
+  nodeId: string | null;
 }
 
 interface FormBasicinfo {
@@ -230,6 +232,14 @@ interface PlannedGoals {
   amount: number | null;
 }
 
+interface FormProject {
+  year: number | null;
+  projectName: "";
+  node: number | null;
+  nodeId: string | null;
+  orgRevisionId: string | null;
+}
+
 export type {
   FormQueryListProject,
   FormAddProject,
@@ -242,4 +252,5 @@ export type {
   FormAddHistoryProject,
   FormAddHistoryEmployee,
   FormGroupTargetPlannedGoal,
+  FormProject,
 };
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 9f36cc244..06a0042f4 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -2,19 +2,21 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+import genReportXLSX from "@/plugins/genreportxlsx";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import DialogHeader from "@/components/DialogHeader.vue";
 
-import genReportXLSX from "@/plugins/genreportxlsx";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /**importType*/
 import type {
   DataOption,
-  ItemsMenu,
   NewPagination,
 } from "@/modules/15_development/interface/index/Main";
-import type { FormQueryListProject } from "@/modules/15_development/interface/request/Main";
+import type {
+  FormQueryListProject,
+  FormProject,
+} from "@/modules/15_development/interface/request/Main";
 import type { ResListProject } from "@/modules/15_development/interface/response/Main";
 
 /** importStore*/
@@ -23,11 +25,14 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogMessageNotify } =
+  useCounterMixin();
 
 const ticked = ref<any>([]);
 const node = ref<any>([]);
 const expanded = ref<any>([]);
+const filter = ref<string>("");
+const filterMain = ref<string>("");
 const splitterModel = ref<number>(60);
 const modal = ref<boolean>(false);
 const projectName = ref<string>("");
@@ -68,28 +73,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
 
-/** เมนูดาวน์โหลด*/
-const itemDownload = ref<ItemsMenu[]>([
-  {
-    label: "Excel",
-    value: "EXCEL",
-    icon: "mdi-file-pdf-box",
-    color: "green",
-  },
-  {
-    label: "ดาวน์โหลด 2",
-    value: "PDF",
-    icon: "mdi-file-table",
-    color: "red",
-  },
-  {
-    label: "ดาวน์โหลด 3",
-    value: "WORD",
-    icon: "mdi-file-word",
-    color: "blue",
-  },
-]);
-
 const statusOpt = ref<DataOption[]>([
   { id: "ONGOING", name: "กำลังดำเนินการ" },
   { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
@@ -102,8 +85,9 @@ const formQuery = reactive<FormQueryListProject>({
   org: "1",
   keyword: "",
   status: "ONGOING",
+  node: null,
+  nodeId: null,
 });
-const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
 
 const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
@@ -113,7 +97,7 @@ function fetchListProject() {
   http
     .get(
       config.API.developmentMain +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -188,28 +172,30 @@ function closeDialog() {
   projectName.value = "";
 }
 
+const formProject = reactive<FormProject>({
+  year: null,
+  projectName: "",
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
+});
+
 /** dialog submit */
 function onSubmit() {
-  http
-    .post(config.API.developmentMain,{
-      year:year.value,
-      projectName:projectName.value
-    })
-    .then((res) => {
-      closeDialog();
-      router.push(`/development/${res.data.result}`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
-}
-
-function updateTicked(val: any) {
-  console.log(expanded.value);
-
-  ticked.value = [];
-  ticked.value.push(val[val.length - 1]);
+  if (formProject.nodeId) {
+    http
+      .post(config.API.developmentMain, formProject)
+      .then((res) => {
+        closeDialog();
+        router.push(`/development/${res.data.result}`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่รับผิดชอบ");
+  }
 }
 
 function fetchActive() {
@@ -242,6 +228,24 @@ async function fetchTree(id: string) {
     });
 }
 
+function updateSelected(data: any) {
+  formProject.node = data.orgLevel;
+  formProject.nodeId = data.orgTreeId;
+  formProject.orgRevisionId = data.orgRevisionId;
+}
+
+function updateSelectedTreeMain(data: any) {
+  if (formQuery.node === data.orgLevel && formQuery.nodeId === data.orgTreeId) {
+    formQuery.node = null;
+    formQuery.nodeId = null;
+  } else {
+    formQuery.node = data.orgLevel;
+    formQuery.nodeId = data.orgTreeId;
+  }
+
+  fetchListProjectNew();
+}
+
 onMounted(() => {
   fetchActive();
   fetchListProject();
@@ -252,218 +256,251 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
   </div>
-  <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <div class="row q-gutter-sm">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formQuery.year"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-          style="width: 150px"
-          @update:model-value="fetchListProjectNew"
-        >
-          <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="
-                formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
-              "
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-if="formQuery.year" v-slot:append>
+  <q-card bordered class="col-12 row caedNone">
+    <div class="col-xs-12 col-sm-3 row">
+      <div class="col-12 row no-wrap">
+        <div class="col-12 q-py-sm q-px-sm">
+          <div class="q-gutter-sm">
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+              <template v-slot:append>
                 <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (formQuery.year = 0), fetchListProjectNew()
-                  "
+                  v-if="filterMain !== ''"
+                  name="clear"
                   class="cursor-pointer"
+                  @click="filterMain = ''"
                 />
-              </template>
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+                <q-icon v-else name="search" color="grey-5" />
               </template>
             </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
-          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="onAdd()">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </q-toolbar-title>
-      </div>
 
-      <q-space />
-      <div class="row q-gutter-sm">
-        <div>
-          <q-btn
-            flat
-            round
-            dense
-            icon="mdi-arrow-down-bold-circle-outline"
-            color="blue"
-            @click="onDownload"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <!-- <q-btn
-            flat
-            round
-            color="blue"
-            icon="mdi-arrow-down-bold-circle-outline"
-          >
-            <q-menu>
-              <q-list style="min-width: 100px" dense>
+            <q-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filterMain"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="formQuery.nodeId"
+            >
+              <template v-slot:default-header="prop">
                 <q-item
                   clickable
-                  v-close-popup
-                  v-for="items in itemDownload"
-                  :key="items.value"
-                  @click="onDownload(items.value)"
+                  @click.stop="updateSelectedTreeMain(prop.node)"
+                  :active="formQuery.nodeId === prop.node.orgTreeId"
+                  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"
                 >
-                  <q-item-section avatar>
-                    <q-icon :color="items.color" :name="items.icon" />
-                  </q-item-section>
-                  <q-item-section :class="`text-${items.color}`">{{
-                    items.label
-                  }}</q-item-section>
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light text-grey-8">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
                 </q-item>
-              </q-list>
-            </q-menu>
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn> -->
+              </template>
+            </q-tree>
+          </div>
         </div>
-        <div>
-          <q-input
-            standout
-            dense
-            v-model="formQuery.keyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keyup.enter="fetchListProjectNew"
-          >
-            <template v-slot:append>
-              <q-icon v-if="formQuery.keyword == ''" name="search" />
-              <q-icon
-                v-if="formQuery.keyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="
-                  (formQuery.keyword = ''),
-                    fetchListProject(),
-                    (formQuery.page = 1)
-                "
-              />
-            </template>
-          </q-input>
-        </div>
-        <div>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-          />
+        <div class="col-12 row">
+          <q-separator :vertical="!$q.screen.lt.md" />
         </div>
       </div>
-    </q-toolbar>
-
-    <div class="col-12">
-      <d-table
-        for="table"
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        row-key="id"
-        flat
-        bordered
-        dense
-        class="custom-header-table"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="onClickAddOrView(true, props.row.id)"
+    </div>
+    <div class="col-xs-12 col-sm-9 q-pa-md row">
+      <div class="col-12">
+        <q-toolbar style="padding: 0">
+          <div class="row q-gutter-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formQuery.year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              style="width: 150px"
+              @update:model-value="fetchListProjectNew"
             >
-              <div class="table_ellipsis">
-                {{ col.value ? col.value : "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="formQuery.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchListProject"
-          ></q-pagination>
-        </template>
-      </d-table>
+              <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="
+                    formQuery.year === 0
+                      ? 'ทั้งหมด'
+                      : Number(formQuery.year) + 543
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-if="formQuery.year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="
+                        (formQuery.year = 0), fetchListProjectNew()
+                      "
+                      class="cursor-pointer"
+                    />
+                  </template>
+                  <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.status"
+              :options="statusOpt"
+              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="onAdd()"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </q-toolbar-title>
+          </div>
+          <q-space />
+          <div class="row q-gutter-sm">
+            <div>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-arrow-down-bold-circle-outline"
+                color="blue"
+                @click="onDownload"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+              <q-input
+                standout
+                dense
+                v-model="formQuery.keyword"
+                ref="filterRef"
+                outlined
+                placeholder="ค้นหา"
+                @keyup.enter="fetchListProjectNew"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="formQuery.keyword == ''" name="search" />
+                  <q-icon
+                    v-if="formQuery.keyword !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="
+                      (formQuery.keyword = ''),
+                        fetchListProject(),
+                        (formQuery.page = 1)
+                    "
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </div>
+        </q-toolbar>
+
+        <div class="col-12">
+          <d-table
+            for="table"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            @update:pagination="updatePagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  @click="onClickAddOrView(true, props.row.id)"
+                >
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="formQuery.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fetchListProject"
+              ></q-pagination>
+            </template>
+          </d-table>
+        </div>
+      </div>
     </div>
   </q-card>
 
@@ -479,20 +516,34 @@ onMounted(() => {
           <q-splitter v-model="splitterModel" disable>
             <template v-slot:before>
               <q-scroll-area visible style="height: 60vh">
+                <div class="q-pa-md">
+                  <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>
+                </div>
                 <q-tree
-                  class="q-pa-sm"
                   dense
                   :nodes="node"
-                  node-key="orgName"
+                  node-key="orgTreeName"
                   label-key="labelName"
                   v-model:expanded="expanded"
-                  tick-strategy="strict"
-                  v-model:ticked="ticked"
-                  @update:ticked="updateTicked"
+                  :filter="filter"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
                 >
                   <template v-slot:default-header="prop">
                     <q-item
                       clickable
+                      @click.stop="updateSelected(prop.node)"
+                      :active="formProject.nodeId === prop.node.orgTreeId"
                       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"
                     >
@@ -522,7 +573,7 @@ onMounted(() => {
                 <div class="col-12">
                   <datepicker
                     menu-class-name="modalfix"
-                    v-model="year"
+                    v-model="formProject.year"
                     :locale="'th'"
                     autoApply
                     year-picker
@@ -538,13 +589,17 @@ onMounted(() => {
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
                         outlined
-                        :model-value="year === 0 ? null : Number(year) + 543"
+                        :model-value="
+                          formProject.year === null
+                            ? null
+                            : Number(formProject.year) + 543
+                        "
                         :label="`${'ปีงบประมาณ'}`"
                       >
-                        <template v-if="year" v-slot:append>
+                        <template v-if="formProject.year" v-slot:append>
                           <q-icon
                             name="cancel"
-                            @click.stop.prevent="year = 0"
+                            @click.stop.prevent="formProject.year = null"
                             class="cursor-pointer"
                           />
                         </template>
@@ -562,7 +617,7 @@ onMounted(() => {
                 </div>
                 <div class="col-12">
                   <q-input
-                    v-model="projectName"
+                    v-model="formProject.projectName"
                     label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
                     dense
                     outlined
@@ -591,4 +646,19 @@ onMounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.tree-container {
+  overflow: auto;
+  height: 80vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
 </style>