WIP: add basic features
This commit is contained in:
kandrusyak
@@ -1,99 +1,98 @@
|
||||
<template lang="pug">
|
||||
.wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-8.py-7.gap-y-8
|
||||
.icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
|
||||
span.title.text-xl.font-bold Создание клиента
|
||||
.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",
|
||||
base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable )
|
||||
.wrapper-create.gap-y-8.flex.flex-col.pt-8
|
||||
.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-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'}"
|
||||
q-icon(
|
||||
v-if="image === defaultIcon"
|
||||
name="app:icon-download",
|
||||
)
|
||||
.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"
|
||||
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"
|
||||
)
|
||||
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
|
||||
.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",
|
||||
:save-network-id="saveNetworkId",
|
||||
:add-network="addNewNetwork",
|
||||
:choose-option="chooseOptionNetworks",
|
||||
:choose-priority="choosePriority",
|
||||
:priority-list="priorityList",
|
||||
:identity-document="infoClient.identity_document",
|
||||
:addresses="infoClient.addresses",
|
||||
:save-file="saveDocFile",
|
||||
)
|
||||
q-btn(
|
||||
label="Создать клиента",
|
||||
color="primary",
|
||||
style="height: 40px; width: 180px",
|
||||
no-caps,
|
||||
padding="8px 24px",
|
||||
@click="saveClient",
|
||||
)
|
||||
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)
|
||||
.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",
|
||||
:save-network-id="saveNetworkId",
|
||||
:add-network="addNewNetwork",
|
||||
:choose-option="chooseOptionNetworks",
|
||||
:choose-priority="choosePriority",
|
||||
:priority-list="priorityList",
|
||||
:identity-document="infoClient.identity_document",
|
||||
:addresses="infoClient.addresses",
|
||||
:save-file="saveDocFile",
|
||||
)
|
||||
q-btn(
|
||||
label="Создать клиента",
|
||||
color="primary",
|
||||
style="height: 40px; width: 180px",
|
||||
no-caps,
|
||||
padding="8px 24px",
|
||||
@click="saveClient",
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -109,6 +108,7 @@ import addImageIcon from "@/assets/icons/photo.svg";
|
||||
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
|
||||
import { addNotification } from "@/components/Notifications/notificationContext";
|
||||
import * as moment from "moment";
|
||||
import { v_model } from "@/shared/mixins/v-model";
|
||||
|
||||
export default {
|
||||
name: "BaseClientFormClient",
|
||||
@@ -122,12 +122,11 @@ export default {
|
||||
addImageIcon,
|
||||
TheNotificationProvider,
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
props: {
|
||||
setUpdatedClients: Function,
|
||||
writeCreatedClientId: Function,
|
||||
modelValue: Boolean,
|
||||
},
|
||||
mixins: [v_model],
|
||||
data() {
|
||||
return {
|
||||
networksSettings: column.find((el) => el.name === "networks"),
|
||||
@@ -243,9 +242,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeForm() {
|
||||
this.$emit("update:model-value", false);
|
||||
},
|
||||
previewImage(event) {
|
||||
let picture = event.target.files;
|
||||
let reader = new FileReader();
|
||||
@@ -480,12 +476,7 @@ export default {
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.wrapper-create
|
||||
z-index: 5
|
||||
background-color: var(--default-white)
|
||||
border-radius: 4px
|
||||
width: 634px
|
||||
min-height: 585px
|
||||
box-shadow: var(--default-shadow)
|
||||
width: 570px
|
||||
|
||||
.title
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
Reference in New Issue
Block a user