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

5
src/assets/icons/download.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
<title>download</title>
<path fill="none" stroke="#4772f2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.5714" d="M28.952 21.905v5.143c0 1.893-1.535 3.429-3.429 3.429h-20.571c-1.894 0-3.429-1.535-3.429-3.429v-5.143M8.381 15.048l6.857 6.857M15.238 21.905l6.857-6.857M15.238 21.905v-20.571"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 474 B

2
src/assets/sass/variables.sass
View File

@@ -11,6 +11,7 @@
--btn-blue-color-2: rgba(65, 105, 225, 0.5)
--btn-blue-color-3: rgba(65, 105, 225, 0.2)
--btn-blue-color-4: rgba(65, 105, 225, 0.8)
--bg-btn-icons-color: rgba(215, 217, 255, 0.6)
--font-grey-color: #9294a7
--border-light-grey-color: #d3d4dc
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
@@ -18,3 +19,4 @@
--default-white: #fff
--btn-red-color: #ff6f6f
--time-indicator-color: #e93131
--font-obligatory-color: #ff0000

14
src/components/base/BaseInput.vue
View File

@@ -1,17 +1,25 @@
<template lang="pug">
.input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5")
.input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
input.input-search.outline-0.text-base.not-italic(placeholder="Искать")
input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
</template>
<script>
export default {
name: "BaseInput",
props: {
type: {
default: "text",
},
value: String,
withIcon: {
default: false,
},
iconPosition: String,
placeholder: {
default: "Поиск",
},
widthInput: Number,
},
computed: {
position() {
@@ -32,6 +40,4 @@ export default {
.input-wrapper
border: 2px solid var(--border-light-grey-color)
border-radius: 4px
.input-search
min-width: 220px
</style>

38
src/components/base/BaseSelect.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
.flex.justify-between.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
.relative.flex.flex-col
.not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
.absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
.not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
.select-form-separator.cursor-pointer
.text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
.not-italic.text-base.select.cursor-pointer.w-full {{optionData}}
.absolute.options(v-show="isSelectOpen" :id="id")
.not-italic.text-base.option(v-for="(responsible, index) in listData" @click="(e) => chooseOption(e)" :key="index" :id="index") {{responsible}}
.select-form-separator.cursor-pointer(v-if="withSeparator" )
.text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
</template>
<script>
@@ -13,12 +13,29 @@ export default {
name: "BaseSelect",
props: {
id: String,
width: String,
styleBorder: {
default: false,
},
widthSelect: Number,
withSeparator: {
default: false,
},
optionData: String,
listData: Array,
chooseOption: Function,
isOpen: Boolean,
selectOpen: Function,
},
data() {
return {
isSelectOpen: false,
};
},
methods: {
openSelect() {
this.isSelectOpen = !this.isSelectOpen;
},
closeSelect() {
this.isSelectOpen = false;
},
},
};
</script>
@@ -28,6 +45,9 @@ export default {
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
&.border
background-color: rgba(255, 255, 255, 0)
border: 2px solid var(--border-light-grey-color)
.select
appearance: none
border: none

2
src/components/base/buttons/BaseCreateButton.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
button.button.flex.gap-x-2.text-base.pt-3.pb-2.px-6
button.button.flex.w-fit.gap-x-2.text-base.pt-3.pb-2.px-6
.flex.text-xs.w-fit.pt-1(v-if="withIcon")
span.icon-plus
span.text-base.font-semibold {{text}}

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,

7
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
.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>