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

2023-06-30 17:06:44 +03:00
parent fda6e8e10f
commit f5ed22c9f9
6 changed files with 211 additions and 5 deletions
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
+++ b/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>