[WIP] Добавил модалку для создания записи

src/components/base/BaseDownload.vue

@@ -0,0 +1,98 @@
+<template lang="pug">
+  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,
+      type="file",
+      :accept="getAccept",
+      id="download",
+      :style="{zIndex: '-1'}",
+      borderless,
+      :multiple="multiple"
+    )
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import { v_model } from "@/shared/mixins/v-model";
+import { getReturnedObjectImg } from "@/pages/newMedicalCard/utils/gettersObjects";
+export default {
+  name: "BaseDownload",
+  mixins: [v_model],
+  components: { BaseInput },
+  data() {
+    return {
+      getReturnedObjectImg,
+    };
+  },
+  props: {
+    multiple: Boolean,
+    height: {
+      type: Number,
+      default: 93,
+    },
+    width: Number,
+    type: {
+      type: String,
+      default: "photo",
+    },
+    withIcon: Boolean,
+    titleType: {
+      type: String,
+      default: "фото",
+    },
+    returnedFields: {
+      type: Array,
+      default: () => ["photo", "id"],
+    },
+  },
+  methods: {
+    addNewFiles(e) {
+      Object.values(e.target.files).forEach((file) => {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+          if (this.multiple) {
+            this.value.push(getReturnedObjectImg(this.returnedFields, e, file));
+          } else {
+            this.value = getReturnedObjectImg(this.returnedFields, e, file);
+          }
+        };
+        reader.readAsDataURL(file);
+      });
+      e.target.value = null;
+    },
+  },
+  computed: {
+    getAccept() {
+      if (this.type === "files") {
+        return ".xlsx, .xls, .doc, .docx, .pdf, .odt";
+      }
+      return "image/*";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.download
+  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)
+</style>

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

@@ -0,0 +1,72 @@
+<template lang="pug">
+  base-modal(v-model="value", title="Добавление записи" modal-padding)
+    .form-wrapper.flex.flex-col.gap-y-6.justify-start.mt-1
+      span.text-smm.font-medium.title-inputs {{`Дата: ${dataEntry.date}`}}
+      .flex.flex-col.gap-y-4.w-full
+        .flex.flex-col.gap-y-6px.justify-start.w-full
+          span.text-smm.font-semibold.title-inputs Карта здоровья
+          base-download(
+            v-model="dataEntry.pictures",
+            multiple,
+            :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
+              img.grey-border.rounded.w-8.h-8(:src="picture.photo")
+        .flex.flex-col.gap-y-6px.justify-start.w-full
+          span.text-smm.font-semibold.title-inputs Комментарий врача
+      .flex.gap-x-2.text-smm
+        q-btn(
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отменить",
+          padding="10px 24px 10px 24px",
+          @click="closeModal"
+        )
+        q-btn(
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Сохранить",
+          padding="10px 24px 10px 24px",
+        )
+</template>
+
+<script>
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseDownload from "@/components/base/BaseDownload.vue";
+import { v_model } from "@/shared/mixins/v-model";
+import moment from "moment";
+
+export default {
+  name: "HealthStateCreateModal",
+  components: { BaseModal, BaseDownload },
+  mixins: [v_model],
+  data() {
+    return {
+      dataEntry: {
+        id: 1,
+        date: moment().format("DD.MM.YYYY"),
+        pictures: [],
+        comments: [],
+      },
+    };
+  },
+  methods: {
+    closeModal() {
+      this.value = false;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.title-inputs
+  color: var(--font-grey-color)
+.form-wrapper
+  width: 422px
+.grey-border
+  border: 1px solid var(--border-light-grey-color)
+</style>

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

@@ -1,6 +1,6 @@
 <template lang="pug">
   medical-form-wrapper(
-    :title="`${value?.year} год`",
+    :title="`${moment(value?.date).format('YYYY')} год`",
     :is-edit="isEdit",
     :open-edit="openEdit",
     :cancel="cancelEdit",
@@ -60,7 +60,6 @@
             id="download",
             :style="{zIndex: '-1'}",
             borderless,
-            multiple
           )
       .flex.w-full.flex-col.gap-y-2
         .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
@@ -89,6 +88,7 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
+import moment from "moment";
 import { mapActions, mapGetters } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 
@@ -97,6 +97,7 @@ export default {
   components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
   data() {
     return {
+      moment,
       isEdit: false,
       isCheckChange: true,
       isShowsPicture: false,

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

@@ -2,16 +2,28 @@
   .header.flex.w-full.rounded.justify-between.items-center.py-5.pl-6.pr-5
     .span.text-2xl.font-bold Карты здоровья
     q-btn(
+      @click="() => {isOpenModal = true}"
       color="primary",
       no-caps
       )
       q-icon.mr-2(size="20px" name="add")
       span Добавить запись
+    health-state-create-modal(v-model="isOpenModal")
 </template>
 
 <script>
+import HealthStateCreateModal from "@/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue";
+
 export default {
   name: "HealthStateHeader",
+  components: {
+    HealthStateCreateModal,
+  },
+  data() {
+    return {
+      isOpenModal: false,
+    };
+  },
 };
 </script>
 

src/pages/newMedicalCard/utils/gettersObjects.js

@@ -150,3 +150,26 @@ export function getToothImageConfig(data) {
   });
   return resulConfig;
 }
+export function getReturnedObjectImg(fields, e, file) {
+  let result = {};
+  fields.forEach((field) => {
+    switch (field) {
+      case "file":
+        result.file = file;
+        break;
+      case "photo":
+        result.photo = e.target.result;
+        break;
+      case "id":
+        result.id = Math.random();
+        break;
+      case "name":
+        result.name = file.name;
+        break;
+      case "size":
+        result.size = (file.size / 1024 / 1024).toFixed(1);
+        break;
+    }
+  });
+  return result;
+}

src/store/modules/medicalCard.js

@@ -394,7 +394,7 @@ const getters = {
     return [
       {
         id: 1,
-        year: 2023,
+        date: "2023-02-22",
         pictures: [],
         comments: [
           {
@@ -410,7 +410,7 @@ const getters = {
       },
       {
         id: 2,
-        year: 2022,
+        date: "2022-02-22",
         pictures: [],
         comments: [
           {
@@ -426,7 +426,7 @@ const getters = {
       },
       {
         id: 3,
-        year: 2021,
+        date: "2021-02-22",
         pictures: [],
         comments: [
           {