[WIP] Добавил загрузку документов

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

@@ -1,28 +1,132 @@
 <template lang="pug">
-  medical-form-wrapper(:title="`${data?.year} год`")
-    .flex.flex-col.comments.rounded.py-3.px-4
-      .flex(v-for="comment in data.comments")
-        base-input.comment.w-full(
-          v-model="comment.comment",
+  medical-form-wrapper(
+    :title="`${value?.year} год`",
+    :is-edit="isEdit",
+    :openEdit="openEdit",
+    :cancel="cancelEdit"
+    )
+    .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)'}"
+        )
+        .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")
+            q-btn.absolute(
+              @click="() => deletePicture(picture)",
+              round,
+              dense,
+              size="16px",
+              padding="4px 4px 4px 4.5px",
+              :style="{backgroundColor: 'var(--border-red-color)', top: '-8px', right: '-8px'}"
+            )
+              q-icon(
+                name="app:cancel",
+                size="8px",
+                :style="{color: 'var(--default-white)'}"
+                )
+        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(:style="{height: '93px'}")
+          base-input.w-full.h-full(
+            @update:model-value="(e) => addNewFiles(e)",
+            doc,
+            type="file",
+            id="download",
+            accept="image/*",
+            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.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")
+              q-input.comment.w-full(
+                :ref="`comment-${index}`"
+                v-model="comment.text",
                 borderless,
                 dense,
+                :input-style="{'height': '16px', 'font-weight': '500'}"
+                @keyup="(el) => switchСomment(el, index, comment.text)"
                 )
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { v_model } from "@/shared/mixins/v-model";
 import BaseInput from "@/components/base/BaseInput";
 
 export default {
   name: "HealthStateForm",
   components: { MedicalFormWrapper, BaseInput },
-  props: {
-    data: Object,
+  data() {
+    return {
+      isEdit: false,
+    };
+  },
+  mixins: [v_model],
+  methods: {
+    deletePicture(picture) {
+      this.value.pictures = this.value.pictures.filter(
+        (el) => el.photo !== picture.photo
+      );
+    },
+    addNewFiles(e) {
+      Object.values(e).forEach((file) => {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+          this.value.pictures.push({
+            photo: e.target.result,
+            file: file,
+          });
+        };
+        reader.readAsDataURL(file);
+      });
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+    switchСomment(event, index, comment) {
+      if (event.code === "Enter") {
+        event.target.blur();
+        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) {
+          this.value.comments = this.value.comments.filter(
+            (_, i) => index !== i
+          );
+        }
+      }
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.download
+  width: 216px
+  border: 1px dashed var(--font-grey-color)
+  background-color: var(--default-white)
+  &:hover .q-icon
+    opacity: 0.6
+  & .q-icon
+    color: var(--btn-blue-color)
 .comments
   border: 1px solid var(--border-light-grey-color)
 </style>
+
+<style lang="sass">
+.comment .q-field__inner .q-field__control
+  height: 20px
+</style>

src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue

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

src/store/modules/medicalCard.js

@@ -131,43 +131,46 @@ const state = () => ({
   healthState: [
     {
       year: 2023,
+      pictures: [],
       comments: [
         {
-          comment: "Пациент склонен к преувеличению фактов",
+          text: "Пациент склонен к преувеличению фактов",
         },
         {
-          comment: "Пациент отказывался заполнять карту",
+          text: "Пациент отказывался заполнять карту",
         },
         {
-          comment: "Тяжело идет на контакт",
+          text: "Тяжело идет на контакт",
         },
       ],
     },
     {
       year: 2022,
+      pictures: [],
       comments: [
         {
-          comment: "Пациент склонен к преувеличению фактов",
+          text: "Пациент склонен к преувеличению фактов",
         },
         {
-          comment: "Пациент отказывался заполнять карту",
+          text: "Пациент отказывался заполнять карту",
         },
         {
-          comment: "Тяжело идет на контакт",
+          text: "Тяжело идет на контакт",
         },
       ],
     },
     {
       year: 2021,
+      pictures: [],
       comments: [
         {
-          comment: "Пациент склонен к преувеличению фактов",
+          text: "Пациент склонен к преувеличению фактов",
         },
         {
-          comment: "Пациент отказывался заполнять карту",
+          text: "Пациент отказывался заполнять карту",
         },
         {
-          comment: "Тяжело идет на контакт",
+          text: "Тяжело идет на контакт",
         },
       ],
     },

tailwind.config.js

@@ -67,6 +67,7 @@ module.exports = {
         "74px": "74px",
         "92px": "92px",
         "102px": "102px",
+        "130px": "130px",
         "143px": "143px",
         "148px": "148px",
         "212px": "212px",