ปรับโครงสร้าง

src/modules/02_users/views/03_permissionsView.vue

@@ -19,6 +19,7 @@ import type {
 
 /** importComponents*/
 import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
+import PopupPersonal from "@/modules/02_users/components/RoleOrganization/DialogPersonal.vue";
 
 /**
  * use
@@ -30,7 +31,39 @@ const { showLoader, hideLoader, messageError, success, dialogRemove } =
 
 /** Tree*/
 const filter = ref<string>(""); // ค้นหาข้อมูลโครงาสร้าง
-const nodes = ref<Array<NodeTree[]>>([]); // ข้อมูลโครงสร้าง
+const nodes = ref<Array<NodeTree>>([
+  {
+    labelName: "",
+    orgCode: "",
+    orgLevel: 0,
+    orgName: "",
+    orgRevisionId: "",
+    orgRootName: "",
+    orgTreeCode: "",
+    orgTreeFax: "",
+    orgTreeId: "",
+    orgTreeName: "หน่วยงานทั้งหมด",
+    orgTreeOrder: 0,
+    orgTreePhoneEx: "",
+    orgTreePhoneIn: "",
+    orgTreeRank: "",
+    orgTreeRankSub: "",
+    orgTreeShortName: "",
+    responsibility: "",
+    totalPosition: 0,
+    totalPositionCurrentUse: 0,
+    totalPositionCurrentVacant: 0,
+    totalPositionNextUse: 0,
+    totalPositionNextVacant: 0,
+    totalRootPosition: 0,
+    totalRootPositionCurrentUse: 0,
+    totalRootPositionCurrentVacant: 0,
+    totalRootPositionNextUse: 0,
+    totalRootPositionNextVacant: 0,
+    children: [] as NodeTree[],
+    isOfficer: false,
+  },
+]); // ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
 const expanded = ref<string[]>([]); // แสดงข้อมูลในโหนดที่เลือก
 const nodeId = ref<string>(""); // id โหนด
@@ -191,7 +224,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
 ]);
 // ฟอร์มค้นหาตำแหน่ง
 const reqMaster = reactive<FilterReqMaster>({
-  id: "",
+  id: null,
   type: 0,
   isAll: false,
   isBlank: false,
@@ -249,7 +282,9 @@ async function fetchDataTree(id: string) {
     .get(config.API.orgByid(id.toString()))
     .then(async (res) => {
       const data = await res.data.result;
-      nodes.value = data;
+      nodes.value.push(...data);
+      nodes.value[0].orgRevisionId = id;
+      await fetchDataTable(reqMaster.id, id, reqMaster.type);
     })
     .catch((err) => {
       messageError($q, err);
@@ -264,9 +299,13 @@ async function fetchDataTree(id: string) {
  * @param id  idTree
  * @param level  levelTree
  */
-async function fetchDataTable(id: string, revisionId: string, level: number) {
+async function fetchDataTable(
+  id: string | null,
+  revisionId: string,
+  level: number
+) {
   showLoader();
-  reqMaster.id = id;
+  reqMaster.id = id === "" ? null : id;
   reqMaster.revisionId = revisionId;
   reqMaster.type = level;
   await http
@@ -354,22 +393,34 @@ function onDeleteRole(id: string) {
   );
 }
 
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
+
+function onOpenModalPersonal(id: string) {
+  personId.value = id;
+  modalPersonal.value = true;
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
 /** callblck function ทำการ fetch ข้อมูล tree เมื่อมีการเปลี่ยน Tab ปัจจับัน,แบบร่าง*/
 watch(
   () => store.typeOrganizational,
-  () => {
+  async () => {
     const id =
       store.typeOrganizational === "current" ? store.activeId : store.draftId;
     nodeId.value = "";
     posMaster.value = [];
-    reqMaster.id = "";
+    reqMaster.id = null;
     reqMaster.type = 0;
     reqMaster.isAll = false;
     reqMaster.page = 1;
     reqMaster.pageSize = 10;
     reqMaster.keyword = "";
     reqMaster.revisionId = "";
-    fetchDataTree(id);
+    await fetchDataTree(id);
   }
 );
 
@@ -613,7 +664,27 @@ onMounted(() => {
                       :key="col.name"
                       :props="props"
                     >
-                      <div>
+                      <div v-if="col.name === 'positionIsSelected'">
+                        {{ col.value ? col.value : "-" }}
+                        <q-btn
+                          v-if="col.value !== 'ว่าง'"
+                          flat
+                          dense
+                          color="info"
+                          icon="info"
+                          round
+                          @click.prevent="
+                            onOpenModalPersonal(
+                              store.typeOrganizational === 'draft'
+                                ? props.row.profileIdNextHolder
+                                : props.row.profileIdCurrentHolder
+                            )
+                          "
+                        >
+                          <q-tooltip>ดูข้อมูล</q-tooltip>
+                        </q-btn>
+                      </div>
+                      <div v-else>
                         {{ col.value ? col.value : "-" }}
                       </div>
                     </q-td>
@@ -774,6 +845,12 @@ onMounted(() => {
     :dataPosMaster="dataPosMaster as PosMaster"
     :fetchDataTable="fetchDataTable"
   />
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
 </template>
 
 <style scoped>