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

Фикс багов дизайна

Browse Source
This commit is contained in:
megavrilinvv
2023-08-23 16:34:11 +03:00
parent e9810c91cf
commit 564b250b66
16 changed files with 133 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/base/BaseCategorySelection.vue
View File

@@ -15,7 +15,7 @@
iconLeft
)
template(v-slot:iconLeft)
q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
q-icon.icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
.field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
.flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
@@ -43,7 +43,7 @@
@click="saveCategories(selected)"
)
.right-side.flex.px-10.font-bold.relative
q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
q-icon(name="app:cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
.flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
.right-header.flex
span.text-6xl {{selected?.name}}
@@ -185,6 +185,9 @@ export default {
.grey-color
color: var(--font-grey-color)
.icon :deep(path)
fill: var(--font-grey-color)
.q-item
padding: 0
min-height: 40px

5
src/components/base/BaseUploadPhoto.vue
View File

@@ -21,7 +21,7 @@
round,
padding="2px 0 0 0"
)
q-icon(name="app:ok", size="20px")
q-icon.icon(name="app:ok", size="40px")
</template>
<script>
@@ -118,4 +118,7 @@ export default {
min-height: 400px
height: 100%
border-radius: 50%
.icon :deep(path)
fill: var(--default-white)
</style>

17
src/pages/newCalendar/components/CalendarHeader.vue
View File

@@ -54,19 +54,22 @@
dense,
@click="nextWeek"
)
.h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
.h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52.border
q-btn-toggle(
v-model="value",
:options="displayTypesList",
no-caps,
toggle-color="light-blue-4",
padding="0px"
)
template(v-slot:one)
.w-12.h-8.flex.items-center.justify-center
.w-12.h-8.flex.items-center.justify-center.rounded(
:class="{'active-toggle': value === 'expanded'}"
)
date-switcher-svg(name-svg="expanded", :active="value === 'expanded'")
template(v-slot:two)
.w-12.h-8.flex.items-center.justify-center
.w-12.h-8.flex.items-center.justify-center.rounded(
:class="{'active-toggle': value === 'collapsed'}"
)
date-switcher-svg(name-svg="compressed", :active="value === 'collapsed'")
</template>
@@ -199,6 +202,12 @@ export default {
.calendar-icon :deep(path)
fill: var(--font-dark-blue-color)
.active-toggle
background: var(--btn-blue-color)
.border-toggle
border: 1px solid var(--gray-secondary)
</style>
<style lang="sass">
.q-field--outlined.q-field--readonly .q-field__control:before

6
src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
View File

@@ -46,7 +46,7 @@
padding="0",
@click="(e) => addNewAllergy(e)"
)
q-icon(name="app:icon-plus", size="12px", left)
q-icon.icon(name="app:plus", size="24px", left)
span Добавить
</template>
@@ -158,7 +158,9 @@ export default {
.label-field
color: var(--font-grey-color)
.on-left
margin-right: 10px
margin-right: 4px
.q-btn :deep(.q-ripple)
display: none
.icon :deep(path)
fill: var(--btn-blue-color)
</style>

4
src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
View File

@@ -31,7 +31,7 @@
rounded,
@click="removeImage(data?.dataKey, field?.key)"
)
q-icon(name="app:icon-cancel", size="8px")
q-icon.icon-cancel(name="app:cancel", size="8px")
.replace-photo.font-medium.text-base.cursor-pointer(
v-if="isEdit",
@click="openModal(data.dataKey)",
@@ -370,6 +370,8 @@ export default {
min-width: 302px
.icon-copy .cursor
cursor: pointer !important
.icon-cancel :deep(path)
fill: var(--default-white)
.q-badge
padding: 4px
cursor: pointer

75
src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
View File

@@ -29,7 +29,7 @@
@click="removeImage(insurance?.insuranceKey, field?.key)",
rounded
)
q-icon(name="app:icon-cancel", size="8px")
q-icon.icon-cancel(name="app:cancel", size="8px")
.replace-photo.font-medium.text-base.cursor-pointer(
v-if="isEdit",
@click="changeModal(insurance.insuranceKey)"
@@ -44,15 +44,15 @@
v-model="basic[photoId][field.key]"
:confirm-upload="confirmChangePhoto"
)
.flex.h-10.relative(
v-else-if="field.type === 'select'",
@click="openModalCategories"
)
q-field.items-center.categories(
:style="{cursor: isEdit ? 'pointer' : 'default'}",
:readonly="!isEdit",
outlined
) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
.category.flex.h-10.relative.gap-x-2(v-else-if="field.type === 'select'")
.category-select.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
q-btn.change.flex.w-7.h-9.rounded-md(
v-if="isEdit",
@click="showModalCategories = true",
dense,
padding="8px"
)
q-icon.icon(name="app:folder", size="24px")
base-modal(
default-padding,
hide-header,
@@ -84,9 +84,9 @@
:type="field.type",
size="M"
)
q-icon.my-auto.text-lg.label-field.cursor-pointer(
q-icon.my-auto.text-lg.label-field.cursor-pointer.copy(
size="18px",
name="app:icon-copy",
name="app:copy",
v-if="checkCopiedFields(field.key, basic[insurance.insuranceKey])",
@click="copyValue(basic[insurance.insuranceKey][field.key])"
)
@@ -134,8 +134,8 @@ export default {
initDataBasic: "getBasicData",
}),
...mapState({
basic: (state) => state.medical.basicData,
benefitData: (state) => state.medical.benefitData,
basic: (state) => state.medical?.basicData,
benefitData: (state) => state.medical?.benefitData,
}),
},
methods: {
@@ -176,9 +176,6 @@ export default {
closeModalCategories() {
this.showModalCategories = false;
},
openModalCategories() {
if (this.isEdit) this.showModalCategories = true;
},
checkChangeInput() {
this.isCheckChange =
JSON.stringify(this.initDataBasic) !== JSON.stringify(this.basic)
@@ -363,14 +360,6 @@ export default {
});
},
},
watch: {
showModalCategories: {
immediate: true,
handler(newVal) {
if (newVal) this.$store.dispatch("getBenefitData");
},
},
},
};
</script>
@@ -415,27 +404,25 @@ export default {
.delete
background-color: var(--btn-red-color)
.category
width: 324px
.categories :deep(.q-field__control)
height: 40px
color: var(--font-dark-blue-color)
padding: 0 16px
background: var(--bg-light-grey) !important
&:before
border: none !important
transition: none
&:after
border: none !important
transition: none
transform: none !important
.category-select
min-width: 276px
.categories :deep(.q-field__native)
font-weight: 500
font-size: 16px
line-height: normal
color: var(--font-dark-blue-color)
padding: 8px 0
background: var(--bg-light-grey) !important
.icon :deep(path)
fill: var(--font-grey-color)
.icon-cancel :deep(path)
fill: var(--default-white)
.copy :deep(path)
fill: var(--font-grey-color)
.change
background: var(--bg-light-grey)
color: var(--font-grey-color)
border: 1px solid var(--gray-secondary)
.q-field--outlined.q-field--readonly :deep(.q-field__control)
background: var(--bg-light-grey) !important

13
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue
View File

@@ -27,19 +27,19 @@
icon-left
)
template(v-slot:iconLeft)
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
q-icon.icon-grey(name="app:search", size="20px" )
.button
q-btn(
icon="filter_alt",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
:style="{width: '40px', height: '40px'}",
padding="0"
)
q-icon.icon-grey(name="app:filter", size="24px")
.button
q-btn(
icon="app:sort-number",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
:style="{width: '40px', height: '40px'}",
padding="0"
)
q-icon.icon-grey(name="app:sort-number", size="24px")
.field.flex.flex-col.overflow-y-scroll.gap-y-1(v-if="data.results.diseases")
.letter.flex.items-center.font-bold.text-base Некоторые инфекционные и паразитарные болезни
.checkbox.flex.gap-x-2.items-center(v-for="disease in data.results.diseases")
@@ -171,4 +171,7 @@ export default {
.search :deep(.q-field__prepend)
padding-right: 6px
.icon-grey :deep(path)
fill: var(--font-grey-color)
</style>

18
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
View File

@@ -42,19 +42,19 @@
size="M",
)
template(v-slot:iconLeft)
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
q-icon.icon-grey(name="app:search", size="20px" )
.button
q-btn(
icon="filter_alt",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
:style="{width: '40px', height: '40px'}",
padding="0"
)
q-icon.icon-grey(name="app:filter", size="24px")
.button
q-btn(
icon="app:sort-number",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
:style="{width: '40px', height: '40px'}",
padding="0"
)
q-icon.icon-grey(name="app:sort-number", size="24px")
.field.flex.flex-col.overflow-y-scroll
.checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
.letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
@@ -71,7 +71,7 @@
width="40px",
@click="showModal = true",
)
q-icon(name="app:plus", size="16px")
q-icon.icon-white(name="app:plus", size="24px")
base-modal(v-model="showModal", title="Создание тега", modal-padding)
tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
.flex.gap-x-20.w-full(v-if="change || fillInspection")
@@ -365,4 +365,10 @@ export default {
&::placeholder
color: var(--font-grey-color)
opacity: 1
.icon-grey :deep(path)
fill: var(--font-grey-color)
.icon-white :deep(path)
fill: var(--default-white)
</style>

27
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
View File

@@ -25,19 +25,19 @@
size="M"
)
template(v-slot:iconLeft)
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
q-icon.icon-grey(name="app:search", size="20px" )
.button
q-btn(
icon="filter_alt",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
:style="{width: '40px', height: '40px'}",
padding="0"
)
q-icon.icon-grey(name="app:filter", size="24px")
.button
q-btn(
icon="app:sort-number",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
:style="{width: '40px', height: '40px'}",
padding="0"
)
q-icon.icon-grey(name="app:sort-number", size="24px")
.field.flex.flex-col.overflow-y-scroll(v-if="data.results.tags")
.checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
.letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
@@ -54,12 +54,12 @@
width="40px",
@click="showModal = true",
)
q-icon(name="app:plus", size="16px")
q-icon.icon-white(name="app:plus", size="24px")
base-modal(v-model="showModal", title="Создание тега", modal-padding)
tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
.flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
q-btn(no-caps, flat, padding="2px 4px")
q-icon(left, name="app:plus", size="12px")
q-icon.icon-blue(left, name="app:plus", size="24px")
span.font-medium Добавить описание зуба
</template>
@@ -175,6 +175,8 @@ export default {
cursor: pointer
border-radius: 4px
background: var(--bg-light-grey)
&:hover
background: var(--border-light-grey-color)
.field
margin-right: -10px
@@ -214,7 +216,7 @@ export default {
.q-btn :deep(.q-ripple)
display: none
.on-left
margin-right: 8px
margin-right: 4px
.input :deep(.q-field__native)
font-weight: 500
@@ -228,4 +230,13 @@ export default {
.search :deep(.q-field__prepend)
padding-right: 6px
.icon-grey :deep(path)
fill: var(--font-grey-color)
.icon-white :deep(path)
fill: var(--default-white)
.icon-blue :deep(path)
fill: var(--btn-blue-color)
</style>

11
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
View File

@@ -17,17 +17,16 @@
fit,
anchor="bottom left",
self="top left"
)
)
.tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
@click="addCategory"
)
span Добавить категорию
.menu-wrapper.flex.flex-col.h-40.overflow-y-auto
.options.flex(v-for="item in options")
.item.flex.py-2.px-4.items-center.cursor-pointer(
@click="selected(item.label)"
) {{item.label}}
.tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
@click="addCategory"
)
q-icon(name="app:icon-plus", size="10px",)
span Добавить категорию
.flex.flex-col(class="gap-x-1.5")
base-input(
v-model="model.tag",

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

@@ -36,16 +36,16 @@
.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)'}",
:style="{'backgroundColor': !isShowSecondView ? 'var(--btn-blue-color)' : 'var(--bg-light-grey)'}",
@click="()=>{ isShowSecondView=false }",
)
img(:src="teeth")
q-icon.tooth(:class="{'tooth-active': !isShowSecondView}", name="app:tooth-outline", size="24px")
q-btn.w-12.h-full.rounded(
size="12px",
:style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
:style="{'backgroundColor': isShowSecondView ? 'var(--btn-blue-color)' : 'var(--bg-light-grey)'}",
@click="()=>{isShowSecondView=true }",
)
img(:src="teeth_2")
q-icon.tooth(:class="{'tooth-active': isShowSecondView}", name="app:tooth", size="22px")
</template>
<script>
@@ -119,4 +119,10 @@ export default {
background-color: var(--bg-light-grey)
top: 16px
right: 24px
.tooth :deep(path)
fill: var(--font-grey-color)
.tooth-active :deep(path)
fill: var(--default-white)
</style>

9
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
View File

@@ -9,14 +9,14 @@
.flex.font-bold.text-6xl {{elem.label}}
.flex.gap-x-4
.button
q-btn(
icon="print",
q-btn.btn(
icon="app:printer",
size="20px",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
padding="0"
)
.button
q-btn(
q-btn.btn(
icon="app:basket",
size="20px",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
@@ -204,4 +204,7 @@ export default {
cursor: pointer
border-radius: 4px
background: var(--bg-light-grey)
.btn :deep(path)
fill: var(--font-grey-color)
</style>

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

@@ -1,5 +1,5 @@
<template lang="pug">
.base-info-wrapper.w-full.flex.gap-x-2.flex-1
.base-info-wrapper.w-full.flex.gap-x-2.flex-1.font-medium.text-m
medical-sidebar(v-model="currentMenuItem")
component(
v-if="currentMenuItem",
@@ -49,4 +49,5 @@ export default {
.base-info-wrapper
height: 80.4%
max-height: calc(100% - 190px - 8px)
color: var(--font-dark-blue-color)
</style>

6
src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue
View File

@@ -10,7 +10,7 @@
padding="0",
@click="addNewConfidant"
)
q-icon(name="app:icon-plus", size="12px", left)
q-icon.icon(name="app:plus", size="24px", left)
span Добавить контакт
</template>
@@ -46,7 +46,9 @@ export default {
&::-webkit-scrollbar
width: 0
.on-left
margin-right: 10px
margin-right: 4px
.q-btn :deep(.q-ripple)
display: none
.icon :deep(path)
fill: var(--btn-blue-color)
</style>

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

@@ -21,7 +21,7 @@
name="app:edit",
v-if="!isEdit && !noEditBtn",
@click="openEdit",
size="20"
size="20px"
)
.flex.w-full.gap-11px.items-center.justify-between(v-else)
span.font-bold.text-base.whitespace-nowrap {{title}}
@@ -30,13 +30,13 @@
:style="{color: 'var(--btn-blue-color)'}"
)
base-button(type="secondary", width="142px")
img.mr-2(:src="layers")
q-icon.sample.mr-2(name="app:sample", size="20px")
span.text-smm.font-medium Шаблоны
.flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
v-if="!isEdit && titleDelete && deleteItem",
@click="deleteItem"
)
q-icon(name="app:basket" size="20")
q-icon(name="app:basket" size="20px")
span.text-smm.font-medium {{ titleDelete }}
slot
.flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
@@ -134,4 +134,6 @@ export default {
transition: 0.3s ease
.medical-form-move
transition: 0.3s ease
.sample :deep(path)
fill: var(--btn-blue-color)
</style>

3
src/pages/newMedicalCard/components/MedicalHeader.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.patient-info.pt-4.pr-6.flex.flex-col.justify-between.rounded
.patient-info.pt-4.pr-6.flex.flex-col.justify-between.rounded.font-medium.text-m
.ml-6.flex.justify-between
q-breadcrumbs
template(v-slot:separator)
@@ -30,6 +30,7 @@
:style="{color: 'var(--font-dark-blue-color)', 'line-height': '135%'}",
) {{patientName}}
q-chip(
v-if="priority?.text",
square,
text-color="white",
:style="{height: '20px', background: priority?.color, padding: '2px 8px'}",