From aae6311ca10d690ddc0e1fd753261e81e8b946d4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 20 Nov 2024 17:28:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=B4=E0=B8=97=E0=B8=98=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   4 +
 src/interface/request/main/main.ts            |   4 +-
 .../RoleOrganization/DialogPersonal.vue       | 477 ++++++++++++++++++
 src/modules/02_users/interface/index/Main.ts  |   5 +-
 .../02_users/views/04_roleOrganization.vue    | 117 +++--
 .../02_users/views/05_responsIbilities.vue    |   3 +-
 6 files changed, 561 insertions(+), 49 deletions(-)
 create mode 100644 src/modules/02_users/components/RoleOrganization/DialogPersonal.vue

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index fee3c0c8..42094c21 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -89,6 +89,10 @@ export default {
   orgSearchProfileEmp: `${orgProfile}-employee/search`,
 
   orgProfileById: (id: string, type: string) => `${orgProfile}${type}/${id}`,
+  orgProfileAdminById: (id: string, type: string) =>
+    `${orgProfile}${type}/admin/${id}`,
+  profileNewGovernmentCard: (id: string, type: string) =>
+    `${orgProfile}${type}/government/admin/${id}`, // noPermission
 
   orgDeceasedProfile: `${orgPos}/profile/search`,
 
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 2c60d49e..989fac5f 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -118,13 +118,13 @@ const menuList = readonly<any[]>([
       },
       {
         key: 2.0,
-        label: "กำหนดสิทธิ์จัดการโครงสร้าง",
+        label: "กำหนดหน้าที่จัดการโครงสร้าง (แบบร่าง)",
         path: "roleOrganization",
         role: ["SUPER_ADMIN", "ADMIN"],
       },
       {
         key: 2.0,
-        label: "มอบหมายหน้าที่ความรับผิดชอบ",
+        label: "มอบหมายหน้าที่ความรับผิดชอบตามโครงสร้างปัจจุบัน",
         path: "responsibilities",
         role: ["SUPER_ADMIN", "ADMIN"],
       },
diff --git a/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue b/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue
new file mode 100644
index 00000000..7fde64ff
--- /dev/null
+++ b/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue
@@ -0,0 +1,477 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
+// import { checkPermissionGet } from "@/utils/permissions";
+
+/** importType*/
+import type { PersonalImformation } from "@/components/information/interface/response/Information";
+import type { Goverment } from "@/components/information/interface/response/Government";
+import type { Avatar } from "@/components/information/interface/response/avatar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const route = useRoute();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const retireDate = ref<Date>();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const isEmployee = defineModel("isEmployee", { type: String });
+const empType = ref<string>("officer");
+/** props*/
+const props = defineProps({
+  id: {
+    type: String,
+    requier: true,
+  },
+  modal: {
+    type: Boolean,
+    requier: true,
+  },
+  type: { type: String, default: "" },
+});
+
+/** emit*/
+const emit = defineEmits(["update:modal"]);
+
+/** ตัวแปร*/
+const modal = ref<boolean>(false);
+const avatar = reactive<Avatar>({
+  avatar: "",
+  fullname: "",
+  position: "",
+});
+const imformation = reactive<PersonalImformation>({
+  prefix: "",
+  citizenId: "",
+  firstName: "",
+  lastName: "",
+  birthDate: "",
+  age: "",
+  gender: "",
+});
+const goverment = reactive<Goverment>({
+  oc: "",
+  posNo: "",
+  position: "",
+  positionPathSide: "",
+  positionLine: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveSide: "",
+});
+
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+  const retire = new Date(birthDate);
+  retire.setFullYear(retire.getFullYear() + 60);
+  retireDate.value = retire;
+
+  if (years > 60) {
+    return "อายุเกิน 60 ปี";
+  }
+
+  return `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+/**
+ * function เรียกข้อมูลส่วนตัว
+ * @param id profileID
+ */
+async function fetchInformation(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.orgProfileAdminById(
+        id,
+        `${empType.value == "employee" ? `-${empType.value}` : ""}`
+      )
+    )
+    .then(async (res) => {
+      const data = await res.data.result;
+      imformation.prefix = data.rank ? data.rank : data.prefix;
+      imformation.citizenId = data.citizenId ? data.citizenId : "-";
+      imformation.firstName = data.firstName ? data.firstName : "-";
+      imformation.lastName = data.lastName ? data.lastName : "-";
+      imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
+      imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
+      imformation.gender = data.gender ?? "-";
+
+      avatar.fullname = `${data.rank ? data.rank : data.prefix}${data.firstName} ${data.lastName}`;
+
+      avatar.position = data.position ? data.position : "-";
+      if (data.avatarName) {
+        await fetchProfile(data.id as string, data.avatarName);
+      } else {
+        avatar.avatar = "";
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function เรียกข้อมูลข้อมูลราชการ
+ * @param id profileID
+ */
+async function fetchProfileGov(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.profileNewGovernmentCard(
+        id,
+        `${empType.value == "employee" ? `-${empType.value}` : ""}`
+      )
+    )
+    .then(async (res) => {
+      const data = await res.data.result;
+      goverment.oc = data.org !== "" ? data.org : "-";
+      goverment.posNo = data.posMasterNo !== "" ? data.posMasterNo : "-";
+      goverment.position = data.position !== "" ? data.position : "-";
+      goverment.positionPathSide =
+        data.positionArea !== "" ? data.positionArea : "-";
+      goverment.positionLine =
+        data.positionField !== "" ? data.positionField : "-";
+      goverment.positionType = data.posType !== "" ? data.posType : "-";
+      goverment.positionLevel = data.posLevel !== "" ? data.posLevel : "-";
+      goverment.positionExecutive =
+        data.posExecutive !== null ? data.posExecutive : "-";
+      goverment.positionExecutiveSide =
+        data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// function redirecToRegistry() {
+//   router.push(`/registry-${empType.value}/${props.id}`);
+//   modal.value = false;
+// }
+
+watch(
+  () => props.modal,
+  async () => {
+    modal.value = props.modal ? props.modal : false;
+    if (modal.value) {
+      if (props.id) {
+        // empType.value =
+        //   route.name === "appoint-employee-detail" ||
+        //   isEmployee.value == "EMPLOYEE"
+        //     ? "employee"
+        //     : "officer";
+
+        await Promise.all([
+          fetchInformation(props.id),
+          fetchProfileGov(props.id),
+        ]);
+      }
+    }
+  }
+);
+
+watch(modal, (newValue) => {
+  if (!newValue) {
+    emit("update:modal", false);
+  }
+});
+
+async function fetchProfile(id: string, avatarName: string) {
+  await http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
+    .then(async (res) => {
+      avatar.avatar = await res.data.downloadUrl;
+    });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" position="right" :maximized="true" persistent>
+    <q-card style="width: 420px; overflow: visible">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-bold"
+          >ทะเบียนประวัติ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="emit('update:modal', false)"
+          style="color: red; background-color: #ffdede"
+        />
+      </q-toolbar>
+
+      <q-card-section class="col q-pt-none bg-grey-12">
+        <div class="q-gutter-md">
+          <q-card bordered class="text-center bg-grey-12">
+            <div>
+              <q-avatar size="120px" color="grey-4">
+                <img
+                  v-if="avatar.avatar"
+                  :src="avatar.avatar"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+                <img
+                  v-else
+                  src="@/assets/avatar_user.jpg"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+              </q-avatar>
+            </div>
+            <div
+              class="q-mt-md text-subtitle2 text-bold"
+              style="font-size: 18px"
+            >
+              {{ avatar.fullname }}
+            </div>
+            <div
+              v-if="avatar.position != '-'"
+              class="q-mb-xs text-center text-grey"
+            >
+              {{ avatar.position }}
+            </div>
+            <!-- <div class="q-mt-md">
+              <q-btn
+                v-if="
+                  empType === 'employee'
+                    ? checkPermissionGet('SYS_REGISTRY_EMP')
+                    : checkPermissionGet('SYS_REGISTRY_OFFICER')
+                "
+                class="bg-white"
+                outline
+                rounded
+                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
+                color="secondary"
+                @click.prevent="redirecToRegistry"
+              />
+            </div> -->
+          </q-card>
+
+          <q-scroll-area style="height: 65vh; max-width: 100%">
+            <div class="q-gutter-md q-pa-sm">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="q-pa-md">
+                  <div class="text-weight-bold row items-center">
+                    <q-icon name="mdi-account" color="grey-7" />
+                    <span class="q-ml-md">ข้อมูลส่วนตัว </span>
+                  </div>
+                  <div class="row q-pa-sm">
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          imformation.citizenId ? imformation.citizenId : '-'
+                        "
+                        label="เลขประจำตัวประชาชน"
+                      ></q-input>
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          imformation.prefix ? imformation.prefix : '-'
+                        "
+                        label="คำนำหน้าชื่อ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          imformation.firstName ? imformation.firstName : '-'
+                        "
+                        label="ชื่่อ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          imformation.lastName ? imformation.lastName : '-'
+                        "
+                        label="นามสกุล"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          imformation.birthDate ? imformation.birthDate : '-'
+                        "
+                        label="วัน/เดือน/ปีเกิด"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          imformation.gender ? imformation.gender : '-'
+                        "
+                        label="เพศ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.age ? imformation.age : '-'"
+                        label="อายุ"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="q-pa-md">
+                  <div class="text-weight-bold row items-center">
+                    <q-icon name="mdi-account-tie" color="grey-7" />
+                    <span class="q-ml-md">ข้อมูลราชการ </span>
+                  </div>
+                  <div class="row q-pa-sm">
+                    <div class="col-xs-12 col-md-12">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.oc === '' ? '-' : goverment.oc"
+                        label="สังกัด"
+                        autogrow
+                      ></q-input>
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.posNo ? goverment.posNo : '-'"
+                        label="ตำแหน่งเลขที่"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          goverment.position ? goverment.position : '-'
+                        "
+                        label="ตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        autogrow
+                        :model-value="
+                          goverment.positionPathSide
+                            ? goverment.positionPathSide
+                            : '-'
+                        "
+                        label="ด้าน/สาขา"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          goverment.positionLine ? goverment.positionLine : '-'
+                        "
+                        label="สายงาน"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          goverment.positionType ? goverment.positionType : '-'
+                        "
+                        label="ประเภทตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          goverment.positionLevel
+                            ? goverment.positionLevel
+                            : '-'
+                        "
+                        label="ระดับตำแหน่ง"
+                      />
+                    </div>
+                    <div
+                      class="col-xs-6 col-md-6"
+                      v-if="props.type !== 'employee'"
+                    >
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          goverment.positionExecutive
+                            ? goverment.positionExecutive
+                            : '-'
+                        "
+                        label="ตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                    <div
+                      class="col-xs-6 col-md-6"
+                      v-if="props.type !== 'employee'"
+                    >
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="
+                          goverment.positionExecutiveSide
+                            ? goverment.positionExecutiveSide
+                            : '-'
+                        "
+                        label="ด้านตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </q-scroll-area>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_users/interface/index/Main.ts b/src/modules/02_users/interface/index/Main.ts
index c58034f9..00b43a12 100644
--- a/src/modules/02_users/interface/index/Main.ts
+++ b/src/modules/02_users/interface/index/Main.ts
@@ -56,8 +56,8 @@ interface DataTree {
   ancestorDNA: string;
   createdAt: string;
   createdFullName: string;
-  createdUserId: "94ba986d-f871-46a2-be92-46c0cbf0bc56";
-  id: string;
+  createdUserId: string;
+  id: string | null;
   lastUpdateFullName: string;
   lastUpdateUserId: string;
   lastUpdatedAt: string;
@@ -72,6 +72,7 @@ interface DataTree {
   orgRootRankSub: string;
   orgRootShortName: string;
   responsibility: string;
+  isDeputy: boolean;
 }
 
 interface DataProfile {
diff --git a/src/modules/02_users/views/04_roleOrganization.vue b/src/modules/02_users/views/04_roleOrganization.vue
index b3ade258..672f90c9 100644
--- a/src/modules/02_users/views/04_roleOrganization.vue
+++ b/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>
diff --git a/src/modules/02_users/views/05_responsIbilities.vue b/src/modules/02_users/views/05_responsIbilities.vue
index 3f6b1524..1208b04f 100644
--- a/src/modules/02_users/views/05_responsIbilities.vue
+++ b/src/modules/02_users/views/05_responsIbilities.vue
@@ -19,6 +19,7 @@ import type {
 /** importComponents*/
 import DialogResponsibilities from "@/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue";
 
+
 /** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
@@ -357,7 +358,7 @@ onMounted(() => {
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      มอบหมายหน้าที่ความรับผิดชอบ
+      มอบหมายหน้าที่ความรับผิดชอบตามโครงสร้างปัจจุบัน
     </div>
   </div>