Merge branch 'phatt_dev' into develop
This commit is contained in:
puriphatt
commit
e28c71d91e
10 changed files with 490 additions and 627 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) =>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
|
||||
import type { FormData } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
|
||||
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -29,20 +28,18 @@ const profileId = ref<string>(
|
|||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const declHonorData = reactive<FormData>({
|
||||
id: "",
|
||||
isActive: true,
|
||||
const id = ref<string>("");
|
||||
const issueDateYear = ref<number>(0);
|
||||
const declHonorForm = reactive<RequestItemsObject>({
|
||||
isDate: "false",
|
||||
issuer: "",
|
||||
detail: "",
|
||||
issueDate: null,
|
||||
issueDateYear: 0,
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
});
|
||||
|
||||
const isEdit = ref<boolean>(false);
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<QForm>();
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
|
|
@ -234,21 +231,17 @@ async function addEditData(editStatus: boolean = false) {
|
|||
if (!profileId.value) return;
|
||||
|
||||
const url = editStatus
|
||||
? config.API.profileNewHonorById(declHonorData.id)
|
||||
? config.API.profileNewHonorById(id.value)
|
||||
: config.API.profileNewHonor;
|
||||
const method = editStatus ? "patch" : "post";
|
||||
const reqBody: RequestItemsObject = {
|
||||
...declHonorForm,
|
||||
profileId: editStatus ? undefined : profileId.value,
|
||||
isActive: declHonorData.isActive,
|
||||
detail: declHonorData.detail,
|
||||
isDate: declHonorForm.isDate === "true" ? true : false,
|
||||
issueDate:
|
||||
declHonorData.isDate === "true"
|
||||
? declHonorData.issueDate
|
||||
: new Date(`${declHonorData.issueDateYear}-01-01`),
|
||||
issuer: declHonorData.issuer,
|
||||
refCommandDate: declHonorData.refCommandDate,
|
||||
refCommandNo: declHonorData.refCommandNo,
|
||||
isDate: declHonorData.isDate === "true" ? true : false,
|
||||
declHonorForm.isDate === true
|
||||
? declHonorForm.issueDate
|
||||
: new Date(`${issueDateYear.value}-01-01`),
|
||||
};
|
||||
|
||||
try {
|
||||
|
|
@ -262,57 +255,41 @@ async function addEditData(editStatus: boolean = false) {
|
|||
}
|
||||
}
|
||||
|
||||
async function clickDelete(dataId: string) {
|
||||
try {
|
||||
await http.delete(config.API.profileNewHonorById(dataId));
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
await fetchData();
|
||||
modal.value = false;
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
// async function clickDelete(dataId: string) {
|
||||
// try {
|
||||
// await http.delete(config.API.profileNewHonorById(dataId));
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// await fetchData();
|
||||
// modal.value = false;
|
||||
// } catch (error) {
|
||||
// messageError($q, error);
|
||||
// } finally {
|
||||
// hideLoader();
|
||||
// }
|
||||
// }
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
|
||||
modal.value = true;
|
||||
editRow.value = false;
|
||||
isEdit.value = editStatus;
|
||||
|
||||
if (editStatus && row) {
|
||||
Object.assign(declHonorData, row);
|
||||
declHonorData.isDate = row.isDate.toString();
|
||||
declHonorData.issueDate = row.issueDate;
|
||||
declHonorData.issueDateYear = new Date(row.issueDate).getFullYear();
|
||||
declHonorData.refCommandDate = row.refCommandDate;
|
||||
id.value = row.id;
|
||||
|
||||
issueDateYear.value = new Date(row.issueDate).getFullYear();
|
||||
declHonorForm.issuer = row.issuer;
|
||||
declHonorForm.detail = row.detail;
|
||||
declHonorForm.issueDate = row.issueDate;
|
||||
declHonorForm.refCommandNo = row.refCommandNo;
|
||||
declHonorForm.refCommandDate = row.refCommandDate;
|
||||
declHonorForm.isDate = row.isDate ? "true" : "false";
|
||||
} else {
|
||||
declHonorData.id = "";
|
||||
declHonorData.isActive = true;
|
||||
declHonorData.issuer = "";
|
||||
declHonorData.detail = "";
|
||||
declHonorData.issueDate = null;
|
||||
declHonorData.issueDateYear = 0;
|
||||
declHonorData.refCommandNo = "";
|
||||
declHonorData.refCommandDate = null;
|
||||
declHonorData.isDate = "false";
|
||||
clearData();
|
||||
}
|
||||
}
|
||||
|
||||
async function clickClose() {
|
||||
if (editRow.value == true) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
modal.value = false;
|
||||
editRow.value = false;
|
||||
},
|
||||
"ข้อมูลมีการแก้ไข",
|
||||
"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
|
||||
);
|
||||
} else {
|
||||
modal.value = false;
|
||||
}
|
||||
clearData();
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
async function clickHistory(row: ResponseObject) {
|
||||
|
|
@ -334,30 +311,37 @@ function onSubmit() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
myForm.value?.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
function clearData() {
|
||||
id.value = "";
|
||||
issueDateYear.value = 0;
|
||||
declHonorForm.issuer = "";
|
||||
declHonorForm.detail = "";
|
||||
declHonorForm.issueDate = null;
|
||||
declHonorForm.refCommandNo = "";
|
||||
declHonorForm.refCommandDate = null;
|
||||
declHonorForm.isDate = "false";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => declHonorData.isDate,
|
||||
() => declHonorForm.isDate,
|
||||
() => {
|
||||
if (declHonorData.isDate === "true") {
|
||||
declHonorData.issueDateYear = 0;
|
||||
if (declHonorForm.isDate === "true") {
|
||||
issueDateYear.value = 0;
|
||||
}
|
||||
if (declHonorData.isDate === "false") {
|
||||
declHonorData.issueDate = null;
|
||||
if (declHonorForm.isDate === "false") {
|
||||
declHonorForm.issueDate = null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -557,14 +541,14 @@ watch(
|
|||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
|
||||
<q-radio
|
||||
v-model="declHonorData.isDate"
|
||||
v-model="declHonorForm.isDate as string"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
|
|
@ -572,7 +556,7 @@ watch(
|
|||
dense
|
||||
/>
|
||||
<q-radio
|
||||
v-model="declHonorData.isDate"
|
||||
v-model="declHonorForm.isDate as string"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
|
|
@ -584,12 +568,12 @@ watch(
|
|||
<datepicker
|
||||
autoApply
|
||||
year-picker
|
||||
v-model="declHonorData.issueDateYear"
|
||||
v-model="issueDateYear"
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
v-if="declHonorData.isDate === 'false'"
|
||||
v-if="declHonorForm.isDate === 'false'"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
|
|
@ -599,21 +583,15 @@ watch(
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
declHonorData.issueDateYear
|
||||
? declHonorData.issueDateYear + 543
|
||||
: null
|
||||
"
|
||||
:model-value="issueDateYear ? issueDateYear + 543 : null"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกปีที่ได้รับ'}`,
|
||||
]"
|
||||
:label="`${'ปีที่ได้รับ'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -630,7 +608,7 @@ watch(
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="declHonorData.issueDate"
|
||||
v-model="declHonorForm.issueDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
v-else
|
||||
|
|
@ -649,10 +627,9 @@ watch(
|
|||
for="inputDatereceive"
|
||||
ref="dateReceivedRef"
|
||||
class="inputgreen"
|
||||
:model-value="date2Thai(declHonorData.issueDate as Date)"
|
||||
:model-value="date2Thai(declHonorForm.issueDate as Date)"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -672,9 +649,8 @@ watch(
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="declHonorData.issuer"
|
||||
v-model="declHonorForm.issuer"
|
||||
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
|
@ -684,10 +660,9 @@ watch(
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="declHonorData.detail"
|
||||
v-model="declHonorForm.detail"
|
||||
:label="`${'รายละเอียด'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -697,9 +672,8 @@ watch(
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="declHonorData.refCommandNo"
|
||||
v-model="declHonorForm.refCommandNo"
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-file" class="cursor-pointer" />
|
||||
|
|
@ -712,7 +686,7 @@ watch(
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="declHonorData.refCommandDate"
|
||||
v-model="declHonorForm.refCommandDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
|
|
@ -730,13 +704,12 @@ watch(
|
|||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
declHonorData.refCommandDate == null
|
||||
declHonorForm.refCommandDate == null
|
||||
? null
|
||||
: date2Thai(declHonorData.refCommandDate)
|
||||
: date2Thai(declHonorForm.refCommandDate)
|
||||
"
|
||||
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||
@clear="declHonorData.refCommandDate = null"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
@clear="declHonorForm.refCommandDate = null"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -365,12 +365,8 @@ function onSubmit() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
myForm.value?.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
|
|
@ -587,7 +583,7 @@ onMounted(async () => {
|
|||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
tittle="ผลการประเมินการปฏิบัติราชการ"
|
||||
:close="clickClose"
|
||||
|
|
|
|||
|
|
@ -127,22 +127,10 @@ function validateForm() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
if (edit.value) {
|
||||
editData();
|
||||
} else {
|
||||
saveData();
|
||||
}
|
||||
if (edit.value) {
|
||||
editData();
|
||||
} else {
|
||||
saveData();
|
||||
}
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
|
|
@ -228,12 +216,6 @@ async function getData() {
|
|||
// });
|
||||
// }
|
||||
|
||||
const infoRows = [
|
||||
{ title: "รายละเอียด", value: "" },
|
||||
{ title: "ล้างมลทิน", value: "" },
|
||||
{ title: "เลขที่คำสั่ง", value: "" },
|
||||
{ title: "เอกสารอ้างอิง (ลงวันที่)", value: "" },
|
||||
];
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
|
@ -467,7 +449,7 @@ onMounted(() => {
|
|||
<!-- dialog add edit -->
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 600px">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-form greedy @submit.prevent @validation-success="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader tittle="อื่นๆ" :close="closeDialog" />
|
||||
</q-card-section>
|
||||
|
|
@ -541,7 +523,7 @@ onMounted(() => {
|
|||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import { ref, watch, reactive } from "vue";
|
|||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import type {
|
||||
RowList,
|
||||
} from "@/modules/04_registryNew/interface/index/other";
|
||||
import type { RowList } from "@/modules/04_registryNew/interface/index/other";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -93,7 +91,8 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
function getHistory() {
|
||||
showLoader();
|
||||
http.get(config.API.profileNewOtherHisById(id.value))
|
||||
http
|
||||
.get(config.API.profileNewOtherHisById(id.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rows.value = [];
|
||||
|
|
@ -201,23 +200,7 @@ watch(modal, (status) => {
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<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-if="
|
||||
col.name == 'refCommandDate' ||
|
||||
col.name == 'date' ||
|
||||
col.name == 'createdAt'
|
||||
"
|
||||
>
|
||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,11 @@
|
|||
interface RequestItemsObject {
|
||||
profileId?: string;
|
||||
isActive: boolean;
|
||||
detail: string;
|
||||
issueDate: Date | null;
|
||||
issuer: string;
|
||||
refCommandDate: Date | null;
|
||||
refCommandNo: string;
|
||||
isDate: boolean;
|
||||
isDate: boolean | string;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
isDate: string | null;
|
||||
issuer: string;
|
||||
detail: string;
|
||||
issueDate: Date | null;
|
||||
issueDateYear: number;
|
||||
refCommandNo: string;
|
||||
refCommandDate: Date | null;
|
||||
}
|
||||
|
||||
//columns
|
||||
interface Columns {
|
||||
[index: number]: {
|
||||
name: String;
|
||||
align: String;
|
||||
label: String;
|
||||
sortable: Boolean;
|
||||
field: String;
|
||||
headerStyle: String;
|
||||
style: String;
|
||||
};
|
||||
}
|
||||
|
||||
export type { RequestItemsObject, FormData, Columns };
|
||||
export type { RequestItemsObject };
|
||||
|
|
|
|||
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