[WIP] Добавил сохранение новой записи, поправил баги

src/assets/sass/variables.sass

@@ -24,6 +24,7 @@
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
   --font-grey-color-0: #85858b
+  --font-dark-grey-color: #7a88a8
   --border-grey-color: #c2c2c2
   --border-light-grey-color: #d3d4dc
   --bg-light-grey: #eff1f4

src/components/base/BaseDownload.vue

@@ -2,18 +2,6 @@
   label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
     :style="{height: `${height}px`, width: width ? `${width}px` : '100%'}"
   )
-    q-icon.absolute(
-      v-if="withIcon",
-      name="app:download",
-      size="24px"
-      )
-    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
-      v-else,
-      :style="{color: 'var(--font-grey-color)'}"
-    )
-      span {{`Загрузите ${titleType}`}}
-        label(:style="{color: 'var(--btn-blue-color)'}")  с компьютера
-      span  или перетащите его в это поле
     base-input(
       @change="(e) => addNewFiles(e)",
       doc,
@@ -24,6 +12,18 @@
       borderless,
       :multiple="multiple"
     )
+    q-icon.absolute(
+      v-if="withIcon",
+      name="app:download",
+      :size="sizeIcon"
+      )
+    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
+      v-else,
+      :style="{color: 'var(--font-grey-color)'}"
+    )
+      span {{`Загрузите ${titleType}`}}
+        label.pointer-events-none.cursor-pointer(:style="{color: 'var(--btn-blue-color)'}")  с компьютера
+      span  или перетащите его в это поле
 </template>
 
 <script>
@@ -51,6 +51,10 @@ export default {
       default: "photo",
     },
     withIcon: Boolean,
+    sizeIcon: {
+      type: String,
+      default: "24px",
+    },
     titleType: {
       type: String,
       default: "фото",

src/components/base/BaseInput.vue

@@ -5,7 +5,7 @@
       :name="name",
       :multiple="multiple",
       :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight, minHeight: minHeight}",
       :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
@@ -60,6 +60,10 @@ export default {
       type: Number,
       default: 500,
     },
