Merge branch 'ASTRA-104' into 'master'
[WIP] Поправил отображение форм зубной формулы See merge request andrusyakka/urban-couscous!402
This commit is contained in:
Aleksey Demin
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,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,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(
|
||||
|
||||
@@ -70,6 +70,8 @@ module.exports = {
|
||||
"148px": "148px",
|
||||
"212px": "212px",
|
||||
"250px": "250px",
|
||||
"258px": "258px",
|
||||
"318px": "318px",
|
||||
"350px": "350px",
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user