diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
index bd3b039..10146e7 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
@@ -1,6 +1,8 @@
q-menu(
v-model="modelValue",
+ anchor="bottom left",
+ :offset="[160,5]",
)
.flex.flex-col.p-4.gap-15px.text-smm.font-medium
.general.w-full.flex.justify-start.pb-15px
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
new file mode 100644
index 0000000..1805ba4
--- /dev/null
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -0,0 +1,144 @@
+
+.cell.flex.justify-center.items-center.h-full.p-1(
+ :key="`${jawPosition}_${config.tooth_number}`"
+ :style="{'width': '5%'}",
+ :class="{'cursor-pointer': isEdit}"
+ )
+ .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
+ v-if="isEdit && rowKey !== 'tooth_number'"
+ @click.self="()=>{isEditCondition=!isEditCondition}",
+ :class="{'open-edit': isEditCondition}"
+ )
+ q-icon(
+ v-if="!isEditCondition",
+ name="add",
+ size="25px",
+ )
+ q-icon(
+ v-else
+ name="close",
+ size="25px",
+ )
+ .flex.flex-col.gap-y-5px.items-center(
+ v-if="rowKey === 'tooth_number'",
+ )
+ tooth-low-svg(
+ :opacity="value.dental_condition.general === 'О' ? 0.2 : 1"
+ :type="config.type",
+ :position="config?.position",
+ :jaw="jawPosition"
+ )
+ span.font-medium.text-smm {{ config.tooth_number }}
+ .flex.flex-col.gap-y-1.items-center(
+ v-if="rowKey === 'dental_condition' && !isEditCondition",
+ :class="{'cell-info': isEdit}"
+ )
+ span.text-smm.font-medium {{ value[rowKey].general }}
+ .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
+ v-if="getFiiledConditions(value[rowKey]).length",
+ @click="()=>openConditionsInfo()",
+ )
+ span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
+ tooth-conditions-info(
+ v-model="isOpenConditionsInfo",
+ :general="value[rowKey].general",
+ :conditions="getFiiledConditions(value[rowKey])"
+ :config="toothConfig.conditions"
+ )
+ span.text-smm.font-medium(
+ v-if="rowKey === 'tooth_mobility' && !isEditCondition",
+ :class="{'cell-info': isEdit}"
+ ) {{ toothConfig.mobility.find((el) => el.id === value[rowKey])?.label || null }}
+ q-menu(
+ v-if="isEdit",
+ v-model="isEditCondition",
+ )
+ .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(
+ v-for="mobility in toothConfig.mobility",
+ @click="()=>chooseMobility(mobility.id)"
+ )
+ span.text-smm.font-medium {{ `${mobility.label} степень` }}
+ q-icon.check(
+ name="check",
+ size="12px"
+ )
+
+
+
+
+
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
index e70bfc5..af73f85 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -16,9 +16,12 @@
)
.flex.flex-col
tooth-formula-table(
- v-for="config in data.formulaConfig",
- :config="config", :data="protocol[data.state]",
- :toothConfig="data.toothConfig"
+ v-for="config in data.formulaConfig",
+ :key="`table_${config.name}`",
+ :config="config",
+ :data="protocol[data.state]",
+ :toothConfig="data.toothConfig",
+ :is-edit="isEdit"
)
template(v-slot:right-corner)
.flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
index f5da72c..7c1a0bf 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
@@ -2,49 +2,32 @@
.table.flex.flex-col.w-full.box-border(
:class="{'rounded-t': config.name === 'upper', 'rounded-b': config.name === 'lower','border-botton-none': config.name === 'upper',}",
)
- .row.flex.w-full(v-for="row in config.rowMap", :style="{'height': heightRow[row.key]}")
+ .row.flex.w-full(
+ v-for="row in config.rowMap",
+ :key="`${config.name}_${row.key}`",
+ :style="{'height': heightRow[row.key]}"
+ )
.cell.flex.justify-start.items-center.pl-4.h-full(:style="{'width': '20%', 'minWidth': '146px'}")
span.font-medium.text-smm.whitespace-nowrap(:style="{'color': 'var(--font-grey-color)'}") {{ row.label }}
- .cell.flex.justify-center.items-center.h-full(
+ tooth-formula-cell(
v-for="cell in config.columns",
- :style="{'width': '5%'}"
+ v-model="data.formula[cell.tooth_number]",
+ :is-edit="isEdit",
+ :jaw-position="config.name",
+ :row-key="row.key",
+ :config="cell",
+ :tooth-config="toothConfig"
)
- .flex.flex-col.gap-y-5px.items-center(v-if="row.key === 'tooth_number'")
- tooth-low-svg(
- :opacity="data.formula[cell.tooth_number].dental_condition.general === 'О' ? 0.2 : 1"
- :type="cell.type",
- :position="cell?.position",
- :jaw="config.name"
- )
- span.font-medium.text-smm {{ cell.tooth_number }}
- .flex.flex-col.gap-y-1.items-center(v-if="row.key === 'dental_condition'")
- span.text-smm.font-medium {{ data.formula[cell.tooth_number].dental_condition.general }}
- .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
- v-if="getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length",
- @click="()=>openConditionsInfo()"
- )
- span.text-xsx.font-medium {{`+${getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length}`}}
- tooth-conditions-info(
- v-model="isOpenConditions",
- :general="data.formula[cell.tooth_number].dental_condition.general",
- :conditions="getFiiledConditions(data.formula[cell.tooth_number].dental_condition)"
- :config="toothConfig.conditions"
- )
- span.text-smm.font-medium(v-if="row.key === 'tooth_mobility'") {{ toothConfig.mobility.find((el) => el.id === data.formula[cell.tooth_number].tooth_mobility)?.label || null }}
@@ -76,12 +57,4 @@ export default {
border-bottom-width: 0
.cell
border-right: 1px solid var(--border-light-grey-color)
- &:last-child
- border-right-width: 0
-.conditions
- background-color: var(--bg-light-grey)
- &:hover
- background-color: var(--font-grey-color-0)
- &.active
- background-color: var(--btn-blue-color)
diff --git a/tailwind.config.js b/tailwind.config.js
index be3f5ea..ebccfa9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -66,6 +66,7 @@ module.exports = {
"74px": "74px",
"92px": "92px",
"102px": "102px",
+ "143px": "143px",
"148px": "148px",
},
},