294 lines
9.4 KiB
Vue
294 lines
9.4 KiB
Vue
<template lang="pug">
|
|
.wrapper.flex.w-full.relative.mx-2
|
|
.wrapper-medical.relative.flex.gap-y-4.flex-col.h-full.w-full( class="pb-52px")
|
|
.card-upper.flex.flex-col.gap-y-4.px-6.py-6
|
|
medical-card-header(:number-card="numberCard")
|
|
.card-basic-info.flex
|
|
base-detail-info(
|
|
:title="configData.identity_document.title"
|
|
:height="configData.identity_document.height"
|
|
:data="medicalDataInit.identity_document"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.identity_document.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.identity_document"
|
|
)
|
|
.flex.flex-col.gap-30px
|
|
base-detail-info(
|
|
:title="configData.registration_address.title"
|
|
:height="configData.registration_address.height"
|
|
:data="medicalDataInit.registration_address"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.registration_address.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.registration_address"
|
|
)
|
|
base-detail-info(
|
|
:title="configData.temporary_address.title"
|
|
:height="configData.temporary_address.height"
|
|
:data="medicalDataInit.temporary_address"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.temporary_address.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.temporary_address"
|
|
)
|
|
.flex.flex-col.gap-2
|
|
base-detail-info(
|
|
:title="configData.snils.title"
|
|
:height="configData.snils.height"
|
|
:data="medicalDataInit.snils"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.snils.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.snils"
|
|
)
|
|
base-detail-info(
|
|
:title="configData.policy.title"
|
|
:height="configData.policy.height"
|
|
:data="medicalDataInit.policy"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.policy.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.policy"
|
|
)
|
|
base-detail-info(
|
|
:title="configData.policy_organization.title"
|
|
:height="configData.policy_organization.height"
|
|
:data="medicalDataInit.policy_organization"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.policy_organization.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.policy_organization"
|
|
)
|
|
.flex.flex-col.gap-4
|
|
base-detail-info(
|
|
:title="configData.additional.title"
|
|
:height="configData.additional.height"
|
|
:data="medicalDataInit.additional"
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.additional.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.additional"
|
|
)
|
|
base-detail-info(
|
|
:title="configData.agreement_form.title"
|
|
:height="configData.agreement_form.height"
|
|
direction-row
|
|
)
|
|
base-detail-input(
|
|
v-for="field in configData.agreement_form.fields"
|
|
:field="field"
|
|
:data="medicalDataInit.agreement_form"
|
|
)
|
|
.flex.flex-col(class="px-92px gap-y-60px")
|
|
.flex.flex-col(class="gap-y-2.5")
|
|
.flex.flex-col.gap-y-2(v-for="(key, index) in Object.keys(dentalIndications)")
|
|
span.font-bold.text-xsx {{`${index+1}. ${configData.dental_indications[key]}`}}
|
|
medical-dental-formula(v-if="key === 'dental_formula'" :formula-data="dentalIndications[key]")
|
|
base-input(v-model="dentalIndications[key]", outlined, v-else)
|
|
.flex.justify-center
|
|
q-btn(
|
|
color="primary",
|
|
label="Сохранить",
|
|
padding="8px 24px",
|
|
@click="validateFormMedical"
|
|
no-caps
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import MedicalCardHeader from "@/pages/medicalCard/components/MedicalCardHeader.vue";
|
|
import MedicalDentalFormula from "@/pages/medicalCard/components/MedicalDentalFormula.vue";
|
|
import BaseDetailInput from "@/components/base/BaseDetailInput.vue";
|
|
import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
|
|
import { formulaDataMap } from "@/pages/medicalCard/utils/medicalConfig";
|
|
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,
|
|
BaseDetailInput,
|
|
MedicalCardHeader,
|
|
MedicalDentalFormula,
|
|
},
|
|
data() {
|
|
return {
|
|
numberCard: "",
|
|
configData: medicalDetailConfig,
|
|
medicalDataInit: {
|
|
identity_document: {
|
|
number_series: null,
|
|
issued_by_org: null,
|
|
issued_by_org_code: null,
|
|
issued_by_date: null,
|
|
},
|
|
registration_address: {
|
|
registration_address: null,
|
|
},
|
|
temporary_address: {
|
|
temporary_address: null,
|
|
},
|
|
snils: {
|
|
insurance_number: null,
|
|
},
|
|
policy: {
|
|
series: null,
|
|
number: null,
|
|
},
|
|
policy_organization: {
|
|
policy_organization: null,
|
|
},
|
|
additional: {
|
|
name_confidant: null,
|
|
phone_confidant: null,
|
|
},
|
|
benefit_code: {
|
|
benefit_code: null,
|
|
},
|
|
agreement_form: {
|
|
agreement: null,
|
|
agreement_date: null,
|
|
},
|
|
},
|
|
dentalIndications: {
|
|
complaints: "",
|
|
allergic_history: "",
|
|
past_diseases: "",
|
|
medications_taken: "",
|
|
thermometry: "",
|
|
tonometry: "",
|
|
disease_progress: "",
|
|
visual_examination: "",
|
|
oral_examination: "",
|
|
dental_formula: formulaDataMap,
|
|
dental_bite: "",
|
|
hygiene_index: "",
|
|
dmf_index: "",
|
|
diagnostic_findings: "",
|
|
icd_code: "",
|
|
survey_plan: "",
|
|
survey_data: "",
|
|
clinical_diagnosis: "",
|
|
treatment_plan: "",
|
|
treatment_protocol: "",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
validateFormMedical() {
|
|
console.log(this.medicalDataInit);
|
|
},
|
|
saveDataMedical(data) {
|
|
this.numberCard = data?.number && data.number;
|
|
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}`,
|
|
issued_by_date: new Date(pass.issued_by_date),
|
|
},
|
|
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"
|
|
)?.username,
|
|
},
|
|
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)
|
|
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)
|
|
.card-basic-info
|
|
display: grid
|
|
grid-template-columns: 280px 292px 180px 360px 463px
|
|
gap: 16px
|
|
padding: 0 20px 20px 0
|
|
overflow-x: 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)
|
|
.card-upper
|
|
border-bottom: 1px solid var(--border-light-grey-color)
|
|
</style>
|