admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлена форма создания клиента

Browse Source
This commit is contained in:
DwCay
2022-10-18 19:54:27 +03:00
parent e0722461d1
commit 4904fe4547
13 changed files with 526 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/pages/clients/components/ClientsFormCreate.vue Normal file
View File

@@ -0,0 +1,198 @@
<template lang="pug">
.wrapper.flex.flex-col.absolute.top-28.right-0.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
.export-avatar.cursor-pointer.flex.justify-center.items-center
img.icon-download(src="@/assets/icons/download.svg" alt="Download")
base-input(v-model:value="infoClient.fullName" placeholder="ФИО*" :width-input="326" )
base-select(:list-data="priorityList" :option-data="priorityOption" :width-select="176" :style-border="true" :choose-option="chooseOptionSelect")
.flex.flex-col.flex-auto.l.gap-y-8
.flex
button.title-info.px-6.py-2.cursor-pointer(v-for="(info, index) in infoTitleArray" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="index" :id="info.title") {{info.title}}
.flex(:style="{display :'block'}" ref="basic")
form-create-basic-info( :basic-info="infoClient.basicInfo" :add-network="addNewNetwork" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="secondary")
form-create-secondary-info(:secondary-info="infoClient.secondaryInfo" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="doc")
form-create-doc(:doc="infoClient.doc" :save-file="saveDocFile" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="additional")
form-create-additional(:additional-info="infoClient.additional" :add-new-additional="addNewAdditionalInfo" :save-file="saveAdditionalFiles" :save-client="saveClient")
</template>
<script>
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
import FormCreateSecondaryInfo from "@/pages/clients/components/FormCreateSecondaryInfo";
import FormCreateDoc from "@/pages/clients/components/FormCreateDoc";
import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
export default {
name: "ClientsFormCreate",
components: {
BaseInput,
BaseSelect,
FormCreateBasicInfo,
FormCreateSecondaryInfo,
FormCreateDoc,
FormCreateAdditional,
},
props: {
closeForm: Function,
},
data() {
return {
name: "sdasdasd",
infoClient: {
fullName: "",
priority: "",
basicInfo: {
age: "",
jobTitle: "",
number: "",
email: "",
networks: [
{
id: "network",
network: "",
},
],
},
secondaryInfo: {
pass: {
number: "",
issuedBy: "",
divisionCode: "",
dateIssue: "",
},
snilsInn: {
inn: "",
snils: "",
},
dates: {
birthday: "",
},
addresses: {
actualPlace: "",
registrationPlace: "",
},
},
doc: {},
additional: [
{
id: "add",
header: "",
description: "",
file: {},
},
],
},
infoTitleArray: [
{
title: "Основное",
key: "basic",
active: true,
},
{
title: "Вторичное",
key: "secondary",
active: false,
},
{
title: "Документы",
key: "doc",
active: false,
},
{
title: "Дополнительное",
key: "additional",
active: false,
},
],
priorityOption: "Приоритет",
priorityList: ["Высокий", "Средний", "Низкий", "-"],
};
},
methods: {
chooseOptionSelect(e) {
this.priorityOption = this.priorityList[e.target.id];
this.infoClient.priority = this.priorityList[e.target.id];
},
saveClient() {
console.log(this.infoClient);
},
saveDocFile(e) {
this.infoClient.doc = e.target.files;
},
saveAdditionalFiles(e) {
console.log(e.target.id, e.target.files[0]);
this.infoClient.additional.find((el) => el.id === e.target.id).file =
e.target.file;
},
addNewAdditionalInfo() {
this.infoClient.additional.push({
id:
this.infoClient.additional[0].id + this.infoClient.additional.length,
header: "",
description: "",
file: {},
});
},
addNewNetwork() {
this.infoClient.basicInfo.networks.push({
id:
this.infoClient.basicInfo.networks[0].id +
this.infoClient.basicInfo.networks.length,
network: "",
});
},
selectTab(event) {
this.infoTitleArray.forEach((el) => {
if (el.title === event.target.id) {
el.active = true;
this.$refs[el.key].style.display = "block";
} else {
el.active = false;
this.$refs[el.key].style.display = "none";
}
});
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
z-index: 1
background-color: var(--default-white)
width: fit-content
border-radius: 4px
min-width: 634px
max-height: 700px
min-height: 700px
box-shadow: var(--default-shadow)
.title
color: var(--font-dark-blue-color)
.icon-download
width: 18px
height: 18px
.export-avatar
width: 40px
height: 40px
border-radius: 50%
background-color: var(--bg-btn-icons-color)
color: var(--btn-blue-color)
&:hover
color: var(--default-white)
background-color: var(--btn-blue-color)
.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>

5
src/pages/clients/components/ClientsTable.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.wrapper.flex.flex-col.gap-y-8.px-6.pt-6.h-full.w-full.min-w-fit
clients-table-header(:is-open-actions="marked.length")
clients-table-header(:is-open-actions="marked.length" :open-form-create="openFormCreate" )
table.w-full
thead.head-table
tr.head-row
@@ -62,6 +62,9 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
export default {
name: "ClientsTable",
components: { ClientsTableCheckbox, ClientsTableRow, ClientsTableHeader },
props: {
openFormCreate: Function,
},
data() {
return {
selectAll: false,

9
src/pages/clients/components/ClientsTableHeader.vue
View File

@@ -1,13 +1,14 @@
<template lang="pug">
.flex.justify-between.w-full.h-fit
.flex.gap-2.w-fit.h-fit
base-input(:with-icon="true")
.input
base-input(:with-icon="true")
button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
.icon-filter.text-xl.leading-4
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
.flex.w-fit.h-fit.gap-x-2
bass-export-button(:only-icon="true")
base-create-button(:with-icon="true")
base-create-button(@click="openFormCreate" :with-icon="true")
</template>
@@ -25,12 +26,16 @@ export default {
ClientsTableHeaderActions,
},
props: {
openFormCreate: Function,
isOpenActions: Number,
},
};
</script>
<style lang="sass" scoped>
.input
width: 280px
height: fit-content
.filter-button
border-radius: 4px
border: 2px solid var(--border-light-grey-color)

21
src/pages/clients/components/ClientsWrapper.vue
View File

@@ -1,12 +1,27 @@
<template lang="pug">
.flex.w-full.mx-6
clients-table
.flex.w-full.relative.mx-6
clients-table(:open-form-create="openFormCreateClient")
clients-form-create(v-if="isOpenForm" :close-form="closeFormCreateClient")
</template>
<script>
import ClientsFormCreate from "@/pages/clients/components/ClientsFormCreate";
import ClientsTable from "@/pages/clients/components/ClientsTable";
export default {
name: "ClientsWrapper",
components: { ClientsTable },
components: { ClientsTable, ClientsFormCreate },
data() {
return {
isOpenForm: false,
};
},
methods: {
openFormCreateClient() {
this.isOpenForm = true;
},
closeFormCreateClient() {
this.isOpenForm = false;
},
},
};
</script>

67
src/pages/clients/components/FormCreateAdditional.vue Normal file
View File

@@ -0,0 +1,67 @@
<template lang="pug">
.wrapper-additional.flex.flex-col.gap-y-8.justify-between.text-base
.flex.flex-col.gap-y-6.w-full
.flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id")
.flex.flex-col.gap-y-1
base-input(v-model:value="info.header" placeholder="Заголовок")
.flex.px-4.py-3.description
textarea.w-full.h-full.outline-0.resize-none(:value="info.description" @input="$emit('update:info.description', $event.target.value)" placeholder="Описание" style="py-10")
.upload-wrapper.flex.flex-col.justify-center.items-center
.upload-text.text-center.flex.w-fit
input.hidden(@change="(e) => saveFile(e)" type="file" :id="info.id")
span Загрузите элемент
label.label.cursor-pointer(:for="info.id") с комьютера
span или перетащите их сюда
.add-additional.flex.gap-x-3.cursor-pointer(@click="addNewAdditional")
.icon-plus
span Добавить еще пункт
base-create-button(@click="saveClient" text="Создать клиента")
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "FormCreateAdditional",
components: { BaseCreateButton, BaseInput },
props: {
additionalInfo: Object,
saveClient: Function,
addNewAdditional: Function,
saveFile: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-additional
min-height: 443px
max-height: 443px
overflow-y: auto
color: var(--font-dark-blue-color)
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.upload-wrapper
min-height: 92px
max-height: 92px
width: 100%
color: var(--font-grey-color)
border: 2px dashed var(--font-grey-color)
border-radius: 4px
.upload-text
max-width: 278px
.label
color: var(--btn-blue-color)
.description
min-height: 77px
border-radius: 4px
border: 2px solid var(--border-light-grey-color)
.add-additional
color: var(--btn-blue-color)
</style>

69
src/pages/clients/components/FormCreateBasicInfo.vue Normal file
View File

@@ -0,0 +1,69 @@
<template lang="pug">
.wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Возраст
span.obligatory *
base-input.input-info(v-model:value="basicInfo.age" placeholder="Колличество полных лет" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Должность
base-input.input-info(v-model:value="basicInfo.jobTitle" placeholder="Должность клиента" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер телефона
span.obligatory *
base-input.input-info(v-model:value="basicInfo.number" placeholder="+7 (915) 644–92–23" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Email
span.obligatory *
base-input.input-info(v-model:value="basicInfo.email" placeholder="user@yandex.ru" :width-input="277")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.networks" :key="network.id")
.icon.flex.justify-center.items-center
span.icon-telegram.leading-2.text-lg
base-input.input-info.w-full(v-model:value="network.network" :id="network.id" placeholder="Ссылкa")
span.add-network.cursor-pointer(@click="addNetwork") Добавить соцсеть
base-create-button(text="Создать клиента" @click="saveClient")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "FormCreateBasicInfo",
components: { BaseInput, BaseCreateButton },
props: {
basicInfo: Object,
saveClient: Function,
addNetwork: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-info
min-height: 443px
max-height: 443px
overflow-y: auto
color: var(--font-grey-color)
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.input-info
color: var(--font-dark-blue-color)
.obligatory
color: var(--font-obligatory-color)
.add-network
color: var(--btn-blue-color)
.icon
color: var(--border-light-grey-color)
width: 48px
height: 100%
border: 2px solid var(--border-light-grey-color)
border-radius: 4px
</style>

40
src/pages/clients/components/FormCreateDoc.vue Normal file
View File

@@ -0,0 +1,40 @@
<template lang="pug">
.wrapper-doc.flex.flex-col.justify-between
.upload-wrapper.flex.flex-col.justify-center.items-center
.upload-text.text-center.flex.w-fit
input.hidden(@change="(e) => saveFile(e)" type="file" id="file-upload")
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с комьютера
span или перетащите их сюда
base-create-button(@click="saveClient" text="Создать клиента")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "FormCreateDoc",
components: { BaseCreateButton },
props: {
saveClient: Function,
saveFile: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-doc
min-height: 443px
max-height: 443px
overflow-y: auto
color: var(--font-grey-color)
.upload-wrapper
min-height: 92px
max-height: 92px
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
.upload-text
max-width: 278px
.label
color: var(--btn-blue-color)
</style>

76
src/pages/clients/components/FormCreateSecondaryInfo.vue Normal file
View File

@@ -0,0 +1,76 @@
<template lang="pug">
.wrapper-secondary.flex.flex-col.gap-y-8
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Серия и номер
base-input.input-info(v-model:value="secondaryInfo.pass.number" placeholder="0000 000000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Кем и когда выдан
base-input.input-info(v-model:value="secondaryInfo.pass.issuedBy" placeholder="Точно как в паспорте" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Код подразделения
base-input.input-info(v-model:value="secondaryInfo.pass.divisionCode" placeholder="000–000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата выдачи
base-input.input-info(type="date" v-model:value="secondaryInfo.pass.dateIssue" placeholder="Дата" :width-input="277")
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold СНИЛС и ИНН
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер СНИЛС
base-input.input-info(v-model:value="secondaryInfo.snilsInn.snils" placeholder="000–000–000 00" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер ИНН
base-input.input-info(v-model:value="secondaryInfo.snilsInn.inn" placeholder="000000000000" :width-input="277")
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold Даты
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата рождения
base-input.input-info(type="date" v-model:value="secondaryInfo.dates.birthday" placeholder="00,00,0000" :width-input="277")
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold Адреса
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес постоянной регистрации
base-input.input-info(v-model:value="secondaryInfo.addresses.actualPlace" placeholder="Место регистрации (в паспорте)")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес фактического проживания
base-input.input-info(v-model:value="secondaryInfo.addresses.registrationPlace" placeholder="Место проживания на данный момент")
base-create-button(text="Создать клиента" @click="saveClient")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "FormCreateSecondaryInfo",
components: { BaseCreateButton, BaseInput },
props: {
secondaryInfo: Object,
saveClient: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-secondary
max-height: 443px
overflow-y: auto
flex: auto
color: var(--font-grey-color)
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.input-info
color: var(--font-dark-blue-color)
.title-info
color: var(--font-dark-blue-color)
</style>