[WIP] Добавил отображение выбранных тэгов, фикс конфига

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

@@ -12,8 +12,8 @@
           .flex.flex-col.gap-y-1(:class="{'edit-form': change || fillInspection}")
             .tag-wrap.flex.gap-x-1.gap-y-1
               .tag.flex.items-center.px-3.text-smm(
-                v-if="selected",
+                v-if="protocolData[data.state]",
-                v-for="item in selected",
+                v-for="item in protocolData[data.state]",
                 :key="item.id"
                 :class="{'pointer': change || fillInspection}"
               ) {{item.label + " - " + item.text}}
@@ -40,7 +40,7 @@
             .field.flex.flex-col.overflow-y-scroll.gap-y-1(v-if="data.results.diseases")
               .letter.flex.items-center.font-bold.text-base Некоторые инфекционные и паразитарные болезни
               .checkbox.flex.gap-x-2.items-center(v-for="disease in data.results.diseases")
-                q-checkbox(dense, v-model="selected", :val="disease")
+                q-checkbox(dense, v-model="protocolData[data.state]", :val="disease")
                 .name.font-semibold.text-smm {{ disease.label }}
                 .name.font-medium.text-smm {{ disease.text }}
 </template>
@@ -49,6 +49,7 @@
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "ClinicalForm",
@@ -57,9 +58,13 @@ export default {
   data() {
     return {
       change: false,
-      selected: [{ id: 0, label: "В00.09", text: "Простой герпес" }],
     };
   },
+  computed: {
+    ...mapState({
+      protocolData: (state) => state.medical.protocolData,
+    }),
+  },
   methods: {
     openCard() {
       this.change = true;
@@ -72,10 +77,7 @@ export default {
     fillInspection: {
       immediate: true,
       handler(newVal) {
-        if (newVal) {
+        if (newVal) this.change = false;
-          this.change = false;
-          this.selected = [];
-        }
       },
     },
   },

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

@@ -85,6 +85,12 @@ export default {
         }
       },
     },
+    modelValue: {
+      immediate: true,
+      handler(value) {
+        this.protocolData[this.data.state] = value;
+      },
+    },
   },
 };
 </script>

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

@@ -8,13 +8,13 @@
   )
     .protocol-body.flex.flex-col
       .flex.gap-x-4(:style="{height: change || fillInspection ? '300px' : ''}")
-        .flex.flex-col.gap-y-1(:class="{'open-textarea': change || fillInspection}")
+        .flex.flex-col.gap-y-1.overflow-y-auto(:class="{'open-textarea': change || fillInspection}")
           .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
             .tag.flex.items-center.px-3.text-smm(
-              v-for="tag in data.results.tags",
+              v-for="tag in protocolData[data.state]",
               :key="tag.id"
               :class="{'pointer': change || fillInspection}"
-            ) {{tag.label}}
+            ) {{tag}}
           base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
         .filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
           .flex.gap-x-2
@@ -36,17 +36,17 @@
                 :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
-          .field.flex.flex-col.overflow-y-scroll(v-if="data.results.complaints")
+          .field.flex.flex-col.overflow-y-scroll(v-if="data.results.tags")
-            .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.complaints)")
+            .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
               .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
-              .line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
+              .line.flex.gap-x-4.h-9.items-center(:key="name.id", v-for="name in complaint.array")
                 q-checkbox(
                   dense,
-                  v-model="selected",
+                  v-model="protocolData[data.state]",
-                  :val="name?.label",
+                  :val="name",
                   :style="{border: 'none', width: '16px', height: '16px'}"
                 )
-                .name.flex.items-center.font-medium.text-smm {{ name?.label }}
+                .name.flex.items-center.font-medium.text-smm {{ name }}
           .flex.h-10.w-10.absolute.right-4.bottom-4
             q-btn(color="primary", dense, padding="4px 12px")
               q-icon(name="app:icon-plus", size="17px")
