เพิ่ม Skeleton
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ac167bf16a
commit
0a385408f2
1 changed files with 69 additions and 56 deletions
|
|
@ -15,12 +15,10 @@ import type { Avatar } from "@/components/information/interface/response/avatar"
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const route = useRoute();
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const retireDate = ref<Date>();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
const { messageError, date2Thai } = mixin;
|
||||
|
||||
const isEmployee = defineModel("isEmployee", { type: String });
|
||||
const empType = ref<string>("officer");
|
||||
|
|
@ -42,6 +40,9 @@ const emit = defineEmits(["update:modal"]);
|
|||
|
||||
/** ตัวแปร*/
|
||||
const modal = ref<boolean>(false);
|
||||
const isloadInformation = ref<boolean>(true);
|
||||
const isloadGoverment = ref<boolean>(true);
|
||||
const retireDate = ref<Date>();
|
||||
const avatar = reactive<Avatar>({
|
||||
avatar: "",
|
||||
fullname: "",
|
||||
|
|
@ -94,7 +95,7 @@ function calculateAge(birthDate: Date | null) {
|
|||
* @param id profileID
|
||||
*/
|
||||
async function fetchInformation(id: string) {
|
||||
showLoader();
|
||||
isloadInformation.value = true;
|
||||
await http
|
||||
.get(
|
||||
config.API.orgProfileAdminById(
|
||||
|
|
@ -111,9 +112,7 @@ async function fetchInformation(id: string) {
|
|||
imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
|
||||
imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
|
||||
imformation.gender = data.gender ?? "-";
|
||||
|
||||
avatar.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
|
||||
|
||||
avatar.position = data.position ? data.position : "-";
|
||||
if (data.avatarName) {
|
||||
await fetchProfile(data.id as string, data.avatarName);
|
||||
|
|
@ -125,7 +124,7 @@ async function fetchInformation(id: string) {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isloadInformation.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -134,7 +133,7 @@ async function fetchInformation(id: string) {
|
|||
* @param id profileID
|
||||
*/
|
||||
async function fetchProfileGov(id: string) {
|
||||
showLoader();
|
||||
isloadGoverment.value = true;
|
||||
await http
|
||||
.get(
|
||||
config.API.profileNewGovernmentCard(
|
||||
|
|
@ -158,19 +157,21 @@ async function fetchProfileGov(id: string) {
|
|||
goverment.positionExecutiveSide =
|
||||
data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
|
||||
})
|
||||
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isloadGoverment.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// function redirecToRegistry() {
|
||||
// router.push(`/registry-${empType.value}/${props.id}`);
|
||||
// modal.value = false;
|
||||
// }
|
||||
async function fetchProfile(id: string, avatarName: string) {
|
||||
await http
|
||||
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
|
||||
.then(async (res) => {
|
||||
avatar.avatar = await res.data.downloadUrl;
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
|
|
@ -178,12 +179,6 @@ watch(
|
|||
modal.value = props.modal ? props.modal : false;
|
||||
if (modal.value) {
|
||||
if (props.id) {
|
||||
// empType.value =
|
||||
// route.name === "appoint-employee-detail" ||
|
||||
// isEmployee.value == "EMPLOYEE"
|
||||
// ? "employee"
|
||||
// : "officer";
|
||||
|
||||
await Promise.all([
|
||||
fetchInformation(props.id),
|
||||
fetchProfileGov(props.id),
|
||||
|
|
@ -198,14 +193,6 @@ watch(modal, (newValue) => {
|
|||
emit("update:modal", false);
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchProfile(id: string, avatarName: string) {
|
||||
await http
|
||||
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
|
||||
.then(async (res) => {
|
||||
avatar.avatar = await res.data.downloadUrl;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -227,7 +214,27 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
|
||||
<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 v-if="isloadInformation">
|
||||
<q-skeleton
|
||||
type="QAvatar"
|
||||
size="120px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-md"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="text"
|
||||
width="150px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-md"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="text"
|
||||
width="100px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-sm"
|
||||
/>
|
||||
</div>
|
||||
<q-card v-else bordered class="text-center bg-grey-12">
|
||||
<div>
|
||||
<q-avatar size="120px" color="grey-4">
|
||||
<img
|
||||
|
|
@ -244,6 +251,7 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="q-mt-md text-subtitle2 text-bold"
|
||||
style="font-size: 18px"
|
||||
|
|
@ -256,21 +264,6 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
>
|
||||
{{ avatar.position }}
|
||||
</div>
|
||||
<!-- <div class="q-mt-md">
|
||||
<q-btn
|
||||
v-if="
|
||||
empType === 'employee'
|
||||
? checkPermissionGet('SYS_REGISTRY_EMP')
|
||||
: checkPermissionGet('SYS_REGISTRY_OFFICER')
|
||||
"
|
||||
class="bg-white"
|
||||
outline
|
||||
rounded
|
||||
label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
|
||||
color="secondary"
|
||||
@click.prevent="redirecToRegistry"
|
||||
/>
|
||||
</div> -->
|
||||
</q-card>
|
||||
|
||||
<q-scroll-area style="height: 65vh; max-width: 100%">
|
||||
|
|
@ -281,7 +274,16 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
<q-icon name="mdi-account" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div v-if="isloadInformation" class="row q-pa-sm">
|
||||
<div
|
||||
v-for="n in 6"
|
||||
:key="n"
|
||||
class="col-xs-6 col-md-6 q-pa-sm"
|
||||
>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
|
|
@ -360,7 +362,22 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
<q-icon name="mdi-account-tie" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลราชการ </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
|
||||
<div v-if="isloadGoverment" class="row q-pa-sm">
|
||||
<div
|
||||
v-for="n in 9"
|
||||
:key="n"
|
||||
:class="
|
||||
n !== 1
|
||||
? 'col-xs-6 col-md-6 q-pa-sm'
|
||||
: 'col-xs-12 col-md-12 q-pa-sm'
|
||||
"
|
||||
>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-md-12">
|
||||
<q-input
|
||||
borderless
|
||||
|
|
@ -433,13 +450,11 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
label="ระดับตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type !== 'employee'"
|
||||
>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionExecutive
|
||||
? goverment.positionExecutive
|
||||
|
|
@ -448,19 +463,17 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type !== 'employee'"
|
||||
>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionExecutiveSide
|
||||
? goverment.positionExecutiveSide
|
||||
: '-'
|
||||
"
|
||||
label="ด้านตำแหน่งทางการบริหาร"
|
||||
label="ด้านทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue