ทะเบียนประวัติ: ประวัติส่วนตัว (GET, PUT)
This commit is contained in:
puriphatt
parent
93fc17cea0
commit
79f08f7569
5 changed files with 409 additions and 454 deletions
|
|
@ -1,11 +1,26 @@
|
|||
import env from "../index";
|
||||
|
||||
const registryNew = `${env.API_URI}/org/profile/`;
|
||||
const metadata = `${env.API_URI}/org/metadata/`;
|
||||
|
||||
export default {
|
||||
registryNew,
|
||||
registryNewByProfileId: (profileId: string) => `${registryNew}${profileId}`,
|
||||
|
||||
// metadata
|
||||
profileNewGender: `${metadata}gender`,
|
||||
profileNewReligion: `${metadata}religion`,
|
||||
profileNewRelationship: `${metadata}relationship`,
|
||||
profileNewBloodGroup: `${metadata}bloodGroup`,
|
||||
|
||||
// ประวัติส่วนตัว
|
||||
profileNewProfileByProfileId: (profileId: string) =>
|
||||
`${registryNew}${profileId}`,
|
||||
profileNewProfileById: (dataId: string) =>
|
||||
`${registryNew}${dataId}`,
|
||||
profileNewProfileHisById: (dataId: string) =>
|
||||
`${registryNew}history/${dataId}`,
|
||||
|
||||
// บันทึกวันที่ไม่ได้รับเงินเดือนฯ
|
||||
profileNewNoPaid: `${registryNew}nopaid`,
|
||||
profileNewNoPaidByProfileId: (profileId: string) =>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, watch, ref } from "vue";
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -9,18 +10,16 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
InformationOps,
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registryNew/interface/index/Main";
|
||||
import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
|
||||
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
|
||||
import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const profileStore = useProfileDataStore();
|
||||
const store = useProfileDataStore();
|
||||
const {
|
||||
success,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
|
|
@ -28,73 +27,45 @@ const {
|
|||
convertDate,
|
||||
dateToISO,
|
||||
} = mixin;
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
|
||||
store;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
const modal = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const informaData = ref<ResponseObject>();
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
// mock data
|
||||
const resultData = ref({
|
||||
citizenId: "3101502080439",
|
||||
prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
|
||||
prefix: "นางสาว",
|
||||
firstName: "อรัญญาสาร",
|
||||
lastName: "พรไชยะสิทธฺ์",
|
||||
birthDate: new Date("1968-11-24T00:00:00"),
|
||||
age: "55 ปี 3 เดือน 16 วัน",
|
||||
genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
|
||||
gender: "หญิง",
|
||||
relationshipId: null,
|
||||
bloodGroupId: null,
|
||||
nationality: "ไทย",
|
||||
race: "ไทย",
|
||||
religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
|
||||
const id = ref<string>("");
|
||||
const age = ref<string>("");
|
||||
// หลังบ้านไม่มีข้อมูล สัญชาติ
|
||||
const nationality = ref<string>("")
|
||||
const formData = reactive<RequestObject>({
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
birthDate: null,
|
||||
genderId: "",
|
||||
relationshipId: "",
|
||||
// nationality: "",
|
||||
ethnicity: "",
|
||||
religionId: "",
|
||||
bloodGroupId: "",
|
||||
phone: "",
|
||||
posTypeId: "",
|
||||
posLevelId: "",
|
||||
telephoneNumber: null,
|
||||
profileType: "officer",
|
||||
employeeType: null,
|
||||
employeeClass: null,
|
||||
changeName: true,
|
||||
isVerified: true,
|
||||
isSendVerified: false,
|
||||
dateRetire: null,
|
||||
isProbation: false,
|
||||
keycloak: "",
|
||||
email: null,
|
||||
position: "",
|
||||
});
|
||||
|
||||
const dataLabel = {
|
||||
|
|
@ -105,10 +76,10 @@ const dataLabel = {
|
|||
gender: "เพศ",
|
||||
relationship: "สถานภาพ",
|
||||
nationality: "สัญชาติ",
|
||||
race: "เชื้อชาติ",
|
||||
ethnicity: "เชื้อชาติ",
|
||||
religion: "ศาสนา",
|
||||
bloodGroup: "หมู่เลือด",
|
||||
telephoneNumber: "เบอร์โทร",
|
||||
phone: "เบอร์โทร",
|
||||
|
||||
prefix: "คำนำหน้าชื่อ",
|
||||
firstName: "ชื่อ",
|
||||
|
|
@ -238,11 +209,11 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
name: "phone",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
field: "phone",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -306,253 +277,89 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"nationality",
|
||||
"race",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"phone",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
async function fetchData() {
|
||||
informaData.value.cardid = resultData.value.citizenId;
|
||||
informaData.value.prefixId = resultData.value.prefixId;
|
||||
informaData.value.prefix = resultData.value.prefix;
|
||||
informaData.value.firstname = resultData.value.firstName;
|
||||
informaData.value.lastname = resultData.value.lastName;
|
||||
informaData.value.birthDate = resultData.value.birthDate;
|
||||
informaData.value.age = resultData.value.age;
|
||||
informaData.value.genderId = resultData.value.genderId;
|
||||
informaData.value.bloodId = resultData.value.bloodGroupId;
|
||||
informaData.value.nationality = resultData.value.nationality;
|
||||
informaData.value.ethnicity = resultData.value.race;
|
||||
informaData.value.statusId = resultData.value.relationshipId;
|
||||
informaData.value.religionId = resultData.value.religionId;
|
||||
informaData.value.tel = resultData.value.telephoneNumber;
|
||||
informaData.value.employeeType = resultData.value.employeeType;
|
||||
informaData.value.employeeClass = resultData.value.employeeClass;
|
||||
informaData.value.profileType = resultData.value.profileType;
|
||||
}
|
||||
|
||||
// get person detail list
|
||||
async function fetchPerson() {
|
||||
// showLoader();
|
||||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
.get(config.API.profileNewProfileByProfileId(profileId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let optionbloodGroups: DataOption[] = [];
|
||||
data.bloodGroups.map((r: any) => {
|
||||
optionbloodGroups.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.bloodOps = optionbloodGroups;
|
||||
OpsFilter.value.bloodOps = optionbloodGroups;
|
||||
|
||||
let optiongenders: DataOption[] = [];
|
||||
data.genders.map((r: any) => {
|
||||
optiongenders.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.genderOps = optiongenders;
|
||||
OpsFilter.value.genderOps = optiongenders;
|
||||
|
||||
let optionprefixs: DataOption[] = [];
|
||||
data.prefixs.map((r: any) => {
|
||||
optionprefixs.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.prefixOps = optionprefixs;
|
||||
OpsFilter.value.prefixOps = optionprefixs;
|
||||
|
||||
let optionrelationships: DataOption[] = [];
|
||||
data.relationships.map((r: any) => {
|
||||
optionrelationships.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.statusOps = optionrelationships;
|
||||
OpsFilter.value.statusOps = optionrelationships;
|
||||
|
||||
let optionreligions: DataOption[] = [];
|
||||
data.religions.map((r: any) => {
|
||||
optionreligions.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
informaData.value = res.data.result;
|
||||
if (informaData.value) {
|
||||
age.value = calculateAge(informaData.value.birthDate);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "genderOps":
|
||||
update(() => {
|
||||
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "bloodOps":
|
||||
update(() => {
|
||||
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "statusOps":
|
||||
update(() => {
|
||||
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "religionOps":
|
||||
update(() => {
|
||||
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeClassOps":
|
||||
update(() => {
|
||||
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeTypeOps":
|
||||
update(() => {
|
||||
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
function onClickOpenDialog() {
|
||||
if (!informaData.value) return;
|
||||
modal.value = true;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
id.value = informaData.value.id;
|
||||
age.value = calculateAge(informaData.value.birthDate);
|
||||
formData.citizenId = informaData.value.citizenId;
|
||||
formData.prefix = informaData.value.prefix;
|
||||
formData.firstName = informaData.value.firstName;
|
||||
formData.lastName = informaData.value.lastName;
|
||||
formData.birthDate = informaData.value.birthDate;
|
||||
formData.genderId = informaData.value.genderId;
|
||||
formData.relationshipId = informaData.value.relationshipId;
|
||||
// formData.nationality = informaData.value.nationality;
|
||||
formData.ethnicity = informaData.value.ethnicity;
|
||||
formData.religionId = informaData.value.religionId;
|
||||
formData.bloodGroupId = informaData.value.bloodGroupId;
|
||||
formData.phone = informaData.value.phone;
|
||||
}
|
||||
|
||||
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();
|
||||
// });
|
||||
}
|
||||
|
||||
async function calRetire(birth: Date) {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
};
|
||||
const dateBefore = ref<Date>(new Date());
|
||||
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileCalRetire, body)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
informaData.value.age = data.age;
|
||||
informaData.value.birthDate = birth;
|
||||
changeRetireText(data.retireDate);
|
||||
dateBefore.value = birth;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = dateBefore.value;
|
||||
// inputBirthDate.value = dateBefore.value;
|
||||
changeRetireText(date2Thai(retire));
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
async function editData() {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.profileNewProfileById(id.value), {
|
||||
...formData,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
getData(), (modal.value = false);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => informaData.value.birthDate,
|
||||
(value) => {
|
||||
// const dateVal = convertDate(value);
|
||||
if (value) {
|
||||
calRetire(value);
|
||||
} else {
|
||||
informaData.value.age = "";
|
||||
() => formData.birthDate,
|
||||
(v) => {
|
||||
if (v) {
|
||||
age.value = calculateAge(v);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function onSubmit() {
|
||||
editData();
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
await fetchData();
|
||||
await getData();
|
||||
store.genderOp.length === 0 ? await getGender() : "";
|
||||
store.relationshipOp.length === 0 ? await getRelationship() : "";
|
||||
store.religionOp.length === 0 ? await getReligion() : "";
|
||||
store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -563,18 +370,18 @@ onMounted(async () => {
|
|||
round
|
||||
icon="mdi-pencil-outline"
|
||||
color="primary"
|
||||
@click="modal = true"
|
||||
@click="onClickOpenDialog"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
|
||||
<q-btn flat round icon="mdi-history" color="info">
|
||||
<q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card bordered class="my-card bg-grey-1 q-pa-md">
|
||||
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||
<div v-if="informaData" :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||
<!-- column 1 -->
|
||||
<div class="col-md-7 col-12 row">
|
||||
<div class="col-md-4 col-5 text-grey-6 text-weight-medium">
|
||||
|
|
@ -588,38 +395,24 @@ onMounted(async () => {
|
|||
<!-- data -->
|
||||
<div class="col-md-8 col-7">
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.cardid }}
|
||||
{{ informaData.citizenId }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
`${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
|
||||
`${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{ date2Thai(informaData.birthDate) }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.age ? informaData.age : "-" }}
|
||||
{{ age ? age : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.genderId
|
||||
? (
|
||||
Ops.genderOps.find((r) => r.id === informaData.genderId) ||
|
||||
{}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.gender ? informaData.gender.name : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.statusId
|
||||
? (
|
||||
Ops.statusOps.find((r) => r.id === informaData.statusId) ||
|
||||
{}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.relationship ? informaData.relationship.name : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -643,26 +436,13 @@ onMounted(async () => {
|
|||
{{ informaData.ethnicity ? informaData.ethnicity : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.religionId
|
||||
? (
|
||||
Ops.religionOps.find(
|
||||
(r) => r.id === informaData.religionId
|
||||
) || {}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.religion ? informaData.religion.name : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.bloodId
|
||||
? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
|
||||
.name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.tel ? informaData.tel : "-" }}
|
||||
{{ informaData.phone ? informaData.phone : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -672,7 +452,7 @@ onMounted(async () => {
|
|||
<!-- Edit Dialog -->
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
tittle="แก้ไขประวัติส่วนตัว"
|
||||
:close="() => (modal = false)"
|
||||
|
|
@ -688,7 +468,8 @@ onMounted(async () => {
|
|||
hide-bottom-space
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
v-model="informaData.cardid"
|
||||
v-model="formData.citizenId"
|
||||
class="inputgreen"
|
||||
:label="dataLabel.citizenId"
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
|
|
@ -702,20 +483,17 @@ onMounted(async () => {
|
|||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.prefixId"
|
||||
:options="Ops.prefixOps"
|
||||
v-model="formData.prefix"
|
||||
class="inputgreen"
|
||||
:options="store.prefixOp"
|
||||
:label="dataLabel.prefix"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -724,7 +502,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.firstname"
|
||||
v-model="formData.firstName"
|
||||
class="inputgreen"
|
||||
:label="dataLabel.firstName"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
/>
|
||||
|
|
@ -735,7 +514,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.lastname"
|
||||
v-model="formData.lastName"
|
||||
class="inputgreen"
|
||||
:label="dataLabel.lastName"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
/>
|
||||
|
|
@ -746,7 +526,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="informaData.birthDate"
|
||||
v-model="formData.birthDate"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
|
|
@ -762,9 +542,10 @@ onMounted(async () => {
|
|||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
informaData.birthDate != null
|
||||
? date2Thai(informaData.birthDate)
|
||||
formData.birthDate != null
|
||||
? date2Thai(formData.birthDate)
|
||||
: null
|
||||
"
|
||||
:label="dataLabel.birthDate"
|
||||
|
|
@ -791,7 +572,8 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
readonly
|
||||
v-model="informaData.age"
|
||||
class="inputgreen"
|
||||
v-model="age"
|
||||
:label="dataLabel.age"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -804,15 +586,13 @@ onMounted(async () => {
|
|||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.genderId"
|
||||
:options="Ops.genderOps"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="formData.genderId"
|
||||
class="inputgreen"
|
||||
:options="store.genderOp"
|
||||
:label="dataLabel.gender"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -827,12 +607,10 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.statusId"
|
||||
:options="Ops.statusOps"
|
||||
class="inputgreen"
|
||||
v-model="formData.relationshipId"
|
||||
:options="store.relationshipOp"
|
||||
:label="dataLabel.relationship"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -841,7 +619,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.nationality"
|
||||
class="inputgreen"
|
||||
v-model="nationality"
|
||||
:label="dataLabel.nationality"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -851,8 +630,9 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.ethnicity"
|
||||
:label="dataLabel.race"
|
||||
class="inputgreen"
|
||||
v-model="formData.ethnicity"
|
||||
:label="dataLabel.ethnicity"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -867,12 +647,10 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.religionId"
|
||||
:options="Ops.religionOps"
|
||||
v-model="formData.religionId"
|
||||
class="inputgreen"
|
||||
:options="store.religionOp"
|
||||
:label="dataLabel.religion"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -887,12 +665,10 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.bloodId"
|
||||
:options="Ops.bloodOps"
|
||||
v-model="formData.bloodGroupId"
|
||||
class="inputgreen"
|
||||
:options="store.bloodGroupOp"
|
||||
:label="dataLabel.bloodGroup"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -902,8 +678,9 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
mask="##########"
|
||||
v-model="informaData.tel"
|
||||
:label="dataLabel.telephoneNumber"
|
||||
class="inputgreen"
|
||||
v-model="formData.phone"
|
||||
:label="dataLabel.phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
24
src/modules/04_registryNew/interface/request/Profile.ts
Normal file
24
src/modules/04_registryNew/interface/request/Profile.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
interface RequestObject {
|
||||
bloodGroupId: string | null;
|
||||
relationshipId: string | null;
|
||||
genderId: string | null;
|
||||
posTypeId: string;
|
||||
posLevelId: string;
|
||||
religionId: string | null;
|
||||
citizenId: string;
|
||||
telephoneNumber: string | null;
|
||||
// nationality: string | null;
|
||||
ethnicity: string | null;
|
||||
birthDate: Date | null;
|
||||
dateRetire: Date | null;
|
||||
isProbation: boolean;
|
||||
keycloak: string;
|
||||
phone: string | null;
|
||||
email: string | null;
|
||||
position: string;
|
||||
lastName: string;
|
||||
firstName: string;
|
||||
prefix: string;
|
||||
}
|
||||
|
||||
export type { RequestObject };
|
||||
108
src/modules/04_registryNew/interface/response/Profile.ts
Normal file
108
src/modules/04_registryNew/interface/response/Profile.ts
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
interface ResponseObject {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
createdUserId: string;
|
||||
lastUpdatedAt: Date;
|
||||
lastUpdateUserId: string;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
prefix: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
citizenId: string;
|
||||
position: string;
|
||||
posLevelId: string | null;
|
||||
posTypeId: string | null;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
keycloak: string | null;
|
||||
isProbation: boolean;
|
||||
dateRetire: Date | null;
|
||||
birthDate: Date;
|
||||
ethnicity: string | null;
|
||||
religionId: string | null;
|
||||
religion: Religion | null;
|
||||
telephoneNumber: null | null;
|
||||
genderId: string | null;
|
||||
gender: Gender | null;
|
||||
relationshipId: string | null;
|
||||
relationship: Relationship | null;
|
||||
bloodGroupId: string | null;
|
||||
bloodGroup: BloodGroup | null;
|
||||
posLevel: PosLevel | null;
|
||||
posType: PosType | null;
|
||||
|
||||
nationality?: string;
|
||||
}
|
||||
|
||||
interface Religion {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Gender {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Relationship {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface BloodGroup {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface PosLevel {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
createdUserId: string;
|
||||
lastUpdatedAt: Date;
|
||||
lastUpdateUserId: string;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
posLevelName: string;
|
||||
posLevelRank: number;
|
||||
posLevelAuthority: null;
|
||||
posTypeId: string;
|
||||
}
|
||||
|
||||
interface PosType {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
createdUserId: string;
|
||||
lastUpdatedAt: Date;
|
||||
lastUpdateUserId: string;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
posTypeName: string;
|
||||
posTypeRank: number;
|
||||
}
|
||||
|
||||
export type {
|
||||
ResponseObject,
|
||||
Religion,
|
||||
Gender,
|
||||
Relationship,
|
||||
BloodGroup,
|
||||
PosLevel,
|
||||
PosType,
|
||||
};
|
||||
|
|
@ -1,92 +1,123 @@
|
|||
import { ref, computed } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
Gender,
|
||||
Religion,
|
||||
Relationship,
|
||||
BloodGroup,
|
||||
} from "@/modules/04_registryNew/interface/response/Profile";
|
||||
|
||||
export const useProfileDataStore = defineStore("profile", () => {
|
||||
const isVerified = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const emplployeeClass = ref<string | null>("");
|
||||
interface profile {
|
||||
main: { columns: String[] };
|
||||
education: { columns: String[] };
|
||||
oldName: { columns: String[] };
|
||||
certicate: { columns: String[] };
|
||||
train: { columns: String[] };
|
||||
insignia: { columns: String[] };
|
||||
coined: { columns: String[] };
|
||||
assessment: { columns: String[] };
|
||||
salary: { columns: String[] };
|
||||
discipline: { columns: String[] };
|
||||
leave: { columns: String[] };
|
||||
talent: { columns: String[] };
|
||||
work: { columns: String[] };
|
||||
record: { columns: String[] };
|
||||
other: { columns: String[] };
|
||||
document: { columns: String[] };
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
messageError,
|
||||
convertDate,
|
||||
dateToISO,
|
||||
} = mixin;
|
||||
|
||||
const genderOp = ref<Gender[]>([]);
|
||||
const religionOp = ref<Religion[]>([]);
|
||||
const relationshipOp = ref<Relationship[]>([]);
|
||||
const bloodGroupOp = ref<BloodGroup[]>([]);
|
||||
const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
|
||||
|
||||
function calculateAge(birthDate: Date): string {
|
||||
const birthDateTimeStamp = new Date(birthDate).getTime();
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - birthDateTimeStamp;
|
||||
|
||||
const ageDate = new Date(diff);
|
||||
const years = ageDate.getUTCFullYear() - 1970;
|
||||
const months = ageDate.getUTCMonth();
|
||||
const days = ageDate.getUTCDate() - 1;
|
||||
|
||||
if (years > 60) {
|
||||
return "อายุเกิน 60 ปี";
|
||||
}
|
||||
|
||||
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||
}
|
||||
|
||||
const birthDate = ref<Date>(new Date());
|
||||
const retireText = ref<string | null>(null);
|
||||
const changeRetireText = (val: string | null) => {
|
||||
retireText.value = val;
|
||||
};
|
||||
const changeBirth = (val: Date) => {
|
||||
birthDate.value = val;
|
||||
};
|
||||
const profileData = ref<profile>({
|
||||
main: { columns: [] },
|
||||
education: { columns: [] },
|
||||
oldName: { columns: [] },
|
||||
certicate: { columns: [] },
|
||||
train: { columns: [] },
|
||||
insignia: { columns: [] },
|
||||
coined: { columns: [] },
|
||||
assessment: { columns: [] },
|
||||
salary: { columns: [] },
|
||||
discipline: { columns: [] },
|
||||
leave: { columns: [] },
|
||||
talent: { columns: [] },
|
||||
work: { columns: [] },
|
||||
record: { columns: [] },
|
||||
other: { columns: [] },
|
||||
document: { columns: [] },
|
||||
});
|
||||
|
||||
const changeProfileColumns = (system: String, val: String[]) => {
|
||||
if (system == "main") profileData.value.main.columns = val;
|
||||
if (system == "education") profileData.value.education.columns = val;
|
||||
if (system == "oldName") profileData.value.oldName.columns = val;
|
||||
if (system == "certicate") profileData.value.certicate.columns = val;
|
||||
if (system == "train") profileData.value.train.columns = val;
|
||||
if (system == "insignia") profileData.value.insignia.columns = val;
|
||||
if (system == "coined") profileData.value.coined.columns = val;
|
||||
if (system == "assessment") profileData.value.assessment.columns = val;
|
||||
if (system == "salary") profileData.value.salary.columns = val;
|
||||
if (system == "discipline") profileData.value.discipline.columns = val;
|
||||
if (system == "leave") profileData.value.leave.columns = val;
|
||||
if (system == "talent") profileData.value.talent.columns = val;
|
||||
if (system == "work") profileData.value.work.columns = val;
|
||||
if (system == "record") profileData.value.record.columns = val;
|
||||
if (system == "other") profileData.value.other.columns = val;
|
||||
if (system == "document") profileData.value.document.columns = val;
|
||||
localStorage.setItem("profile", JSON.stringify(profileData.value));
|
||||
};
|
||||
|
||||
if (localStorage.getItem("profile") !== null) {
|
||||
profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
|
||||
async function getGender() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewGender)
|
||||
.then((res) => {
|
||||
genderOp.value = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const isLoad = ref<number>(0);
|
||||
async function getRelationship() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewRelationship)
|
||||
.then((res) => {
|
||||
relationshipOp.value = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function getReligion() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewReligion)
|
||||
.then((res) => {
|
||||
religionOp.value = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function getBloodGroup() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewBloodGroup)
|
||||
.then((res) => {
|
||||
bloodGroupOp.value = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
isLoad,
|
||||
isVerified,
|
||||
isEdit,
|
||||
profileData,
|
||||
changeProfileColumns,
|
||||
birthDate,
|
||||
changeBirth,
|
||||
retireText,
|
||||
changeRetireText,
|
||||
emplployeeClass,
|
||||
prefixOp,
|
||||
genderOp,
|
||||
religionOp,
|
||||
relationshipOp,
|
||||
bloodGroupOp,
|
||||
|
||||
calculateAge,
|
||||
getGender,
|
||||
getRelationship,
|
||||
getReligion,
|
||||
getBloodGroup,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue