From a3bb1aecd1cfd5dad2db16686ae9b6871f5fc924 Mon Sep 17 00:00:00 2001 From: DwCay Date: Thu, 1 Jun 2023 19:06:05 +0300 Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=84=D0=BE=D1=80=D0=BC=20=D0=B7=D1=83?= =?UTF-8?q?=D0=B1=D0=BD=D0=BE=D0=B9=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=D0=BB?= =?UTF-8?q?=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ToothFormula/DentalConditionForm.vue | 80 ++++++++++++++----- .../ToothFormula/ToothConditionsInfo.vue | 12 ++- .../Forms/ToothFormula/ToothFormulaCell.vue | 26 +++--- .../Forms/ToothFormula/ToothFormulaForm.vue | 7 +- .../Forms/ToothFormula/ToothLowSvg.vue | 4 +- tailwind.config.js | 2 + 6 files changed, 98 insertions(+), 33 deletions(-) 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 @@ 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", }, },