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

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

@@ -159,6 +159,14 @@ export default {
       });
     },
   },
+  watch: {
+    fillInspection: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.change = false;
+      },
+    },
+  },
 };
 </script>
 

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

@@ -4,6 +4,7 @@
     :is-edit="change",
     :open-edit="openCard",
     :cancel="closeCard",
+    :tag="fillInspection || change"
   )
     .disease-body.flex
       .flex.flex-col.gap-y-17px(v-if="fillInspection || change")
@@ -31,7 +32,6 @@ export default {
   props: {
     data: Object,
     fillInspection: Boolean,
-    inspection: Boolean,
   },
   data() {
     return { change: false };
@@ -44,6 +44,14 @@ export default {
       this.change = false;
     },
   },
+  watch: {
+    fillInspection: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.change = false;
+      },
+    },
+  },
 };
 </script>
 

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

@@ -1,21 +1,19 @@
 <template lang="pug">
   medical-form-wrapper(
-    v-for="(item, index) in list[0].data",
-    :key="item.id"
-    :title="item.name",
-    :is-edit="item?.change",
-    :open-edit="()=>openCard(index)",
-    :cancel="()=>closeCard(index)"
-    :tag="fillInspection || item?.change"
+    :title="data.title",
+    :is-edit="change",
+    :open-edit="openCard",
+    :cancel="closeCard"
+    :tag="fillInspection || change"
   )
     .protocol-body.flex.flex-col
-      .flex.items-center.gap-x-11px(:class="{'open-header': item.change || fillInspection}")
-      .flex.gap-x-4(:style="{height: item.change || fillInspection ? '300px' : ''}")
-        .flex.flex-col.gap-y-1(:class="{'open-textarea': item.change || fillInspection}")
+      .flex.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
+      .flex.gap-x-4(:style="{height: change || fillInspection ? '300px' : ''}")
+        .flex.flex-col.gap-y-1(:class="{'open-textarea': change || fillInspection}")
           .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
-            .tag.flex.items-center.px-3.cursor-pointer.text-smm(v-for="tag in item.tags" :key="tag.id") {{tag.label}}
-          base-input.px-3(v-if="item.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
-        .filter.flex.flex-col.gap-y-4(v-if="item.change || fillInspection")
+            .tag.flex.items-center.px-3.cursor-pointer.text-smm(v-for="tag in data.results.tags" :key="tag.id") {{tag.label}}
+          base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+        .filter.flex.flex-col.gap-y-4(v-if="change || fillInspection")
           .flex.gap-x-2
             base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
               q-icon(
@@ -35,8 +33,8 @@
                 :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
-          .field.flex.flex-col.overflow-y-scroll(v-if="item.complaints")
-            .checkbox.flex.flex-col(v-for="complaint in textSorting(item.complaints)")
+          .field.flex.flex-col.overflow-y-scroll(v-if="data.results.complaints")
+            .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.complaints)")
               .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")
                 q-checkbox(
@@ -56,15 +54,10 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
 export default {
   name: "MedicalFormTag",
   components: { BaseButton, BaseInput, MedicalFormWrapper },
-  props: {
-    abc: Array,
-    list: Array,
-    fillInspection: Boolean,
-    openCard: Function,
-    closeCard: Function,
-  },
+  props: { data: Object, abc: Array, fillInspection: Boolean },
   data() {
     return {
+      change: false,
       selected: [],
     };
   },
@@ -84,6 +77,20 @@ export default {
       });
       return srt;
     },
+    openCard() {
+      this.change = true;
+    },
+    closeCard() {
+      this.change = false;
+    },
+  },
+  watch: {
+    fillInspection: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.change = false;
+      },
+    },
   },
 };
 </script>

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

@@ -22,14 +22,7 @@
               :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
               padding="0"
             )
-      medical-form-tag(
-        v-if="inspection || fillInspection",
-        :list="list",
-        :abc="abc",
-        :fill-inspection="fillInspection"
-        :open-card="openCard",
-        :close-card="closeCard"
-      )
+    
       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")
@@ -68,43 +61,6 @@ export default {
         {
           id: 1,
           label: "Первичный осмотр 2023 года",
-          data: [
-            {
-              id: 1,
-              change: false,
-              name: "Жалобы",
-              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: "Удаление зуба" },
-                { id: 2, label: "Жжение языка" },
-              ],
-            },
-            {
-              id: 2,
-              change: false,
-              name: "Аллергологический анамнез",
-              tags: [],
-            },
-            {
-              id: 3,
-              change: false,
-              name: "Принимаемые лекарственные препараты",
-              tags: [],
-            },
-          ],
         },
       ],
       abc: [
@@ -142,14 +98,6 @@ export default {
       ],
     };
   },
-  methods: {
-    openCard(index) {
-      this.list[0].data[index].change = true;
-    },
-    closeCard(index) {
-      this.list[0].data[index].change = false;
-    },
-  },
 };
 </script>