From 09fdfe9f20d413fe3920e9db4edca37a3c287739 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Fri, 6 Sep 2024 16:30:07 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B8=81=E0=B8=B3=E0=B8=AB=E0=B8=99=E0=B8=94?= =?UTF-8?q?=E0=B8=AA=E0=B8=B4=E0=B8=97=E0=B8=98=E0=B8=B4=E0=B9=8C=E0=B8=88?= =?UTF-8?q?=E0=B8=B1=E0=B8=94=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=82=E0=B8=84?= =?UTF-8?q?=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RoleOrganization/DialogAddPerson.vue | 40 ++++++++--- .../02_users/views/roleOrganization.vue | 68 ++++++++++++++----- 2 files changed, 81 insertions(+), 27 deletions(-) diff --git a/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue b/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue index 6758d6ec..5db9d460 100644 --- a/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue +++ b/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue @@ -30,16 +30,15 @@ const props = defineProps({ }); const qurey = reactive({ - searchKeyword: "", - searchField: "fullName", - page: 1, - pageSize: 10, + searchKeyword: "", // คำค้นหา + searchField: "fullName", // field ที่ต้องการค้นหา + page: 1, // หน้า + pageSize: 10, // จำนวนที่ต้องการ }); -const selected = ref([]); -const rows = ref([]); -const total = ref(0); -const maxPage = ref(0); - +const selected = ref([]); //รายชื่อที่เลือก +const rows = ref([]); // ข้อมูลรายชื่อ +const total = ref(0); // จำนวนข้อมูลทั้งหมด +const maxPage = ref(0); // จำนวนหน้า const columns = ref([ { name: "fullName", @@ -83,6 +82,12 @@ const columns = ref([ }, ]); +/** + * ฟังก์ชันดึงข้อมูลรายชื่อ + * @param newPage โหลดหน้าแรก ถ้าเป็บ true โหลดหน้าแรก false ให้โหลดหน้าปัจจุบัน + * + * เก็บมูลรายชื่อไว่ใน rows.value + */ async function onSearchListPerson(newPage: boolean = false) { qurey.page = newPage ? 1 : qurey.page; selected.value = []; @@ -105,6 +110,11 @@ async function onSearchListPerson(newPage: boolean = false) { }); } +/** + * ฟังก์ชันยืนยันการเพิ่มราชื่อ + * + * เมื่อเพิ่มเสร็จจะดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างตามหน่วยงาน + */ function onSubmitPerson() { dialogConfirm( $q, @@ -142,6 +152,11 @@ function updatePagination(newPagination: Pagination) { qurey.pageSize = newPagination.rowsPerPage; } +/** + * ฟังก์ชันปิด popup ราชชื่อ + * + * และกำหนดค่าของ qurey ไปเป็นค่า defult rows.value และ selected.value ไปเป็นค่าว่าง + */ function onClose() { modal.value = false; qurey.page = 1; @@ -152,6 +167,11 @@ function onClose() { selected.value = []; } +/** + * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody + * + * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก + */ watch( () => qurey.pageSize, () => { @@ -165,7 +185,7 @@ watch( - +
([]); // ข้อมูลรายการโ const expanded = ref>([]); // เปิดรายการโครงสร้าง const orgId = ref(""); // id หน่วยงานที่เลือก -async function fatchOrgg() { +/** + * ฟังก์ชันดึงข้อมูลโครงสร้าง + * + * เก็บข้อมูลโครงสร้างไว้ใน nodeTree + */ +async function fatchOrg() { showLoader(); await http .get(config.API.permissionOrg) @@ -44,23 +49,34 @@ async function fatchOrgg() { }); } +/** + * ฟังก์ชันเลือกหน่วยงาน + * @param id หน่วยงานที่เลือก + * + * กำหนดค่าของ qureyBody ให้เป็นค่า defult และกำหนดค่าของ qureyBody.id เป็นหน่วยงานที่เลือก + * และดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างในหน่วยงานที่เลือก + */ function selectedOrg(id: string) { orgId.value = id; qureyBody.id = id; + qureyBody.searchKeyword = ""; + qureyBody.searchField = "fullName"; + qureyBody.page = 1; + qureyBody.pageSize = 10; fetchListPerson(true); } /******* รายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง *******/ const qureyBody = reactive({ - searchKeyword: "", - searchField: "fullName", - page: 1, - pageSize: 10, - id: null, + searchKeyword: "", // คำค้นหา + searchField: "fullName", // field ที่ต้องการค้นหา + page: 1, // หน้า + pageSize: 10, // จำนวนที่ต้องการ + id: null, // หน่วยงานที่เลือก }); -const rows = ref([]); -const total = ref(0); -const maxPage = ref(0); +const rows = ref([]); // ข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง +const total = ref(0); // จำนวนข้อมูลทั้งหมด +const maxPage = ref(0); // จำนวนหน้า const columns = ref([ { name: "fullName", @@ -112,9 +128,14 @@ const columns = ref([ style: "font-size: 14px", }, ]); +const modalAdd = ref(false); // modal เพิ่มข้อมูลรายชื่อ -const modalAdd = ref(false); - +/** + * ฟังก์ชันดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง + * @param newPage โหลดหน้าแรก ถ้าเป็บ true โหลดหน้าแรก false ให้โหลดหน้าปัจจุบัน + * + * เก็บมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างไว่ใน rows.value + */ async function fetchListPerson(newPage: boolean = false) { qureyBody.page = newPage ? 1 : qureyBody.page; showLoader(); @@ -122,8 +143,8 @@ async function fetchListPerson(newPage: boolean = false) { .post(config.API.permissionOrgProfile, qureyBody) .then(async (res) => { const data = await res.data.result; - maxPage.value = Math.ceil(data.total / qureyBody.pageSize); - total.value = data.total; + maxPage.value = Math.ceil(data.total / qureyBody.pageSize); // คำนวนหาจำนวนหน้า + total.value = data.total; // จำนวนรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง rows.value = data.data; }) .catch((err) => { @@ -134,19 +155,27 @@ async function fetchListPerson(newPage: boolean = false) { }); } +/** + * ฟังก์ชันยืนยันการลบรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง + * @param id รายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง + * + * ลบเสร็จจะโหลดข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง + */ function onDeletePerson(id: string) { dialogRemove($q, async () => { showLoader(); await http .delete(config.API.permissionOrg + `/${id}`) .then(async () => { + // ถ้า maxPage.value ไม่เท่ากับ 1 ให้ โหลดข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างหน้าปัจจุบัน if (maxPage.value !== 1) { + // ถ้ามีแค่หนึ่งแถวในหน้าปัจจุบัน ให้ลด page ลง 1 if (rows.value.length === 1) { qureyBody.page = qureyBody.page - 1; } - await fetchListPerson(false); + await fetchListPerson(false); // โหลดข้อมูลจากหน้าปัจจุบันโดยไม่รีเซ็ต } else { - await fetchListPerson(true); + await fetchListPerson(true); // โหลดข้อมูลหน้าแรก } success($q, "ลบข้อมูสำเร็จ"); }) @@ -167,6 +196,11 @@ function updatePagination(newPagination: Pagination) { qureyBody.pageSize = newPagination.rowsPerPage; } +/** + * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody + * + * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก + */ watch( () => qureyBody.pageSize, () => { @@ -180,8 +214,8 @@ watch( */ onMounted(async () => { await Promise.all([ - fatchOrgg(), // ดึงข้อมูลโครงสร้าง - fetchListPerson(), + fatchOrg(), // ดึงข้อมูลโครงสร้าง + fetchListPerson(), // ดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง ]); });