From 669db8d4c6ba3046cca51aa795ceaf67f87ef000 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 15 May 2023 18:12:18 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D1=81=D0=BA=D0=B0=D0=BD=D0=BE=D0=B2=20=D0=B8=20=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20=D0=BD=D0=B0?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D1=8B=D1=85=20=D0=BE=D0=B1=D1=81=D0=BB=D0=B5=D0=B4=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |  3 +
 .../Forms/DataForm.vue                        | 60 ++++++++++++++-----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 13994b4..0c8ebc0 100644
--- a/src/components/base/BaseInput.vue
+++ b/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%
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
index 142d287..ac3b26e 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
+++ b/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")
-          q-avatar(size="24px")
-            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.flex(v-if="docData.length")
+          .photo-field.flex.gap-x-2.items-center(v-for="item in docData")
+            q-avatar(size="24px")
+              img.h-10.w-10.object-cover(
+                :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
+              )
+            .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")
-          q-avatar(size="24px")
-            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.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>
 
 <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>