admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Добавил страницу Зубных формул

Browse Source
This commit is contained in:
DwCay
2023-07-04 18:09:23 +03:00
parent e9e737e851
commit d7c304fbee
10 changed files with 224 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/newMedicalCard/components/DentalFormulas/FormulasPageWrapper.vue Normal file
View File

@@ -0,0 +1,104 @@
<template lang="pug">
.flex.w-full
.flex.w-full.flex-col.gap-y-2(v-if="getProtocol")
.header.h-fit.flex.w-full.py-5.pr-5.pl-6.rounded.justify-between.items-center
span.text-xxl.font-bold {{`Зубная формула ${moment(getProtocol.start).format("YYYY")} года`}}
.flex.gap-x-2
q-btn.button(
icon="app:edit",
size="14px",
padding="0",
@click="openEdit",
)
q-btn.button(
icon="print",
size="20px",
padding="0"
)
q-btn.button(
icon="app:basket",
size="14px",
padding="0",
@click="deleteFormula",
)
.wrapper-form.rounded.relative
tooth-formula-form(
:data="formulaConfig",
no-top-buttons,
:is-outside-edit="isEdit"
@updateIsEdit="updateIsEdit",
)
.protocol-link.flex.absolute.gap-x-2.items-center.cursor-pointer(@click="goToProtocol")
span.font-medium Перейти к протоколу первичного осмотра
q-icon(
name="east",
size="24px"
)
.flex.w-full.h-full.items-center.justify-center(v-else)
span.text-xxl.font-bold(:style="{color: 'var(--font-grey-color)'}") Выберите осмотр
</template>
<script>
import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue";
import moment from "moment";
import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
import { mapState, mapActions } from "vuex";
export default {
name: "FormulasPageWrapper",
components: { ToothFormulaForm },
data() {
return {
moment,
formulaConfig: protocolForms.find((el) => el.key === "toothFormula"),
isEdit: false,
};
},
props: {
goToProtocol: Function,
protocolId: Number,
},
computed: {
...mapState({
protocolsList: (state) => state.medical.protocolsList,
}),
getProtocol() {
return this.protocolsList.find((el) => el.id === this.protocolId);
},
},
methods: {
...mapActions({
deleteProtocolFormData: "deleteProtocolFormData",
}),
updateIsEdit(edit) {
this.isEdit = edit;
},
openEdit() {
this.isEdit = true;
},
deleteFormula() {
this.deleteProtocolFormData({ key: "toothFormula" });
},
},
};
</script>
<style lang="sass" scoped>
.protocol-link
bottom: 34px
right: 24px
color: var(--btn-blue-color)
&:hover
opacity: 0.7
.wrapper-form
height: 606px
background-color: var(--default-white)
.header
background-color: var(--default-white)
.button
width: 40px
height: 40px
border-radius: 4px
background: var(--bg-light-grey)
color: var(--font-grey-color)
</style>

44
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
View File

