Merge pull request #1558 from Frappet/feat/change-round

feat:Change Round Multiple

src/modules/09_leave/components/03_ChangeRound/DialogForm.vue

@@ -27,7 +27,11 @@ const {
   convertDateToAPI,
 } = mixin;
 
-const emit = defineEmits(["update:change-page"]);
+const emit = defineEmits(["update:change-page", "update:selected"]);
+
+const isMultiple = defineModel<boolean>("isMultiple", {
+  default: false,
+});
 
 /**Props */
 const props = defineProps({
@@ -40,6 +44,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  selectedMultiple: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 /**FormData */
@@ -118,18 +126,43 @@ function onSubmit() {
 async function changeRound() {
   const formattedDateForAPI = await convertDateToAPI(formData.effectiveDate);
 
-  const url =
+  const urlAPI =
     props.type == "emp" ? config.API.leaveRoundEMP() : config.API.leaveRound();
   showLoader();
-  await http
+
-    .post(url, {
+  const urlFull = isMultiple.value ? urlAPI + `/multiple ` : urlAPI;
+  let payload: any;
+  if (isMultiple.value && props.selectedMultiple.length > 0) {
+    payload = props.selectedMultiple.map((item: any) => ({
+      profileId: item.profileId,
+      roundId: formData.round,
+      effectiveDate: formattedDateForAPI,
+      remark: formData.reson,
+      firstName: item.firstName,
+      lastName: item.lastName,
+      prefix: item.prefix,
+      rootDnaId: item.rootDnaId,
+      child1DnaId: item.child1DnaId,
+      child2DnaId: item.child2DnaId,
+      child3DnaId: item.child3DnaId,
+      child4DnaId: item.child4DnaId,
+    }));
+  } else {
+    payload = {
       profileId: props.personId,
       roundId: formData.round,
       effectiveDate: formattedDateForAPI,
       remark: formData.reson,
-    })
+    };
+  }
+  await http
+    .post(urlFull, payload)
     .then(() => {
       success($q, "บันทึกข้อมูลเปลี่ยนรอบเวลา");
+      if (isMultiple.value) {
+        emit("update:selected");
+        isMultiple.value = false;
+      }
       props.closeDialog?.();
     })
     .catch((err) => {
@@ -242,10 +275,10 @@ watch(
                 ? "เปลี่ยนรอบการปฏิบัติงาน"
                 : "ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
             }}
-            <span class="text-teal-6">{{
+            <span class="text-teal-6" v-if="!isMultiple">
-              props.DataRow ? props.DataRow.fullName : ""
+              {{ props.DataRow ? props.DataRow.fullName : "" }}
-            }}</span></q-toolbar-title
+            </span>
-          >
+          </q-toolbar-title>
           <q-btn
             icon="close"
             unelevated
@@ -259,7 +292,7 @@ watch(
           <q-separator />
           <q-card-section style="max-height: 50vh" class="scroll q-pa-none">
             <div class="q-pa-md">
-              <div class="row">
+              <div class="row" v-if="!isMultiple">
                 <q-icon
                   name="mdi-label-variant"
                   class="cursor-pointer self-center"
@@ -267,12 +300,12 @@ watch(
                   size="md"
                 >
                 </q-icon>
-                <span class="self-center text-bold text-blue text-subtitle1"
+                <span class="self-center text-bold text-blue text-subtitle1">
-                  >รอบปัจจุบัน</span
+                  รอบปัจจุบัน
-                >
+                </span>
-                <span class="self-center text-subtitle1 q-ml-sm">{{
+                <span class="self-center text-subtitle1 q-ml-sm">
-                  props.DataRow ? `${props.DataRow.currentRound} น.` : ""
+                  {{ props.DataRow ? `${props.DataRow.currentRound} น.` : "" }}
-                }}</span>
+                </span>
               </div>
               <div class="row q-mt-sm q-col-gutter-sm">
                 <div class="col-6">

src/modules/09_leave/interface/request/changeRound.ts

@@ -4,6 +4,8 @@ interface DataPost {
   lastName: string;
   page: number;
   pageSize: number;
+  selectedNodeId: string | null;
+  selectedNode: string;
 }
 
 interface DataOption {

src/modules/09_leave/stores/ChangeRoundStore.ts

@@ -125,7 +125,7 @@ export const useChangeRoundDataStore = defineStore(
 
     async function fetchDataForCardId(dataDetail: any, type?: string) {
       if (dataDetail) {
-        showLoader();
+        // showLoader();
         const url =
           type && type == "emp"
             ? config.API.leaveSearchEMP()
@@ -138,6 +138,8 @@ export const useChangeRoundDataStore = defineStore(
             page: dataDetail.page, //หน้า
             pageSize: dataDetail.pageSize || 10, //จำนวนแถวต่อหน้า
             keyword: dataDetail.keyword || "", //keyword ค้นหา
+            selectedNodeId: dataDetail.selectedNodeId, //id ต้นไม้ที่เลือก
+            selectedNode: dataDetail.selectedNode, //ระดับต้นไม้ที่เลือก
           })
           .then((res) => {
             const apiData = res.data.result.data;
@@ -148,6 +150,7 @@ export const useChangeRoundDataStore = defineStore(
             if (apiData.length > 0) {
               checkCilck.value = false;
               rows.value = apiData.map((e: any) => ({
+                ...e,
                 profileId: e.profileId,
                 cardId: e.citizenId,
                 fullName: e.fullName,
@@ -167,7 +170,7 @@ export const useChangeRoundDataStore = defineStore(
             console.log(e);
           })
           .finally(() => {
-            hideLoader();
+            // hideLoader();
           });
       }
     }

src/modules/09_leave/views/03_ChangeRoundMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, reactive, onMounted } from "vue";
+import { ref, watch, reactive, onMounted, nextTick } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -7,22 +7,20 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
 import { checkPermission } from "@/utils/permissions";
+import { useStructureTree } from "@/stores/structureTree";
+import { useRoute } from "vue-router";
 
 import type { DataPost } from "@/modules/09_leave/interface/request/changeRound";
 
 import Dialogform from "@/modules/09_leave/components/03_ChangeRound/DialogForm.vue";
 
 /** useStore */
+const route = useRoute();
 const mixin = useCounterMixin();
-const {
+
-  showLoader,
+const { showLoader, hideLoader, success, messageError, dialogConfirm } = mixin;
-  hideLoader,
-  success,
-  messageError,
-  dialogMessageNotify,
-  dialogConfirm,
-} = mixin;
 const dataStore = useChangeRoundDataStore();
+const { fetchStructureTree } = useStructureTree();
 
 /** use */
 const $q = useQuasar();
@@ -37,9 +35,42 @@ const formData = reactive<DataPost>({
   firstName: "",
   lastName: "",
   page: 1,
-  pageSize: 10,
+  pageSize: 100,
+  selectedNodeId: null,
+  selectedNode: "",
 });
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 0,
+});
+
+/** โครงสร้างข้อมูลต้นไม้ขององค์กร **/
+const nodeTree = ref<any[]>([]);
+const expanded = ref<string[]>([]);
+const orgTreeId = ref<string | null>(null);
+const filter = ref<string>("");
+const selected = ref<any[]>([]);
+const isMultiple = ref<boolean>(false);
+
+/** client-side data & batch loading **/
+const allRows = ref<any[]>([]);
+const isLoadingAll = ref<boolean>(false);
+const loadAllProgress = ref<number>(0);
+const totalToLoad = ref<number | null>(null);
+const BATCH_SIZE = 250;
+
+function waitForUi() {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+}
+
+/** function fetch ข้อมูลของ Tree*/
+async function fetchDataTree() {
+  nodeTree.value = await fetchStructureTree(route.meta.Key as string, true);
+}
+
 /**
  * Function openPopup
  * @param check action edit,history
@@ -87,6 +118,7 @@ async function OpenmodalFix(detail: any) {
 function closeDialog() {
   modal.value = false;
   modalFix.value = false;
+  isMultiple.value = false;
 }
 
 function save() {
@@ -110,214 +142,415 @@ function save() {
   });
 }
 
-/**
+/** Function โหลดข้อมูลทั้งหมดแบบ batch แล้วให้ QTable ทำ pagination เอง */
- * function updatePagination
+async function fetchAllData() {
- * @param newPagination ข้อมูล Pagination ใหม่
+  isLoadingAll.value = true;
- */
+  allRows.value = [];
-function updatePagination(newPagination: any) {
+  loadAllProgress.value = 0;
-  formData.pageSize = newPagination.rowsPerPage;
+  totalToLoad.value = null;
+  selected.value = [];
+
+  // ให้ UI แสดงสถานะกำลังโหลดทันที ก่อนรอผล API แรก
+  await nextTick();
+  await waitForUi();
+
+  try {
+    await dataStore.fetchDataForCardId({
+      ...formData,
+      page: 1,
+      pageSize: BATCH_SIZE,
+    });
+    allRows.value = dataStore.rows.slice();
+
+    const total = dataStore.totalListMain;
+    totalToLoad.value = total;
+    const totalPages = Math.ceil(total / BATCH_SIZE);
+    loadAllProgress.value =
+      totalPages <= 1 ? 100 : Math.round(100 / totalPages);
+    await nextTick();
+
+    for (let page = 2; page <= totalPages; page++) {
+      await dataStore.fetchDataForCardId({
+        ...formData,
+        page,
+        pageSize: BATCH_SIZE,
+      });
+      allRows.value.push(...dataStore.rows);
+      loadAllProgress.value = Math.round((page / totalPages) * 100);
+      await nextTick();
+      await waitForUi();
+    }
+  } finally {
+    isLoadingAll.value = false;
+    totalToLoad.value = null;
+  }
 }
 
 /** Function ค้นหาข้อมูล */
 async function searchData() {
-  if (formData.cardId || formData.firstName || formData.lastName) {
+  await fetchAllData();
-    await dataStore.fetchDataForCardId(formData);
+}
-  } else {
+
-    dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
+function submitSearchByEnter() {
-  }
+  if (isLoadingAll.value) return;
+  if (!checkPermission(route)?.attrIsGet) return;
+  formData.page = 1;
+  searchData();
+}
+
+/** Function เลือกทั้งหมด */
+function selectAllRows() {
+  selected.value = [...allRows.value];
+}
+
+function onSelectedOrgTree(data: any) {
+  if (isLoadingAll.value) return;
+  selected.value = [];
+  allRows.value = [];
+  orgTreeId.value = data.orgTreeId;
+  formData.selectedNodeId = data.orgTreeDnaId;
+  formData.selectedNode = data.orgLevel;
+  formData.page = 1;
+}
+
+function handleSelectMultiple() {
+  modal.value = true;
+  isMultiple.value = true;
+  editCheck.value = "edit";
+}
+
+function resetSelected() {
+  selected.value = [];
 }
 
 watch(
   () => formData.pageSize,
   () => {
-    formData.page = 1;
+    // pageSize ถูกควบคุมโดย QTable (client-side) ไม่ต้อง fetch API ใหม่
-    searchData();
   }
 );
 
 onMounted(() => {
+  fetchDataTree();
   dataStore.rows = [];
+  allRows.value = [];
 });
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     เปลี่ยนแปลงรอบการปฏิบัติงานของข้าราชการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+
-    <div class="row col-12 q-mb-sm">
+  <q-card>
-      <q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
+    <q-card-section :horizontal="$q.screen.gt.xs">
-        <div class="text-dark col-12 text-weight-bold text-subtitle1">
+      <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
-          ค้นหารายชื่อ
+        <div>
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
         </div>
-        <div class="row justify-between q-gutter-y-sm">
+        <div class="bg-white tree-container q-pa-xs">
-          <q-input
+          <q-tree
-            :readonly="!checkPermission($route)?.attrIsGet"
+            class="q-pa-sm q-gutter-sm"
-            v-model="formData.cardId"
-            outlined
-            label="เลขประจำตัวประชาชน"
-            class="col-6 col-md-4 bg-white inputgreen"
             dense
-            hide-bottom-space
+            :nodes="nodeTree"
-            maxlength="13"
+            node-key="orgTreeId"
-          />
+            label-key="labelName"
-          <q-input
+            :filter="filter.trim()"
-            :readonly="!checkPermission($route)?.attrIsGet"
+            no-results-label="ไม่พบข้อมูลที่ค้นหา"
-            v-model="formData.firstName"
+            no-nodes-label="ไม่มีข้อมูล"
-            outlined
+            v-model:expanded="expanded"
-            label="ชื่อ"
+          >
-            class="col-5 col-md-3 bg-white inputgreen"
+            <template v-slot:default-header="prop">
-            dense
+              <q-item
-            hide-bottom-space
+                clickable
-          />
+                :active="orgTreeId == prop.node.orgTreeId"
-          <q-input
+                @click.stop="onSelectedOrgTree(prop.node)"
-            :readonly="!checkPermission($route)?.attrIsGet"
+                active-class="my-list-link text-primary text-weight-medium"
-            v-model="formData.lastName"
+                class="row col-12 text-dark items-center q-py-xs q-pl-sm rounded-borders my-list"
-            outlined
+              >
-            label="นามสกุล"
+                <div>
-            class="col-6 col-md-3 bg-white inputgreen"
+                  <div class="text-weight-medium">
-            dense
+                    {{ prop.node.orgTreeName }}
-            hide-bottom-space
+                  </div>
-          />
+                  <div class="text-weight-light text-grey-8">
-          <q-btn
+                    {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-            v-if="checkPermission($route)?.attrIsGet"
+                    {{
-            @click="(formData.page = 1), searchData()"
+                      prop.node.orgTreeShortName == null
-            for="#search"
+                        ? null
-            dense
+                        : prop.node.orgTreeShortName
-            unelevated
+                    }}
-            color="primary"
+                  </div>
-            class="q-px-sm col-5 col-md-1"
+                </div>
-            style="max-height: 40px"
+              </q-item>
-            >ค้นหา</q-btn
+            </template>
+          </q-tree>
+        </div>
+      </q-card-section>
+      <q-separator :vertical="$q.screen.gt.xs" />
+      <q-card-section
+        class="col-lg-9 col-md-8 col-xs-12 q-gutter-sm scroll"
+        style="height: 80vh"
+      >
+        <div class="row col-xs-12 col-sm-9">
+          <q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
+            <div class="text-dark col-12 text-weight-bold text-subtitle1">
+              ค้นหารายชื่อ
+            </div>
+            <div class="row justify-between q-gutter-y-sm">
+              <q-input
+                :readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
+                v-model="formData.cardId"
+                outlined
+                label="เลขประจำตัวประชาชน"
+                class="col-6 col-md-4 bg-white inputgreen"
+                dense
+                hide-bottom-space
+                maxlength="13"
+                @keyup.enter="submitSearchByEnter"
+              />
+              <q-input
+                :readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
+                v-model="formData.firstName"
+                outlined
+                label="ชื่อ"
+                class="col-5 col-md-3 bg-white inputgreen"
+                dense
+                hide-bottom-space
+                @keyup.enter="submitSearchByEnter"
+              />
+              <q-input
+                :readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
+                v-model="formData.lastName"
+                outlined
+                label="นามสกุล"
+                class="col-6 col-md-3 bg-white inputgreen"
+                dense
+                hide-bottom-space
+                @keyup.enter="submitSearchByEnter"
+              />
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                @click="(formData.page = 1), searchData()"
+                :disable="isLoadingAll"
+                for="#search"
+                dense
+                unelevated
+                color="primary"
+                class="q-px-sm col-5 col-md-1"
+                style="max-height: 40px"
+                >ค้นหา</q-btn
+              >
+            </div>
+          </q-card>
+        </div>
+        <div
+          v-if="
+            allRows.length === 0 &&
+            dataStore.checkCilck === true &&
+            !isLoadingAll
+          "
+        >
+          <q-card
+            flat
+            bordered
+            class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
+            >ไม่พบข้อมูล</q-card
           >
         </div>
-      </q-card>
+        <div v-if="allRows.length !== 0 || isLoadingAll" class="col-12">
-    </div>
+          <q-banner
-    <div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
+            v-if="isLoadingAll"
-      <q-card
+            rounded
-        flat
+            class="bg-blue-1 text-primary q-mb-sm"
-        bordered
+          >
-        class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
+            <div class="row items-center q-gutter-sm">
-        >ไม่พบข้อมูล</q-card
+              <q-spinner color="primary" size="22px" />
-      >
+              <div v-if="totalToLoad === null || totalToLoad <= 500">
-    </div>
+                กำลังค้นหาข้อมูล กรุณารอสักครู่
-    <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
+              </div>
-      <d-table
+              <div v-else>
-        ref="table"
+                กำลังโหลดข้อมูลจำนวนมาก กรุณารอสักครู่
-        :columns="dataStore.columns"
+                <div class="text-caption text-grey-7">
-        :rows="dataStore.rows"
+                  ระบบกำลังดึงข้อมูลทั้งหมด
-        row-key="interrogated"
+                  {{ totalToLoad.toLocaleString() }} รายการ
-        flat
+                </div>
-        bordered
+              </div>
-        dense
+            </div>
-        class="custom-header-table"
+          </q-banner>
-        :visible-columns="dataStore.visibleColumns"
+          <q-linear-progress
-        :rows-per-page-options="[10, 25, 50, 100]"
+            v-if="isLoadingAll && totalToLoad === null"
-        @update:pagination="updatePagination"
+            indeterminate
-      >
+            color="primary"
-        <!-- :paging="true" -->
+            class="q-mb-xs"
-        <template v-slot:header="props">
+          />
-          <q-tr :props="props">
+          <q-linear-progress
-            <q-th auto-width />
+            v-if="isLoadingAll && totalToLoad !== null"
-            <q-th
+            :value="loadAllProgress / 100"
-              v-for="col in props.cols"
+            color="primary"
-              :key="col.name"
+            class="q-mb-xs"
-              :props="props"
+          />
-              style="color: #000000; font-weight: 500"
+          <div
-            >
+            v-if="isLoadingAll && totalToLoad !== null"
-              <span class="text-weight-medium">{{ col.label }}</span>
+            class="text-caption text-grey-6 q-mb-xs"
-            </q-th>
+          >
-          </q-tr>
+            กำลังโหลด... {{ allRows.length.toLocaleString() }} /
-        </template>
+            {{ totalToLoad.toLocaleString() }} รายการ
-        <template v-slot:body="props">
+          </div>
-          <q-tr :props="props">
+          <div class="row justify-between items-center q-mb-sm">
-            <q-td>
+            <div class="row q-gutter-sm">
-              <div>
+              <!-- <q-btn
-                <q-btn
+                color="secondary"
-                  flat
+                dense
-                  icon="mdi-dots-horizontal-circle-outline"
+                icon="mdi-checkbox-multiple-marked-outline"
-                  color="secondary"
+                label="เลือกทั้งหมด"
-                  for="#cancel"
+                :disable="isLoadingAll || allRows.length === 0"
-                  dense
+                @click="selectAllRows()"
-                  round
+              /> -->
+              <q-btn
+                :disable="selected.length === 0 || isLoadingAll"
+                :color="selected.length === 0 ? 'grey' : 'info'"
+                dense
+                icon="mdi-shuffle-variant"
+                :label="`เปลี่ยนรอบการลงเวลา${
+                  selected.length > 0 ? ` (${selected.length})` : ''
+                }`"
+                @click="handleSelectMultiple()"
+              />
+            </div>
+          </div>
+
+          <d-table
+            ref="table"
+            :columns="dataStore.columns"
+            :rows="allRows"
+            row-key="profileId"
+            flat
+            bordered
+            dense
+            virtual-scroll
+            table-style="max-height: 58vh"
+            class="custom-header-table"
+            :visible-columns="dataStore.visibleColumns"
+            hide-pagination
+            v-model:pagination="pagination"
+            selection="multiple"
+            v-model:selected="selected"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :disable="isLoadingAll"
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <q-th auto-width />
+                <q-th
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  style="color: #000000; font-weight: 500"
                 >
-                  <q-menu>
+                  <span class="text-weight-medium">{{ col.label }}</span>
-                    <q-list>
+                </q-th>
-                      <q-item
+              </q-tr>
-                        v-if="checkPermission($route)?.attrIsUpdate"
+            </template>
-                        clickable
+            <template v-slot:body="props">
-                        v-close-popup
+              <q-tr :props="props">
-                        @click="Openmodal('edit', props.row)"
+                <q-td class="text-center">
-                      >
+                  <q-checkbox
-                        <q-item-section style="min-width: 0px" avatar>
+                    keep-color
-                          <q-icon
+                    color="primary"
-                            color="primary"
+                    dense
-                            name="mdi-shuffle-variant"
+                    :disable="isLoadingAll"
-                            size="xs"
+                    v-model="props.selected"
-                          />
+                  />
-                        </q-item-section>
+                </q-td>
+                <q-td>
+                  <div>
+                    <q-btn
+                      flat
+                      icon="mdi-dots-horizontal-circle-outline"
+                      color="secondary"
+                      for="#cancel"
+                      dense
+                      round
+                    >
+                      <q-menu>
+                        <q-list>
+                          <q-item
+                            v-if="checkPermission($route)?.attrIsUpdate"
+                            clickable
+                            v-close-popup
+                            @click="Openmodal('edit', props.row)"
+                          >
+                            <q-item-section style="min-width: 0px" avatar>
+                              <q-icon
+                                color="primary"
+                                name="mdi-shuffle-variant"
+                                size="xs"
+                              />
+                            </q-item-section>
 
-                        <q-item-section>
+                            <q-item-section>
-                          <q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
+                              <q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
-                        </q-item-section>
+                            </q-item-section>
-                      </q-item>
+                          </q-item>
-                      <q-item
+                          <q-item
-                        v-if="checkPermission($route)?.attrIsUpdate"
+                            v-if="checkPermission($route)?.attrIsUpdate"
-                        clickable
+                            clickable
-                        v-close-popup
+                            v-close-popup
-                        @click="OpenmodalFix(props.row)"
+                            @click="OpenmodalFix(props.row)"
-                      >
+                          >
-                        <q-item-section style="min-width: 0px" avatar>
+                            <q-item-section style="min-width: 0px" avatar>
-                          <q-icon color="edit" name="edit" size="xs" />
+                              <q-icon color="edit" name="edit" size="xs" />
-                        </q-item-section>
+                            </q-item-section>
 
-                        <q-item-section>
+                            <q-item-section>
-                          <q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
+                              <q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
-                        </q-item-section>
+                            </q-item-section>
-                      </q-item>
+                          </q-item>
-                      <q-item
+                          <q-item
-                        clickable
+                            clickable
-                        v-close-popup
+                            v-close-popup
-                        @click="Openmodal('history', props.row)"
+                            @click="Openmodal('history', props.row)"
-                      >
+                          >
-                        <q-item-section style="min-width: 0px" avatar>
+                            <q-item-section style="min-width: 0px" avatar>
-                          <q-icon
+                              <q-icon
-                            color="deep-purple"
+                                color="deep-purple"
-                            name="mdi-history"
+                                name="mdi-history"
-                            size="xs"
+                                size="xs"
-                          />
+                              />
-                        </q-item-section>
+                            </q-item-section>
-                        <q-item-section>
+                            <q-item-section>
-                          <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
+                              <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
-                        </q-item-section>
+                            </q-item-section>
-                      </q-item>
+                          </q-item>
-                    </q-list>
+                        </q-list>
-                  </q-menu>
+                      </q-menu>
-                </q-btn>
+                    </q-btn>
-              </div>
+                  </div>
-            </q-td>
+                </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
+                  <div>
-                {{ col.value ?? "-" }}
+                    {{ col.value ?? "-" }}
-              </div>
+                  </div>
-            </q-td>
+                </q-td>
-          </q-tr>
+              </q-tr>
-        </template>
+            </template>
-        <template v-slot:pagination="scope">
+          </d-table>
-          ทั้งหมด {{ dataStore.totalListMain }} รายการ
+          <div class="text-caption text-grey-7 q-mt-sm">
-          <q-pagination
+            ทั้งหมด {{ allRows.length }} รายการ
-            v-model="formData.page"
+          </div>
-            active-color="primary"
+        </div>
-            color="dark"
+      </q-card-section>
-            :max="Number(dataStore.maxPageMain)"
+    </q-card-section>
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="dataStore.fetchDataForCardId(formData)"
-          ></q-pagination>
-        </template>
-      </d-table>
-    </div>
   </q-card>
 
   <!-- popup เปลี่ยนรอบการปฏิบัติงาน ,ประวัติการเปลี่ยนรอบการปฏิบัติงาน  -->
@@ -328,6 +561,9 @@ onMounted(() => {
     :DataRow="DataRow"
     :personId="DataRow == null ? '' : DataRow.profileId"
     @update:change-page="dataStore.changePage"
+    v-model:isMultiple="isMultiple"
+    :selectedMultiple="selected"
+    @update:selected="resetSelected"
   />
 
   <!-- แก้ไขปฏิทินวันทำงาน -->
@@ -384,4 +620,19 @@ onMounted(() => {
 .q-table tbody td:before.no-background {
   background: none;
 }
+
+.tree-container {
+  overflow: auto;
+  height: 75vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
 </style>