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

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>