131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template lang="pug">
|
|
medical-form-wrapper(
|
|
title="Аллергии"
|
|
:is-check-change="isCheckChange"
|
|
:is-loading-data="isLoadingData"
|
|
:is-edit="isEdit"
|
|
:save="saveChange"
|
|
:cancel="cancelEdit"
|
|
:open-edit="openEdit"
|
|
)
|
|
.flex.flex-col.gap-19px.w-full
|
|
.flex.flex-col.gap-4.w-full
|
|
.flex.gap-4.items-center.w-full.justify-between(v-for="(allergy, index) in allergies")
|
|
.label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
|
|
.flex.gap-2.w-full.items-center
|
|
base-input(
|
|
:disabled="!isEdit"
|
|
v-model="allergy.name"
|
|
@update:model-value="checkChangeInput"
|
|
type="text"
|
|
:standout="!isEdit"
|
|
:outlined="isEdit"
|
|
text-color="black"
|
|
)
|
|
base-input.w-full(
|
|
:disabled="!isEdit"
|
|
v-model="allergy.title"
|
|
@update:model-value="checkChangeInput"
|
|
type="text"
|
|
:standout="!isEdit"
|
|
:outlined="isEdit"
|
|
text-color="black"
|
|
)
|
|
.delete-contact.icon-cancel.text-xxs.cursor-pointer(
|
|
v-if="isEdit"
|
|
@click="() => deleteAllergy(index)"
|
|
)
|
|
base-button(
|
|
v-if="isEdit"
|
|
left-icon="icon-plus"
|
|
added-border-none
|
|
@click="addNewAllergy"
|
|
:icon-left-size="12"
|
|
)
|
|
span.font-medium.text-base Добавить
|
|
</template>
|
|
|
|
<script>
|
|
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
import { checkChangeData } from "@/shared/utils/changesObjects";
|
|
import { mapState, mapGetters } from "vuex";
|
|
import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
|
|
|
|
export default {
|
|
name: "AllergiesForm",
|
|
components: { MedicalFormWrapper, BaseButton, BaseInput },
|
|
data() {
|
|
return {
|
|
isEdit: false,
|
|
isLoadingData: false,
|
|
isCheckChange: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
allergies: (state) => state.medical.allergies,
|
|
personId: (state) => state.medical.medicalCard.person.id,
|
|
}),
|
|
...mapGetters({
|
|
initAllergies: "getAllergiesData",
|
|
}),
|
|
},
|
|
methods: {
|
|
updateAllergies() {
|
|
const notEmptyAllergies = this.allergies.filter(
|
|
(el) => el.name && el.title
|
|
);
|
|
return getRequestArrayData(
|
|
this.initAllergies,
|
|
notEmptyAllergies,
|
|
"person",
|
|
this.personId,
|
|
"general",
|
|
"allergic"
|
|
);
|
|
},
|
|
saveChange() {
|
|
this.isLoadingData = true;
|
|
Promise.allSettled(this.updateAllergies())
|
|
.then(() => this.$store.dispatch("getMedicalCardData"))
|
|
.then(() => {
|
|
this.isLoadingData = false;
|
|
this.isEdit = false;
|
|
this.isCheckChange = false;
|
|
});
|
|
},
|
|
cancelEdit() {
|
|
this.$store.dispatch("returnInitData");
|
|
this.isEdit = false;
|
|
this.isCheckChange = false;
|
|
},
|
|
openEdit() {
|
|
this.isEdit = true;
|
|
},
|
|
checkChangeInput() {
|
|
this.isCheckChange = checkChangeData(this.initAllergies, this.allergies);
|
|
},
|
|
addNewAllergy() {
|
|
this.allergies.push({
|
|
name: null,
|
|
title: null,
|
|
});
|
|
this.checkChangeInput();
|
|
},
|
|
deleteAllergy(index) {
|
|
this.allergies.splice(index, 1);
|
|
this.checkChangeInput();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.delete-contact
|
|
color: var(--font-grey-color)
|
|
.label-field
|
|
color: var(--font-grey-color)
|
|
</style>
|