กำหนดสิทธิ์จัดการโครงสร้าง

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<DataProfile[]>([]);
-const rows = ref<DataProfile[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
-
+const selected = ref<DataProfile[]>([]); //รายชื่อที่เลือก
+const rows = ref<DataProfile[]>([]); // ข้อมูลรายชื่อ
+const total = ref<number>(0); // จำนวนข้อมูลทั้งหมด
+const maxPage = ref<number>(0); // จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -83,6 +82,12 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อ
+ * @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(
     <q-card style="min-width: 60%">
       <DialogHeader :tittle="'รายชื่อ'" :close="onClose" />
       <q-separator />
-      <q-card-section>
+      <q-card-section style="max-height: 50vh" class="scroll">
         <div class="col-12">
           <q-toolbar style="padding: 0">
             <q-select