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:
Daria Golova
2023-04-13 12:57:23 +03:00
parent 86d6c6f7b8
commit d7f8bf5daa
12 changed files with 77 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/newMedicalCard/TheMedicalCard.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.w-full.h-full
medical-card-header.mb-2(
medical-header.mb-2(
v-model="currentMenuItem",
:change-shown-remove-modal="changeShownRemoveModal",
)
@@ -12,26 +12,26 @@
v-model="isShownRemoveModal",
title="Удаление медкарты"
)
medical-card-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
medical-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
</template>
<script>
import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.vue";
import MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
import MedicalBaseInfo from "@/pages/newMedicalCard/components/MedicalBaseInfo.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import MedicalCardRemoveModal from "@/pages/newMedicalCard/components/MedicalCardRemoveModal.vue";
import MedicalRemoveModal from "@/pages/newMedicalCard/components/MedicalRemoveModal.vue";
import { mapState } from "vuex";
export default {
name: "TheMedicalCard",
components: {
MedicalCardHeader,
MedicalCardBaseInfo,
MedicalHeader,
MedicalBaseInfo,
BaseModal,
MedicalCardRemoveModal,
MedicalRemoveModal,
},
data() {
return {
currentMenuItem: "MedicalCardBaseInfo",
currentMenuItem: "MedicalBaseInfo",
isShownRemoveModal: false,
};
},

2
src/pages/newMedicalCard/components/BasicDataForm.vue → src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
View File

@@ -65,7 +65,7 @@ import moment from "moment";
import {
baseDataForm,
genderOptions,
} from "@/pages/newMedicalCard/utils/configMedical";
} from "@/pages/newMedicalCard/utils/medicalConfig.js";
import { mapGetters, mapState } from "vuex";
export default {

12
src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue Normal file
View File

@@ -0,0 +1,12 @@
<template lang="pug">
medical-form-wrapper
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
export default {
name: "DocumentsForm",
components: { MedicalFormWrapper },
};
</script>
<style lang="sass" scoped></style>

26
src/pages/newMedicalCard/components/MedicalBaseInfo.vue Normal file
View File

@@ -0,0 +1,26 @@
<template lang="pug">
.base-info-wrapper.w-full.flex.gap-x-2
medical-sidebar(v-model="currentMenuItem")
component(
v-if="currentMenuItem",
v-bind:is="currentMenuItem"
)
</template>
<script>
import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue";
import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue";
export default {
name: "MedicalBaseInfo",
components: { MedicalSidebar, MedicalBasicDataWrapper },
data() {
return {
currentMenuItem: "MedicalBasicDataWrapper",
};
},
};
</script>
<style lang="sass" scoped>
.base-info-wrapper
height: 79.7%
</style>

20
src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue Normal file
View File

@@ -0,0 +1,20 @@
<template lang="pug">
.flex.flex-col.gap-y-2.wrapper
basic-data-form
documents-form
</template>
<script>
import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue";
import DocumentsForm from "@/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue";
export default {
name: "MedicalBasicDataWrapper",
components: { BasicDataForm, DocumentsForm },
};
</script>
<style lang="sass" scoped>
.wrapper
width: 83.2%
@media (max-width: 600px)
width: fit-content
</style>

26
src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
View File

@@ -1,26 +0,0 @@
<template lang="pug">
.base-info-wrapper.w-full.flex.gap-x-2
medical-card-sidebar(v-model="currentMenuItem")
component(
v-if="currentMenuItem",
v-bind:is="currentMenuItem"
)
</template>
<script>
import MedicalCardSidebar from "@/pages/newMedicalCard/components/MedicalCardSidebar.vue";
import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForm.vue";
export default {
name: "MedicalCardBaseInfo",
components: { MedicalCardSidebar, BasicDataForm },
data() {
return {
currentMenuItem: "BasicDataForm",
};
},
};
</script>
<style lang="sass" scoped>
.base-info-wrapper
height: 79.7%
</style>

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

@@ -1,5 +1,5 @@
<template lang="pug">
.form-wrapper.relative.h-fit.rounded
.form-wrapper.relative.h-fit.rounded.w-full
transition(name="medical-form", mode="out-in")
.loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
base-loader
@@ -51,10 +51,7 @@ export default {
<style lang="sass" scoped>
.form-wrapper
width: 83.2%
background-color: var(--default-white)
@media (max-width: 600px)
width: fit-content
.edit-button
color: var(--btn-blue-color)
.loader

89
src/pages/newMedicalCard/components/MedicalCardHeader.vue → src/pages/newMedicalCard/components/MedicalHeader.vue
View File

@@ -57,12 +57,6 @@
q-item-section.cursor-pointer {{allergy.name}}
.m-auto.label-color.icon-eye
q-icon(name="visibility", size="16px")
//.scroll-wrapper.h-hull.px-6px.relative.flex.flex-col
.scroll-track.rounded.w-full.h-full
.scroll-thumb.rounded.w-1.h-28.absolute(
id="thumb",
:style="{top: `${thumbPos}px`, height: `${thumbHeight}px`}",
)
span.text-smm.label-color Добавлен в систему:
span.date-color {{ createdDate }}
span.text-smm.label-color Последнее обновление:
@@ -96,9 +90,9 @@ import * as moment from "moment/moment";
import {
headerMenuItem,
routesDictionary,
} from "@/pages/newMedicalCard/utils/configMedical.js";
} from "@/pages/newMedicalCard/utils/medicalConfig.js";
export default {
name: "MedicalCardHeader",
name: "MedicalHeader",
mixins: [v_model],
props: {
changeShownRemoveModal: Function,
@@ -107,9 +101,6 @@ export default {
return {
menuItem: headerMenuItem,
routes: routesDictionary,
//thumbPos: 0,
//scrollTop: 0,
//thumbHeight: 0,
};
},
computed: {
@@ -152,46 +143,6 @@ export default {
return this.checkDate("updated_at");
},
allergiesList() {
/*let arr = [
{
name: "Грибы",
title: "Сыпь",
},
{
name: "Грибы",
title: "Сыпь",
},
{
name: "Грибы",
title: "Сыпь",
},
{
name: "Грибы",
title: "Сыпь",
},
{
name: "Пенецеллин",
title: "Сыпь",
},
{
name: "Мох",
title: "Опухание лица",
},
{
name: "Пыльца",
title: "Чихание",
},
{
name: "Злаковые",
title: "Чихание",
},
];
return this.patientData?.allergic
.map((elem) => ({
name: elem?.name,
title: elem?.title,
}))
.concat(arr);*/
return this.patientData?.allergic.map((elem) => ({
name: elem?.name,
title: elem?.title,
@@ -210,28 +161,6 @@ export default {
? moment.parseZone(this.medicalCardData?.[field]).format("DD.MM.YYYY")
: "";
},
/*scroll() {
let list = document.getElementById("allergiesList");
this.thumbHeight =
list?.offsetHeight / (list?.scrollHeight / list?.offsetHeight);
/*let thumb = document.getElementById("thumb");
let nativeThumbHeight =
list?.offsetHeight / (list?.scrollHeight / list?.offsetHeight);
let difference = Math.abs(nativeThumbHeight - thumb.clientHeight);
if (list.scrollTop < this.scrollTop && this.thumbPos > 0) {
this.thumbPos = this.thumbPos - difference - this.scrollTop;
this.scrollTop = list.scrollTop;
}
if (
list.scrollTop > this.scrollTop &&
list.scrollTop + thumb.clientHeight <= list.offsetHeight
) {
console.log(list.scrollTop + thumb.clientHeight, list.offsetHeight);
this.thumbPos = difference + list.scrollTop;
this.scrollTop = list.scrollTop;
}
this.thumbPos = list.scrollTop;
},*/
},
};
</script>
@@ -268,29 +197,15 @@ export default {
color: var(--font-grey-color)
.date-color
color: var(--font-dark-blue-color)
/*.scroll-wrapper
width: 16px
background-color: transparent
/*.scroll-track
background-color: var(--bg-ligth-blue-color)
/*.scroll-thumb
background-color: var(--bg-aqua-blue)
.allergies-list
max-height: 190px
overflow-y: auto
//&::-webkit-scrollbar-track:horizontal
// margin: 16px 6px 0 104px
&::-webkit-scrollbar
//width: 16px
width: 4px
background-color: var(--default-white)
&::-webkit-scrollbar-track
margin: 0
// border-left: 6px solid var(--default-white)
// border-right: 6px solid var(--default-white)
//&::-webkit-scrollbar-thumb
// border-left: 6px solid var(--default-white)
// border-right: 6px solid var(--default-white)
.allergies-item
color: var(--font-dark-blue-color)
.allergies-item:hover

2
src/pages/newMedicalCard/components/MedicalCardRemoveModal.vue → src/pages/newMedicalCard/components/MedicalRemoveModal.vue
View File

@@ -22,7 +22,7 @@
<script>
export default {
name: "MedicalCardRemoveModal",
name: "MedicalRemoveModal",
props: {
changeShownRemoveModal: Function,
},

4
src/pages/newMedicalCard/components/MedicalCardSidebar.vue → src/pages/newMedicalCard/components/MedicalSidebar.vue
View File

@@ -11,9 +11,9 @@
<script>
import { v_model } from "@/shared/mixins/v-model";
import { baseInfoMenu } from "@/pages/newMedicalCard/utils/configMedical.js";
import { baseInfoMenu } from "@/pages/newMedicalCard/utils/medicalConfig.js";
export default {
name: "MedicalCardSidebar",
name: "MedicalSidebar",
mixins: [v_model],
data() {
return {

4
src/pages/newMedicalCard/utils/configMedical.js → src/pages/newMedicalCard/utils/medicalConfig.js
View File

@@ -118,7 +118,7 @@ export const headerMenuItem = [
{
title: "Общая информация",
id: "basic",
component: "MedicalCardBaseInfo",
component: "MedicalBaseInfo",
},
{
title: "Журнал посещений",
@@ -146,7 +146,7 @@ export const baseInfoMenu = [
{
title: "Основные данные",
id: "basic-data",
component: "BasicDataForm",
component: "MedicalBasicDataWrapper",
},
{
title: "Протоколы первичного осмотра",