ทะเบียนประวัติ => ข้อมูลราชการ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-08-16 14:29:46 +07:00
parent ddf4c8b9d4
commit 0876821f99
7 changed files with 166 additions and 371 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
@ -11,7 +11,6 @@ import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
@ -72,126 +71,14 @@ const workDateRef = ref<object | null>(null);
const reasonSameDateRef = ref<object | null>(null);
const visibleColumnsHistory = ref<String[]>([
// "oc",
// "position",
// "positionPathSide",
// "posNo",
// "positionLine",
// "positionType",
// "positionLevel",
// "positionExecutive",
// "positionExecutiveSide",
"dateAppoint",
"dateStart",
// "retireDate",
// "govAge",
// "govAgeAbsent",
// "govAgePlus",
"reasonSameDate",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = ref<QTableProps["columns"]>([
// {
// name: "oc",
// align: "left",
// label: "",
// sortable: true,
// field: "oc",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionPathSide",
// align: "left",
// label: "",
// sortable: true,
// field: "positionPathSide",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "position",
// align: "left",
// label: "/",
// sortable: true,
// field: "position",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "posNo",
// align: "left",
// label: "",
// sortable: true,
// field: "posNo",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionLine",
// align: "left",
// label: "",
// sortable: true,
// field: "positionLine",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionType",
// align: "left",
// label: "",
// sortable: true,
// field: "positionType",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionLevel",
// align: "left",
// label: "",
// sortable: true,
// field: "positionLevel",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionExecutive",
// align: "left",
// label: "",
// sortable: true,
// field: "positionExecutive",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionExecutiveSide",
// align: "left",
// label: "",
// sortable: true,
// field: "positionExecutiveSide",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "dateAppoint",
align: "left",
@ -216,51 +103,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
// {
// name: "retireDate",
// align: "left",
// label: "",
// sortable: true,
// field: "retireDate",
// format: (v) => date2Thai(v),
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "govAge",
// align: "left",
// label: "",
// sortable: true,
// field: "govAge",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "govAgeAbsent",
// align: "left",
// label: "",
// sortable: true,
// field: "govAgeAbsent",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "govAgePlus",
// align: "left",
// label: "",
// sortable: true,
// field: "govAgePlus",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "reasonSameDate",
align: "left",
@ -297,7 +139,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
/** เปิด dialog */
/**
* เป dialog *
*/
function openDialogEdit() {
modalEdit.value = true;
containDate.value = formMain.containDate ? formMain.containDate : null;
@ -307,12 +151,18 @@ function openDialogEdit() {
: null;
}
/**
* เป dialog ประวแกไขขอมลราชการ
*/
function openDialogHistory() {
modalHistory.value = true;
filterKeyword.value = "";
getDataHistory();
}
/** ปิด dialog */
/**
* dialog
*/
function closeDialog() {
modalEdit.value = false;
containDate.value = null;
@ -320,6 +170,9 @@ function closeDialog() {
reasonSameDate.value = null;
}
/**
* function นยนการบนทกขอมลราชการ
*/
function onSubmit() {
dialogConfirm($q, () => {
showLoader();
@ -336,9 +189,9 @@ function onSubmit() {
: reasonSameDate.value,
}
)
.then(() => {
getData();
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await getData();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((e) => {
@ -350,7 +203,9 @@ function onSubmit() {
});
}
/** ดึงข้อมูลราชการ */
/**
* งขอมลราชการ
*/
function getData() {
showLoader();
http
@ -384,7 +239,9 @@ function getData() {
});
}
/** ดึงข้อมูลประวัติ */
/**
* งขอมลประว
*/
function getDataHistory() {
showLoader();
http
@ -852,7 +709,7 @@ onMounted(() => {
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
{{ col.value ? col.value : "-" }}

View file

@ -28,7 +28,6 @@ const {
messageError,
success,
pathRegistryEmp,
dialogRemove,
} = mixin;
const profileId = ref<string>(
@ -60,14 +59,10 @@ const formFilter = reactive<FormFilter>({
isShowRetire: false,
isProbation: false,
});
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([
"level",
"detail",
@ -199,6 +194,12 @@ const OpsFilter = ref<any>({
],
});
/**
* function นหา คำใน option
* @param val คำคนหา
* @param update function
* @param refData type select
*/
function filterSelector(val: string, update: Function, refData: string) {
switch (refData) {
case "levelOptions":
@ -213,7 +214,9 @@ function filterSelector(val: string, update: Function, refData: string) {
}
}
/** ปิด dialog */
/**
* dialog อมลว
*/
function closeDialog() {
modal.value = false;
edit.value = false;
@ -225,15 +228,21 @@ function closeDialog() {
disciplineData.refCommandDate = null;
}
/**
* เป dialog อมลว
*/
function openDialogAdd() {
modal.value = true;
}
async function fetchData(id: string) {
/**
* function fetch อมลรายการว
*/
function fetchData(id: string) {
showLoader();
await http
http
.get(config.API.profileNewDisciplineByProfileId(id, empType.value))
.then(async (res) => {
.then((res) => {
rows.value = res.data.result;
})
.catch((err) => {
@ -244,7 +253,11 @@ async function fetchData(id: string) {
});
}
async function addData() {
/**
* funciton เพมชอมลว
*/
function addData() {
showLoader();
const body = {
date: disciplineData.date,
level: disciplineData.level,
@ -256,11 +269,12 @@ async function addData() {
empType.value !== "" ? disciplineData.profileId : undefined,
refCommandDate: disciplineData.refCommandDate,
};
await http
http
.post(config.API.profileNewDiscipline(empType.value), body)
.then(() => {
fetchData(profileId.value);
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await fetchData(profileId.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
@ -270,8 +284,12 @@ async function addData() {
});
}
async function editData(idData: string) {
await http
/**
* funciton นทกแกไขชอมลว
*/
function editData(idData: string) {
showLoader();
http
.patch(
config.API.profileNewDisciplineByDisciplineId(idData, empType.value),
{
@ -279,9 +297,10 @@ async function editData(idData: string) {
profileId: undefined,
}
)
.then(() => {
fetchData(profileId.value);
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await fetchData(profileId.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
@ -291,22 +310,6 @@ async function editData(idData: string) {
});
}
// function deleteData(idData: string) {
// dialogRemove($q, () =>
// http
// .delete(config.API.profileNewDisciplineByDisciplineId(idData))
// .then(() => {
// fetchData(profileId.value);
// success($q, "");
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// })
// );
// }
/**
* กดเลอกขอมลทจะแกไข
* @param props props ใน row เลอก
@ -323,25 +326,31 @@ function openDialogEdit(props: RequestItemsObject) {
disciplineData.refCommandDate = props.refCommandDate;
}
/**
* function ประวการแไขรายการว
* @param idOrder
*/
function openDialogHistory(idOrder: string) {
modalHistory.value = true;
id.value = idOrder;
}
async function onSubmit() {
/**
* function นยนการบนทกขอม
*/
function onSubmit() {
dialogConfirm(
$q,
async () => {
() => {
edit.value ? editData(id.value) : addData();
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
onMounted(async () => {
await fetchData(profileId.value);
onMounted(() => {
fetchData(profileId.value);
});
</script>
<template>

View file

@ -8,10 +8,7 @@ import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
RequestItemsObject,
FormFilter,
} from "@/modules/04_registryPerson/interface/index/discipline";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/discipline";
const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
@ -23,23 +20,9 @@ const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
mixin;
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const filterKeyword = ref<string>("");
const rows = ref<RequestItemsObject[]>([]); //select data history
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
@ -150,6 +133,9 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/**
* fetch อมลประวการแกไขขอมลว
*/
function getHistory() {
showLoader();
http
@ -262,14 +248,7 @@ watch(modal, (status) => {
<template v-slot:body="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else>
<div>
{{ col.value ? col.value : "-" }}
</div>
</q-td>

View file

@ -9,11 +9,9 @@ import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
DetailData,
FormFilter,
DataOptionLeave,
DataOption,
ResponseTotalObject,
MyObjectRef,
} from "@/modules/04_registryPerson/interface/index/leave";
import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue";
@ -48,21 +46,8 @@ const pagination = ref({
});
const mode = ref<string>("table");
const filterKeyword = ref<string>("");
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const rows = ref<DetailData[]>([]);
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const modal = ref<boolean>(false);
const edit = ref<boolean>(false);
@ -114,19 +99,6 @@ const clickEditRowType = () => {
}
};
const typeLeaveRef = ref<object | null>(null);
const dateRangeRef = ref<object | null>(null);
const numLeaveRef = ref<object | null>(null);
const statLeaveRef = ref<object | null>(null);
const reasonRef = ref<object | null>(null);
const objectRef: MyObjectRef = {
typeLeave: typeLeaveRef,
dateRange: dateRangeRef,
numLeave: numLeaveRef,
statLeave: statLeaveRef,
reason: reasonRef,
};
const visibleColumns = ref<String[]>([
"no",
"typeLeave",
@ -205,6 +177,9 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/**
* function เป dialog อมลการลา
*/
function openDialogAdd() {
modal.value = true;
edit.value = false;
@ -255,6 +230,9 @@ function clickTotal() {
});
}
/**
* function เป dialog แกไขขอมลการลา
*/
function openDialogEdit(props: DetailData) {
edit.value = true;
modal.value = true;
@ -286,11 +264,12 @@ function openDialogEdit(props: DetailData) {
}
}
/** ปิด dialog */
/**
* dialog อมลการลา
*/
function closeDialog() {
modal.value = false;
edit.value = false;
id.value = "";
typeLeave.value = "";
statLeave.value = "";
@ -300,6 +279,12 @@ function closeDialog() {
numUsedLeave.value = 0;
}
/**
* function นหา คำใน option
* @param val คำคนหา
* @param update function
* @param filtername type select
*/
function filterSelector(val: any, update: Function, filtername: string) {
switch (filtername) {
case "typeLeaveOption":
@ -345,27 +330,17 @@ function openDialogHistory(idOrder: string) {
id.value = idOrder;
}
/** validate check*/
function validateForm() {
const hasError = [];
for (const key in objectRef) {
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
const property = objectRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
/**
* function นยนการบนทกขอม
*/
function onSubmit() {
dialogConfirm($q, async () => {
if (edit.value == false) {
saveData();
} else {
editData();
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm($q, async () => {
if (edit.value == false) {
saveData();
} else {
editData();
}
});
}
});
}
/**
@ -373,7 +348,6 @@ function validateForm() {
*/
function saveData() {
showLoader();
http
.post(config.API.profileNewLeave(empType.value), {
leaveTypeId: typeLeave.value.id,
@ -387,15 +361,16 @@ function saveData() {
profileId: empType.value === "" ? profileId.value : undefined,
profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await getData();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
getData();
hideLoader();
});
}
@ -415,18 +390,22 @@ const editData = async () => {
status: statLeave.value,
reason: reason.value,
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await getData();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
getData();
hideLoader();
});
};
/**
* function fetch อมลรายการว
*/
function getData() {
showLoader();
http
@ -594,9 +573,7 @@ onMounted(() => {
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
}}
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'dateLeave'">
{{
@ -684,7 +661,7 @@ onMounted(() => {
<!-- dialog add edit -->
<q-dialog v-model="modal" persistent>
<q-card>
<form @submit.prevent="validateForm">
<q-form @submit.prevent greedy @validation-success="onSubmit()">
<DialogHeader
:tittle="edit ? 'แก้ไขข้อมูลการลา' : 'เพิ่มข้อมูลการลา'"
:close="closeDialog"
@ -814,7 +791,7 @@ onMounted(() => {
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</q-card-actions>
</form>
</q-form>
</q-card>
</q-dialog>

View file

@ -146,6 +146,10 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
/**
* function fetch อมลประวการแกไขการลา
*/
function getHistory() {
showLoader();
http
@ -172,7 +176,7 @@ function getHistory() {
});
})
.catch((e) => {
// messageError($q, e);
messageError($q, e);
})
.finally(() => {
hideLoader();
@ -192,6 +196,10 @@ function dateThaiRange(val: [Date, Date]) {
}
}
/**
* function convertStatus
* @param val
*/
function statusLeave(val: string) {
switch (val) {
case "waitting":

View file

@ -42,11 +42,6 @@ const modalHistory = ref<boolean>(false);
const id = ref<string>("");
const dateStartRef = ref<object | null>(null);
const dateEndRef = ref<object | null>(null);
const detailRef = ref<object | null>(null);
const referenceRef = ref<object | null>(null);
const dutyData = reactive<RequestItemsObject>({
profileId: profileId.value,
dateStart: new Date(),
@ -78,9 +73,6 @@ const formFilter = reactive<FormFilter>({
isProbation: false,
});
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const visibleColumns = ref<String[]>([
"dateStart",
"dateEnd",
@ -201,10 +193,12 @@ function closeDialog() {
dutyData.refCommandDate = null;
}
/** fetch ข้อมูล */
async function fetchData(id: string) {
/**
* fetch อมลรายการพเศษ
*/
function fetchData(id: string) {
showLoader();
await http
http
.get(config.API.profileNewDutyByProfileId(id, empType.value))
.then(async (res) => {
rows.value = res.data.result;
@ -217,9 +211,11 @@ async function fetchData(id: string) {
});
}
/** เพิ่มข้อมูล */
async function addData() {
/**
* functoin นทกการเพมขอม
*/
function addData() {
showLoader();
const body = {
profileId: empType.value === "" ? profileId.value : undefined,
profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
@ -230,11 +226,12 @@ async function addData() {
refCommandNo: dutyData.refCommandNo,
refCommandDate: dutyData.refCommandDate,
};
await http
http
.post(config.API.profileNewDuty(empType.value), body)
.then(() => {
fetchData(profileId.value);
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await fetchData(profileId.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
@ -244,17 +241,20 @@ async function addData() {
});
}
/** แก้ไขข้อมูล */
async function editData(idData: string) {
await http
/**
* functoin นทกการแกไขขอม
*/
function editData(idData: string) {
showLoader();
http
.patch(config.API.profileNewDutyByDutyId(idData, empType.value), {
...dutyData,
profileId: undefined,
})
.then(() => {
fetchData(profileId.value);
success($q, "บันทึกข้อมูลสำเร็จ");
.then(async () => {
await fetchData(profileId.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
@ -264,41 +264,22 @@ async function editData(idData: string) {
});
}
/** ลบข้อมูล */
// function deleteData(idData: string) {
// dialogRemove($q, () =>
// http
// .delete(config.API.profileNewDutyByDutyId(idData))
// .then(() => {
// fetchData(profileId.value);
// success($q, "");
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// })
// );
// }
/** กด Submit */
async function onSubmit() {
/**
* นยนการบนทกขอม
*/
function onSubmit() {
dialogConfirm(
$q,
async () => {
() => {
edit.value ? editData(id.value) : addData();
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
onMounted(async () => {
await fetchData(profileId.value);
onMounted(() => {
fetchData(profileId.value);
});
</script>
<template>
@ -547,6 +528,7 @@ onMounted(async () => {
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="dutyData.dateEnd"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{

View file

@ -24,22 +24,8 @@ const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const filterKeyword = ref<string>("");
const rows = ref<ResponseObject[]>([]); //select data history
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const historyPagination = ref({
page: 1,
@ -149,6 +135,10 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
/**
* function fetch อมลประวตการแกไขขอม
*/
function getHistory() {
showLoader();
http
@ -264,14 +254,7 @@ watch(modal, (status) => {
<template v-slot:body="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else class="table_ellipsis">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>