[WIP] Правка кода

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

@@ -14,25 +14,22 @@
             .tag.flex.items-center.px-3.cursor-pointer.font-medium.text-smm(
               v-for="tag in list.tags", :key="tag.id"
             ) {{tag.label}}
-        .wrap.gap-1.flex.flex-col(v-if="docData.length && !(list.change || fillInspection)")
+          base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
-          .title.font-semibold.text-smm Документы
+        .wrap.gap-1.flex.flex-col(v-if="(scanData.length || docData.length) && !(list.change || fillInspection)", v-for="file in list.files")
+          .title.font-semibold.text-smm {{file.name}}
           .wrap.flex.gap-x-1.gap-y-1
-            .photo-field.flex.gap-x-2.items-center.gap-y-3(v-for="item in docData")
+            .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
-              q-avatar(size="24px")
+              v-for="item in file.data"
-                img.h-10.w-10.object-cover(
+              :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
-                  :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
             )
-              .doc-text.font-medium.text-smm {{item.name}}
+              q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="checkedName(file.name)")
-        .wrap.gap-1.flex.flex-col(v-if="scanData.length && !(list.change || fillInspection)")
+                img.h-10.w-10.object-cover(
-          .title.font-semibold.text-smm Сканы
+                  :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
-          .wrap.flex.gap-x-1.gap-y-1
+                )
-            .scan-field.flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(v-for="item in scanData")
+              .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
-              q-avatar(size="40px", rounded)
+              .flex.flex-col.gap-y-1(v-else)
-                img.h-10.w-10.object-cover(:src="item.file")
-              .flex.flex-col.gap-y-1
                 .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
                 .title.font-medium.text-xsx {{item.size + " Мб"}}
-          base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
         .filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
           .flex.gap-x-2
             base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
@@ -61,52 +58,34 @@
                 )
                 .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
+      .flex.flex-col.gap-y-3(v-for="file in list.files")
-        .title.text-smm.font-semibold Документы
+        .title.text-smm.font-semibold {{file.name}}
         .download.flex.relative
           base-input(
-            @change="addNewDoc",
+            @update:model-value="(e) => addNewFiles(e, file.name)",
             doc,
             :width="548",
             type="file",
             id="upload",
-            accept=".xlsx, .xls, .doc, .docx, .pdf, .odt",
+            :accept="checkedName(file.name) ? '.xlsx, .xls, .doc, .docx, .pdf, .odt' : 'image/*'",
             borderless,
             multiple
           )
           .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
-            span Загрузите документ
+            span {{checkedName(file.name) ? 'Загрузите документ' : 'Загрузите скан документа'}}
               label.label.cursor-pointer(for="upload")  с компьютера
             span  или перетащите его в это поле
-        .wrap.gap-1.flex(v-if="docData.length")
+        .wrap.gap-1.flex(v-if="file?.data?.length")
-          .photo-field.flex.gap-x-2.items-center(v-for="item in docData")
+          .flex.gap-x-2.items-center(
-            q-avatar(size="24px")
+            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="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
+                :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
               )
-            .doc-text.font-medium.text-smm {{item.name}}
+            .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
-      .flex.flex-col.gap-y-3
+            .flex.flex-col.gap-y-1(v-else)
-        .title.text-smm.font-semibold Сканы
-        .download.flex.relative.cursor-pointer
-          base-input(
-            @change="addNewScan"
-            doc,
-            :width="548",
-            type="file",
-            id="upload",
-            accept="image/*",
-            borderless,
-            multiple
-          )
-          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
-            span Загрузите скан документа
-              label.label(for="upload")  с компьютера
-            span  или перетащите его в это поле
-        .wrap.gap-1.flex(v-if="scanData.length")
-          .scan-field.flex.gap-x-2.items-center.pl-2.pr-4.py-2(v-for="item in scanData")
-            q-avatar(size="40px", rounded)
-              img.h-10.w-10.object-cover(:src="item.file")
-            .flex.flex-col.gap-y-1
               .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
               .title.font-medium.text-xsx {{item.size + " Мб"}}
 </template>
@@ -151,6 +130,10 @@ export default {
           { id: 7, label: "Удаление зуба" },
           { id: 2, label: "Жжение языка" },
         ],
+        files: [
+          { name: "Документы", data: null },
+          { name: "Сканы", data: null },
+        ],
       },
       selected: [],
       docData: [],
@@ -165,7 +148,14 @@ export default {
       },
     };
   },
+
   methods: {
+    checkedName(e) {
+      return e === "Документы" ? true : false;
+    },
+    addNewFiles(e, name) {
+      return name === "Документы" ? this.addNewDoc(e) : this.addNewScan(e);
+    },
     textSorting(arr) {
       let srt = [];
       this.abc.forEach((letter) => {
@@ -187,11 +177,12 @@ export default {
     closeCard() {
       this.list.change = false;
     },
-    addNewDoc(e) {
+    addNewDoc(arr) {
-      this.docData = [...this.docData, ...e.target.files];
+      this.docData = [...this.docData, ...arr];
+      this.list.files.find((e) => e.name === "Документы").data = this.docData;
     },
-    addNewScan(e) {
+    addNewScan(arr) {
-      [...e.target.files].forEach((file) => {
+      [...arr].forEach((file) => {
         const reader = new FileReader();
         reader.onload = (e) => {
           this.scanData.push({
@@ -202,6 +193,7 @@ export default {
         };
         reader.readAsDataURL(file);
       });
+      this.list.files.find((e) => e.name === "Сканы").data = this.scanData;
     },
   },
 };
@@ -324,4 +316,5 @@ export default {
   background: var(--bg-light-grey)
   border-radius: 4px
   width: fit-content
+  padding: 8px 16px 8px 8px
 </style>