ปรับ Tree

src/modules/02_organizationalNew/components/DialogMovePos.vue

@@ -10,6 +10,7 @@ import type {
   PosMaster2,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
 import type { MovePos } from "@/modules/02_organizationalNew/interface/request/organizational";
+import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
 
@@ -61,8 +62,9 @@ function resetFilter() {
   filterRef.value.focus();
 }
 
-function updateSelected(orgLevel: number) {
-  levelTree.value = orgLevel;
+function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
 }
 
 const isDisable = computed(() => {
@@ -115,6 +117,10 @@ watch(
     if (modal.value && props.type === "SINGER") {
       const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
       selectedFilter.value = data;
+      selectedTree.value = "";
+    } else {
+      selectedFilter.value = [];
+      selectedTree.value = "";
     }
   }
 );
@@ -225,13 +231,16 @@ watch(
               :filter="filterTree"
               no-results-label="ไม่พบข้อมูลที่ค้นหา"
               no-nodes-label="ไม่มีข้อมูล"
-              v-model:selected="selectedTree"
             >
               <template v-slot:default-header="prop">
                 <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                <div
-                  class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                  @click="updateSelected(prop.node.orgLevel)"
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @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">
@@ -246,7 +255,7 @@ watch(
                       }}
                     </div>
                   </div>
-                </div>
+                </q-item>
               </template>
             </q-tree>
           </q-card>
@@ -271,4 +280,12 @@ watch(
   </q-dialog>
 </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>