135 lines
3.9 KiB
Vue
135 lines
3.9 KiB
Vue
<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,
|
|
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.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",
|
|
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",
|
|
@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, BaseInput },
|
|
mixins: [v_model],
|
|
data() {
|
|
return {
|
|
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
|
|
width: 422px
|
|
.grey-border
|
|
border: 1px solid var(--border-light-grey-color)
|
|
</style>
|