+    minHeight: {
+      type: String,
+      default: "0px",
+    },
     lineHeight: {
       type: String,
       default: "19px",

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

@@ -8,13 +8,33 @@
           base-download(
             v-model="dataEntry.pictures",
             multiple,
+            title-type="снимок",
             :returned-fields="['photo', 'id', 'name', 'size']"
             )
           .grey-border.rounded-md.flex.w-full.py-2.pr-4.pl-2.justify-between.items-center(v-for="picture in dataEntry.pictures")
-            .flex
+            .flex.items-center
-              img.grey-border.rounded.w-8.h-8(:src="picture.photo")
+              img.grey-border.rounded.w-8.h-8.mr-3(:src="picture.photo")
+              span.text-base.font-normal.mr-2 {{picture.name}}
+              span.text-smm.font-normal(:style="{color: 'var(--font-dark-grey-color)'}") {{`${picture.size} МБ`}}
+            q-icon.delete-img.cursor-pointer(
+              @click="() => deleteImg(picture.id)",
+              name="app:cancel", 
+              size="15px",
+              )
         .flex.flex-col.gap-y-6px.justify-start.w-full
           span.text-smm.font-semibold.title-inputs Комментарий врача
+          .flex.comments.rounded
+            base-input.w-full.min-h-75(
+              v-model="dataEntry.comment",
+              type="textarea",
+              borderless,
+              dense,
+              placeholder="Введите описание"
+              autogrow,
+              min-height="75px",
+              font-size="16px",
+              :text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
+              )
       .flex.gap-x-2.text-smm
         q-btn(
           color="primary",
@@ -31,38 +51,80 @@
           no-caps,
           label="Сохранить",
           padding="10px 24px 10px 24px",
+          @click="createNewEntry"
         )
 </template>
 
 <script>
 import BaseModal from "@/components/base/BaseModal.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseDownload from "@/components/base/BaseDownload.vue";
+import { mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import moment from "moment";
 
 export default {
   name: "HealthStateCreateModal",
-  components: { BaseModal, BaseDownload },
+  components: { BaseModal, BaseDownload, BaseInput },
   mixins: [v_model],
   data() {
     return {
-      dataEntry: {
+      dataEntry: {},
-        id: 1,
-        date: moment().format("DD.MM.YYYY"),
-        pictures: [],
-        comments: [],
-      },
     };
   },
   methods: {
+    ...mapActions({
+      addNewListData: "addNewListData",
+    }),
+    deleteImg(id) {
+      this.dataEntry.pictures = this.dataEntry.pictures.filter(
+        (img) => img.id !== id
+      );
+    },
     closeModal() {
       this.value = false;
     },
+    createNewEntry() {
+      this.addNewListData({
+        stateKey: "healthState",
+        data: { ...this.dataEntry, id: Math.random },
+      });
+      this.value = false;
+    },
+  },
+  computed: {
+    getData() {
+      return {
+        date: moment().format("YYYY-MM-DD"),
+        pictures: [],
+        comment: "",
+      };
+    },
+  },
+  mounted() {
+    this.dataEntry = JSON.parse(JSON.stringify(this.getData));
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        if (!this.value) {
+          this.dataEntry = JSON.parse(JSON.stringify(this.getData));
+        }
+      },
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.delete-img
+  color: var(--font-grey-color)
+  &:hover
+    opacity: 0.7
+.comments
+  border: 1px solid var(--border-light-grey-color)
+  padding: 3px 8px 6px 16px
 .title-inputs
   color: var(--font-grey-color)
 .form-wrapper

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

@@ -8,7 +8,11 @@
     :save="saveСhanges",
     :is-check-change="isCheckChange"
     )
-    .flex.w-full.gap-x-4
+    .flex.w-full.gap-x-4.relative
+      span.absolute.bottom-0.right-0.text-smm.font-medium(
+        v-if="!isEdit",
+        :style="{color: 'var(--font-grey-color)'}"
+        ) {{moment(value?.date).format('DD.MM.YYYY')}}
       base-modal-showing-picture(
         v-model="isShowsPicture",
         :init-picture="value.pictures.find((el) => el.id === pictureId)",
@@ -45,48 +49,36 @@
                 size="8px",
                 :style="{color: 'var(--default-white)'}"
                 )
-        label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+        base-download(
           v-if="isEdit",
-          )
+          v-model="value.pictures",
-          q-icon.absolute(
+          multiple,
-            name="app:download",
+          with-icon,
-            size="24px"
+          size-icon="18px",
-            )
+          :returned-fields="['photo', 'id', 'name', 'size']"
-          base-input(
-            @change="(e) => addNewFiles(e)",
-            doc,
-            type="file",
-            accept="image/*",
-            id="download",
-            :style="{zIndex: '-1'}",
-            borderless,
           )
       .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(
+        .flex.comments.rounded(v-if="isEdit")
-          :class="{'comments': isEdit}",
+          q-input.w-full(
-          :style="{padding: isEdit ? '12px 8px 12px 16px' : '0 0 0 12px'}"
+            v-model="value.comment",
-          )
+            type="textarea",
-          .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}`",
-                :readonly="!isEdit",
-                v-model="comment.text",
             borderless,
-                autofocus,
             dense,
-                :input-style="{'height': '18px', 'font-weight': '500'}"
+            :input-style="{'min-height': '75px', 'font-weight': '500'}"
-                @keyup="(el) => switchСomment(el, index, comment.text)"
             )
+        .flex.flex-col.w-full.pl-10px(v-else)
+          .flex(v-for="comment in getListComment")
+            .flex.gap-x-10px.w-full(v-if="comment")
+              .flex.w-1.h-1.rounded-full.mt-7px(
+                :style="{backgroundColor: 'var(--font-dark-blue-color)'}")
+              span.w-full.font-medium {{comment}}
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
+import BaseDownload from "@/components/base/BaseDownload.vue";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
 import moment from "moment";
 import { mapActions, mapGetters } from "vuex";
@@ -94,7 +86,12 @@ import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "HealthStateForm",
-  components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
+  components: {
+    MedicalFormWrapper,
+    BaseModalShowingPicture,
+    BaseInput,
+    BaseDownload,
+  },
   data() {
     return {
       moment,
@@ -102,6 +99,7 @@ export default {
       isCheckChange: true,
       isShowsPicture: false,
       pictureId: "",
+      initData: {},
     };
   },
   mixins: [v_model],
@@ -109,10 +107,24 @@ export default {
     ...mapGetters({
       getHealthStateData: "getHealthStateData",
     }),
+    getListComment() {
+      return this.value.comment.split("\n");
+    },
+  },
+  watch: {
+    isEdit: {
+      immediate: true,
+      handler() {
+        if (this.isEdit) {
+          this.initData = JSON.parse(JSON.stringify(this.value));
+        }
+      },
+    },
   },
   methods: {
     ...mapActions({
       deleteItemData: "deleteItemData",
+      returnInitData: "returnInitData",
     }),
     showPicture(id) {
       this.pictureId = id;
@@ -142,31 +154,12 @@ export default {
       this.isEdit = true;
     },
     cancelEdit() {
-      this.value = this.getHealthStateData.find(
+      this.value = this.initData;
-        (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) {
-      if (event.code === "Enter") {
-        event.target.blur();
-        if (index + 1 === this.value.comments.length) {
-          this.value.comments.push({ text: "" });
-        }
-      }
-      if (event.code === "Backspace") {
-        if (!comment && this.value.comments.length > 1) {
-          this.value.comments = this.value.comments.filter(
-            (_, i) => index !== i
-          );
-          this.$refs[`comment-${index - 1}`][0].focus();
-        }
-      }
-    },
   },
 };
 </script>
@@ -200,9 +193,5 @@ export default {
     color: var(--btn-blue-color)
 .comments
   border: 1px solid var(--border-light-grey-color)
-</style>
+  padding: 3px 8px 6px 16px
-
-<style lang="sass">
-.comment .q-field__inner .q-field__control
-  height: 20px
 </style>

src/store/modules/medicalCard.js

@@ -128,7 +128,7 @@ const state = () => ({
     },
   ],
   protocolData: null,
-  healthState: getters.getHealthStateData(),
+  healthState: null,
 });
 
 const getters = {
@@ -396,49 +396,22 @@ const getters = {
         id: 1,
         date: "2023-02-22",
         pictures: [],
-        comments: [
+        comment:
-          {
+          "Пациент склонен к преувеличению фактов\nПациент отказывался заполнять карту\nТяжело идет на контакт",
-            text: "Пациент склонен к преувеличению фактов",
-          },
-          {
-            text: "Пациент отказывался заполнять карту",
-          },
-          {
-            text: "Тяжело идет на контакт",
-          },
-        ],
       },
       {
         id: 2,
         date: "2022-02-22",
         pictures: [],
-        comments: [
+        comment:
-          {
+          "Пациент склонен к преувеличению фактов\nПациент отказывался заполнять карту\nТяжело идет на контакт",
-            text: "Пациент склонен к преувеличению фактов",
-          },
-          {
-            text: "Пациент отказывался заполнять карту",
-          },
-          {
-            text: "Тяжело идет на контакт",
-          },
-        ],
       },
       {
         id: 3,
         date: "2021-02-22",
         pictures: [],
-        comments: [
+        comment:
-          {
+          "Пациент склонен к преувеличению фактов\nПациент отказывался заполнять карту\nТяжело идет на контакт",
-            text: "Пациент склонен к преувеличению фактов",
-          },
-          {
-            text: "Пациент отказывался заполнять карту",
-          },
-          {
-            text: "Тяжело идет на контакт",
-          },
-        ],
       },
     ];
   },
@@ -448,6 +421,9 @@ const actions = {
   deleteItemData({ commit }, props) {
     commit("setDataWithouDeleted", props);
   },
+  addNewListData({ commit }, props) {
+    commit("setNewListData", props);
+  },
   getBenefitData({ commit }) {
     fetchWrapper.get("general/benefit/").then((res) => {
       commit("setBenefitData", res.results);
@@ -474,6 +450,7 @@ const actions = {
         commit("setDocumentsData");
         commit("setAllergiesData");
         commit("setConfidantData");
+        commit("setHealthStateData");
         commit("setEventsPersonData", res.person.id);
       });
   },
@@ -519,6 +496,9 @@ const mutations = {
       (item) => item.id !== props.itemId
     );
   },
+  setNewListData(state, props) {
+    state[props.stateKey] = [...state[props.stateKey], props.data];
+  },
   setBenefitData(state, data) {
     state.benefitData = data;
   },
@@ -561,6 +541,11 @@ const mutations = {
       }
     }
   },
+  setHealthStateData(state) {
+    state.healthState = JSON.parse(
+      JSON.stringify(this.getters.getHealthStateData)
+    );
+  },
 };
 
 export default {