From ab4a83eb2e6518a6b2f592f90b8fc33edac0ae83 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 18 Apr 2024 12:21:10 +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=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3/=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B9=E0=B8=95=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   | 349 ++++++++++++------
 .../15_development/interface/request/Main.ts  |   4 +-
 src/modules/15_development/views/History.vue  |   8 +-
 3 files changed, 249 insertions(+), 112 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 3f15b64bd..e2f80d0ac 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -30,21 +30,19 @@ const projectId = ref<string>(route.params.id.toLocaleString());
 
 const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
-  org: "",
   projectName: "",
   reason: "",
   objective: "",
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
 });
 
-const rows = ref<FormBasicinfo[]>([]);
-
-const modalDialogSelect = ref<boolean>(false);
-function selectAgency() {
-  modalDialogSelect.value = true;
-}
-function updateAgency(name: string) {
-  formData.org = name;
-}
+const orgName = ref<string>("");
+const node = ref<any>([]);
+const nodeId = ref<string>("");
+const filter = ref<string>("");
+const expanded = ref<any>([]);
 
 async function fetchData(id: string) {
   showLoader();
@@ -56,6 +54,17 @@ async function fetchData(id: string) {
       formData.reason = data.reason;
       formData.projectName = data.projectName;
       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);
+      }
+      updateSelected(test);
     })
     .catch((err) => {
       messageError($q, err);
@@ -67,12 +76,7 @@ async function fetchData(id: string) {
 
 async function editData(id: string) {
   await http
-    .put(config.API.developmentMainTab("tab1", id), {
-      year: formData.year,
-      reason: formData.reason,
-      projectName: formData.projectName,
-      objective: formData.objective,
-    })
+    .put(config.API.developmentMainTab("tab1", id), formData)
     .then(() => {
       fetchData(id);
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -93,106 +97,229 @@ function onSubmit() {
   });
 }
 
+function fetchActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchTree(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+async function fetchTree(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then(async (res) => {
+      const data = res.data.result;
+      node.value = data;
+      fetchData(projectId.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateSelected(data: any) {
+  console.log(expanded.value);
+
+  nodeId.value = data.orgTreeId;
+  orgName.value = data.orgTreeName;
+  formData.node = data.orgLevel;
+  formData.nodeId = data.orgTreeId;
+  formData.orgRevisionId = data.orgRevisionId;
+}
+
+function searchAndReplace(orgTreeData: any, treeId: string | null) {
+  for (let orgTree of orgTreeData) {
+    if (orgTree.orgTreeId === treeId) {
+      return orgTree;
+    }
+    let foundOrg: any = searchAndReplace(orgTree.children, treeId);
+    if (foundOrg) {
+      return foundOrg;
+    }
+  }
+  return null;
+}
+
 onMounted(async () => {
-  fetchData(projectId.value);
+  fetchActive();
+  // setTimeout(() => {
+  //   fetchData(projectId.value);
+  // }, 500);
 });
 </script>
 
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <div class="row col-12 q-col-gutter-md q-pa-md">
-      <div class="col-xs-6 col-sm-2 col-md-2">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.year"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              class="inputgreen"
-              :model-value="Number(formData.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
+    <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"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
+              <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>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card-section>
+          </div>
+
+          <div class="col-12 row">
+            <q-separator :vertical="!$q.screen.lt.md" />
+          </div>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-9 q-pa-md row">
+        <div class="col-12 row">
+          <div class="col-12">
+            <div class="row col-12 q-col-gutter-md q-pa-md">
+              <div class="col-xs-6 col-sm-2 col-md-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.year"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
                 >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <div class="col-xs-10 col-sm-10 col-md-10">
-        <q-input
-          dense
-          outlined
-          class="inputgreen"
-          v-model="formData.org"
-          inputgreen
-          label="ชื่อหน่วยงานที่รับผิดชอบ"
-          hide-bottom-space
-          lazy-rules
-          @click="selectAgency"
-        />
-        <!-- :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
-        ]" -->
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          class="inputgreen"
-          dense
-          v-model="formData.projectName"
-          label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
-          rows="6"
-          type="textarea"
-          hide-bottom-space
-          :rules="[
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      class="inputgreen"
+                      :model-value="Number(formData.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>
+              </div>
+              <div class="col-xs-10 col-sm-10 col-md-10">
+                <q-input
+                  dense
+                  outlined
+                  class="inputgreen"
+                  v-model="orgName"
+                  inputgreen
+                  label="ชื่อหน่วยงานที่รับผิดชอบ"
+                  hide-bottom-space
+                  lazy-rules
+                  readonly
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  v-model="formData.projectName"
+                  label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+                  rows="6"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
           ]"
-        />
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  v-model="formData.reason"
+                  label="หลักการและเหตุผล"
+                  rows="6"
+                  hide-bottom-space
+                  type="textarea"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  v-model="formData.objective"
+                  label="วัตถุประสงค์"
+                  rows="6"
+                  hide-bottom-space
+                  type="textarea"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          class="inputgreen"
-          dense
-          v-model="formData.reason"
-          label="หลักการและเหตุผล"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          class="inputgreen"
-          dense
-          v-model="formData.objective"
-          label="วัตถุประสงค์"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-        />
-      </div>
-    </div>
+    </q-card>
 
     <q-separator />
     <div class="text-right q-pa-sm">
@@ -210,10 +337,18 @@ onMounted(async () => {
     </div>
   </q-form>
 
-  <DialogSelectAgency
+  <!-- <DialogSelectAgency
     v-model:modal="modalDialogSelect"
     @update:updateAgency="updateAgency"
-  />
+  /> -->
 </template>
 
-<style scoped></style>
+<style scoped>
+.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>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index 9becd25ac..ab597d054 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -9,10 +9,12 @@ interface FormQueryListProject {
 
 interface FormBasicinfo {
   year: number;
-  org: string;
   projectName: string;
   reason: string;
   objective: string;
+  node: number | null;
+  nodeId: string | null;
+  orgRevisionId: string | null;
 }
 
 interface FormGroupTarget {
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 5d12a9afb..28f4bf4ba 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   DataOption,
   FormFilter,
 } from "@/modules/15_development/interface/index/Main";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
 
 import genReportXLSX from "@/plugins/genreportxlsx";