เพิ่ม dialog detail

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

@@ -2,8 +2,11 @@
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
+
 /** importComponents*/
 import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
+import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -11,49 +14,55 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
 const stroe = useOrganizational();
 const $q = useQuasar();
 
-const listAdd = ref<any>([
+const listAdd = ref<ListMenu[]>([
   {
     label: "เพิ่มส่วนราชการ",
     icon: "add",
-    val: "ADD",
+    type: "ADD",
     color: "primary",
   },
   {
     label: "แก้ไขหน่วยงาน",
     icon: "edit",
-    val: "EDIT",
+    type: "EDIT",
     color: "info",
   },
   {
     label: "ลบหน่วยงาน",
     icon: "mdi-trash-can-outline",
-    val: "DEL",
+    type: "DEL",
     color: "red",
   },
   {
     label: "สำเนาหน่วยงาน",
     icon: "content_copy",
-    val: "COPY",
+    type: "COPY",
     color: "blue",
   },
   {
     label: "ดูประวัติหน่วยงาน",
     icon: "history",
-    val: "HISTORY",
+    type: "HISTORY",
     color: "purple",
   },
   {
     label: "จัดลำดับ",
     icon: "filter_list",
-    val: "SORT",
+    type: "SORT",
     color: "green-7",
   },
   {
     label: "แก้ไขสถานะ",
     icon: "rule",
-    val: "STATUS",
+    type: "STATUS",
     color: "yellow-9",
   },
+  {
+    label: "ดูรายละเอียด",
+    icon: "mdi-eye",
+    type: "DETAIL",
+    color: "blue-9",
+  },
 ]);
 
 const nodeTEST = defineModel<any>("nodeTree", { required: true });
@@ -231,6 +240,13 @@ function onClickAgency(level: string) {
   orgLevel.value = level;
 }
 
+const dialogDetail = ref<boolean>(false);
+function onClickDetail() {
+  console.log(dialogDetail.value);
+
+  dialogDetail.value = !dialogDetail.value;
+}
+
 watch(
   () => nodeTEST.value,
   () => {
@@ -347,10 +363,12 @@ onMounted(async () => {
                     clickable
                     v-close-popup
                     @click="
-                      item.val === 'EDIT'
+                      item.type === 'EDIT'
                         ? edit(prop.node.organizationId)
-                        : item.val === 'ADD'
+                        : item.type === 'ADD'
                         ? onClickAgency('TEST')
+                        : item.type === 'DETAIL'
+                        ? onClickDetail()
                         : null
                     "
                   >
@@ -380,6 +398,9 @@ onMounted(async () => {
     :close="onClickAgency"
     v-model:orgLevel="orgLevel"
   />
+
+  <!-- รายละเอียดโครงสร้าง -->
+  <DialogStructureDetail v-model:structure-detail="dialogDetail" />
 </template>
 
 <style scoped></style>