Merge branch 'develop' into nice_dev

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-11-27 16:34:17 +07:00
commit e3bcb01abe
11 changed files with 446 additions and 149 deletions

View file

@ -42,6 +42,7 @@ export default {
investigateReject: (id: string) => `${investigate}/reject/${id}`,
investigateResume: (id: string) => `${investigate}/resume/${id}`,
investigateApprove: (id: string) => `${investigate}/approve/${id}`,
/** ระบบวินัยเรื่องสอบสวน */
disciplineDisciplinary: () => `${discipline}/disciplinary`,

View file

@ -91,8 +91,8 @@ async function changeRound() {
.post(config.API.leaveRound(), {
profileId: props.personId,
roundId: formData.round,
effectDate: formData.effectiveDate,
remark: formData.round,
effectiveDate: formData.effectiveDate,
remark: formData.reson,
})
.then(() => {
success($q, "บันทึกข้อมูลเปลี่ยนรอบเวลา");

View file

@ -4,7 +4,7 @@ import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
@ -14,7 +14,8 @@ import type {
ArrayFileList,
} from "@/modules/11_discipline/interface/request/complaint";
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
const complainstStore = useComplainstDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
@ -134,6 +135,92 @@ const data = reactive<FormData>({
// ]);
// };
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "idcard",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "idcard",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "positionNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
"no",
"idcard",
"name",
"positionNo",
"position",
"positionLevel",
"salary",
"organization",
]);
async function getData() {
showLoader();
await http
@ -157,7 +244,6 @@ async function getData() {
data.persons = dataList.persons;
data.result = dataList.result;
data.disciplineComplaintDocs = dataList.disciplineComplaintDocs;
})
.catch((e) => {
messageError($q, e);
@ -185,7 +271,28 @@ async function onSubmit(data: any) {
/** ยืนยัน มีมูลส่งไปสืบสวน */
function sentInvestigate() {
modalPopup.value = true;
if (complainstStore.rowsAdd.length > 0) {
modalPopup.value = true;
} else {
dialogConfirm($q,()=>sentConfirm(),'ยืนยันส่งไปสืบสวน','ต้องการยืนยันยืนยันส่งไปสืบสวนใช่หรือไม่?')
}
}
function sentConfirm(){
showLoader();
http
.put(config.API.complaintApprove(id.value), {
persons: [],
})
.then((res) => {
router.push(`/discipline/complaints`);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function closePopup() {
@ -314,6 +421,9 @@ onMounted(() => {
:modal="modalPopup"
:close="closePopup"
@return-person="emitPerson"
:rows="complainstStore.rowsAdd"
:columns="columns"
:visibleColumns="visibleColumns"
/>
</div>
</template>

View file

@ -366,7 +366,7 @@ function confirmDelete(id: string) {
watch(props.data, async () => {
fileList.value = props.data.disciplineComplaintDocs;
complainstStore.fetchComplainstAdd(props.data.persons);
formData.id = props.data.id;
formData.respondentType = props.data.respondentType;
formData.organizationId = props.data.organizationId;
@ -403,20 +403,22 @@ function upLoadFileDoc() {
.then((res) => {
console.log(res);
success($q, "บันทึกข้อมูลสำเร็จ");
router.push(`/discipline/complaints`);
props.getData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
formData.documentFile = null
});
console.log("file", formData.documentFile, formData.id);
}
async function addPerson(data: any) {
await complainstStore.fetchComplainstAdd(data);
toggleModal();
console.log(data)
await complainstStore.fetchComplainstAdd(data);
}
function getOc() {
@ -425,6 +427,19 @@ function getOc() {
complainstStore.ocListFn(data);
});
}
function deletePerson(id: string) {
dialogRemove($q, () => removePerson(id));
}
function removePerson(id: string) {
const dataRow = complainstStore.rowsAdd;
const updatedRows = dataRow.filter((item: any) => item.id !== id);
success($q,'ลบข้อมูลสำเร็จ')
complainstStore.rowsAdd = updatedRows;
}
onMounted(() => {
getOc();
complainstStore.columns = columns.value;
@ -575,6 +590,7 @@ onMounted(() => {
col.label
}}</span>
</q-th>
<q-th auto-width v-if="formData.status === 'NEW'"></q-th>
</q-tr>
</template>
<template v-slot:body="props">
@ -595,10 +611,29 @@ onMounted(() => {
>
{{ col.value }}
</div>
<div
v-else-if="col.name === 'organization'"
class="table_ellipsis"
>
{{ props.row.organization }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width v-if="formData.status === 'NEW'">
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deletePerson(props.row.id)"
><q-tooltip>ลบผกรองเรยน</q-tooltip></q-btn
>
</q-td>
</q-tr>
</template>
</d-table>
@ -911,8 +946,7 @@ onMounted(() => {
</form>
</q-card>
</div>
<div class="col-12 q-mt-sm q-mb-lg" v-if="props.data && fileList.length > 0">
<div class="col-12 q-mt-sm q-mb-lg" v-if="props.data">
<q-card flat bordered>
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
@ -979,6 +1013,7 @@ onMounted(() => {
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
<q-btn
v-if="formData.status === 'NEW'"
size="12px"
flat
round
@ -992,6 +1027,13 @@ onMounted(() => {
</q-item>
</q-list>
</div>
<div v-if="fileList.length === 0">
<q-card class="bg-grey-4 q-ma-sm q-py-md" bordered>
<p class="text-subtitle1 text-center q-ma-none text-bold">
ไมรายการเอกสาร
</p>
</q-card>
</div>
</q-card>
</div>

View file

@ -3,7 +3,7 @@ import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
@ -31,97 +31,23 @@ const props = defineProps({
type: Function,
default: () => "",
},
rows: {
type: Array,
default: [],
},
columns: {
type: Array,
default: [],
},
visibleColumns: {
type: Array,
default: [],
},
});
const emit = defineEmits([
"returnPerson"
])
const emit = defineEmits(["returnPerson"]);
/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "idcard",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "idcard",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "positionNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
"no",
"idcard",
"name",
"positionNo",
"position",
"positionLevel",
"salary",
"organization",
]);
const selected = ref<any>([]);
const inspectionResults = ref<string>("");
@ -134,24 +60,18 @@ const initialPagination = ref<any>({
});
function onclickSend() {
// inputRef.value.validate();
// dialogConfirm($q, () => props.sentApprove());
if (selected.value.length > 0) {
dialogConfirm(
$q,
async () => {
success($q, `ส่งข้อมูล${props.title}สำเร็จ`);
console.log(selected.value);
emit('returnPerson',selected.value)
emit("returnPerson", selected.value);
props.close?.();
},
`ยืนยันการส่ง${props.title}`,
`ต้องการยืนยันการส่ง${props.title}หรือไม่`
);
} else {
dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
}
}
function onClickClose() {
@ -161,10 +81,9 @@ function onClickClose() {
watch([() => props.modal], () => {
inspectionResults.value = props.modal ? "" : "";
selected.value = props.modal ? [] : [];
if(props.modal === true){
selected.value = complainstStore.rowsAdd;
if (props.modal === true) {
selected.value = props.rows;
}
});
</script>
<template>
@ -202,12 +121,12 @@ watch([() => props.modal], () => {
<!-- แสดงคอลมนใน table -->
<q-select
for="selectVisibleColumns"
v-model="visibleColumns"
v-model="props.visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
:options="props.columns"
options-dense
option-value="name"
map-options
@ -219,8 +138,8 @@ watch([() => props.modal], () => {
</div>
<d-table
ref="table"
:columns="columns"
:rows="complainstStore.rowsAdd"
:columns="props.columns"
:rows="props.rows"
:filter="filter"
row-key="personId"
flat
@ -228,7 +147,7 @@ watch([() => props.modal], () => {
:paging="false"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:visible-columns="props.visibleColumns"
selection="multiple"
v-model:selected="selected"
:pagination="initialPagination"

View file

@ -177,6 +177,7 @@ watch(
class="custom-header-table"
:visible-columns="complainstStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
<q-pagination

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, watch } from "vue";
import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //
import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //
import { useRouter, useRoute } from "vue-router";
@ -8,9 +8,18 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
import { useQuasar } from "quasar";
import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
import type {
FormData as FormDataComplaint,
ArrayPerson,
ArrayFileList,
} from "@/modules/11_discipline/interface/request/complaint";
import type { QTableProps } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
const investigateFactStore = useInvestigateFactStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useInvestigateFactStore();
@ -19,7 +28,7 @@ const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
/** ข้อมูล v-model ของฟอร์ม */
/** ข้อมูล v-model ของฟอร์มสืบสวน */
const data = reactive<FormData>({
id: "",
idComplaint: "",
@ -46,9 +55,181 @@ const data = reactive<FormData>({
documentFile: null,
respondentType: "",
organizationId: "",
persons:[]
persons: [],
});
/** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
const personObjComplaint = reactive<ArrayPerson>({
personId: "",
idcard: "",
name: "",
prefix: "",
firstName: "",
lastName: "",
posNo: "",
position: "",
positionLevel: "",
salary: null,
organization: "",
});
const fileListObjComplaint = reactive<ArrayFileList>({
id: "",
pathName: "",
fileName: "",
});
const dataComplaints = reactive<FormDataComplaint>({
id: "",
respondentType: "",
organizationId: "",
consideredAgency: "",
title: "",
description: "",
dateReceived: null,
dateConsideration: null,
offenseDetails: "",
levelConsideration: "",
dateNotification: null,
complaintFrom: "",
appellant: "",
documentFile: null,
status: "",
persons: [personObjComplaint],
result: "",
disciplineComplaintDocs: [fileListObjComplaint],
});
async function getDataComplaint() {
showLoader();
await http
.get(config.API.complaintbyId(data.idComplaint))
.then((res) => {
const dataList = res.data.result;
dataComplaints.id = dataList.id;
dataComplaints.respondentType = dataList.respondentType;
dataComplaints.organizationId = dataList.organizationId;
dataComplaints.consideredAgency = dataList.consideredAgency;
dataComplaints.title = dataList.title;
dataComplaints.description = dataList.description;
dataComplaints.dateReceived = dataList.dateReceived;
dataComplaints.levelConsideration = dataList.levelConsideration;
dataComplaints.dateConsideration = dataList.dateConsideration;
dataComplaints.offenseDetails = dataList.offenseDetails;
dataComplaints.dateNotification = dataList.dateNotification;
dataComplaints.complaintFrom = dataList.complaintFrom;
dataComplaints.appellant = dataList.appellant;
dataComplaints.status = dataList.status;
dataComplaints.persons = dataList.persons;
dataComplaints.result = dataList.result;
dataComplaints.disciplineComplaintDocs = dataList.disciplineComplaintDocs;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
{
name: "info",
align: "left",
label: "",
sortable: false,
field: "info",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "idcard",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "idcard",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
"info",
"no",
"idcard",
"name",
"posNo",
"position",
"positionLevel",
"salary",
"organization",
]);
function getData() {
showLoader();
http
@ -58,8 +239,8 @@ function getData() {
const dataList = res.data.result;
data.id = dataList.id;
data.idComplaint = dataList.idComplaint;
data.respondentType = dataList.respondentType
data.persons = dataList.persons
data.respondentType = dataList.respondentType;
data.persons = dataList.persons;
data.investigationDetail = dataList.investigationDetail;
data.investigationDetailOther = dataList.investigationDetailOther;
data.investigationDateStart = dataList.investigationDateStart;
@ -178,11 +359,39 @@ function confirmCancelInvestigate() {
});
}
function emitPerson(data: FormData[]) {
const dataMapId = data.map((item: FormData) => item.id);
showLoader();
http
.put(config.API.investigateApprove(id.value), {
persons: dataMapId,
})
.then((res) => {
// router.push(`/discipline/investigatefacts`);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(() => {
getData();
});
watch(
() => store.tabMenu,
() => {
if (store.tabMenu == "complaints") {
getDataComplaint();
} else {
getData();
}
}
);
</script>
<template>
@ -233,13 +442,13 @@ onMounted(() => {
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tab name="complaints" label="เรื่องร้องเรียน" />
<q-tab name="complaints" label="เรื่องร้องเรียน (สำเนา)" />
<q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="store.tabMenu" animated>
<q-tab-panel name="complaints">
<FormComplaints :on-submit="onSubmit" />
<FormComplaints :data="dataComplaints" />
</q-tab-panel>
<q-tab-panel name="investigatefacts">
<FormInvestigatefacts
@ -251,7 +460,15 @@ onMounted(() => {
</q-tab-panels>
</q-card>
<Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน" />
<Popup
:modal="modalPopup"
:close="closePopup"
title="ส่งไปสอบสวน"
:rows="investigateFactStore.rowsAdd"
:columns="columns"
:visibleColumns="visibleColumns"
@return-person="emitPerson"
/>
</div>
</template>
<style scoped>

View file

@ -261,11 +261,11 @@ function onSubmit() {
}
/**
* งชนคำนวณเวลาวนทนสดจาก นทเร
* @param val นทเร
* งชนคำนวณเวลาวนทนสดจาก นทนสดการสบสวน
* @param val จำนวนนทองการขยาย
*/
function calEndDate(val: string) {
const date = new Date(props.data.dateEnd);
const date = new Date(props.data.investigationDateEnd);
const dateNew = new Date();
formData.investigationDateEnd = new Date(
dateNew.setDate(date.getDate() + Number(val))
@ -730,8 +730,8 @@ onMounted(async () => {
นทบสวน
<q-checkbox
v-if="
props.data.investigationDateStart === null &&
props.data.investigationDateEnd === null
props.data.investigationDateStart != null &&
props.data.investigationDateEnd != null
"
for="#clickTime"
size="md"

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, useAttrs, onMounted,watch } from "vue";
import { ref, useAttrs, onMounted, watch } from "vue";
import router from "@/router";
import { useQuasar } from "quasar";
@ -10,7 +10,6 @@ import http from "@/plugins/http";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
const dataInvestigate = useInvestigateFactStore();
const { fecthList } = dataInvestigate;
const mixin = useCounterMixin();
const {
date2Thai,
@ -47,16 +46,22 @@ const pagination = ref({
rowsPerPage: rowsPerPage.value,
});
watch(() => currentPage.value,() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
});
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
}
);
watch(()=>pagination.value.rowsPerPage,()=>{
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1
getList();
})
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getList();
}
);
async function getList() {
showLoader();
await http
@ -69,7 +74,7 @@ async function getList() {
)
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
const data = res.data.result.data
const data = res.data.result.data;
dataInvestigate.fecthList(data);
})
.catch((e) => {
@ -82,7 +87,6 @@ async function getList() {
const attrs = ref<any>(useAttrs());
/**ไปยังหน้าเพิ่มข้อมูล */
const clickAdd = () => {
router.push(`/discipline/investigatefacts/add`);
@ -92,15 +96,16 @@ const clickAdd = () => {
* ไปหนาแกไข
* @param id ไอดเฉพาะ รายบคคล
*/
function editPage(id: string) {
async function editPage(id: string) {
dataInvestigate.tabMenu = await "investigatefacts";
router.push(`/discipline/investigatefacts/${id}`);
}
/**
/**
* งขอมลจำลองไปย store
*/
onMounted(async () => {
getList()
getList();
});
</script>
<template>
@ -163,7 +168,7 @@ onMounted(async () => {
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
ref="table"
@ -179,8 +184,9 @@ onMounted(async () => {
v-bind="attrs"
:visible-columns="dataInvestigate.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
<template v-slot:pagination="scope">
<q-pagination
v-model="currentPage"
active-color="primary"

View file

@ -2,12 +2,12 @@ interface DataListRow {
id: string;
personId: string;
title: string;
dateReceived: string;
dateReceived: string|null;
respondentType: string;
offenseDetails: string;
createdAt: string;
levelConsideration: string;
dateConsideration: string;
dateConsideration: string |null;
status: string;
}
interface DataAdd {

View file

@ -23,6 +23,7 @@ export const useComplainstDataStore = defineStore(
const visibleColumns = ref<string[]>([]);
const columns = ref<QTableProps["columns"]>([]);
function fetchComplainstAdd(data: ArrayPerson[]) {
rowsAdd.value = data;
}