@@ -60,6 +60,7 @@
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "MedicalFormTag",
@@ -68,24 +69,30 @@ export default {
   data() {
     return {
       change: false,
-      selected: [],
     };
   },
+  computed: {
+    ...mapState({
+      protocolData: (state) => state.medical.protocolData,
+    }),
+  },
   methods: {
     textSorting(arr) {
-      let srt = [];
+      let sortArr = [];
       this.abc.forEach((letter) => {
         arr.forEach((str) => {
-          let finded = srt.find((obj) => obj.sym === letter);
+          let finded = sortArr.find((obj) => obj.sym === letter);
-          if (str.label[0] === letter) {
+          if (str[0] === letter) {
             if (!finded) {
-              srt.push({ sym: letter, array: [{ label: str.label }] });
+              sortArr.push({
-            } else if (finded.sym === letter)
+                sym: letter,
-              finded.array.push({ label: str.label });
+                array: [str],
+              });
+            } else if (finded.sym === letter) finded.array.push(str);
           }
         });
       });
-      return srt;
+      return sortArr;
     },
     openCard() {
       this.change = true;

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

@@ -22,7 +22,6 @@
               :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
               padding="0"
             )
-    
       div(v-for="form in protocolForms", :key="form.key", v-if="inspection || fillInspection")  
         component(v-bind:is="form.component", :data="form", :fill-inspection="fillInspection", :abc="abc")
       .protocol.flex.justify-between.p-6(v-if="fillInspection")
@@ -44,6 +43,8 @@ import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspection
 import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue";
 import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
 import ClinicalForm from "./Forms/ClinicalForm.vue";
+import { mapGetters, mapState } from "vuex";
+
 export default {
   name: "MedicalProtocolsInspection",
   components: {
@@ -101,6 +102,14 @@ export default {
       ],
     };
   },
+  computed: {
+    ...mapState({
+      protocolData: (state) => state.medical.protocolData,
+    }),
+    ...mapGetters({
+      protocolDataGet: "getInitProtocol",
+    }),
+  },
 };
 </script>
 

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -601,21 +601,12 @@ export const protocolForms = [
     state: "complaints",
     results: {
       tags: [
-        { id: 1, label: "Боль при приеме сладкой пищи" },
+        "Боль при приеме сладкой пищи",
-        { id: 2, label: "Жжение языка" },
+        "Жжение языка",
-        { id: 3, label: "Кровоточивость десен" },
+        "Кровоточивость десен",
-        { id: 4, label: "Лечение у ортодонта не проводилось" },
+        "Лечение у ортодонта не проводилось",
-        { id: 5, label: "Ранее зубы лечили в ЛПУ" },
+        "Ранее зубы лечили в ЛПУ",
-        { id: 6, label: "Удаление зуба" },
+        "Удаление зуба",
-      ],
-      complaints: [
-        { id: 1, label: "Ранее зубы лечили в ЛПУ" },
-        { id: 2, label: "Жжение языка" },
-        { id: 3, label: "Кровоточивость десен" },
-        { id: 4, label: "Лечение у ортодонта не проводилось" },
-        { id: 5, label: "Кровоточивость зуба" },
-        { id: 6, label: "Боль при приеме сладкой пищи" },
-        { id: 7, label: "Удаление зуба" },
       ],
     },
   },
@@ -626,13 +617,11 @@ export const protocolForms = [
     state: "anamnesis",
     results: {
       tags: [
-        { id: 1, label: "Ребенок на боль в зубах не жаловался" },
+        "Ребенок на боль в зубах не жаловался",
-        { id: 2, label: "Ранее зубы лечили в ЛПУ" },
+        "Ранее зубы лечили в ЛПУ",
-      ],
+        "Лечение у ортодонта не проводилось",
-      complaints: [
+        "Налет появился год назад",
-        { id: 1, label: "Лечение у ортодонта не проводилось" },
+        "Ребенок отказывается от еды",
-        { id: 2, label: "Налет появился год назад" },
-        { id: 3, label: "Ребенок отказывается от еды" },
       ],
     },
   },
@@ -642,12 +631,12 @@ export const protocolForms = [
     key: "illnesses",
     state: "illnesses",
     results: {
-      tags: [{ id: 1, label: "Стоматит в 2022" }],
+      tags: [
-      complaints: [
+        "Стоматит в 2022",
-        { id: 1, label: "Абсцесс Броди" },
+        "Абсцесс Броди",
-        { id: 2, label: "Абсцесс мягких тканей" },
+        "Абсцесс мягких тканей",
-        { id: 3, label: "Абсцесс печени" },
+        "Абсцесс печени",
-        { id: 4, label: "Авитаминоз" },
+        "Авитаминоз",
       ],
     },
   },
@@ -658,15 +647,13 @@ export const protocolForms = [
     state: "medications",
     results: {
       tags: [
-        { id: 1, label: "Цитрамон" },
+        "Цитрамон",
-        { id: 2, label: "Нафтизин" },
+        "Нафтизин",
-      ],
+        "А-Пар ",
-      complaints: [
+        "А-Церумен",
-        { id: 1, label: "А-Пар " },
+        "Абаджио",
-        { id: 2, label: "А-Церумен" },
+        "Багомед",
-        { id: 3, label: "Абаджио" },
+        "Багомед плюс",
-        { id: 4, label: "Багомед" },
-        { id: 5, label: "Багомед плюс" },
       ],
     },
   },
@@ -761,14 +748,12 @@ export const protocolForms = [
     state: "inspection",
     results: {
       tags: [
-        { id: 1, label: "Без особенностей" },
+        "Без особенностей",
-        { id: 2, label: "Гематома на щеке" },
+        "Гематома на щеке",
-        { id: 3, label: "Киста в глазу" },
+        "Киста в глазу",
-      ],
+        "Красные пятна на языке",
-      complaints: [
+        "Фингал под глазом",
-        { id: 1, label: "Красные пятна на языке" },
+        "Гематома на щеке",
-        { id: 2, label: "Фингал под глазом" },
-        { id: 3, label: "Гематома на щеке" },
       ],
     },
   },
@@ -779,14 +764,12 @@ export const protocolForms = [
     state: "cavity",
     results: {
       tags: [
-        { id: 1, label: "Кариес" },
+        "Кариес",
-        { id: 2, label: "Отек десны" },
+        "Отек десны",
-        { id: 3, label: "2 искусственных зуба" },
+        "2 искусственных зуба",
-      ],
+        "Без особенностей",
-      complaints: [
+        "Громадная язва",
-        { id: 1, label: "Без особенностей" },
+        "Кариес",
-        { id: 2, label: "Громадная язва" },
-        { id: 3, label: "Кариес" },
       ],
     },
   },
@@ -1249,11 +1232,7 @@ export const protocolForms = [
         { id: 1, label: "Общий анализ крови" },
         { id: 2, label: "Консультация узкого специалиста" },
         { id: 3, label: "2 искусственных зуба" },
-      ],
+        { id: 4, label: "Биохимический анализ крови" },
-      complaints: [
-        { id: 1, label: "Биохимический анализ крови" },
-        { id: 2, label: "Консультация узкого специалиста" },
-        { id: 3, label: "Общий анализ крови" },
       ],
     },
   },

