fix ==> UI โปรดเกล้าฯ

src/modules/05_placement/components/AppointMent/DialogOrders.vue

@@ -214,6 +214,8 @@ const columns2 = ref<QTableProps["columns"]>([
         ? "เลื่อน"
         : val === "MOVE"
         ? "ย้าย"
+        : val === "ROYAL"
+        ? "โปรดเกล้าฯ"
         : "-";
     },
   },

src/modules/05_placement/views/06_appointPromoteMain.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import {
   checkPermission,
   checkPermissionList,
@@ -26,6 +26,7 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue"; // เ
 
 const $q = useQuasar();
 const router = useRouter();
+const route = useRoute();
 const store = useTransferDataStore();
 const { statusText, filterOption } = useTransferDataStore();
 const {
@@ -194,6 +195,8 @@ const columns = ref<QTableProps["columns"]>([
         ? "เลื่อน"
         : val === "MOVE"
         ? "ย้าย"
+        : val === "ROYAL"
+        ? "โปรดเกล้าฯ"
         : "-";
     },
   },
@@ -242,6 +245,121 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const getMenuItems = computed(() => {
+  return (row: PersonData) => {
+    const baseCondition = {
+      canUpdate:
+        checkPermission(route)?.attrIsUpdate &&
+        checkPermission(route)?.attrIsGet,
+      canDelete: checkPermission(route)?.attrIsDelete,
+      canView: checkPermission(route)?.attrIsGet,
+      isNotDone: row.status !== "REPORT" && row.status !== "DONE",
+    };
+
+    const allMenuItems = [
+      {
+        id: "appoint",
+        label: "เลือกหน่วยงานที่รับแต่งตั้ง",
+        icon: "mdi-bookmark-outline",
+        color: "primary",
+        type: "APPOINT",
+        condition: false,
+      },
+      {
+        id: "slip",
+        label: "เลือกหน่วยงานที่รับเลื่อน",
+        icon: "mdi-bookmark-outline",
+        color: "primary",
+        type: "SLIP",
+        condition: false,
+      },
+      {
+        id: "move",
+        label: "เลือกหน่วยงานที่รับย้าย",
+        icon: "mdi-bookmark-outline",
+        color: "primary",
+        type: "MOVE",
+        condition: false,
+      },
+      {
+        id: "royal",
+        label: "เลือกหน่วยงานที่โปรดเกล้าฯ",
+        icon: "mdi-bookmark-outline",
+        color: "primary",
+        type: "ROYAL",
+        condition: false,
+      },
+      {
+        id: "detail",
+        label: "รายละเอียด",
+        icon: "mdi-eye",
+        color: "info",
+        type: "DETAIL",
+        condition: baseCondition.canView,
+      },
+      {
+        id: "delete",
+        label: "ลบ",
+        icon: "mdi-delete",
+        color: "red",
+        type: "DELETE",
+        condition: baseCondition.canDelete && baseCondition.isNotDone,
+      },
+    ];
+
+    // กำหนดเงื่อนไขตามประเภทและระดับตำแหน่ง
+    const posType = row.posTypeNameOld?.toLowerCase() || "";
+    const posLevel = row.posLevelNameOld?.toLowerCase() || "";
+
+    // หาเมนูแต่ละประเภท
+    const appointItem = allMenuItems.find((item) => item.id === "appoint");
+    const slipItem = allMenuItems.find((item) => item.id === "slip");
+    const moveItem = allMenuItems.find((item) => item.id === "move");
+    const royalItem = allMenuItems.find((item) => item.id === "royal");
+
+    // ประเภทวิชาการ ระดับเชี่ยวชาญ - แสดง "ย้าย" และ "โปรดเกล้าฯ"
+    if (posType === "วิชาการ" && posLevel === "เชี่ยวชาญ") {
+      if (moveItem)
+        moveItem.condition = baseCondition.canUpdate && baseCondition.isNotDone;
+      if (royalItem)
+        royalItem.condition =
+          baseCondition.canUpdate && baseCondition.isNotDone;
+    }
+    // ประเภทบริหาร ระดับต้น - แสดง "ย้าย" และ "โปรดเกล้าฯ"
+    else if (posType === "บริหาร" && posLevel === "ต้น") {
+      if (moveItem)
+        moveItem.condition = baseCondition.canUpdate && baseCondition.isNotDone;
+      if (royalItem)
+        royalItem.condition =
+          baseCondition.canUpdate && baseCondition.isNotDone;
+    }
+    // ประเภทวิชาการ ทรงคุณวุฒิ - แสดงเฉพาะ "โปรดเกล้าฯ"
+    else if (posType === "วิชาการ" && posLevel === "ทรงคุณวุฒิ") {
+      if (royalItem)
+        royalItem.condition =
+          baseCondition.canUpdate && baseCondition.isNotDone;
+    }
+    // ประเภทบริหาร ระดับสูง - แสดงเฉพาะ "โปรดเกล้าฯ"
+    else if (posType === "บริหาร" && posLevel === "สูง") {
+      if (royalItem)
+        royalItem.condition =
+          baseCondition.canUpdate && baseCondition.isNotDone;
+    }
+    // อื่นๆ - แสดง "แต่งตั้ง", "เลื่อน", "ย้าย"
+    else {
+      if (appointItem)
+        appointItem.condition =
+          baseCondition.canUpdate && baseCondition.isNotDone;
+      if (slipItem)
+        slipItem.condition = baseCondition.canUpdate && baseCondition.isNotDone;
+      if (moveItem)
+        moveItem.condition = baseCondition.canUpdate && baseCondition.isNotDone;
+    }
+
+    return allMenuItems.filter((item) => item.condition);
+  };
+});
+
 /** fetch รายการแต่งตั้ง-เลื่อน-ย้าย*/
 async function fecthlistappointment() {
   showLoader();
@@ -376,6 +494,24 @@ async function onSearch() {
   );
 }
 
+// ฟังก์ชันจัดการการคลิกเมนู
+function handleMenuClick(row: PersonData, type: string) {
+  switch (type) {
+    case "APPOINT":
+    case "SLIP":
+    case "MOVE":
+    case "ROYAL":
+      openModalTree(row, type);
+      break;
+    case "DETAIL":
+      nextPage(row.id);
+      break;
+    case "DELETE":
+      clickDelete(row.id);
+      break;
+  }
+}
+
 /** ทำงานเมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
   await fecthlistappointment();
@@ -491,7 +627,7 @@ onMounted(async () => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props">
-                <q-td auto-width>
+                <!-- <q-td auto-width>
                   <q-btn
                     v-if="
                       (props.row.status !== 'REPORT' &&
@@ -614,6 +750,51 @@ onMounted(async () => {
                       </q-list>
                     </q-menu>
                   </q-btn>
+                </q-td> -->
+
+                <q-td auto-width>
+                  <q-btn
+                    v-if="
+                      (props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE' &&
+                        checkPermission($route)?.attrIsGet) ||
+                      (checkPermission($route)?.attrIsDelete &&
+                        props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE') ||
+                      (checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsDelete) ||
+                      checkPermission($route)?.attrIsGet
+                    "
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 250px">
+                        <q-item
+                          v-for="item in getMenuItems(props.row)"
+                          :key="item.id"
+                          clickable
+                          v-close-popup
+                          @click="handleMenuClick(props.row, item.type)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              :color="item.color"
+                              size="xs"
+                              :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-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">