Merge branch 'develop' into dev

* develop: update selected and load data fix: insigniaForm.year refactor(ui): apply +543 year formatting to columns fix: payload multiple fix: rowsPerPage 100 fix fix:add filter rowsPerPage = 3000 fix : orgTreeDnaId feat:Change Round Multiple
2026-03-25 17:49:26 +07:00 · 2026-03-25 17:49:26 +07:00 · 6967d90c25
commit 6967d90c25
parent 069a221b29 1d9086fe7f
12 changed files with 511 additions and 220 deletions
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@ -112,7 +112,7 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
-      return `${row.year + 543}`;
+      return `${row.year ? row.year + 543 : "-"}`;
    },
    sort: (a: number, b: number) => b - a,
  },
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@ -92,7 +92,7 @@ const baseColumns = ref<QTableColumn[]>([
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    format: (v) => v + 543,
+    format: (v) => (v ? v + 543 : "-"),
    sort: (a: string, b: string) =>
      a
        .toString()
@ -920,9 +920,11 @@ onMounted(async () => {
                :locale="'th'"
                :enableTimePicker="false"
              >
-                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year="{ year }">{{
+                  year ? year + 543 : "-"
+                }}</template>
                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
+                  value ? parseInt(value + 543) : "-"
                }}</template>
                <template #trigger>
                  <q-input
@ -930,7 +932,7 @@ onMounted(async () => {
                    outlined
                    hide-bottom-space
                    class="inputgreen"
-                    :model-value="insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
+                    :model-value="insigniaForm.year != null && insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
                    :rules="[
                    (val:string) =>
                      !!val ||
--- a/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue
+++ b/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue
@ -35,7 +35,7 @@ const columns = ref<QTableProps["columns"]>([
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    format: (v) => v + 543,
+    format: (v) => (v ? v + 543 : "-"),
  },
  {
    name: "receiveDate",
--- a/src/modules/09_leave/components/03_ChangeRound/DialogForm.vue
+++ b/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">{{
-              props.DataRow ? props.DataRow.fullName : ""
-            }}</span></q-toolbar-title
-          >
+            <span class="text-teal-6" v-if="!isMultiple">
+              {{ props.DataRow ? props.DataRow.fullName : "" }}
+            </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
-                >
-                <span class="self-center text-subtitle1 q-ml-sm">{{
-                  props.DataRow ? `${props.DataRow.currentRound} น.` : ""
-                }}</span>
+                <span class="self-center text-bold text-blue text-subtitle1">
+                  รอบปัจจุบัน
+                </span>
+                <span class="self-center text-subtitle1 q-ml-sm">
+                  {{ props.DataRow ? `${props.DataRow.currentRound} น.` : "" }}
+                </span>
              </div>
              <div class="row q-mt-sm q-col-gutter-sm">
                <div class="col-6">
--- a/src/modules/09_leave/interface/request/changeRound.ts
+++ b/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 {
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/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();
          });
      }
    }
--- a/src/modules/09_leave/views/03_ChangeRoundMain.vue
+++ b/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,
-  hideLoader,
-  success,
-  messageError,
-  dialogMessageNotify,
-  dialogConfirm,
-} = mixin;
+
+const { showLoader, hideLoader, success, messageError, 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,48 +142,166 @@ function save() {
  });
 }

-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: any) {
-  formData.pageSize = newPagination.rowsPerPage;
+/** Function โหลดข้อมูลทั้งหมดแบบ batch แล้วให้ QTable ทำ pagination เอง */
+async function fetchAllData() {
+  isLoadingAll.value = true;
+  allRows.value = [];
+  loadAllProgress.value = 0;
+  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 dataStore.fetchDataForCardId(formData);
-  } else {
-    dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
+  await fetchAllData();
 }
+
+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;
-    searchData();
+    // pageSize ถูกควบคุมโดย QTable (client-side) ไม่ต้อง fetch API ใหม่
  }
 );

 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-section :horizontal="$q.screen.gt.xs">
