[WIP] Доработал форму состояния зубов

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue

@@ -1,17 +1,17 @@
 <template lang="pug">
   .flex.p-1
-    .wrapper-tooth.felx.h-250px.w-28.flex-col.rounded.justify-around.items-center
+    .wrapper-tooth.flex.h-250px.w-28.flex-col.rounded.justify-around.items-center
       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.pb-14px
+      .scroll.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"
+          v-for="(type, key) in formConfig.conditions", 
+          :label="type.label"
           )
-          .general-expaction.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
+          .general-expaction.flex.flex-col.pl-4(v-if="!type?.partsTooth")
             .condition-item.flex.gap-11px.items-center.h-10.w-full(
-              v-for="option in kind.options"
+              v-for="option in type.options"
             )
               q-radio(
                 v-model="data[key]",
@@ -26,9 +26,9 @@
                 span.font-medium {{ option.label }}
           .flex.flex-col.pl-4(v-else)
             .flex.flex-col.gap-y-3
-              .part-item.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
+              .part-item.flex.flex-col(v-for="(part, partKey) in type?.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")
+                .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in type.options")
                   q-checkbox(
                     v-model="data[key][partKey]", 
                     :val="option.value",
@@ -40,28 +40,40 @@
                   .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(
+    q-menu(
       v-model="isOpenInfoSelected",
       anchor="top right",
       no-parent-event,
       :offset="[4,0]"
     )
-      .flex.flex-col.px-4.py-2.gap-y-3
+      .h-258px.w-240px.flex.flex-col.pl-4.pr-2.py-2.gap-y-3
         .flex.gap-x-2.text-m.font-bold
           span Выбранное
-          span(:style="{'color': 'var(--font-grey-color)'}") {{countSelected}}
+          span(:style="{'color': 'var(--font-grey-color)'}") {{listSelected.map((el) => el.value).flat().length}}
+        .scroll.flex.flex-col.gap-y-3.h-full
+          .flex.flex-col.gap-y-2.text-smm.font-medium(v-for="condition in listSelected")
+            .flex.gap-x-6px.items-center.whitespace-nowrap
+              span.part-label {{formConfig.conditions[condition.type].label}}
+              .light-grey-background.flex.w-1.h-1.rounded(v-if="condition.part")
+              span.part-label(v-if="condition.part") {{formConfig.conditions[condition.type].partsTooth[condition.part].label}}
+            .flex.flex-col.gap-y-1
+              .grey-background.flex.px-3.py-7px.rounded.w-fit.whitespace-nowrap(
+                v-for="value in [condition.value].flat()"
+                ) {{`${value} – ${toothConditions[value]}`}}
 </template>
 
 <script>
 import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { toothConditions } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 export default {
   name: "DentalConditionForm",
   data() {
     return {
       isOpenInfoSelected: false,
-      countSelected: 0,
+      listSelected: [],
       getFiiledConditions,
+      toothConditions,
     };
   },
   props: {
@@ -72,9 +84,13 @@ export default {
   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) {
+      if (this.data.general)
+        arraySelected.unshift({
+          value: this.data.general,
+          type: "general",
+        });
+      this.listSelected = [...arraySelected];
+      if (arraySelected.length) {
         this.isOpenInfoSelected = true;
       } else {
         this.isOpenInfoSelected = false;
@@ -102,9 +118,13 @@ export default {
         border-bottom: none
 .part-label
   color: var(--font-grey-color)
+.light-grey-background
+  background-color: var(--font-grey-color)
+.grey-background
+  background-color: var(--bg-light-grey)
 .condition-label
   border-bottom: 1px solid var(--bg-light-grey)
-.options-wrapper
+.scroll
   &::-webkit-scrollbar
       width: 4px
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue

@@ -6,7 +6,7 @@
   )
   .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
     v-if="isEdit && rowKey !== 'tooth_number'"
-    @click.self="()=>{isEditCondition=!isEditCondition}",
+    @click.stop="()=>{isEditCondition=!isEditCondition}",
     :class="{'open-edit': isEditCondition}"
     )
     q-icon(
@@ -43,7 +43,7 @@
       tooth-conditions-info(
         v-model="isOpenConditionsInfo",
         :general="value[rowKey].general",
-        :conditions="getFiiledConditions(value[rowKey])"
+        :conditions="getFiiledConditions(value[rowKey]).map((el) => el.value).flat()"
         :config="conditionConfig"
         )
   span.text-smm.font-medium(

src/pages/newMedicalCard/utils/gettersObjects.js

@@ -56,13 +56,19 @@ export function getConfidantObject(data) {
 }
 
 export const getFiiledConditions = (condition) => {
-  let filledConditions = [
-    ...Object.values(condition.crown)
-      .filter((val) => val.length)
-      .flat(),
-    ...Object.values(condition.root)
-      .filter((val) => val.length)
-      .flat(),
-  ];
-  return filledConditions;
+  let crown = Object.keys(condition.crown)
+    .map((key) => ({
+      value: condition.crown[key],
+      type: "crown",
+      part: key,
+    }))
+    .filter((el) => el.value.length);
+  let root = Object.keys(condition.root)
+    .map((key) => ({
+      value: condition.root[key],
+      type: "root",
+      part: key,
+    }))
+    .filter((el) => el.value.length);
+  return [...crown, ...root];
 };

tailwind.config.js

@@ -69,6 +69,7 @@ module.exports = {
         "143px": "143px",
         "148px": "148px",
         "212px": "212px",
+        "240px": "240px",
         "250px": "250px",
         "258px": "258px",
         "318px": "318px",