[WIP] Исправил баги и отображение фото

src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue

@@ -14,21 +14,23 @@
         :init-picture="value.pictures.find((el) => el.id === pictureId)",
         :list-pictures="value.pictures"
         )
-      .flex.flex-col.gap-y-2.p-2.rounded(
+      .flex.flex-col.gap-y-2.p-2.rounded.h-fit(
         v-if="value.pictures.length || isEdit",
         :style="{backgroundColor: 'var(--bg-light-grey)'}",
         )
-        .flex.gap-2.w-full(v-if="value.pictures.length")
+        .pictures.gap-2(
+          v-if="value.pictures.length"
+          :class="{'edit': isEdit, 'no-edit': !isEdit, 'one-picture': value.pictures.length === 1}"
+          )
           .photo.flex.relative(
             v-for="(picture, index) in value.pictures",
-            :style="{width: isEdit ? '40px' : '104px', height: isEdit ? '40px' : '104px'}",
             )
             .photo-viewing.flex.absolute.rounded.cursor-pointer.w-full.h-full.items-center.justify-center(
               v-if="!isEdit",
               @click="() => showPicture(picture.id)"
               )
               img(src="@/assets/icons/whiteEye.svg" alt="eye")
-            img.h-full.w-full.rounded(:src="picture.photo")
+            img.h-full.w-full.rounded.object-cover(:src="picture.photo")
             q-btn.absolute(
               v-if="isEdit",
               @click="() => deletePicture(picture.id)",
@@ -43,24 +45,23 @@
                 size="8px",
                 :style="{color: 'var(--default-white)'}"
                 )
-        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+        label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
           v-if="isEdit",
-          :style="{ height: '93px' }",
           )
-          base-input.w-full.h-full(
-            @update:model-value="(e) => addNewFiles(e)",
+          q-icon.absolute(
+            name="app:download",
+            size="24px"
+            )
+          base-input(
+            @change="(e) => addNewFiles(e)",
             doc,
             type="file",
-            id="download",
             accept="image/*",
+            id="download",
+            :style="{zIndex: '-1'}",
             borderless,
             multiple
           )
-          label.absolute.w-fit.h-fit(for="download")
-            q-icon(
-              name="app:download",
-              size="24px"
-              )
       .flex.w-full.flex-col.gap-y-2
         .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
         .flex.flex-col.rounded.h-full(
@@ -77,8 +78,9 @@
                 :readonly="!isEdit",
                 v-model="comment.text",
                 borderless,
+                autofocus,
                 dense,
-                :input-style="{'height': '16px', 'font-weight': '500'}"
+                :input-style="{'height': '18px', 'font-weight': '500'}"
                 @keyup="(el) => switchСomment(el, index, comment.text)"
                 )
 </template>
@@ -87,7 +89,7 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 
 export default {
@@ -102,6 +104,11 @@ export default {
     };
   },
   mixins: [v_model],
+  computed: {
+    ...mapGetters({
+      getHealthStateData: "getHealthStateData",
+    }),
+  },
   methods: {
     ...mapActions({
       deleteItemData: "deleteItemData",
@@ -117,7 +124,7 @@ export default {
       this.value.pictures = this.value.pictures.filter((el) => el.id !== id);
     },
     addNewFiles(e) {
-      Object.values(e).forEach((file) => {
+      Object.values(e.target.files).forEach((file) => {
         let reader = new FileReader();
         reader.onload = (e) => {
           this.value.pictures.push({
@@ -128,14 +135,19 @@ export default {
         };
         reader.readAsDataURL(file);
       });
+      e.target.value = null;
     },
     openEdit() {
       this.isEdit = true;
     },
     cancelEdit() {
+      this.value = this.getHealthStateData.find(
+        (el) => el.id === this.value.id
+      );
       this.isEdit = false;
     },
     saveСhanges() {
+      this.value.comments = this.value.comments.filter((el) => el.text);
       this.isEdit = false;
     },
     switchСomment(event, index, comment) {
@@ -144,15 +156,13 @@ export default {
         if (index + 1 === this.value.comments.length) {
           this.value.comments.push({ text: "" });
         }
-        if (this.$refs[`comment-${index + 1}`]) {
-          this.$refs[`comment-${index + 1}`][0].focus();
-        }
       }
       if (event.code === "Backspace") {
-        if (!comment) {
+        if (!comment && this.value.comments.length > 1) {
           this.value.comments = this.value.comments.filter(
             (_, i) => index !== i
           );
+          this.$refs[`comment-${index - 1}`][0].focus();
         }
       }
     },
@@ -161,6 +171,16 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.pictures
+  display: grid
+  &.no-edit
+    grid-template-columns: repeat(2, 104px)
+    grid-auto-rows: 104px
+    &.one-picture
+      grid-template-columns: repeat(1, 104px)
+  &.edit
+    grid-template-columns: repeat(4, 40px)
+    grid-auto-rows: 40px
 .photo-viewing
   display: none
   background-color: var(--font-dark-blue-color-1)
@@ -169,6 +189,7 @@ export default {
   &:hover .photo-viewing
     display: flex
 .download
+  min-height: 93px
   width: 216px
   border: 1px dashed var(--font-grey-color)
   background-color: var(--default-white)