โครงการ => หน่วยงาน

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;