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

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