ทะเบียนประวัติ: ดูประวัติแก้ไขข้อมูลส่วนตัว ประวัติเปลี่ยนชื่อ
This commit is contained in:
puriphatt
parent
832157d72b
commit
ae8e363bbc
2 changed files with 341 additions and 30 deletions
|
|
@ -1,19 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
||||
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsHistoryObject,
|
||||
Columns,
|
||||
} from "@/modules/04_registry/interface/request/Information";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -22,6 +26,10 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
|||
|
||||
const modal = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
|
|
@ -100,8 +108,206 @@ const dataLabel = {
|
|||
lastName: "นามสกุล",
|
||||
};
|
||||
|
||||
const columnsHistory = ref<QTableColumn[]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้าชื่อ",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "birthDate",
|
||||
align: "left",
|
||||
label: "วัน/เดือน/ปี เกิด",
|
||||
sortable: true,
|
||||
field: "birthDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gender",
|
||||
align: "left",
|
||||
label: "เพศ",
|
||||
sortable: true,
|
||||
field: "gender",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "relationship",
|
||||
align: "left",
|
||||
label: "สถานภาพ",
|
||||
sortable: true,
|
||||
field: "relationship",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "bloodGroup",
|
||||
align: "left",
|
||||
label: "หมู่เลือด",
|
||||
sortable: true,
|
||||
field: "bloodGroup",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "nationality",
|
||||
align: "left",
|
||||
label: "สัญชาติ",
|
||||
sortable: true,
|
||||
field: "nationality",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "race",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "race",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "religion",
|
||||
align: "left",
|
||||
label: "ศาสนา",
|
||||
sortable: true,
|
||||
field: "religion",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeType",
|
||||
align: "left",
|
||||
label: "ประเภทการจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeClass",
|
||||
align: "left",
|
||||
label: "ประเภทลูกจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeClass",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"birthDate",
|
||||
"gender",
|
||||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"race",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
// get person detail list
|
||||
const fetchPerson = async () => {
|
||||
async function fetchPerson() {
|
||||
// showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
|
|
@ -162,9 +368,9 @@ const fetchPerson = async () => {
|
|||
// hideLoader();
|
||||
profileStore.isLoad++;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
|
|
@ -219,7 +425,54 @@ const filterSelector = (val: any, update: Function, refData: string) => {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function clickHistory() {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileInforHisId(route.params.id.toString()))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: RequestItemsHistoryObject) => {
|
||||
// rowsHistory.value.push({
|
||||
// citizenId: e.citizenId,
|
||||
// prefix: e.prefix,
|
||||
// firstName: e.firstName,
|
||||
// lastName: e.lastName,
|
||||
// birthDate: new Date(e.birthDate),
|
||||
// gender: e.gender,
|
||||
// relationship: e.relationship,
|
||||
// bloodGroup: e.bloodGroup,
|
||||
// nationality: e.nationality,
|
||||
// race: e.race,
|
||||
// religion: e.religion,
|
||||
// telephoneNumber: e.telephoneNumber,
|
||||
// employeeType:
|
||||
// e.employeeType == "gov"
|
||||
// ? "งบประมาณเงินอุดหนุนรัฐบาล"
|
||||
// : e.employeeType == "bkk"
|
||||
// ? "งบประมาณกรุงเทพมหานคร"
|
||||
// : "-",
|
||||
// employeeClass:
|
||||
// e.employeeClass == "perm"
|
||||
// ? "ลูกจ้างประจำ"
|
||||
// : e.employeeClass == "temp"
|
||||
// ? "ลูกจ้างชั่วคราว"
|
||||
// : "-",
|
||||
// createdFullName: e.createdFullName,
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
|
|
@ -236,11 +489,10 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-pt-sm q-pb-lg justyfy-between items-center">
|
||||
<span class="col text-subtitle1 text-weight-bold text-dark">
|
||||
ประวัติส่วนตัว
|
||||
</span>
|
||||
<div class="col text-right">
|
||||
<div class="row q-gutter-sm items-center">
|
||||
<div class="toptitle col text-dark">ประวัติส่วนตัว</div>
|
||||
|
||||
<div class="toptitle col text-right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -250,7 +502,7 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round icon="mdi-history" color="info">
|
||||
<q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
|
||||
<q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
@ -352,7 +604,10 @@ onMounted(async () => {
|
|||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<DialogHeader tittle="แก้ไขประวัติส่วนตัว" :close="() => modal = false" />
|
||||
<DialogHeader
|
||||
tittle="แก้ไขประวัติส่วนตัว"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
|
|
@ -591,15 +846,46 @@ onMounted(async () => {
|
|||
flat
|
||||
round
|
||||
type="submit"
|
||||
icon="mdi-pencil-outline"
|
||||
color="primary"
|
||||
icon="mdi-content-save-outline"
|
||||
color="secondary"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
position: fixed !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -210,11 +210,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const openFile = async (val: string | null) => {
|
||||
async function openFile(val: string | null) {
|
||||
if (val != null) window.open(val);
|
||||
};
|
||||
}
|
||||
|
||||
const clickHistory = async (row: RequestItemsObject) => {
|
||||
async function clickHistory(row: RequestItemsObject) {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
|
|
@ -242,9 +242,9 @@ const clickHistory = async (row: RequestItemsObject) => {
|
|||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
};
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileChangeNameId(profileId.value))
|
||||
|
|
@ -271,7 +271,7 @@ const fetchData = async () => {
|
|||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchData();
|
||||
|
|
@ -279,11 +279,9 @@ onMounted(async () => {
|
|||
</script>
|
||||
<template>
|
||||
<div class="row q-gutter-sm items-center">
|
||||
<div class="toptitle col text-dark">
|
||||
ประวัติการเปลี่ยนชื่อ-นามสกุล
|
||||
</div>
|
||||
|
||||
<div class="toptitle row ">
|
||||
<div class="toptitle col text-dark">ประวัติการเปลี่ยนชื่อ-นามสกุล</div>
|
||||
|
||||
<div class="toptitle row">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -395,6 +393,33 @@ onMounted(async () => {
|
|||
v-model:tittle="tittleHistory"
|
||||
:history="true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'" class="table_ellipsis">
|
||||
{{ typeChangeName(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.file != null"
|
||||
color="green"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-document-outline"
|
||||
@click="openFile(props.row.file)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue