[WIP] Доделал скрол до нужной части зуба

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

@@ -27,6 +27,7 @@
           v-for="(type, key) in formConfig.conditions",
           v-model="isOpenExpansion[key]",
           :label="type.label",
+          @after-show="()=>jumpToItem()"
           )
           .general-expaction.flex.flex-col.pl-4(v-if="!type?.partsTooth")
             .condition-item.flex.gap-11px.items-center.h-10.w-full(
@@ -94,6 +95,7 @@ export default {
   components: { DetailedToothSvg },
   data() {
     return {
+      partId: "",
       isOpenInfoSelected: false,
       listSelected: [],
       isOpenExpansion: {
@@ -117,21 +119,27 @@ export default {
   },
   methods: {
     clickPart(id) {
-      new Promise((resolve) => {
+      this.partId = id;
-        let arrayRefs = id.split("_");
+      let partGeneralKey = id.split("_")[0];
+      if (this.isOpenExpansion[partGeneralKey]) {
+        this.$refs[id][0].scrollIntoView({
+          block: "center",
+          behavior: "smooth",
+        });
+      } else {
         Object.keys(this.isOpenExpansion).forEach((key) => {
-          if (key === arrayRefs[0]) {
+          if (key === partGeneralKey) {
             this.isOpenExpansion[key] = true;
           } else {
             this.isOpenExpansion[key] = false;
           }
         });
-        return resolve(id);
+      }
-      }).then((id) => {
+    },
-        this.$refs[id][0].scrollIntoView({
+    jumpToItem() {
-          block: "center",
+      this.$refs[this.partId][0].scrollIntoView({
-          behavior: "smooth",
+        block: "center",
-        });
+        behavior: "smooth",
       });
     },
     updateConditions() {

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

@@ -43,7 +43,7 @@
         q-btn.w-12.h-full.rounded(
           size="12px",
           :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          @click="()=>{ isShowSecondView=true }",
+          @click="()=>{isShowSecondView=true }",
         )
           img(:src="teeth_2")
 </template>

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

@@ -21,7 +21,7 @@
         :form-config="formConfig"
         )
     .flex(v-else)
-      .cell.flex.flex-col.gap-y-7px.py-11px.items-center(
+      .cell.flex.flex-col.gap-y-7px.py-11px.items-center.justify-around(
         v-for="cell in config.columns",
         :class="{'flex-col-reverse': config.name === 'upper'}"
         :style="{'width': '6.25%', 'minWidth': '55px'}",

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/IncorsTooth.vue

@@ -161,6 +161,8 @@
                 fill="#252850",
                 stroke="white"
                 )
+          g(v-if="data.crown.general.seal")
+            path(d="M40.4489 9.76331C40.4489 8.50504 40.5071 7.4112 40.5609 6.46817C40.5647 6.40263 40.5684 6.33791 40.5721 6.274C40.6216 5.41073 40.6628 4.69477 40.6499 4.08281C40.6361 3.4256 40.5597 2.94088 40.3946 2.56649C40.2373 2.20961 39.9865 1.92397 39.5582 1.6857C39.1149 1.43905 38.4773 1.24139 37.5522 1.09263C36.6308 0.944462 35.456 0.849421 33.9572 0.789614C31.3963 0.687426 27.9377 0.689489 23.2622 0.692278C22.4613 0.692755 21.6247 0.693254 20.7507 0.693254C20.3012 0.693254 19.8616 0.69319 19.4315 0.693125C14.1463 0.692337 10.3193 0.691765 7.54653 0.815899C6.04823 0.882975 4.87372 0.985922 3.95277 1.14147C3.02833 1.2976 2.39034 1.50195 1.94637 1.75397C1.51685 1.99779 1.26448 2.28827 1.10628 2.64835C0.940712 3.02521 0.864407 3.50982 0.850534 4.16209C0.837567 4.77177 0.878938 5.48308 0.928707 6.3388C0.932211 6.39904 0.935756 6.45999 0.939326 6.52167C0.993167 7.45178 1.05128 8.52824 1.05128 9.76331C1.05128 10.5815 1.49902 11.4558 2.44923 12.3324C3.39643 13.2061 4.7976 14.037 6.57884 14.7559C10.138 16.1924 15.1222 17.1445 20.7507 17.1445C26.3793 17.1445 31.3631 16.1924 34.922 14.7559C36.7031 14.037 38.1041 13.2061 39.0512 12.3324C40.0013 11.4559 40.4489 10.5815 40.4489 9.76331Z" fill="#FFB931" stroke="white")
         g(v-if="data.general === 'В'" transform="translate(2.5 2)")
           path(d="M18.7505 31.1406C8.60226 31.1406 0.703384 24.2816 0.703125 17.4223C18.7497 17.4223 13.8937 0.828266 18.7505 0.828266C23.3064 0.828266 18.7505 17.3594 36.797 17.3594C36.797 24.7218 28.8987 31.1406 18.7505 31.1406Z" fill="#252850")
           mask(id="mask0_4460_281524" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="37" height="32")
@@ -176,8 +178,6 @@
             rect(width="2" height="48" transform="matrix(-0.866025 0.5 0.5 0.866025 -4.73584 4.43353)" fill="white" fill-opacity="0.3")
             rect(width="2" height="48" transform="matrix(-0.866025 0.5 0.5 0.866025 -8.19995 6.43353)" fill="white" fill-opacity="0.3")
             path(d="M10.7458 15.2351C8.56819 16.8046 5.53252 17.8416 1.21765 17.9178C1.39722 20.9921 3.23273 24.0833 6.23201 26.4619C9.38576 28.9631 13.7877 30.6406 18.7505 30.6406C28.509 30.6406 35.9373 24.6321 36.2843 17.8549C31.9674 17.7793 28.9144 16.7463 26.715 15.184C24.4306 13.5614 23.1171 11.4033 22.2518 9.28272C21.8197 8.22373 21.4976 7.16958 21.223 6.19433C21.1316 5.86978 21.0462 5.55694 20.9641 5.25603C20.7964 4.64144 20.6423 4.07664 20.4782 3.56353C20.2332 2.79724 19.9879 2.22215 19.697 1.84288C19.425 1.48818 19.1343 1.32827 18.7505 1.32827C18.3164 1.32827 17.9966 1.50101 17.7094 1.85587C17.4023 2.23532 17.1457 2.81036 16.8946 3.57676C16.7122 4.1334 16.5436 4.75425 16.3593 5.43291C16.2909 5.68489 16.2203 5.94483 16.146 6.21242C15.8747 7.19 15.5599 8.2476 15.1376 9.30995C14.2921 11.4373 13.0076 13.6049 10.7458 15.2351Z" stroke="#252850")
-        g(v-if="data.crown.general.seal")
-          path(d="M40.4489 9.76331C40.4489 8.50504 40.5071 7.4112 40.5609 6.46817C40.5647 6.40263 40.5684 6.33791 40.5721 6.274C40.6216 5.41073 40.6628 4.69477 40.6499 4.08281C40.6361 3.4256 40.5597 2.94088 40.3946 2.56649C40.2373 2.20961 39.9865 1.92397 39.5582 1.6857C39.1149 1.43905 38.4773 1.24139 37.5522 1.09263C36.6308 0.944462 35.456 0.849421 33.9572 0.789614C31.3963 0.687426 27.9377 0.689489 23.2622 0.692278C22.4613 0.692755 21.6247 0.693254 20.7507 0.693254C20.3012 0.693254 19.8616 0.69319 19.4315 0.693125C14.1463 0.692337 10.3193 0.691765 7.54653 0.815899C6.04823 0.882975 4.87372 0.985922 3.95277 1.14147C3.02833 1.2976 2.39034 1.50195 1.94637 1.75397C1.51685 1.99779 1.26448 2.28827 1.10628 2.64835C0.940712 3.02521 0.864407 3.50982 0.850534 4.16209C0.837567 4.77177 0.878938 5.48308 0.928707 6.3388C0.932211 6.39904 0.935756 6.45999 0.939326 6.52167C0.993167 7.45178 1.05128 8.52824 1.05128 9.76331C1.05128 10.5815 1.49902 11.4558 2.44923 12.3324C3.39643 13.2061 4.7976 14.037 6.57884 14.7559C10.138 16.1924 15.1222 17.1445 20.7507 17.1445C26.3793 17.1445 31.3631 16.1924 34.922 14.7559C36.7031 14.037 38.1041 13.2061 39.0512 12.3324C40.0013 11.4559 40.4489 10.5815 40.4489 9.76331Z" fill="#FFB931" stroke="white")
 </template>
 
 <script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/MolarsTooth.vue

@@ -147,7 +147,7 @@
               d="M34.5713 13.3113C34.5713 17.2416 27.0496 20.4277 18.8213 20.4277C10.593 20.4277 3.07129 17.2416 3.07129 13.3113V10.8813C3.07129 6.56757 6.95639 3.07059 11.5848 3.07059C14.2175 3.07059 17.2849 5.80103 18.8213 7.57059C20.3577 5.80103 23.4251 3.07059 26.0578 3.07059C30.6862 3.07059 34.5713 6.56757 34.5713 10.8813V13.3113Z",
               :fill="data.crown.general.fill"
               )
-            g(v-if="data.crown.general.injury")
+            g(v-if="data.crown.general.injury" transform="translate(1 0)")
               mask(
                 id="mask0_4460_279217",
                 style="mask-type:alpha",
@@ -171,6 +171,8 @@
                   fill="#252850",
                   stroke="white"
                   )
+            g(v-if="data.crown.general.seal" transform="translate(-1.7 -1)")
+              path(d="M40.1228 10.2231C40.1228 11.3221 39.4461 12.2872 38.4131 13.0913C37.3738 13.9004 35.901 14.6072 34.1258 15.1917C30.5701 16.3624 25.6894 17.0781 20.3212 17.0781C14.9529 17.0781 10.0722 16.3624 6.51648 15.1917C4.74129 14.6072 3.26855 13.9004 2.22922 13.0913C1.19624 12.2872 0.519531 11.3221 0.519531 10.2231V8.05313C0.519531 5.89907 1.87787 4.01827 3.92927 2.70039C5.98605 1.37904 8.79727 0.578125 11.8767 0.578125C15.2078 0.578125 18.2306 1.51582 20.3212 3.04056C22.4118 1.51582 25.4345 0.578125 28.7656 0.578125C31.8451 0.578125 34.6563 1.37904 36.7131 2.70039C38.7645 4.01827 40.1228 5.89907 40.1228 8.05313V10.2231Z" fill="#FFB931" stroke="white")
           g(v-if="data.general === 'В'" transform="translate(0.5 5)")
             path(d="M18.1825 18.8691C28.2246 18.8691 36.3652 14.697 36.3652 9.55031V6.36827C33.0934 8.74995 22.9998 6.36827 18.1825 0.00195312C14.9998 6.36827 3.88781 8.62027 -0.000244141 6.36827V9.55031C-0.000244141 14.697 8.14045 18.8691 18.1825 18.8691Z" fill="#252850")
             mask(id="mask0_4459_278586" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="38" height="19")
@@ -186,8 +188,6 @@
               rect(width="2" height="32" transform="matrix(-0.866025 0.5 0.5 0.866025 -1.52686 2.14662)" fill="white" fill-opacity="0.3")
               rect(width="2" height="32" transform="matrix(-0.866025 0.5 0.5 0.866025 -4.99072 4.14639)" fill="white" fill-opacity="0.3")
               path(d="M18.1825 18.3691C23.141 18.3691 27.6053 17.338 30.8116 15.6948C34.0444 14.0379 35.8652 11.8387 35.8652 9.55031V7.21686C34.9897 7.59189 33.8841 7.7642 32.6846 7.77356C31.0675 7.78617 29.2049 7.50335 27.3353 6.94468C23.8814 5.91263 20.3094 3.90907 18.2161 0.965481C16.3879 3.91356 12.9404 5.88355 9.49674 6.89666C7.62403 7.4476 5.72288 7.72514 4.03165 7.71886C2.71115 7.71395 1.48723 7.53582 0.499756 7.15613V9.55031C0.499756 11.8387 2.3206 14.0379 5.55341 15.6948C8.75971 17.338 13.224 18.3691 18.1825 18.3691Z" stroke="#252850")
-          g(v-if="data.crown.general.seal" transform="translate(-1.7 -1)")
-            path(d="M40.1228 10.2231C40.1228 11.3221 39.4461 12.2872 38.4131 13.0913C37.3738 13.9004 35.901 14.6072 34.1258 15.1917C30.5701 16.3624 25.6894 17.0781 20.3212 17.0781C14.9529 17.0781 10.0722 16.3624 6.51648 15.1917C4.74129 14.6072 3.26855 13.9004 2.22922 13.0913C1.19624 12.2872 0.519531 11.3221 0.519531 10.2231V8.05313C0.519531 5.89907 1.87787 4.01827 3.92927 2.70039C5.98605 1.37904 8.79727 0.578125 11.8767 0.578125C15.2078 0.578125 18.2306 1.51582 20.3212 3.04056C22.4118 1.51582 25.4345 0.578125 28.7656 0.578125C31.8451 0.578125 34.6563 1.37904 36.7131 2.70039C38.7645 4.01827 40.1228 5.89907 40.1228 8.05313V10.2231Z" fill="#FFB931" stroke="white")
 </template>
 
 <script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/PreMolarsFangsTooth.vue

@@ -158,6 +158,8 @@
                 fill="#252850",
                 stroke="white"
                 )
+          g(v-if="data.crown.general.seal")
+            path(d="M36.625 10.9255C36.625 10.1126 36.034 9.04978 34.8662 7.86058C33.7216 6.69509 32.1094 5.49605 30.2681 4.41384C26.5716 2.24116 22.0684 0.606323 18.75 0.606323C15.4316 0.606323 10.9284 2.24116 7.23187 4.41384C5.39063 5.49605 3.77843 6.69509 2.63384 7.86058C1.46595 9.04978 0.875 10.1126 0.875 10.9255C0.875 11.7626 1.29193 12.5752 2.15246 13.3454C3.01695 14.1192 4.29734 14.8183 5.92629 15.4048C9.18094 16.5766 13.7134 17.2587 18.75 17.2587C23.7866 17.2587 28.3191 16.5766 31.5737 15.4048C33.2027 14.8183 34.483 14.1192 35.3475 13.3454C36.2081 12.5752 36.625 11.7626 36.625 10.9255Z" fill="#FFB931" stroke="white")
         g(v-if="data.general === 'В'")
           path(d="M37.1252 19.3282C18.7502 19.3282 22.228 0.625122 18.7502 0.625122C15.2725 0.625122 18.7502 19.3282 0.375244 19.3282C0.375244 26.3958 8.60201 31.1407 18.7502 31.1407C28.8985 31.1407 37.1252 26.3958 37.1252 19.3282Z" fill="#252850")
           mask(id="mask0_4460_279331" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="38" height="32")
@@ -173,8 +175,6 @@
             rect(width="2" height="48" transform="matrix(-0.866025 0.5 0.5 0.866025 -3.75244 4.51178)" fill="white" fill-opacity="0.3")
             rect(width="2" height="48" transform="matrix(-0.866025 0.5 0.5 0.866025 -7.21655 6.51178)" fill="white" fill-opacity="0.3")
             path(d="M10.8114 16.8043C8.48682 18.567 5.30404 19.739 0.889695 19.8234C1.07147 22.9218 2.95887 25.5542 6.02137 27.4603C9.25006 29.4699 13.7469 30.6407 18.7502 30.6407C23.7536 30.6407 28.2504 29.4699 31.4791 27.4603C34.5416 25.5542 36.429 22.9218 36.6108 19.8234C32.1964 19.739 29.0137 18.567 26.6891 16.8043C24.2803 14.9777 22.8383 12.551 21.8867 10.1617C21.139 8.28409 20.6836 6.39721 20.3076 4.83934C20.2075 4.42474 20.1131 4.03343 20.0202 3.67181C19.7945 2.79254 19.5855 2.11653 19.3438 1.66465C19.1007 1.2104 18.9058 1.12512 18.7502 1.12512C18.5947 1.12512 18.3998 1.2104 18.1567 1.66465C17.915 2.11653 17.706 2.79254 17.4803 3.67181C17.3874 4.03344 17.293 4.42476 17.1929 4.83937C16.8169 6.39724 16.3615 8.2841 15.6137 10.1617C14.6622 12.551 13.2201 14.9777 10.8114 16.8043Z" stroke="#252850")
-        g(v-if="data.crown.general.seal")
-          path(d="M36.625 10.9255C36.625 10.1126 36.034 9.04978 34.8662 7.86058C33.7216 6.69509 32.1094 5.49605 30.2681 4.41384C26.5716 2.24116 22.0684 0.606323 18.75 0.606323C15.4316 0.606323 10.9284 2.24116 7.23187 4.41384C5.39063 5.49605 3.77843 6.69509 2.63384 7.86058C1.46595 9.04978 0.875 10.1126 0.875 10.9255C0.875 11.7626 1.29193 12.5752 2.15246 13.3454C3.01695 14.1192 4.29734 14.8183 5.92629 15.4048C9.18094 16.5766 13.7134 17.2587 18.75 17.2587C23.7866 17.2587 28.3191 16.5766 31.5737 15.4048C33.2027 14.8183 34.483 14.1192 35.3475 13.3454C36.2081 12.5752 36.625 11.7626 36.625 10.9255Z" fill="#FFB931" stroke="white")
 </template>
 
 <script>