component ทะเบียนประวัติ
This commit is contained in:
STW_TTTY\stwtt
parent
f641472552
commit
e7d7239923
3 changed files with 427 additions and 1 deletions
|
|
@ -84,4 +84,6 @@ export default {
|
||||||
orgPosMoveEmp: `${orgEmployeePos}/move`,
|
orgPosMoveEmp: `${orgEmployeePos}/move`,
|
||||||
orgProfileEmp: `${orgEmployeePos}/profile`,
|
orgProfileEmp: `${orgEmployeePos}/profile`,
|
||||||
orgSearchProfileEmp: `${orgProfile}-employee/search`,
|
orgSearchProfileEmp: `${orgProfile}-employee/search`,
|
||||||
|
|
||||||
|
orgProfileById:(id:string)=>`${orgProfile}/${id}`
|
||||||
};
|
};
|
||||||
|
|
|
||||||
424
src/components/Dialogs/PopupPersonalNew.vue
Normal file
424
src/components/Dialogs/PopupPersonalNew.vue
Normal file
|
|
@ -0,0 +1,424 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, onMounted } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { PersonalImformation } from "@/components/information/interface/response/Information";
|
||||||
|
import type { Goverment } from "@/components/information/interface/response/Government";
|
||||||
|
import type { Avatar } from "@/components/information/interface/response/avatar";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const $q = useQuasar();
|
||||||
|
const retireDate = ref<Date>();
|
||||||
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||||
|
const fileName = ref<string>("");
|
||||||
|
|
||||||
|
/** props*/
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
requier: true,
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
requier: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/** emit*/
|
||||||
|
const emit = defineEmits(["update:modal"]);
|
||||||
|
|
||||||
|
/** interface*/
|
||||||
|
interface StatusLoad {
|
||||||
|
val: boolean;
|
||||||
|
val2: boolean;
|
||||||
|
val3: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตัวแปร*/
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
|
||||||
|
const avatar = reactive<Avatar>({
|
||||||
|
avatar: "",
|
||||||
|
fullname: "",
|
||||||
|
position: "",
|
||||||
|
});
|
||||||
|
const imformation = reactive<PersonalImformation>({
|
||||||
|
prefix: "",
|
||||||
|
citizenId: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
birthDate: "",
|
||||||
|
age: "",
|
||||||
|
gender: "",
|
||||||
|
});
|
||||||
|
const goverment = reactive<Goverment>({
|
||||||
|
oc: "",
|
||||||
|
posNo: "",
|
||||||
|
position: "",
|
||||||
|
positionPathSide: "",
|
||||||
|
positionLine: "",
|
||||||
|
positionType: "",
|
||||||
|
positionLevel: "",
|
||||||
|
positionExecutive: "",
|
||||||
|
positionExecutiveSide: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
function calculateAge(birthDate: Date | null) {
|
||||||
|
if (!birthDate) return null;
|
||||||
|
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;
|
||||||
|
const retire = new Date(birthDate);
|
||||||
|
retire.setFullYear(retire.getFullYear() + 60);
|
||||||
|
retireDate.value = retire;
|
||||||
|
|
||||||
|
if (years > 60) {
|
||||||
|
return "อายุเกิน 60 ปี";
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลส่วนตัว
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchInformation(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.orgProfileById(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
imformation.prefix = data.prefix ? data.prefix : "-";
|
||||||
|
imformation.citizenId = data.citizenId ? data.citizenId : "-";
|
||||||
|
imformation.firstName = data.firstName ? data.firstName : "-";
|
||||||
|
imformation.lastName = data.lastName ? data.lastName : "-";
|
||||||
|
imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
|
||||||
|
imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
|
||||||
|
imformation.gender = data.gender ?? "-";
|
||||||
|
|
||||||
|
avatar.fullname = data.createdFullName
|
||||||
|
? `${data.prefix}${data.lastUpdateFullName}`
|
||||||
|
: "-";
|
||||||
|
avatar.position = data.position ? data.position : "-";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
statusLoad.value.val2 = true;
|
||||||
|
loaderFunction();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลข้อมูลราชการ
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchProfileGov(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNewGovernmentById(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
goverment.oc = data.org ?? "-";
|
||||||
|
goverment.posNo = data.posMasterNo ?? "-";
|
||||||
|
goverment.position = data.position ?? "-";
|
||||||
|
goverment.positionPathSide = data.positionArea ?? "-";
|
||||||
|
goverment.positionLine = data.positionField ?? "-";
|
||||||
|
goverment.positionType = data.posType ?? "-";
|
||||||
|
goverment.positionLevel = data.posLevel ?? "-";
|
||||||
|
goverment.positionExecutive = data.posExecutive ?? "-";
|
||||||
|
goverment.positionExecutiveSide = data.positionExecutiveField ?? "-";
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
statusLoad.value.val3 = true;
|
||||||
|
loaderFunction();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** functoion เช็คการโหลดของข้อมูล*/
|
||||||
|
function loaderFunction() {
|
||||||
|
const allTrue = Object.values(statusLoad.value).every((val) => val);
|
||||||
|
allTrue && hideLoader();
|
||||||
|
}
|
||||||
|
|
||||||
|
function redirecToRegistry() {
|
||||||
|
window.open(`/registry-new/${props.id}`, "_blank");
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modal,
|
||||||
|
async () => {
|
||||||
|
modal.value = props.modal ? props.modal : false;
|
||||||
|
modal.value &&
|
||||||
|
props.id &&
|
||||||
|
(await fetchInformation(props.id), await fetchProfileGov(props.id)),
|
||||||
|
(fileName.value = `profile-${props.id}`),
|
||||||
|
await fetchProfile(props.id as string);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(modal, (newValue) => {
|
||||||
|
if (!newValue) {
|
||||||
|
emit("update:modal", false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchProfile(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
|
||||||
|
.then(async (res) => {
|
||||||
|
avatar.avatar = res.data.downloadUrl;
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" position="right" :maximized="true">
|
||||||
|
<q-card style="width: 420px; overflow: visible">
|
||||||
|
<q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle1 text-bold"
|
||||||
|
>ทะเบียนประวัติ</q-toolbar-title
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="emit('update:modal', false)"
|
||||||
|
style="color: red; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
<!-- <q-card-section>
|
||||||
|
<div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
</q-card-section> -->
|
||||||
|
|
||||||
|
<q-card-section class="col q-pt-none bg-grey-12">
|
||||||
|
<div class="q-gutter-md">
|
||||||
|
<q-card bordered class="text-center bg-grey-12">
|
||||||
|
<div>
|
||||||
|
<q-avatar size="120px" color="grey-4">
|
||||||
|
<img
|
||||||
|
v-if="avatar.avatar"
|
||||||
|
:src="avatar.avatar"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-else
|
||||||
|
src="@/assets/avatar_user.jpg"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
</q-avatar>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="q-mt-md text-subtitle2 text-bold"
|
||||||
|
style="font-size: 18px"
|
||||||
|
>
|
||||||
|
{{ avatar.fullname }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="avatar.position != '-'"
|
||||||
|
class="q-mb-xs text-center text-grey"
|
||||||
|
>
|
||||||
|
{{ avatar.position }}
|
||||||
|
</div>
|
||||||
|
<div class="q-mt-md">
|
||||||
|
<q-btn
|
||||||
|
class="bg-white"
|
||||||
|
outline
|
||||||
|
rounded
|
||||||
|
label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
|
||||||
|
color="secondary"
|
||||||
|
@click.prevent="redirecToRegistry"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-scroll-area style="height: 65vh; max-width: 100%">
|
||||||
|
<div class="q-gutter-md q-pa-sm">
|
||||||
|
<q-card bordered style="border: 1px solid #d6dee1">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="text-weight-bold row items-center">
|
||||||
|
<q-icon name="mdi-account" color="grey-7" />
|
||||||
|
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-sm">
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.citizenId"
|
||||||
|
label="เลขประจำตัวประชาชน"
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.prefix"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.firstName"
|
||||||
|
label="ชื่่อ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.lastName"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.birthDate"
|
||||||
|
label="วัน/เดือน/ปีเกิด"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.gender"
|
||||||
|
label="เพศ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.age"
|
||||||
|
label="อายุ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card bordered style="border: 1px solid #d6dee1">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="text-weight-bold row items-center">
|
||||||
|
<q-icon name="mdi-account-tie" color="grey-7" />
|
||||||
|
<span class="q-ml-md">ข้อมูลราชการ </span>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-sm">
|
||||||
|
<div class="col-xs-12 col-md-12">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.oc === '' ? '-' : goverment.oc"
|
||||||
|
label="สังกัด"
|
||||||
|
autogrow
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.posNo"
|
||||||
|
label="ตำแหน่งเลขที่"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.position"
|
||||||
|
label="ตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionPathSide"
|
||||||
|
label="ด้าน/สาขา"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionLine"
|
||||||
|
label="สายงาน"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionType"
|
||||||
|
label="ประเภท"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionLevel"
|
||||||
|
label="ระดับ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionExecutive"
|
||||||
|
label="ตำแหน่งทางการบริหาร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionExecutiveSide"
|
||||||
|
label="ด้านตำแหน่งทางการบริหาร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-scroll-area>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -27,7 +27,7 @@ interface PersonalImformation {
|
||||||
firstName: string;
|
firstName: string;
|
||||||
lastName: string;
|
lastName: string;
|
||||||
birthDate: string | null;
|
birthDate: string | null;
|
||||||
age: string;
|
age: any;
|
||||||
gender: string;
|
gender: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue