Files
astra-frontend/src/pages/medicalCard/components/MedicalCardWrapper.vue

118 lines
3.9 KiB
Vue

<template lang="pug">
.wrapper.flex.w-full.relative.mx-2
.wrapper-medical.relative.flex.flex-col.px-6.py-6.h-full.w-full
base-detail-info(:title="configData.identity_document.title" :height="configData.identity_document.height")
.flex.flex-col.gap-30px
base-detail-info(:title="configData.registration_address.title" :height="configData.registration_address.height")
base-detail-info(:title="configData.temporary_address.title" :height="configData.temporary_address.height")
.flex.flex-col.gap-2
base-detail-info(:title="configData.snils.title" :height="configData.snils.height")
base-detail-info(:title="configData.policy_number_series.title" :height="configData.policy_number_series.height")
base-detail-info(:title="configData.policy_organization.title" :height="configData.policy_organization.height")
.flex.flex-col.gap-4
base-detail-info(:title="configData.additional.title" :height="configData.additional.height")
base-detail-info(:title="configData.agreement_form.title" :height="configData.agreement_form.height")
</template>
<script>
import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput.vue";
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
export default {
name: "MedicalCardWrapper",
components: { ClientDetailInput, BaseInput, BaseDetailInfo },
data() {
return {
configData: medicalDetailConfig,
medicalDataInit: {},
};
},
methods: {
saveDataMedical(data) {
const confidant = data ? data["confidant"] : undefined;
const pass = data
? data?.person?.identity_document?.find((el) => el.kind === "PASSPORT")
: null;
this.medicalDataInit = {
...data,
identity_document: {
...pass,
number_series: `${pass.series} ${pass.number}`,
},
registration_address: {
registration_address: data?.person?.address?.find(
(el) => !el["registration_flg"]
)?.join_adress,
},
temporary_address: {
temporary_address: data?.person?.address?.find(
(el) => !el["temporary_registration_flg"]
)?.join_adress,
},
snils: {
...data?.person["insurance_number"],
},
policy: {
...data?.person["insurance_policy"][0],
},
policy_organization: {
...data?.person["insurance_policy"][0],
},
additional: {
name_confidant: confidant
? `${confidant?.last_name} ${confidant?.last_name} ${confidant?.patronymic}`
: null,
phone_confidant: confidant?.contacts?.find(
(el) => el?.kind === "PHONE"
),
},
benefit_code: {
benefit_code: data?.benefit_code,
},
agreement_form: {
agreement: data?.agreement,
agreement_date: null,
},
};
},
async fetchDataMedicalCard() {
await fetchWrapper
.get(
`medical_card/medical_history/${localStorage.getItem(
"medicalId"
)}/detail/`
)
.then((res) => this.saveDataMedical(res));
},
},
mounted() {
this.fetchDataMedicalCard();
},
};
</script>
<style lang="sass" scoped>
.wrapper
overflow: auto
border-top-left-radius: 4px
border-top-right-radius: 4px
.wrapper-medical
background-color: var(--default-white)
height: calc(100vh - 64px)
display: grid
grid-template-columns: 280px 292px 180px 360px 463px
gap: 16px
overflow: auto
&::-webkit-scrollbar
height: 4px
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
</style>