src/store/modules/medicalCard.js

@@ -326,6 +326,20 @@ const getters = {
   },
   getProtocolData() {
     return {
+      complaints: ["Боль при приеме сладкой пищи"],
+      anamnesis: [
+        "Ребенок на боль в зубах не жаловался",
+        "Ранее зубы лечили в ЛПУ",
+      ],
+      illnesses: ["Стоматит в 2022"],
+      medications: ["Цитрамон", "Нафтизин"],
+      inspection: ["Без особенностей", "Гематома на щеке", "Киста в глазу"],
+      cavity: ["Кариес", "Отек десны", "2 искусственных зуба"],
+      survey: [
+        "Общий анализ крови",
+        "Консультация узкого специалиста",
+        "2 искусственных зуба",
+      ],
       bite: "distal bite",
       hygieneIndex: 2,
       KPUIndex: 6.1,
@@ -354,10 +368,18 @@ const getters = {
         lacticBite: toothFormula.state.lacticBite,
         formula: toothFormula.state.formula,
       },
+      clinical: [{ id: 0, label: "В00.09", text: "Простой герпес" }],
     };
   },
   getInitProtocol() {
     return {
+      complaints: [],
+      anamnesis: [],
+      illnesses: [],
+      medications: [],
+      inspection: [],
+      cavity: [],
+      survey: [],
       bite: null,
       hygieneIndex: null,
       KPUIndex: null,
@@ -380,10 +402,12 @@ const getters = {
         },
       },
       disease: null,
+      preliminary: null,
       toothFormula: {
         lacticBite: toothFormula.stateInit.lacticBite,
         formula: toothFormula.stateInit.formula,
       },
+      clinical: [],
     };
   },
 };