[WIP] Добавил форму Развитие настоящего заболевания, перенес данные в стор, фикс стилей

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

@@ -1,36 +1,37 @@
 <template lang="pug">
   medical-form-wrapper(
     :title="data.title",
-    :is-edit="list?.change",
+    :is-edit="change",
     :open-edit="openCard",
     :cancel="closeCard",
-    :tag="fillInspection || list?.change"
+    :tag="fillInspection || change"
   )
     .protocol-body.flex.flex-col
-      .flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
-      .flex.flex-col.gap-y-4(:class="{'changed': list.change || fillInspection}")
-        .flex.flex-col.gap-y-1(:class="{'open-textarea': list.change || fillInspection}")
+      .flex.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
+      .flex.flex-col.gap-y-4(:class="{'changed': change || fillInspection}")
+        .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.font-medium.text-smm(
-              v-for="tag in list.tags", :key="tag.id"
+              v-for="tag in data.results.tags", :key="tag.id"
             ) {{tag.label}}
-          base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
-        .wrap.gap-1.flex.flex-col(v-if="(docData.length || scanData.length) && !(list.change || fillInspection)", v-for="file in list.files")
-          .title.font-semibold.text-smm.mb-2(v-if="file?.data?.length") {{file.name}}
-          .wrap.flex.gap-x-1.gap-y-1
-            .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
-              v-for="item in file.data"
-              :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
-            )
-              q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
-                img.h-10.w-10.object-cover(
-                  :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
-                )
-              .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
-              .flex.flex-col.gap-y-1(v-else)
-                .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
-                .title.font-medium.text-xsx {{item.size + " Мб"}}
-        .filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
+          base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+        template(v-if="!(change || fillInspection)", v-for="file in data.results.files")
+          .wrap.flex.flex-col.gap-1.gap-y-3(v-if="file?.data?.length")
+            .title.font-semibold.text-smm.mb-2 {{file.name}}
+            .wrap.flex.gap-x-1.gap-y-1
+              .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
+                v-for="item in file.data"
+                :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
+              )
+                q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
+                  img.h-10.w-10.object-cover(
+                    :src="checkedName(file.name) ? data.iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
+                  )
+                .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
+                .flex.flex-col.gap-y-1(v-else)
+                  .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
+                  .title.font-medium.text-xsx {{item.size + " Мб"}}
+        .filter.flex.flex-col.gap-y-4(v-if="change || fillInspection")
           .flex.gap-x-2
             base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
               q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
@@ -46,19 +47,19 @@
                 :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
-          .field.flex.flex-col.overflow-y-scroll(v-if="list.complaints")
-            .checkbox.flex.flex-col(v-for="complaint in textSorting(list.complaints)")
+          .field.flex.flex-col.overflow-y-scroll
+            .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(
                   dense,
-                  v-model="selected",
+                  v-model="data.selected",
                   :val="name?.label",
                   :style="{border: 'none', width: '16px', height: '16px'}"
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name?.label }}
-    .protocol-data.flex.gap-x-20(v-if="list.change || fillInspection")
-      .flex.flex-col.gap-y-3(v-for="file in list.files")
+    .protocol-data.flex.gap-x-20(v-if="change || fillInspection")
+      .flex.flex-col.gap-y-3(v-for="file in data.results.files")
         .title.text-smm.font-semibold {{file.name}}
         .download.flex.relative
           base-input(
@@ -82,7 +83,7 @@
           )
             q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
               img.h-10.w-10.object-cover(
-                :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
+                :src="checkedName(file.name) ? data.iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
               )
             .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
             .flex.flex-col.gap-y-1(v-else)
@@ -94,9 +95,6 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import pdfIcon from "@/assets/icons/pdf.svg";
-import wordIcon from "@/assets/icons/word.svg";
-import exelIcon from "@/assets/icons/exel.svg";
 
 export default {
   name: "DataForm",
@@ -109,46 +107,9 @@ export default {
   },
   data() {
     return {
-      list: {
-        title: "Данные обследования",
-        change: false,
-        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: "Жжение языка" },
-        ],
-        files: [
-          { name: "Документы", data: null },
-          { name: "Сканы", data: null },
-        ],
-      },
-      selected: [],
-      docData: [],
-      scanData: [],
-      iconDictionary: {
-        doc: wordIcon,
-        docx: wordIcon,
-        xls: exelIcon,
-        xlsx: exelIcon,
-        odt: wordIcon,
-        pdf: pdfIcon,
-      },
+      change: false,
     };
   },
-
   methods: {
     checkedName(e) {
       return e === "Документы" ? true : false;
@@ -172,28 +133,30 @@ export default {
       return srt;
     },
     openCard() {
-      this.list.change = true;
+      this.change = true;
     },
     closeCard() {
-      this.list.change = false;
+      this.change = false;
     },
     addNewDoc(arr) {
-      this.docData = [...this.docData, ...arr];
-      this.list.files.find((e) => e.name === "Документы").data = this.docData;
+      this.data.results.files.find((e) => e.name === "Документы").data = [
+        ...arr,
+      ];
     },
     addNewScan(arr) {
       [...arr].forEach((file) => {
         const reader = new FileReader();
         reader.onload = (e) => {
-          this.scanData.push({
-            file: e.target.result,
-            name: file.name,
-            size: (file.size / 1024 / 1024).toFixed(1),
-          });
+          this.data.results.files
+            .find((e) => e.name === "Сканы")
+            ?.data.push({
+              file: e.target.result,
+              name: file.name,
+              size: (file.size / 1024 / 1024).toFixed(1),
+            });
         };
         reader.readAsDataURL(file);
       });
-      this.list.files.find((e) => e.name === "Сканы").data = this.scanData;
     },
   },
 };