+      <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="bg-white tree-container q-pa-xs">
+          <q-tree
+            class="q-pa-sm q-gutter-sm"
+            dense
+            :nodes="nodeTree"
+            node-key="orgTreeId"
+            label-key="labelName"
+            :filter="filter.trim()"
+            no-results-label="ไม่พบข้อมูลที่ค้นหา"
+            no-nodes-label="ไม่มีข้อมูล"
+            v-model:expanded="expanded"
+          >
+            <template v-slot:default-header="prop">
+              <q-item
+                clickable
+                :active="orgTreeId == prop.node.orgTreeId"
+                @click.stop="onSelectedOrgTree(prop.node)"
+                active-class="my-list-link text-primary text-weight-medium"
+                class="row col-12 text-dark items-center q-py-xs q-pl-sm rounded-borders my-list"
+              >
+                <div>
+                  <div class="text-weight-medium">
+                    {{ prop.node.orgTreeName }}
+                  </div>
+                  <div class="text-weight-light text-grey-8">
+                    {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                    {{
+                      prop.node.orgTreeShortName == null
+                        ? null
+                        : prop.node.orgTreeShortName
+                    }}
+                  </div>
+                </div>
+              </q-item>
+            </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"
+                :readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
                v-model="formData.cardId"
                outlined
                label="เลขประจำตัวประชาชน"
@ -159,28 +309,32 @@ onMounted(() => {
                dense
                hide-bottom-space
                maxlength="13"
+                @keyup.enter="submitSearchByEnter"
              />
              <q-input
-            :readonly="!checkPermission($route)?.attrIsGet"
+                :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"
+                :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
@ -192,7 +346,13 @@ onMounted(() => {
            </div>
          </q-card>
        </div>
-    <div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
+        <div
+          v-if="
+            allRows.length === 0 &&
+            dataStore.checkCilck === true &&
+            !isLoadingAll
+          "
+        >
          <q-card
            flat
            bordered
@ -200,23 +360,96 @@ onMounted(() => {
            >ไม่พบข้อมูล</q-card
          >
        </div>
-    <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
+        <div v-if="allRows.length !== 0 || isLoadingAll" class="col-12">
+          <q-banner
+            v-if="isLoadingAll"
+            rounded
+            class="bg-blue-1 text-primary q-mb-sm"
+          >
+            <div class="row items-center q-gutter-sm">
+              <q-spinner color="primary" size="22px" />
+              <div v-if="totalToLoad === null || totalToLoad <= 500">
+                กำลังค้นหาข้อมูล กรุณารอสักครู่
+              </div>
+              <div v-else>
+                กำลังโหลดข้อมูลจำนวนมาก กรุณารอสักครู่
+                <div class="text-caption text-grey-7">
+                  ระบบกำลังดึงข้อมูลทั้งหมด
+                  {{ totalToLoad.toLocaleString() }} รายการ
+                </div>
+              </div>
+            </div>
+          </q-banner>
+          <q-linear-progress
+            v-if="isLoadingAll && totalToLoad === null"
+            indeterminate
+            color="primary"
+            class="q-mb-xs"
+          />
+          <q-linear-progress
+            v-if="isLoadingAll && totalToLoad !== null"
+            :value="loadAllProgress / 100"
+            color="primary"
+            class="q-mb-xs"
+          />
+          <div
+            v-if="isLoadingAll && totalToLoad !== null"
+            class="text-caption text-grey-6 q-mb-xs"
+          >
+            กำลังโหลด... {{ allRows.length.toLocaleString() }} /
+            {{ totalToLoad.toLocaleString() }} รายการ
+          </div>
+          <div class="row justify-between items-center q-mb-sm">
+            <div class="row q-gutter-sm">
+              <!-- <q-btn
+                color="secondary"
+                dense
+                icon="mdi-checkbox-multiple-marked-outline"
+                label="เลือกทั้งหมด"
+                :disable="isLoadingAll || allRows.length === 0"
+                @click="selectAllRows()"
+              /> -->
+              <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="dataStore.rows"
-        row-key="interrogated"
+            :rows="allRows"
+            row-key="profileId"
            flat
            bordered
            dense
+            virtual-scroll
+            table-style="max-height: 58vh"
            class="custom-header-table"
            :visible-columns="dataStore.visibleColumns"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+            hide-pagination
+            v-model:pagination="pagination"
+            selection="multiple"
+            v-model:selected="selected"
          >
-        <!-- :paging="true" -->
            <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"
@ -230,6 +463,15 @@ onMounted(() => {
            </template>
            <template v-slot:body="props">
              <q-tr :props="props">
+                <q-td class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :disable="isLoadingAll"
+                    v-model="props.selected"
+                  />
+                </q-td>
                <q-td>
                  <div>
                    <q-btn
@ -302,22 +544,13 @@ onMounted(() => {
                </q-td>
              </q-tr>
            </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ dataStore.totalListMain }} รายการ
-          <q-pagination
-            v-model="formData.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(dataStore.maxPageMain)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="dataStore.fetchDataForCardId(formData)"
-          ></q-pagination>
-        </template>
          </d-table>
+          <div class="text-caption text-grey-7 q-mt-sm">
+            ทั้งหมด {{ allRows.length }} รายการ
          </div>
+        </div>
+      </q-card-section>
+    </q-card-section>
  </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>
--- a/src/modules/14_KPI/views/01_kpiRound.vue
+++ b/src/modules/14_KPI/views/01_kpiRound.vue
@ -44,7 +44,7 @@ const columns = ref<QTableProps["columns"]>([
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    format: (val) => val + 543,
+    format: (val) => (val ? val + 543 : "-"),
  },
  {
    name: "durationKPI",
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    format: (v) => v + 543,
+    format: (v) => (v ? v + 543 : "-"),
  },
  {
    name: "citizenId",
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@ -44,7 +44,7 @@ const columns = ref<QTableProps["columns"]>([
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    format: (v) => v + 543,
+    format: (v) => (v ? v + 543 : "-"),
  },
  {
    name: "citizenId",
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@ -75,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ; width:10%",
-    format: (val) => val + 543,
+    format: (val) => (val ? val + 543 : "-"),
  },
  {
    name: "projectName",
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@ -32,7 +32,7 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val) {
-      return val + 543;
+      return val ? val + 543 : "-";
    },
  },
  {