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

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
-              img.grey-border.rounded.w-8.h-8(:src="picture.photo")
+            .flex.items-center
+              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: {
-        id: 1,
-        date: moment().format("DD.MM.YYYY"),
-        pictures: [],
-        comments: [],
-      },
+      dataEntry: {},
     };
   },
   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