From d838a3187e78ed7469c3e4679268960d0a5a212c Mon Sep 17 00:00:00 2001 From: DwCay Date: Mon, 31 Oct 2022 20:29:56 +0300 Subject: [PATCH] =?UTF-8?q?WIP=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=94=D0=A3=D0=9B=20=D0=B4=D0=BB=D1=8F=20=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?= =?UTF-8?q?,=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20"=D0=9E?= =?UTF-8?q?=D1=81=D0=BD=D0=BE=D0=B2=D0=BD=D0=BE=D0=B5"=20=D0=B8=20"=D0=94?= =?UTF-8?q?=D0=A3=D0=9B"=20=D0=BF=D0=BE=20=D0=BC=D0=B0=D0=BA=D0=B5=D1=82?= =?UTF-8?q?=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseAddingNetwork.vue | 15 +-- src/components/base/BaseInput.vue | 7 +- src/components/base/BaseSelect.vue | 16 ++- .../clients/components/ClientsFormCreate.vue | 105 +++++++++++++----- .../components/FormCreateAttachments.vue | 47 ++++++++ .../components/FormCreateBasicInfo.vue | 18 ++- .../FormCreateIdentityDocuments.vue | 17 ++- 7 files changed, 172 insertions(+), 53 deletions(-) create mode 100644 src/pages/clients/components/FormCreateAttachments.vue diff --git a/src/components/base/BaseAddingNetwork.vue b/src/components/base/BaseAddingNetwork.vue index 09a65fe..3e854bc 100644 --- a/src/components/base/BaseAddingNetwork.vue +++ b/src/components/base/BaseAddingNetwork.vue @@ -1,7 +1,8 @@ - - diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue index 2628665..0ea01f5 100644 --- a/src/components/base/BaseInput.vue +++ b/src/components/base/BaseInput.vue @@ -1,6 +1,6 @@ @@ -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 diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue index 2cf1768..1454045 100644 --- a/src/components/base/BaseSelect.vue +++ b/src/components/base/BaseSelect.vue @@ -5,7 +5,7 @@ :style="{ minWidth : widthSelect + 'px'}" ) .relative.flex.flex-col - .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}} + .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks" :class="{default:!isSelectedOption}") {{isSelectedOption || !defaultOption ? optionData : defaultOption}} .absolute.options( v-show="isSelectOpen" :id="id" @@ -14,7 +14,7 @@ ) .not-italic.option.pl-4.py-1( v-for="responsible in listData" - @click="(e) => chooseOption(e)" + @click="(e) => selectOption(e)" :key="responsible" :id="responsible" ) {{responsible}} @@ -26,7 +26,7 @@ :style="{ minWidth : widthSelect + 'px'}") .flex.not-italic.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" @@ -39,6 +39,7 @@ export default { name: "BaseSelect", props: { + defaultOption: String, id: String, styleBorder: { default: false, @@ -55,12 +56,17 @@ export default { data() { return { isSelectOpen: false, + isSelectedOption: false, }; }, methods: { openSelect() { this.isSelectOpen = !this.isSelectOpen; }, + selectOption(e) { + this.chooseOption(e); + this.isSelectedOption = true; + }, }, }; @@ -77,8 +83,10 @@ export default { appearance: none border: none outline: none - color: var(--font-black-color-1) + 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 diff --git a/src/pages/clients/components/ClientsFormCreate.vue b/src/pages/clients/components/ClientsFormCreate.vue index b4b4a75..7254b0a 100644 --- a/src/pages/clients/components/ClientsFormCreate.vue +++ b/src/pages/clients/components/ClientsFormCreate.vue @@ -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,18 +79,27 @@ export default { kind: "EMAIL", username: "", }, - pass: { - kind: "Паспорт", - numba: "", - issued_by_org: "", - issued_by_date: "", - issued_by_org_code: "", + identity_document: { + pass: { + kind: "Паспорт", + numba: "", + issued_by_org: "", + 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) diff --git a/src/pages/clients/components/FormCreateAttachments.vue b/src/pages/clients/components/FormCreateAttachments.vue new file mode 100644 index 0000000..33a473b --- /dev/null +++ b/src/pages/clients/components/FormCreateAttachments.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue index 85cae49..d26c207 100644 --- a/src/pages/clients/components/FormCreateBasicInfo.vue +++ b/src/pages/clients/components/FormCreateBasicInfo.vue @@ -1,10 +1,13 @@