[WIP] Добавил возможность загрузки сканов и документов на форме данных обследования

src/components/base/BaseInput.vue

@@ -3,6 +3,7 @@
     q-input(
       v-model="value",
       :name="name",
+      :multiple="multiple"
       :class="{'circle': circle, 'font-input': true, 'doc': doc}",
       :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
       :borderless="borderless",
@@ -40,6 +41,7 @@ export default {
   name: "BaseInput",
   components: { BaseInputContainer },
   props: {
+    multiple: Boolean,
     circle: Boolean,
     doc: Boolean,
     dense: {
@@ -132,6 +134,7 @@ export default {
   z-index: 5
   opacity: 0
   cursor: pointer
+
 .doc
   width: 100%
   height: 100%

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

@@ -56,18 +56,21 @@
             :width="548",
             type="file",
             id="upload",
-            borderless
+            accept=".xlsx, .xls, .doc, .docx, .pdf, .odt",
+            borderless,
+            multiple
           )
           .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
             span Загрузите документ
               label.label.cursor-pointer(for="upload")  с компьютера
             span  или перетащите его в это поле
-        .photo-field.flex.gap-x-2.items-center(v-if="docData.length", v-for="item in docData")
+        .doc.flex(v-if="docData.length")
-          q-avatar(size="24px")
+          .photo-field.flex.gap-x-2.items-center(v-for="item in docData")
-            img.h-10.w-10.object-cover(
+            q-avatar(size="24px")
-              :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
+              img.h-10.w-10.object-cover(
-            )
+                :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
-          .doc-text.font-medium.text-smm {{item.name}}
+              )
+            .doc-text.font-medium.text-smm {{item.name}}
       .flex.flex-col.gap-y-3
         .title.text-smm.font-semibold Сканы
         .download.flex.relative.cursor-pointer
@@ -77,18 +80,21 @@
             :width="548",
             type="file",
             id="upload",
-            borderless
+            accept="image/*",
+            borderless,
+            multiple
           )
           .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
             span Загрузите скан документа
               label.label(for="upload")  с компьютера
             span  или перетащите его в это поле
-        .photo-field.flex.gap-x-2.items-center(v-if="scanData.length", v-for="item in scanData")
+        .doc.flex(v-if="scanData.length")
-          q-avatar(size="24px")
+          .scan-field.flex.gap-x-2.items-center.pl-2.pr-4.py-2(v-for="item in scanData")
-            img.h-10.w-10.object-cover(
+            q-avatar(size="40px", rounded)
-              :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
+              img.h-10.w-10.object-cover(:src="item.file")
-            )
+            .flex.flex-col.gap-y-1
-          .doc-text.font-medium.text-smm {{item.name}}
+              .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
+              .title.font-medium.text-xsx {{item.size + " Мб"}}
 </template>
 
 <script>
@@ -138,9 +144,10 @@ export default {
       iconDictionary: {
         doc: wordIcon,
         docx: wordIcon,
+        xls: exelIcon,
+        xlsx: exelIcon,
         odt: wordIcon,
         pdf: pdfIcon,
-        xls: exelIcon,
       },
     };
   },
@@ -170,7 +177,17 @@ export default {
       this.docData = [...this.docData, ...e.target.files];
     },
     addNewScan(e) {
-      this.scanData = [...this.scanData, ...e.target.files];
+      [...e.target.files].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),
+          });
+        };
+        reader.readAsDataURL(file);
+      });
     },
   },
 };
@@ -276,4 +293,15 @@ export default {
   border-radius: 4px
   padding: 4px 8px
   width: fit-content
+
+.doc
+  column-gap: 4px
+  row-gap: 4px
+  flex-wrap: wrap !important
+
+.scan-field
+  height: 56px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+  width: fit-content
 </style>