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-06-01 19:06:05 +03:00
parent 007391f38b
commit a3bb1aecd1
6 changed files with 98 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
View File

@@ -4,18 +4,19 @@
span.text-base.font-medium {{cellConfig.tooth_number}}
.flex.flex-col.pt-2.pl-4.pr-1.gap-y-2.w-350px.h-250px
span.font-bold.text-m Состояние зуба
.options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1
q-expansion-item.expansion-item.rounded.mr-2(
.options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
q-expansion-item.expansion-item.rounded.mr-2.w-318px(
v-for="(kind, key) in formConfig.conditions",
:label="kind.label"
)
.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
.flex.gap-11px.items.center.h-10.w-full(
.general-expaction.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
.condition-item.flex.gap-11px.items-center.h-10.w-full(
v-for="option in kind.options"
)
q-radio(
v-model="data[key]",
:val="option.value"
@update:model-value="updateConditions"
dense,
checked-icon="check_box",
unchecked-icon="check_box_outline_blank",
@@ -25,29 +26,64 @@
span.font-medium {{ option.label }}
.flex.flex-col.pl-4(v-else)
.flex.flex-col.gap-y-3
.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
span.option-label.text-smm.font-medium {{part.label}}
q-option-group(
v-model="data[key][partKey]",
:options="kind.options",
size="30px",
dense,
type="checkbox",
)
template(v-slot:label="opt")
.condition-label.flex.gap-x-2.h-10.w-full.items-center.text-smm
span.font-semibold {{ opt.value }}
span.font-medium {{ opt.label }}
.part-item.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
span.part-label.text-smm.font-medium {{part.label}}
.condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in kind.options")
q-checkbox(
v-model="data[key][partKey]",
:val="option.value",
@update:model-value="updateConditions"
checked-icon="check_box",
unchecked-icon="check_box_outline_blank",
dense,
)
.condition-label.flex.gap-x-2.h-full.w-full.items-center.text-smm
span.font-semibold {{ option.value }}
span.font-medium {{ option.label }}
q-menu.h-258px(
v-model="isOpenInfoSelected",
anchor="top right",
no-parent-event,
:offset="[4,0]"
)
.flex.flex-col.px-4.py-2.gap-y-3
.flex.gap-x-2.text-m.font-bold
span Выбранное
span(:style="{'color': 'var(--font-grey-color)'}") {{countSelected}}
</template>
<script>
import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
export default {
name: "DentalConditionForm",
data() {
return {
isOpenInfoSelected: false,
countSelected: 0,
getFiiledConditions,
};
},
props: {
data: Object,
cellConfig: Object,
formConfig: Object,
},
methods: {
updateConditions() {
let arraySelected = [...this.getFiiledConditions(this.data)];
if (this.data.general) arraySelected.push(this.data.general);
this.countSelected = arraySelected.length;
if (this.data.general) {
this.isOpenInfoSelected = true;
} else {
this.isOpenInfoSelected = false;
}
},
},
created() {
this.updateConditions();
},
};
</script>
@@ -56,7 +92,15 @@ export default {
border: 1px solid var(--border-light-grey-color)
.expansion-item
border: 1px solid var(--bg-light-grey)
.option-label
& .general-expaction
& .condition-item:last-child
& .condition-label
border-bottom: none
& .part-item:last-child
& .condition-item:last-child
& .condition-label
border-bottom: none
.part-label
color: var(--font-grey-color)
.condition-label
border-bottom: 1px solid var(--bg-light-grey)

12
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
View File

@@ -1,8 +1,8 @@
<template lang="pug">
q-menu(
v-model="modelValue",
anchor="bottom left",
:offset="[160,5]",
@before-hide="closePopup"
)
.flex.flex-col.p-4.gap-15px.text-smm.font-medium
.general.w-full.flex.justify-start.pb-15px
@@ -11,6 +11,8 @@
</template>
<script>
import { v_model } from "@/shared/mixins/v-model";
export default {
name: "ToothConditionsInfo",
props: {
@@ -18,8 +20,14 @@ export default {
general: String,
conditions: Array,
modelValue: Boolean,
hideEvent: Function,
},
mixins: [v_model],
methods: {
closePopup() {
this.value = false;
},
},
emits: ["update:modelValue"],
};
</script>

26
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
View File

@@ -23,7 +23,7 @@
v-if="rowKey === 'tooth_number'",
)
tooth-low-svg(
:opacity="value.dental_condition.general === 'О' ? 0.2 : 1"
:opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
:type="config.type",
:position="config?.position",
:jaw="jawPosition"
@@ -37,6 +37,7 @@
.conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
v-if="getFiiledConditions(value[rowKey]).length",
@click="()=>openConditionsInfo()",
:class="{'active': isOpenConditionsInfo}"
)
span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
tooth-conditions-info(
@@ -50,11 +51,13 @@
:class="{'cell-info': isEdit}"
) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
q-menu(
v-if="isEdit",
v-if="isEdit && rowKey === 'tooth_mobility'",
v-model="isEditCondition",
anchor="top left",
:offset="[0,168]",
)
.flex.flex-col.p-4(v-if="rowKey === 'tooth_mobility'")
.mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-15px.rounded.w-143px.cursor-pointer(
.flex.flex-col.p-2.w-40.gap-y-1
.mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-3.rounded.cursor-pointer(
v-for="mobility in mobilityConfig",
@click="()=>chooseMobility(mobility.id)"
)
@@ -63,8 +66,14 @@
name="check",
size="12px"
)
q-menu(
v-if="isEdit && rowKey === 'dental_condition'",
v-model="isEditCondition",
anchor="top left",
self="bottom left",
:offset="[20,8]",
)
dental-condition-form(
v-if="rowKey === 'dental_condition'",
:data="value.dental_condition"
:cell-config="config",
:form-config="formConfig"
@@ -104,9 +113,7 @@ export default {
},
watch: {
isEdit() {
if (!this.isEdit) {
this.isEditCondition = false;
}
this.isEditCondition = false;
},
},
methods: {
@@ -138,8 +145,9 @@ export default {
background-color: var(--bg-light-grey)
&:hover
background-color: var(--font-grey-color-0)
&:active
&.active
background-color: var(--btn-blue-color)
color: var(--default-white)
.edit-cell
background-color: var(--bg-light-grey)
color: var(--font-grey-color)

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

@@ -7,13 +7,16 @@
)
.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)'}")
q-checkbox.font-medium.text-smm(
q-checkbox(
v-model="protocol[data.state].lacticBite",
dense,
size="38px",
checked-icon="check_box",
unchecked-icon="check_box_outline_blank",
:disable="!isEdit",
label="Молочный прикус",
:color="isEdit ? 'primary' : 'grey'"
)
span.font-medium.text-smm Молочный прикус
.flex.flex-col
tooth-formula-table(
v-for="config in data.formulaConfig",

4
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
View File

@@ -4,8 +4,8 @@
:width="getSize.width",
:height="getSize.height",
:viewBox="getSize.viewBox",
:fill-opacity="opacity"
fill="#252850",
:fill-opacity="opacity",
fill="none"
xmlns="http://www.w3.org/2000/svg",
)
path(

2
tailwind.config.js
View File

@@ -70,6 +70,8 @@ module.exports = {
"148px": "148px",
"212px": "212px",
"250px": "250px",
"258px": "258px",
"318px": "318px",
"350px": "350px",
},
},