[WIP] Добавил на форму создания записи: ФИО, Основную информацию, ДУЛ, Адрес, изображение
This commit is contained in:
megavrilinvv
95
src/components/base/BaseInputFullName.vue
Normal file
95
src/components/base/BaseInputFullName.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template lang="pug">
|
||||
.flex.gap-x-4.h-fit
|
||||
.flex.gap-x-3.w-full
|
||||
q-btn(
|
||||
color="secondary",
|
||||
text-color="primary",
|
||||
style="width: 40px; height: 40px",
|
||||
rounded
|
||||
no-caps
|
||||
padding="0 16px"
|
||||
)
|
||||
q-icon(v-if="image === defaultIcon", name="app:icon-download")
|
||||
q-avatar(v-else, size="40px", round)
|
||||
img(:src="image")
|
||||
q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
|
||||
.flex.flex-col.p-4.gap-y-3
|
||||
.flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
|
||||
q-icon(name="app:computer", size="18px", color="primary")
|
||||
span.text-smm.title Загрузить с компьютера
|
||||
.flex.items-center.gap-x-2.cursor-pointer
|
||||
q-icon(name="app:camera", size="18px", color="primary")
|
||||
span.text-smm.title Сделать фото
|
||||
base-modal(v-model="showModal", title="Загрузить изображение")
|
||||
.flex.flex-col.items-center.justify-center(
|
||||
:style="{padding: '153px 370px'}"
|
||||
)
|
||||
.avatar-wrapper.flex.relative
|
||||
base-input(
|
||||
circle,
|
||||
type="file",
|
||||
id="image-upload",
|
||||
accept="image/*",
|
||||
@change="(e) => previewImage(e)"
|
||||
)
|
||||
.avatar.flex.absolute.items-center.gap-x-6
|
||||
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
|
||||
q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
|
||||
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from "./BaseModal.vue";
|
||||
import BaseInput from "./BaseInput.vue";
|
||||
import addImageIcon from "@/assets/icons/photo.svg";
|
||||
|
||||
export default {
|
||||
name: "BaseInputFullName",
|
||||
components: { BaseModal, BaseInput },
|
||||
props: { infoClient: Object },
|
||||
data() {
|
||||
return {
|
||||
defaultIcon: addImageIcon,
|
||||
showModal: false,
|
||||
showPopup: false,
|
||||
image: addImageIcon,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeAddImage() {
|
||||
this.showModal = false;
|
||||
this.showPopup = false;
|
||||
},
|
||||
changeOpenModal() {
|
||||
this.showModal = true;
|
||||
this.showPopup = false;
|
||||
},
|
||||
previewImage(event) {
|
||||
let picture = event.target.files;
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.image = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(picture[0]);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showModal: function () {
|
||||
if (this.showModal === false) {
|
||||
this.closeAddImage();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.avatar-wrapper
|
||||
width: 400px
|
||||
height: 400px
|
||||
border-radius: 50%
|
||||
|
||||
.avatar
|
||||
height: 100%
|
||||
border-radius: 50%
|
||||
</style>
|
||||
@@ -3,7 +3,8 @@
|
||||
calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
|
||||
calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
|
||||
calendar-wrapper.ml-2(:open-sidebar="isOpen")
|
||||
record-creation-form(:is-show-form="isShowForm")
|
||||
base-modal(v-model="isShowForm", title="Создание записи")
|
||||
record-creation-form(v-model="isShowForm")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -12,6 +13,7 @@ import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSide
|
||||
import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
|
||||
import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
|
||||
import * as moment from "moment/moment";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
|
||||
export default {
|
||||
name: "TheCalendar",
|
||||
@@ -20,6 +22,7 @@ export default {
|
||||
CalendarOpenSidebar,
|
||||
CalendarWrapper,
|
||||
RecordCreationForm,
|
||||
BaseModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,66 +1,185 @@
|
||||
<template lang="pug">
|
||||
base-modal(v-model="isShowForm", title="Создание записи")
|
||||
.flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
|
||||
.flex.gap-x-10
|
||||
.flex.flex-col.gap-y-4.text-smm
|
||||
.flex.gap-x-3.items-center
|
||||
.text.font-semibold Статус
|
||||
.flex.gap-x-1
|
||||
.input.flex.items-center.pl-4
|
||||
.text-input.font-medium Не принят
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="folder")
|
||||
.flex.gap-x-3.items-center
|
||||
.text.font-semibold Дата:
|
||||
.flex.gap-x-1
|
||||
.input.flex.items-center.pl-4
|
||||
.text-input.font-medium 24 мая 2020
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="calendar")
|
||||
.flex.gap-x-3.items-center
|
||||
.text.font-semibold Время:
|
||||
.flex.gap-x-1
|
||||
.input.flex.items-center.pl-4
|
||||
.text-input.font-medium 13:00 - 14:00
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="time")
|
||||
.flex.h-14.gap-x-3.items-center.text-smm
|
||||
.text.font-semibold Медкарта:
|
||||
.flex.gap-x-1
|
||||
.name.flex.items-center.px-4.pt-2.pb-1.gap-x-2
|
||||
.photo.flex.h-10.w-10.items-center.justify-center
|
||||
img(:src="noname")
|
||||
.flex.flex-col.font-medium
|
||||
.text-input Имя Фамилия
|
||||
.name-date.text-xsx Дата
|
||||
.change.flex.items-center
|
||||
q-btn(dense, padding="24px 8px")
|
||||
q-icon(name="app:icon-plus", size="12px")
|
||||
.flex.items-center.gap-x-3
|
||||
.text.font-semibold.text-smm Услуги
|
||||
.flex.gap-x-1
|
||||
.services.flex
|
||||
.change.flex.w-7.h-7
|
||||
.flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
|
||||
.flex.gap-x-10
|
||||
.flex.flex-col.gap-y-4.text-smm
|
||||
.flex.gap-x-3.items-center
|
||||
.text.font-semibold Статус
|
||||
.flex.gap-x-1
|
||||
.input.flex.items-center.pl-4
|
||||
.text-input.font-medium Не принят
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="folder")
|
||||
.flex.gap-x-3.items-center
|
||||
.text.font-semibold Дата:
|
||||
.flex.gap-x-1
|
||||
.input.flex.items-center.pl-4
|
||||
.text-input.font-medium 24 мая 2020
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="calendar")
|
||||
.flex.gap-x-3.items-center
|
||||
.text.font-semibold Время:
|
||||
.flex.gap-x-1
|
||||
.input.flex.items-center.pl-4
|
||||
.text-input.font-medium 13:00 - 14:00
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="time")
|
||||
.flex.h-14.gap-x-3.items-center.text-smm
|
||||
.text.font-semibold Медкарта:
|
||||
.flex.gap-x-1
|
||||
.name.flex.items-center.px-4.pt-2.pb-1.gap-x-2
|
||||
.photo.flex.h-10.w-10.items-center.justify-center
|
||||
img(:src="noname")
|
||||
.flex.flex-col.font-medium
|
||||
.text-input Имя Фамилия
|
||||
.name-date.text-xsx Дата
|
||||
.change.flex.items-center
|
||||
q-btn(dense, padding="24px 8px")
|
||||
q-icon(name="app:icon-plus", size="12px")
|
||||
.flex.items-center.gap-x-3.text-smm
|
||||
.text.font-semibold Услуги:
|
||||
.flex.gap-x-1
|
||||
.services.flex.items-center.px-4.font-medium.text
|
||||
span Выберите услуги
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
img(:src="folder")
|
||||
base-input-full-name(:info-client="infoClient")
|
||||
.flex.flex-col.flex-auto.l.gap-y-8
|
||||
.flex
|
||||
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
|
||||
v-for="form in forms",
|
||||
@click="selectForm(form.component)",
|
||||
:class="{active: form.component === currentForm}",
|
||||
:key="form.id",
|
||||
:id="form.id"
|
||||
) {{form.title}}
|
||||
component(
|
||||
v-bind:is="currentForm",
|
||||
:basic-info="infoClient.basic",
|
||||
:phone="infoClient.phone",
|
||||
:email="infoClient.email",
|
||||
:add-network="addNewNetwork",
|
||||
:priority-list="priorityList",
|
||||
:identity-document="infoClient.identity_document",
|
||||
:addresses="infoClient.addresses",
|
||||
:save-file="saveDocFile",
|
||||
:networks-list="getNetworksList",
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { column } from "@/pages/clients/utils/tableConfig";
|
||||
import { v_model } from "@/shared/mixins/v-model";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
import noname from "@/assets/icons/noname.svg";
|
||||
import folder from "@/assets/icons/folder.svg";
|
||||
import time from "@/assets/icons/time.svg";
|
||||
import calendar from "@/assets/icons/calendar-grey.svg";
|
||||
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
|
||||
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
|
||||
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
|
||||
|
||||
export default {
|
||||
name: "RecordCreationForm",
|
||||
components: { BaseModal },
|
||||
components: {
|
||||
BaseModal,
|
||||
FormCreateBasicInfo,
|
||||
FormCreateIdentityDocuments,
|
||||
FormCreateAddresses,
|
||||
BaseInput,
|
||||
BaseInputFullName,
|
||||
},
|
||||
props: { isShowForm: Boolean },
|
||||
mixins: [v_model],
|
||||
data() {
|
||||
return { noname, folder, time, calendar, isPhoto: false };
|
||||
return {
|
||||
noname,
|
||||
folder,
|
||||
time,
|
||||
calendar,
|
||||
isPhoto: false,
|
||||
infoClient: {
|
||||
basic: { contacts: [] },
|
||||
phone: { username: "" },
|
||||
email: { username: "" },
|
||||
identity_document: {},
|
||||
addresses: {},
|
||||
},
|
||||
forms: [
|
||||
{
|
||||
title: "Основное",
|
||||
id: "basic",
|
||||
component: "form-create-basic-info",
|
||||
},
|
||||
{
|
||||
title: "ДУЛ",
|
||||
id: "doc",
|
||||
component: "form-create-identity-documents",
|
||||
},
|
||||
{
|
||||
title: "Адрес",
|
||||
id: "address",
|
||||
component: "form-create-addresses",
|
||||
},
|
||||
],
|
||||
currentForm: "form-create-basic-info",
|
||||
priorityList: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Высокий",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Средний",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "Низкий",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "-",
|
||||
},
|
||||
],
|
||||
networksSettings: column.find((el) => el.name === "networks")?.settings,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getNetworksList() {
|
||||
let contacts = [];
|
||||
this.infoClient.basic.contacts.forEach((elem) =>
|
||||
contacts.push(elem.kind.id)
|
||||
);
|
||||
let filteredNetworks = this.networksSettings.filter(
|
||||
({ id }) => !contacts.includes(id)
|
||||
);
|
||||
return filteredNetworks;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changePhoto() {
|
||||
this.isPhoto = true;
|
||||
},
|
||||
selectForm(componentName) {
|
||||
this.currentForm = this.forms.find(
|
||||
(elem) => elem.component === componentName
|
||||
)?.component;
|
||||
},
|
||||
saveDocFile(e) {
|
||||
this.infoClient.doc = e.target.files;
|
||||
},
|
||||
addNewNetwork() {
|
||||
const newNetwork = this.getNetworksList;
|
||||
if (newNetwork[0])
|
||||
this.infoClient.basic.contacts.push({
|
||||
kind: {
|
||||
id: newNetwork[0].id,
|
||||
icon: newNetwork[0].icon,
|
||||
},
|
||||
username: "",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -102,4 +221,14 @@ export default {
|
||||
border-radius: 6px
|
||||
height: 28px
|
||||
width: 560px
|
||||
|
||||
.title-info
|
||||
color: var(--font-grey-color)
|
||||
border-bottom: 1.5px solid var(--font-grey-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
border-bottom: 1.5px solid var(--btn-blue-color)
|
||||
&.active
|
||||
color: var(--btn-blue-color)
|
||||
border-bottom: 1.5px solid var(--btn-blue-color)
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user