Merge branch 'ASTRA-80' into 'master'

Resolve ASTRA-80

See merge request andrusyakka/urban-couscous!369

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

@@ -8,21 +8,32 @@
   )
     .protocol-body.flex.flex-col
       .flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
-      .flex.gap-x-4(:style="{height: list.change || fillInspection ? '300px' : ''}")
+      .flex.flex-col.gap-y-4(:class="{'changed': list.change || fillInspection}")
         .flex.flex-col.gap-y-1(:class="{'open-textarea': list.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 list.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="(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
+            .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")
           .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)"
-              )
+              q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
             .button
               q-btn(
                 icon="filter_alt",
@@ -47,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
-        .title.text-smm.font-semibold Документы
+      .flex.flex-col.gap-y-3(v-for="file in list.files")
+        .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  или перетащите его в это поле
-        .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
-          base-input(
-            @change="addNewScan"
-            doc,
-            :width="548",
-            type="file",
-            id="upload",
-            accept="image/*",
-            borderless,
-            multiple
+        .wrap.gap-1.flex(v-if="file?.data?.length")
+          .flex.gap-x-2.items-center(
+            v-for="item in file.data",
+            :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
           )
-          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
-            span Загрузите скан документа
-              label.label(for="upload")  с компьютера
-            span  или перетащите его в это поле
-        .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
+            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 + " Мб"}}
 </template>
@@ -137,6 +130,10 @@ export default {
           { id: 7, label: "Удаление зуба" },
           { id: 2, label: "Жжение языка" },
         ],
+        files: [
+          { name: "Документы", data: null },
+          { name: "Сканы", data: null },
+        ],
       },
       selected: [],
       docData: [],
@@ -151,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) => {
@@ -173,11 +177,12 @@ export default {
     closeCard() {
       this.list.change = false;
     },
-    addNewDoc(e) {
-      this.docData = [...this.docData, ...e.target.files];
+    addNewDoc(arr) {
+      this.docData = [...this.docData, ...arr];
+      this.list.files.find((e) => e.name === "Документы").data = this.docData;
     },
-    addNewScan(e) {
-      [...e.target.files].forEach((file) => {
+    addNewScan(arr) {
+      [...arr].forEach((file) => {
         const reader = new FileReader();
         reader.onload = (e) => {
           this.scanData.push({
@@ -188,12 +193,21 @@ export default {
         };
         reader.readAsDataURL(file);
       });
+      this.list.files.find((e) => e.name === "Сканы").data = this.scanData;
     },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+#upload :deep(.q-field__native)
+  cursor: pointer
+
+.changed
+  height: 300px
+  column-gap: 16px
+  flex-direction: row
+
 .protocol-body
   background: var(--default-white)
   border-radius: 4px
@@ -273,9 +287,9 @@ export default {
   cursor: pointer
 
 .text
-  width: 520px
-  height: 60px
-  background: white
+  width: 548px
+  height: 62px
+  cursor: pointer
   color: var(--font-grey-color)
 
 .title
@@ -294,9 +308,7 @@ export default {
   padding: 4px 8px
   width: fit-content
 
-.doc
-  column-gap: 4px
-  row-gap: 4px
+.wrap
   flex-wrap: wrap !important
 
 .scan-field
@@ -304,4 +316,5 @@ export default {
   background: var(--bg-light-grey)
   border-radius: 4px
   width: fit-content
+  padding: 8px 16px 8px 8px
 </style>