@@ -4,6 +4,7 @@
:is-edit="isEdit",
:open-edit="openEdit",
:cancel="cancelEdit",
:no-top-buttons="noTopButtons"
)
.flex.flex-col.gap-y-4
.flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? 'var(--default-white)': 'var(--bg-light-grey)'}")
@@ -32,20 +33,19 @@
v-model="filtredTooths",
:data="protocol[data.state]",
)
template(v-slot:right-corner)
.flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
q-btn.w-12.h-full.rounded(
size="12px",
:style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
@click="()=>{ isShowSecondView=false }",
)
img(:src="teeth")
q-btn.w-12.h-full.rounded(
size="12px",
:style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
@click="()=>{isShowSecondView=true }",
)
img(:src="teeth_2")
.toogle.flex.flex-toogle.h-10.p-1.rounded.absolute
q-btn.w-12.h-full.rounded(
size="12px",
:style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
@click="()=>{ isShowSecondView=false }",
)
img(:src="teeth")
q-btn.w-12.h-full.rounded(
size="12px",
:style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
@click="()=>{isShowSecondView=true }",
)
img(:src="teeth_2")
</template>
<script>
@@ -70,6 +70,8 @@ export default {
};
},
props: {
isOutsideEdit: Boolean,
noTopButtons: Boolean,
data: Object,
fillInspection: Boolean,
},
@@ -85,12 +87,19 @@ export default {
},
cancelEdit() {
this.isEdit = false;
this.$emit("updateIsEdit", false);
},
},
mounted() {
this.filtredTooths = Object.keys(this.protocol[this.data.state].formula);
},
watch: {
isOutsideEdit: {
immediate: true,
handler(value) {
this.isEdit = value;
},
},
fillInspection: {
immediate: true,
handler(value) {
@@ -104,3 +113,10 @@ export default {
},
};
</script>
<style lang="sass" scoped>
.toogle
background-color: var(--bg-light-grey)
top: 16px
right: 24px
</style>

2
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCard.vue
View File

@@ -8,6 +8,7 @@
.rounded-full.h-1.w-1.background-grey
span.align-middle {{ `${time?.start} - ${time?.end}` }}
.flex.items-center.justify-center.h-6.w-6.rounded(
v-if="!noFillIndicator",
:style="statusСolors"
)
img.teeth-icon(src="@/assets/icons/teeth.svg")
@@ -32,6 +33,7 @@ export default {
components: { BaseAvatar },
props: {
protocolData: Object,
noFillIndicator: Boolean,
},
computed: {
avatar() {

15
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue
View File

@@ -1,17 +1,18 @@
<template lang="pug">
.list-wrapper.h-full.flex.gap-y-1.flex-col
.p-4.rounded.background
.background.h-72px.flex.w-full.justify-between.items-center.p-4.rounded
span.text-2xl.font-bold Осмотры
q-btn(
v-if="createInspection"
color="primary",
size="16px",
label="Создать осмотр",
no-caps,
icon="add",
:style="{width: '100%', height: '40px'}"
:style="{width: '40px', height: '40px'}"
padding="0",
@click="changeShownCreateModal(true)"
)
.p-4.rounded.background.list
.p-4.rounded.background.list.flex.flex-col.gap-y-6
.flex
base-select(
:style="{flex: 1}",
@@ -26,13 +27,12 @@
:class="sortingClass",
@click="invertSorting"
)
.flex.py-4.w-full.color-grey.text-base.justify-center
span.opacity-50 {{ `Осмотров: ${sortingProtocols?.length}` }}
.flex.flex-col.gap-y-2
medical-protocol-card(
v-for="protocol in sortingProtocols", :key="protocol.id",
:protocol-data="protocol",
@click="openInspection"
:no-fill-indicator="noFillIndicator",
@click="() => openInspection(protocol.id)"
)
base-modal(
v-model="showModal",
@@ -63,6 +63,7 @@ export default {
props: {
openInspection: Function,
createInspection: Function,
noFillIndicator: Boolean,
},
data() {
return {

15
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsWrapper.vue
View File

@@ -17,6 +17,10 @@ export default {
fillInspection: false,
};
},
props: {
openProtocol: Boolean,
clearProps: Function,
},
methods: {
...mapActions({
getProtocolData: "getProtocolData",
@@ -36,6 +40,17 @@ export default {
});
},
},
watch: {
openProtocol: {
immediate: true,
handler(value) {
this.inspection = value;
},
},
},
unmounted() {
this.clearProps();
},
};
</script>

16
src/pages/newMedicalCard/components/MedicalBaseInfo.vue
View File

@@ -3,7 +3,9 @@
medical-sidebar(v-model="currentMenuItem")
component(
v-if="currentMenuItem",
v-bind:is="currentMenuItem"
v-bind="{...componentProps, updateCurrentItem:updateCurrentItem, clearProps:clearProps}"
:is="currentMenuItem",
@update-current-item="updateCurrentItem"
)
</template>
@@ -14,6 +16,7 @@ import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAl
import MedicalConfidantWrapper from "@/pages/newMedicalCard/components/MedicalConfidantWrapper.vue";
import MedicalHealthStateWrapper from "@/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue";
import MedicalProtocolsWrapper from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsWrapper.vue";
import MedicalDentalFormulasWrapper from "@/pages/newMedicalCard/components/MedicalDentalFormulasWrapper.vue";
export default {
name: "MedicalBaseInfo",
components: {
@@ -23,12 +26,23 @@ export default {
MedicalConfidantWrapper,
MedicalHealthStateWrapper,
MedicalProtocolsWrapper,
MedicalDentalFormulasWrapper,
},
data() {
return {
componentProps: {},
currentMenuItem: "MedicalBasicDataWrapper",
};
},
methods: {
updateCurrentItem(item, props) {
this.currentMenuItem = item;
this.componentProps = { ...props };
},
clearProps() {
this.componentProps = {};
},
},
};
</script>
<style lang="sass" scoped>

38
src/pages/newMedicalCard/components/MedicalDentalFormulasWrapper.vue Normal file
View File

@@ -0,0 +1,38 @@
<template lang="pug">
.flex.gap-x-2.w-full
medical-protocols-list(:open-inspection="openInspection", no-fill-indicator)
formulas-page-wrapper(:protocol-id="selectedProtocol", :go-to-protocol="goToProtocol")
</template>
<script>
import MedicalProtocolsList from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue";
import FormulasPageWrapper from "@/pages/newMedicalCard/components/DentalFormulas/FormulasPageWrapper.vue";
import { mapActions } from "vuex";
export default {
name: "MedicalDentalFormulasWrapper",
components: { MedicalProtocolsList, FormulasPageWrapper },
data() {
return {
selectedProtocol: null,
};
},
props: {
updateCurrentItem: Function,
},
methods: {
...mapActions({
getProtocolData: "getProtocolData",
}),
openInspection(id) {
this.selectedProtocol = id;
this.getProtocolData({
fillInspection: false,
});
},
goToProtocol() {
this.updateCurrentItem("MedicalProtocolsWrapper", { openProtocol: true });
},
},
};
</script>

7
src/pages/newMedicalCard/components/MedicalFormWrapper.vue
View File

@@ -14,12 +14,12 @@
size="20px",
)
.flex.flex-col.h-full.gap-25px.p-6
.flex.w-full.justify-between
.flex.w-full.justify-between(v-if="!noTopButtons")
.flex.w-fit.gap-11px.items-center(v-if="!tag")
span.font-bold.text-base.whitespace-nowrap {{title}}
q-icon.edit-button.text-lg.cursor-pointer(
name="app:edit",
v-if="!isEdit",
v-if="!isEdit && !noEditBtn",
@click="openEdit",
size="20"
)
@@ -42,7 +42,6 @@
)
q-icon(name="app:basket" size="20")
span.text-smm.font-medium {{ titleDelete }}
slot(name="right-corner")
slot
.flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
q-btn(
@@ -82,6 +81,8 @@ export default {
template: Boolean,
title: String,
titleDelete: String,
noEditBtn: Boolean,
noTopButtons: Boolean,
cancel: {
type: Function,
default: () => {},