ปรับหน้าจัดการสิทธิ์

src/modules/02_users/views/04_roleOrganization.vue

@@ -16,6 +16,7 @@ import type {
 import type { QueryProfile } from "@/modules/02_users/interface/request/Main";
 
 import DialogAddPerson from "@/modules/02_users/components/RoleOrganization/DialogAddPerson.vue";
+import PopupPersonal from "@/modules/02_users/components/RoleOrganization/DialogPersonal.vue";
 
 const $q = useQuasar();
 const store = useDataStoreUser();
@@ -24,9 +25,34 @@ const { showLoader, hideLoader, messageError, success, dialogRemove } =
 
 /******* โครงสร้าง *******/
 const filter = ref<string>(""); // ค้นหาข้อมูลรายการโครงสร้าง
-const nodeTree = ref<DataTree[]>([]); // ข้อมูลรายการโครงสร้าง
+const nodeTree = ref<DataTree[]>([
+  {
+    ancestorDNA: "",
+    createdAt: "",
+    createdFullName: "",
+    createdUserId: "",
+    id: "",
+    lastUpdateFullName: "",
+    lastUpdateUserId: "",
+    lastUpdatedAt: "",
+    orgRevisionId: "",
+    orgRootCode: "",
+    orgRootFax: "",
+    orgRootName: "หน่วยงานทั้งหมด",
+    orgRootOrder: 0,
+    orgRootPhoneEx: "",
+    orgRootPhoneIn: "",
+    orgRootRank: "",
+    orgRootRankSub: "",
+    orgRootShortName: "",
+    responsibility: "",
+    isDeputy: false,
+  },
+]); // ข้อมูลรายการโครงสร้าง
 const expanded = ref<Array<string>>([]); // เปิดรายการโครงสร้าง
 const orgId = ref<string>(""); // id หน่วยงานที่เลือก
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
 
 /**
  * ฟังก์ชันดึงข้อมูลโครงสร้าง
@@ -38,7 +64,9 @@ async function fatchOrg() {
     .get(config.API.permissionOrg)
     .then(async (res) => {
       const data = await res.data.result;
-      nodeTree.value = data;
+
+      nodeTree.value.push(...data);
+
       if (data.length === 1) {
         selectedOrg(data[0].id);
       } else if (data.length > 1) {
@@ -61,7 +89,7 @@ async function fatchOrg() {
  */
 function selectedOrg(id: string) {
   orgId.value = id;
-  qureyBody.id = id;
+  qureyBody.id = id === "" ? null : id;
   qureyBody.searchKeyword = "";
   qureyBody.searchField = "fullName";
   qureyBody.page = 1;
@@ -85,47 +113,17 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: (row) => `${row.prefix}${row.firstName}  ${row.lastName}`,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "org",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "org",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "เลขที่ตำแหน่ง",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "posType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
     field: (row) =>
-      `${row.posType ? row.posType : "-"}  ${
-        row.posLevel ? `(${row.posLevel})` : ``
-      } `,
+      `${row.rank ? row.rank : row.prefix}${row.firstName}  ${row.lastName}`,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgNew",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบ",
+    sortable: true,
+    field: "orgNew",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -197,6 +195,15 @@ function updatePagination(newPagination: Pagination) {
   qureyBody.pageSize = newPagination.rowsPerPage;
 }
 
+function onOpenModalPersonal(id: string) {
+  personId.value = id;
+  modalPersonal.value = true;
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
  * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
@@ -218,7 +225,7 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    กำหนดสิทธิ์จัดการโครงสร้าง
+    กำหนดหน้าที่จัดการโครงสร้าง (แบบร่าง)
   </div>
   <q-card style="height: 100%">
     <q-card-section :horizontal="$q.screen.gt.sm">
@@ -379,6 +386,7 @@ onMounted(async () => {
                     >
                       <span class="text-weight-medium">{{ col.label }}</span>
                     </q-th>
+                    <q-th auto-width />
                   </q-tr>
                 </template>
                 <template v-slot:body="props">
@@ -404,6 +412,21 @@ onMounted(async () => {
                         {{ col.value ? col.value : "-" }}
                       </div>
                     </q-td>
+
+                    <q-td auto-width>
+                      <q-btn
+                        flat
+                        dense
+                        color="info"
+                        icon="info"
+                        round
+                        @click.pervent="
+                          onOpenModalPersonal(props.row.profileId)
+                        "
+                      >
+                        <q-tooltip>ดูข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
                   </q-tr>
                 </template>
                 <template v-slot:pagination="scope">
@@ -434,6 +457,12 @@ onMounted(async () => {
     v-model:org-id="orgId"
     :fetch-data="fetchListPerson"
   />
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
 </template>
 
 <style scoped>