[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-for="item in selected",
+                v-if="protocolData[data.state]",
+                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) {
-          this.change = false;
-          this.selected = [];
-        }
+        if (newVal) this.change = false;
       },
     },
   },

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")
-            .checkbox.flex.flex-col(v-for="complaint in textSorting(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.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",
-                  :val="name?.label",
+                  v-model="protocolData[data.state]",
+                  :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);
-          if (str.label[0] === letter) {
+          let finded = sortArr.find((obj) => obj.sym === letter);
+          if (str[0] === letter) {
             if (!finded) {
-              srt.push({ sym: letter, array: [{ label: str.label }] });
-            } else if (finded.sym === letter)
-              finded.array.push({ label: str.label });
+              sortArr.push({
+                sym: letter,
+                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>