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

src/modules/02_users/components/RoleOrganization/DialogPersonal.vue

@@ -104,7 +104,7 @@ async function fetchInformation(id: string) {
     )
     .then(async (res) => {
       const data = await res.data.result;
-      imformation.prefix = data.rank ? data.rank : data.prefix;
+      imformation.prefix = data.prefix ? data.prefix : "-";
       imformation.citizenId = data.citizenId ? data.citizenId : "-";
       imformation.firstName = data.firstName ? data.firstName : "-";
       imformation.lastName = data.lastName ? data.lastName : "-";
@@ -112,7 +112,7 @@ async function fetchInformation(id: string) {
       imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
       imformation.gender = data.gender ?? "-";
 
-      avatar.fullname = `${data.rank ? data.rank : data.prefix}${data.firstName} ${data.lastName}`;
+      avatar.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
 
       avatar.position = data.position ? data.position : "-";
       if (data.avatarName) {

src/modules/02_users/interface/request/Main.ts

@@ -19,7 +19,7 @@ interface Roles {
 }
 
 interface FilterReqMaster {
-  id: string;
+  id: string | null;
   type: number;
   isAll: boolean;
   isBlank: boolean;

src/modules/02_users/interface/response/Main.ts

@@ -47,13 +47,15 @@ interface NodeTree {
   totalRootPositionCurrentVacant: number;
   totalRootPositionNextUse: number;
   totalRootPositionNextVacant: number;
-  children: NodeTree;
+  children: NodeTree[];
   isOfficer: boolean;
 }
 
 interface PosMaster {
   fullNameCurrentHolder: null | string;
   fullNameNextHolder: string;
+  profileIdCurrentHolder: string;
+  profileIdNextHolder: string;
   id: string;
   isSit: boolean;
   isSpecial: boolean;

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>

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

@@ -113,8 +113,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: (row) =>
+    field: (row) => `${row.prefix}${row.firstName}  ${row.lastName}`,
-      `${row.rank ? row.rank : row.prefix}${row.firstName}  ${row.lastName}`,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -386,7 +385,6 @@ onMounted(async () => {
                     >
                       <span class="text-weight-medium">{{ col.label }}</span>
                     </q-th>
-                    <q-th auto-width />
                   </q-tr>
                 </template>
                 <template v-slot:body="props">
@@ -408,25 +406,27 @@ onMounted(async () => {
                       :key="col.name"
                       :props="props"
                     >
-                      <div>
+                      <div v-if="col.name === 'fullName'">
+                        {{ col.value ? col.value : "-" }}
+
+                        <q-btn
+                          flat
+                          dense
+                          color="info"
+                          icon="info"
+                          round
+                          @click.pervent="
+                            onOpenModalPersonal(props.row.profileId)
+                          "
+                        >
+                          <q-tooltip>ดูข้อมูล</q-tooltip>
+                        </q-btn>
+                      </div>
+
+                      <div v-else>
                         {{ 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">

src/modules/02_users/views/05_responsIbilities.vue

@@ -18,7 +18,7 @@ import type {
 
 /** importComponents*/
 import DialogResponsibilities from "@/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue";
-
+import PopupPersonal from "@/modules/02_users/components/RoleOrganization/DialogPersonal.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -27,7 +27,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 โหนด
@@ -233,7 +265,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);
@@ -248,10 +282,14 @@ 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();
   posMaster.value = [];
-  reqMaster.id = id;
+  reqMaster.id = id === "" ? null : id;
   reqMaster.revisionId = revisionId;
   reqMaster.type = level;
 
@@ -335,6 +373,18 @@ function onDelete(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 ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
 watch([() => reqMaster.pageSize], () => {
   fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
@@ -567,6 +617,24 @@ onMounted(() => {
                           size="sm"
                         />
                       </div>
+                      <div v-else-if="col.name === 'positionIsSelected'">
+                        {{ col.value ? col.value : "-" }}
+                        <q-btn
+                          v-if="col.value !== 'ว่าง'"
+                          flat
+                          dense
+                          color="info"
+                          icon="info"
+                          round
+                          @click.prevent="
+                            onOpenModalPersonal(
+                              props.row.profileIdCurrentHolder
+                            )
+                          "
+                        >
+                          <q-tooltip>ดูข้อมูล</q-tooltip>
+                        </q-btn>
+                      </div>
                       <div v-else>
                         {{ col.value ? col.value : "-" }}
                       </div>
@@ -720,6 +788,12 @@ onMounted(() => {
     :fetchDataTable="fetchDataTable"
     :reqMaster="reqMaster"
   />
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
 </template>
 
 <style scoped>