เพิ่ม dialog detail

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

@@ -3,9 +3,11 @@ import { ref } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
 
 /** importComponents*/
 import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
+import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -13,6 +15,14 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
 const showData = defineModel<boolean>("showData", { required: true });
 const stroe = useOrganizational();
 const filter = ref<string>("");
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "ดูรายละเอียด",
+    icon: "mdi-eye",
+    type: "VIEWDETIAL",
+    color: "primary",
+  },
+]);
 const document = ref<any>([
   {
     name: "บัญชี 1",
@@ -83,12 +93,25 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([]);
+const rows = ref<any>([
+  {
+    noPosition: "00011",
+    namePosition: "กองบริหารทั่วไป",
+    typePosition: "ทั่วไป",
+    levelPositoion: " ระดับกอง",
+    isStatus: "ไม่มี",
+  },
+]);
 
 const dialogPosition = ref<boolean>(false);
 function onClickPosition() {
   dialogPosition.value = !dialogPosition.value;
 }
+
+const dialogDetail = ref<boolean>(false);
+function onClickViewDetail() {
+  dialogDetail.value = !dialogDetail.value;
+}
 </script>
 <template>
   <!-- TOOLBAR -->
@@ -164,6 +187,7 @@ function onClickPosition() {
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
+          <q-th auto-width></q-th>
         </q-tr>
       </template>
       <template v-slot:body="props">
@@ -177,6 +201,37 @@ function onClickPosition() {
               {{ col.value }}
             </div>
           </q-td>
+          <q-td>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+            >
+              <q-menu>
+                <q-list
+                  dense
+                  style="min-width: 200px"
+                  v-for="(item, index) in listMenu"
+                  :key="index"
+                >
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'VIEWDETIAL' ? onClickViewDetail() : null
+                    "
+                  >
+                    <q-item-section avatar>
+                      <q-icon :color="item.color" :name="item.icon" />
+                    </q-item-section>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
         </q-tr>
       </template>
       <!-- <template v-slot:pagination="scope">
@@ -194,6 +249,9 @@ function onClickPosition() {
   </div>
 
   <DialogFormPosotion :modal="dialogPosition" :close="onClickPosition" />
+
+  <!-- รายละเอียดตำแหน่ง -->
+  <DialogPositionDetail v-model:position-detail="dialogDetail" />
 </template>
 
 <style scoped></style>