[WIP] Добавил форму зубной формулы

src/assets/icons/teeth-2.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00159 1.1665C6.54057 0.845545 5.91542 0.658473 5.27695 0.603406C4.62773 0.547412 3.89996 0.621747 3.20974 0.888667C2.51374 1.15782 1.85153 1.62548 1.36718 2.34926C0.882837 3.07304 0.607422 4.00627 0.607422 5.1569C0.607422 7.91531 1.39959 10.8865 2.24661 13.1474C2.67187 14.2825 3.11903 15.2602 3.50353 15.9643C3.69419 16.3134 3.87941 16.6137 4.04816 16.8365C4.13085 16.9456 4.22662 17.059 4.33268 17.1527C4.38598 17.1998 4.45814 17.2565 4.54741 17.3044C4.63209 17.35 4.77686 17.4119 4.96239 17.4119C5.22911 17.4119 5.42012 17.279 5.47395 17.2414C5.5576 17.183 5.63077 17.1154 5.68699 17.0597C5.80158 16.9462 5.92826 16.799 6.05182 16.6508C6.13854 16.5468 6.22761 16.4377 6.32007 16.3245C6.50958 16.0924 6.71334 15.8429 6.94032 15.5837C7.27382 15.2029 7.61453 14.8526 7.93885 14.6022C8.28349 14.336 8.50227 14.2672 8.60565 14.2672C8.71383 14.2672 8.92083 14.3334 9.23572 14.59C9.53561 14.8344 9.84483 15.1785 10.1466 15.5571C10.3549 15.8183 10.5396 16.0696 10.712 16.3041C10.7925 16.4137 10.8704 16.5195 10.9467 16.6211C11.0579 16.7692 11.1747 16.9195 11.2831 17.0365C11.3362 17.0939 11.4079 17.1659 11.4928 17.2289C11.551 17.2721 11.7439 17.4119 12.0188 17.4119C12.278 17.4119 12.4547 17.2846 12.5087 17.244C12.5836 17.1876 12.6404 17.1267 12.6768 17.0846C12.7519 16.9978 12.8222 16.8949 12.8836 16.7977C13.0102 16.5972 13.1598 16.3236 13.3228 16.004C13.6515 15.3596 14.0662 14.4661 14.5105 13.4487C14.8418 12.69 15.1921 11.8568 15.5382 10.999C14.3685 7.79902 10.3718 3.85882 8.51959 2.28871L7.01901 1.179C7.01326 1.17475 7.00745 1.17058 7.00159 1.1665Z" fill="#9294A7"/>
+<path opacity="0.5" d="M17.1404 6.69862C17.4529 5.76312 17.462 4.90843 17.243 4.14981C17.0261 3.39824 16.5992 2.78802 16.1102 2.3088C15.1499 1.36754 13.8791 0.860118 13.1316 0.703148C12.6076 0.59308 12.0516 0.58176 11.4838 0.682269C10.4966 0.856989 9.47348 1.36964 8.51953 2.28893C10.3717 3.85904 14.3685 7.79924 15.5382 10.9992C16.1206 9.55587 16.6913 8.04293 17.1404 6.69862Z" fill="#9294A7"/>
+</svg>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormulaForm.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+  medical-form-wrapper(:title="data.title")
+    .flex.flex-col.gap-y-4
+      .flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? none: 'var(--bg-light-grey)'}")
+        q-checkbox.font-medium.text-smm(
+          v-model="protocol[data.key].lacticBite",
+          dense,
+          checked-icon="check_box",
+          unchecked-icon="check_box_outline_blank",
+          :disable="!isEdit",
+          label="Молочный прикус",
+          :color="isEdit ? 'primary' : 'grey'"
+          )
+    template(v-slot:right-corner)
+      .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
+        q-btn.w-12.h-full.rounded(
+          size="12px",
+          :style="{'backgroundColor': viewToothFormula ? 'var(--bg-aqua-blue)' : none}",
+          @click="()=>{ viewToothFormula=true }",
+        )
+        q-btn.w-12.h-full.rounded(
+          size="12px",
+          :style="{'backgroundColor': !viewToothFormula ? 'var(--bg-aqua-blue)' : none}",
+          @click="()=>{ viewToothFormula=false }",
+        )
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import teeth from "@/assets/icons/teeth.svg";
+import { mapState } from "vuex";
+
+export default {
+  name: "ToothFormulaForm",
+  components: { MedicalFormWrapper },
+  data() {
+    return {
+      teeth: teeth,
+      isEdit: false,
+      component: false,
+      viewToothFormula: true,
+    };
+  },
+  props: {
+    data: Object,
+  },
+  computed: {
+    ...mapState({
+      protocol: (state) => state.medical.protocolData,
+    }),
+  },
+};
+</script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue

@@ -41,8 +41,8 @@ import DiseaseForm from "@/pages/newMedicalCard/components/InitialInspectionProt
 import BaseButton from "@/components/base/BaseButton.vue";
 import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
 import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue";
+import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormulaForm.vue";
 import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
-
 export default {
   name: "MedicalProtocolsInspection",
   components: {
@@ -52,6 +52,7 @@ export default {
     BaseButton,
     IndexForm,
     MainFactorsForm,
+    ToothFormulaForm,
   },
   props: { inspection: Boolean, fillInspection: Boolean },
   data() {

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -17,6 +17,7 @@
         .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
           q-icon(name="app:basket" size="20")
           span.text-smm.font-medium {{ titleDelete }}
+        slot(name="right-corner")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
         q-btn(

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -928,6 +928,12 @@ export const protocolForms = [
       ],
     },
   },
+  {
+    title: "Зубная формула",
+    component: "ToothFormulaForm",
+    key: "toothFormula",
+    state: "toothFormula",
+  },
   {
     title: "План обследования",
     component: "MedicalFormTag",

src/store/modules/medicalCard.js

@@ -304,6 +304,9 @@ const getters = {
           value: 120,
         },
       },
+      toothFormula: {
+        lacticBite: true,
+      },
     };
   },
   getInitProtocol() {
@@ -330,6 +333,9 @@ const getters = {
         },
       },
       disease: null,
+      toothFormula: {
+        lacticBite: false,
+      },
     };
   },
 };

tailwind.config.js

@@ -43,6 +43,7 @@ module.exports = {
         "2px": "2px",
         "3px": "3px",
         "4_75px": "4.75px",
+        "7px": "7px",
         "6px": "6px",
         "9px": "9px",
         "10px": "10px",