diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
index c182114..4a61aab 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
@@ -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}}
@@ -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)
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
index 10146e7..ed8efae 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
@@ -1,8 +1,8 @@
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 @@
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
index 6c973f6..98136e2 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -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)
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
index 6614fde..af6d17b 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -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",
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
index f99a9b9..fd80f64 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
@@ -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(
diff --git a/tailwind.config.js b/tailwind.config.js
index dd7bf1c..7a4c0c0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -70,6 +70,8 @@ module.exports = {
"148px": "148px",
"212px": "212px",
"250px": "250px",
+ "258px": "258px",
+ "318px": "318px",
"350px": "350px",
},
},