[WIP] Добавил возможность просмотра фото

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

@@ -2,19 +2,35 @@
   medical-form-wrapper(
     :title="`${value?.year} год`",
     :is-edit="isEdit",
-    :openEdit="openEdit",
-    :cancel="cancelEdit"
+    :open-edit="openEdit",
+    :cancel="cancelEdit",
+    :delete-item="deleteCard",
+    :save="saveСhanges",
+    :is-check-change="isCheckChange"
     )
     .flex.w-full.gap-x-4
-      .flex.h-fit.flex-col.gap-y-2.p-2.rounded(
-        v-if="value.pictures.length || isEdit"
-        :style="{backgroundColor: 'var(--bg-light-grey)'}"
+      base-modal-showing-picture(
+        v-model="isShowsPicture",
+        :picture="value.pictures.find((el) => el.id === pictureId)?.photo",
         )
-        .flex.gap-x-2(v-if="value.pictures.length")
-          .flex.relative.h-10.w-10(v-for="picture in value.pictures")
-            img.h-10.w-10.rounded(:src="picture.photo")
+      .flex.flex-col.gap-y-2.p-2.rounded(
+        v-if="value.pictures.length || isEdit",
+        :style="{backgroundColor: 'var(--bg-light-grey)'}",
+        )
+        .flex.gap-2.w-full(v-if="value.pictures.length")
+          .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")
             q-btn.absolute(
-              @click="() => deletePicture(picture)",
+              v-if="isEdit",
+              @click="() => deletePicture(picture.id)",
               round,
               dense,
               size="16px",
@@ -26,7 +42,10 @@
                 size="8px",
                 :style="{color: 'var(--default-white)'}"
                 )
-        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(:style="{height: '93px'}")
+        .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)",
             doc,
@@ -37,14 +56,24 @@
             multiple
           )
           label.absolute.w-fit.h-fit(for="download")
-            q-icon(name="app:download" size="24px")
+            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.comments.rounded.py-3.pl-4.pr-2.h-130px
-          .flex.flex-col.w-full.overflow-y-auto
-            .flex(v-for="(comment, index) in value.comments")
+        .flex.flex-col.rounded.h-full(
+          :class="{'comments': isEdit}",
+          :style="{padding: isEdit ? '12px 8px 12px 16px' : '0 0 0 12px'}"
+          )
+          .flex.flex-col.w-full
+            .flex.items-center.gap-x-2(v-for="(comment, index) in value.comments")
+              .flex.w-1.h-1.rounded-full(
+                v-if="!isEdit",
+                :style="{backgroundColor: 'var(--font-dark-blue-color)'}")
               q-input.comment.w-full(
-                :ref="`comment-${index}`"
+                :ref="`comment-${index}`",
+                :readonly="!isEdit",
                 v-model="comment.text",
                 borderless,
                 dense,
@@ -55,23 +84,36 @@
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import { v_model } from "@/shared/mixins/v-model";
 import BaseInput from "@/components/base/BaseInput";
+import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
+import { mapActions } from "vuex";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "HealthStateForm",
-  components: { MedicalFormWrapper, BaseInput },
+  components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
   data() {
     return {
       isEdit: false,
+      isCheckChange: true,
+      isShowsPicture: false,
+      pictureId: "",
     };
   },
   mixins: [v_model],
   methods: {
-    deletePicture(picture) {
-      this.value.pictures = this.value.pictures.filter(
-        (el) => el.photo !== picture.photo
-      );
+    ...mapActions({
+      deleteItemData: "deleteItemData",
+    }),
+    showPicture(id) {
+      this.pictureId = id;
+      this.isShowsPicture = true;
+    },
+    deleteCard() {
+      this.deleteItemData({ stateKey: "healthState", itemId: this.value.id });
+    },
+    deletePicture(id) {
+      this.value.pictures = this.value.pictures.filter((el) => el.id !== id);
     },
     addNewFiles(e) {
       Object.values(e).forEach((file) => {
@@ -80,6 +122,7 @@ export default {
           this.value.pictures.push({
             photo: e.target.result,
             file: file,
+            id: Math.random(),
           });
         };
         reader.readAsDataURL(file);
@@ -91,6 +134,9 @@ export default {
     cancelEdit() {
       this.isEdit = false;
     },
+    saveСhanges() {
+      this.isEdit = false;
+    },
     switchСomment(event, index, comment) {
       if (event.code === "Enter") {
         event.target.blur();
@@ -114,6 +160,13 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.photo-viewing
+  display: none
+  background-color: var(--font-dark-blue-color-1)
+  color: var(--default-white)
+.photo
+  &:hover .photo-viewing
+    display: flex
 .download
   width: 216px
   border: 1px dashed var(--font-grey-color)

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -7,16 +7,42 @@
       .flex.w-full.justify-between
         .flex.w-fit.gap-11px.items-center(v-if="!tag")
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
+          q-icon.edit-button.text-lg.cursor-pointer(
+            name="app:edit",
+            v-if="!isEdit",
+            @click="openEdit",
+            size="20"
+            )
         .flex.w-full.gap-11px.items-center.justify-between(v-else)
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          .flex.items-center.h-5(v-if="!template", :style="{color: 'var(--btn-blue-color)'}")
-            q-btn(no-caps, outline, padding="10px 24px")
+          .flex.items-center.h-5(
+            v-if="!template",
+            :style="{color: 'var(--btn-blue-color)'}"
+            )
+            q-btn(
+              no-caps,
+              outline,
+              padding="10px 24px"
+              )
               img.mr-2(:src="layers")
               span.text-smm.font-medium Шаблоны
-        .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
-          q-icon(name="app:basket" size="20")
-          span.text-smm.font-medium {{ titleDelete }}
+        .flex(v-if="deleteItem")
+          q-btn(
+            @click="deleteItem",
+            v-if="!titleDelete",
+            :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)'}",
+            padding="10px",
+            )
+            q-icon(
+              name="app:basket",
+              size="20px",
+              )
+          .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
+            v-else-if="!isEdit && titleDelete", 
+            @click="deleteItem"
+            )
+            q-icon(name="app:basket" size="20")
+            span.text-smm.font-medium {{ titleDelete }}
         slot(name="right-corner")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
@@ -69,10 +95,7 @@ export default {
       type: Function,
       default: () => {},
     },
-    deleteItem: {
-      type: Function,
-      default: () => {},
-    },
+    deleteItem: Function,
     isCheckChange: {
       type: Boolean,
       default: false,

src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue

@@ -2,9 +2,7 @@
   .flex.flex-col.w-full.gap-y-2
     health-state-header
     .flex(v-for="(data, i) in healthState")
-      health-state-form(
-        v-model="healthState[i]"
-        )
+      health-state-form(v-model="healthState[i]")
 </template>
 
 <script>