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

Merge pull request #86 from dderbentsov/UC-36

Browse Source 
WIP настроил создание ДУЛ для нового клиента
This commit is contained in:
Алексей Дёмин
2022-10-31 20:52:19 +03:00
committed by GitHub
parent 7d80861d70 5e7fb5208a
commit 77dab1ef11
7 changed files with 170 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/base/BaseAddingNetwork.vue
View File

@@ -1,7 +1,8 @@
<template lang="pug">
.flex.w-full(class="gap-x-1.5")
.flex(:id="value.id" @click="(e) => saveNetworkId(e)")
base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
base-input.input-info.w-full(v-model:value="value.username" placeholder="Ссылкa")
base-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
</template>
<script>
@@ -11,6 +12,7 @@ export default {
name: "TableAddingNetwork",
components: { BaseInput, BaseSelect },
props: {
saveNetworkId: Function,
selectedOption: String,
value: Object,
listAddingNetworks: Array,
@@ -18,12 +20,3 @@ export default {
},
};
</script>
<style lang="sass" scoped>
.icon
color: var(--font-dark-blue-color)
width: 48px
height: 42px
border: 2px solid var(--border-light-grey-color)
border-radius: 4px
</style>

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

@@ -1,6 +1,6 @@
<template lang="pug">
.input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
input.w-full.outline-0.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
input.input.w-full.outline-0.not-italic(:class="{date:type === 'date'}" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
.slot(v-if="withIcon" :class="iconPosition")
slot.cursor-pointer
</template>
@@ -37,4 +37,9 @@ export default {
border: 2px solid var(--border-light-grey-color)
border-radius: 4px
background-color: var(--default-white)
color: var(--font-dark-blue-color)
.date
background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
&::-webkit-calendar-picker-indicator
opacity: 0
</style>

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

@@ -28,7 +28,7 @@
:id="id")
.flex.option.justify-center.py-1.text-xl(
v-for="responsible in listData"
@click="chooseOption"
@click="(e) => chooseOption(e)"
:key="responsible.network"
:id="responsible.network"
:class="responsible.icon"
@@ -41,6 +41,7 @@
export default {
name: "BaseSelect",
props: {
defaultOption: String,
id: String,
styleBorder: {
default: false,
@@ -59,12 +60,17 @@ export default {
data() {
return {
isSelectOpen: false,
isSelectedOption: false,
};
},
methods: {
openSelect() {
this.isSelectOpen = !this.isSelectOpen;
},
selectOption(e) {
this.chooseOption(e);
this.isSelectedOption = true;
},
},
};
</script>
@@ -82,7 +88,10 @@ export default {
appearance: none
border: none
outline: none
color: var(--font-dark-blue-color)
background-color: var(--font-black-color-0)
&.default
color: var(--font-black-color-1)
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none

93
src/pages/clients/components/ClientsFormCreate.vue
View File

@@ -6,16 +6,26 @@
.flex.gap-x-3.w-full
.export-avatar.cursor-pointer.flex.justify-center.items-center
.icon-download.text-xl
base-input(v-model:value="infoClient.basic.full_name" placeholder="ФИО*" :width-input="326" )
base-select(:list-data="priorityList" :option-data="getPriorityOption" :width-select="176" :for-networks="false" :style-border="true" :choose-option="chooseOptionSelect")
base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
.flex.flex-col.flex-auto.l.gap-y-8
.flex.px-4
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(v-for="(info, index) in listInfoTitle" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="index" :id="info.title") {{info.title}}
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(v-for="info in listInfoTitle" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="info.key" :id="info.key") {{info.title}}
.flex(:style="{display :'block'}" ref="basic")
form-create-basic-info( :basic-info="infoClient.basic" :phone="infoClient.phone" :email="infoClient.email" :add-network="addNewNetwork" :save-client="saveClient" :choose-option="chooseOptionNetworks")
form-create-basic-info(
:basic-info="infoClient.basic"
:phone="infoClient.phone"
:email="infoClient.email"
:save-network-id="saveNetworkId"
:add-network="addNewNetwork"
:save-client="saveClient"
:choose-option="chooseOptionNetworks"
:choose-priority="choosePriority"
:priority-list="priorityList"
:priority-option="getPriorityOption"
)
.flex(:style="{display :'none'}" ref="doc")
form-create-identity-documents(:identity-document="infoClient.pass" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="addresses")
form-create-identity-documents(:identity-document="infoClient.identity_document" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="address")
form-create-addresses(:addresses="infoClient.addresses" :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")
@@ -44,7 +54,9 @@ export default {
},
data() {
return {
networksSettings: column.find((el) => el.name === "networks"),
prioritySettings: column.find((el) => el.name === "priority"),
networkId: "",
infoClient: {
basic: {
full_name: "",
@@ -53,8 +65,9 @@ export default {
contacts: [
{
id: "network",
kind: "",
kind: "TELEGRAM",
username: "",
icon: "icon-tg",
},
],
},
@@ -66,6 +79,7 @@ export default {
kind: "EMAIL",
username: "",
},
identity_document: {
pass: {
kind: "Паспорт",
numba: "",
@@ -73,11 +87,19 @@ export default {
issued_by_date: "",
issued_by_org_code: "",
},
snils: {
kind: "СНИЛС",
numba: "",
},
inn: {
kind: "ИНН",
numba: "",
},
},
addresses: {
actualPlace: "",
registrationPlace: "",
},
doc: {},
additional: [
{
id: "add",
@@ -94,18 +116,13 @@ export default {
active: true,
},
{
title: "Документы",
title: "ДУЛ",
key: "doc",
active: false,
},
{
title: "Адреса",
key: "addresses",
active: false,
},
{
title: "Дополнительное",
key: "additional",
title: "Адрес",
key: "address",
active: false,
},
],
@@ -121,27 +138,56 @@ export default {
},
},
methods: {
createIdentityDocument(id) {
fetch("http://45.84.227.122:8080/general/identity_document/create/", {
method: "POST",
headers: {
Accept: "*/*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
...this.infoClient.identity_document.pass,
person_id: id,
}),
});
},
postNewClient() {
fetch("http://45.84.227.122:8080/general/person/create/", {
method: "POST",
headers: {
Accept: "text/html; q=1.0, */*",
Accept: "*/*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
full_name: this.infoClient.basic.full_name,
birth_date: this.infoClient.basic.birth_date,
priority: this.infoClient.basic.priority,
}),
});
})
.then((res) => res.json())
.then((result) => this.createIdentityDocument(result.id));
},
chooseOptionSelect(e) {
saveNetworkId(e) {
this.networkId = e.currentTarget.id;
},
choosePriority(e) {
this.infoClient.basic.priority = this.prioritySettings.settings.find(
(el) => el.text === e.target.id
).priority;
},
chooseOptionNetworks() {},
chooseOptionNetworks(e) {
let index = this.infoClient.basic.contacts.findIndex(
(el) => el.id === this.networkId
);
let icon = this.networksSettings.settings.find(
(el) => el.network === e.target.id
).icon;
this.infoClient.basic.contacts[index].kind = e.target.id;
this.infoClient.basic.contacts[index].icon = icon;
},
saveClient() {
this.postNewClient();
this.closeForm();
},
saveDocFile(e) {
this.infoClient.doc = e.target.files;
@@ -164,13 +210,14 @@ export default {
id:
this.infoClient.basic.contacts[0].id +
this.infoClient.basic.contacts.length,
kind: "",
kind: "TELEGRAM",
username: "",
icon: "icon-tg",
});
},
selectTab(event) {
this.listInfoTitle.forEach((el) => {
if (el.title === event.target.id) {
if (el.key === event.target.id) {
el.active = true;
this.$refs[el.key].style.display = "block";
} else {
@@ -194,7 +241,7 @@ export default {
.title
color: var(--font-dark-blue-color)
.export-avatar
width: 40px
min-width: 40px
height: 40px
border-radius: 50%
background-color: var(--bg-btn-icons-color)

47
src/pages/clients/components/FormCreateAttachments.vue Normal file
View File

@@ -0,0 +1,47 @@
<template lang="pug">
.wrapper.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.place.flex.flex-col.justify-center.items-center.py-3
.upload.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addAttachment(e)" type="file" id="file-upload")
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
</template>
<script>
export default {
name: "FormCreateAttachments",
props: {
addAttachment: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-attachment
width: 485px
height: fit-content
background-color: var(--default-white)
border-radius: 8px 0 8px 8px
box-shadow: var(--default-shadow)
.corner
width: 8px
height: 8px
border-top-left-radius: 100%
background-color: var(--default-white)
z-index: 2
overflow: hidden
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.upload
width: 240px
.name-doc
border-radius: 4px
background-color: var(--border-light-grey-color-1)
width: fit-content
.label
color: var(--btn-blue-color)
</style>

18
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -1,10 +1,13 @@
<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.px-4
.flex.flex-col(class="gap-y-1.5")
span.text-sm Приоритет
base-select(:list-data="priorityList" :option-data="priorityOption" default-option="Приоритет клиента" :for-networks="false" :style-border="true" :choose-option="choosePriority" :width-select="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата рождения
span.obligatory *
base-input.input-info(v-model:value="basicInfo.birth_date" type="date" :width-input="277")
base-input.input-info(v-model:value="basicInfo.birth_date" type="date" placeholder="00.00.0000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер телефона
span.obligatory *
@@ -16,21 +19,28 @@
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
span.text-sm Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
base-adding-network(:list-adding-networks="networks.settings" selected-option="icon-tg" :value="network" :choose-network="chooseOption")
base-adding-network(:list-adding-networks="networks.settings" :selected-option="network.icon" :value="network" :choose-network="chooseOption" :save-network-id="saveNetworkId")
span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
.px-4
base-create-button(text="Сохранить" @click="saveClient")
base-create-button(text="Создать клиента" @click="saveClient")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BaseSelect from "@/components/base/BaseSelect";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
name: "FormCreateBasicInfo",
components: { BaseInput, BaseCreateButton, BaseAddingNetwork },
components: { BaseInput, BaseCreateButton, BaseAddingNetwork, BaseSelect },
props: {
choosePriority: Function,
priorityList: Array,
priorityOption: {
default: "Приоритет",
},
saveNetworkId: Function,
chooseOption: Function,
phone: Object,
email: Object,

17
src/pages/clients/components/FormCreateIdentityDocuments.vue
View File

@@ -5,16 +5,25 @@
.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="identityDocument.numba" placeholder="0000 000000" :width-input="277")
base-input.input-info(v-model:value="identityDocument.pass.numba" placeholder="0000 000000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Кем и когда выдан
base-input.input-info(v-model:value="identityDocument.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")
base-input.input-info(v-model:value="identityDocument.pass.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Код подразделения
base-input.input-info(v-model:value="identityDocument.issued_by_org_code" placeholder="000–000" :width-input="277")
base-input.input-info(v-model:value="identityDocument.pass.issued_by_org_code" 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="identityDocument.issued_by_date" placeholder="Дата" :width-input="277")
base-input.input-info(type="date" v-model:value="identityDocument.pass.issued_by_date" placeholder="Дата" :width-input="277")
.flex.flex-col.gap-y-6.px-4
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="identityDocument.snils.numba" 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="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
.px-4
base-create-button(text="Создать клиента" @click="saveClient")
</template>