From fb36d5f284e8b02c692d7da007e3646164c3b879 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Tue, 29 Nov 2022 19:04:32 +0300 Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81?= =?UTF-8?q?=D1=82=D1=8C=20=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D0=B0=D0=B2=D0=B0=D1=82=D0=B0=D1=80=D0=B0=20?= =?UTF-8?q?=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseClientFormCreate.vue | 85 ++++++++++++------- .../components/ClientDetailInfoSection.vue | 16 +--- .../clients/components/ClientsTableRow.vue | 2 + .../components/cells/TableCellBodyName.vue | 10 ++- 4 files changed, 67 insertions(+), 46 deletions(-) diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue index 9a30140..41e5176 100644 --- a/src/components/base/BaseClientFormCreate.vue +++ b/src/components/base/BaseClientFormCreate.vue @@ -4,8 +4,16 @@ span.title.text-xl.font-bold.px-4 Создание клиента .flex.gap-x-4.h-fit.px-4 .flex.gap-x-3.w-full - base-button.relative(:rounded="true", :secondary="true", :size="40", @click="changeOpenPopup") - .icon-download.text-xl + base-button.relative( + :rounded="true", + :secondary="true", + :size="40", + @click="changeOpenPopup", + v-for="img in image" + ) + .icon-download.text-xl(v-if="img === defaultIcon") + .flex.w-10.h-10(v-else) + img.current-avatar(:src="img") base-popup.right-5.top-7(v-if="showPopup", :width="230") .flex.items-center.gap-x-2 img(src="@/assets/icons/computer.svg") @@ -13,18 +21,20 @@ .flex.items-center.gap-x-2 img(src="@/assets/icons/camera.svg") span.text-smm Сделать фото - base-modal(v-model="showModal", title="Загрузить изображение мидла") - .form-avatar.flex.flex-col.items-center.justify-center - .avatar-block.flex.relative.flex-row + base-modal(v-model="showModal", title="Загрузить изображение") + .flex.flex-col.items-center.justify-center( + :style="{padding: '153px 370px'}" + ) + .avatar-wrapper.flex.relative input.input( type="file", id="image-upload", accept="image/*", @change="(e) => previewImages(e)" ) - .avatar.absolute(v-for="img in image") + .avatar.flex.absolute.items-center.gap-x-6(v-for="img in image") img.avatar(for="image-upload", :src="img", v-if="img") - base-button(:rounded="true", :secondary="true", :size="48", @click="closeModal") + base-button(:rounded="true", :size="48", @click="closeModal") .icon-ok base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*") .flex.flex-col.flex-auto.l.gap-y-8 @@ -197,9 +207,11 @@ export default { label: "-", }, ], + defaultIcon: addImageIcon, showModal: false, showPopup: false, image: [addImageIcon], + imageData: [], }; }, computed: { @@ -213,7 +225,6 @@ export default { closeModal() { this.showModal = false; this.showPopup = false; - this.image = [addImageIcon]; }, previewImages(event) { this.image = []; @@ -225,6 +236,7 @@ export default { }; reader.readAsDataURL(pictures[i]); } + this.imageData = [...this.imageData, ...event.target.files]; }, createIdentityDocument(id) { Object.keys( @@ -247,19 +259,24 @@ export default { }); }, postNewClient() { - let sentData = { - full_name: this.infoClient.basic.full_name, - }; + const formData = new FormData(); + this.imageData.forEach((e) => { + formData.append("photo", e); + formData.append("full_name", this.infoClient.basic.full_name); + }); if (this.infoClient.basic.birth_date) - sentData.birth_date = this.infoClient.basic.birth_date; + formData.append("birth_date", this.infoClient.basic.birth_date); + let foundElement = this.prioritySettings.settings.find( (el) => el.text === this.infoClient.basic.priority ); - if (foundElement) sentData.priority = foundElement.priority; - fetchWrapper.post("general/person/create/", sentData).then((result) => { - this.createIdentityDocument(result.id); - this.createAddress(result.id); - }); + if (foundElement) formData.append("priority", foundElement.priority); + fetchWrapper + .post("general/person/create/", formData, "formData") + .then((result) => { + this.createIdentityDocument(result.id); + this.createAddress(result.id); + }); this.$emit("update-client"); }, filterDataEmptyProperty(data) { @@ -297,6 +314,7 @@ export default { changeOpenModal() { this.showModal = true; this.showPopup = false; + this.image = [addImageIcon]; }, changeOpenPopup() { this.showPopup = true; @@ -345,14 +363,13 @@ export default { } return true; }, - check() { - this.showPopup = false; - }, }, - showModal: function () { - if (this.showModal === false) { - this.check(); - } + watch: { + showModal: function () { + if (this.showModal === false) { + this.closeModal(); + } + }, }, }; @@ -365,8 +382,10 @@ export default { width: 634px min-height: 700px box-shadow: var(--default-shadow) + .title color: var(--font-dark-blue-color) + .export-avatar min-width: 40px height: 40px @@ -376,6 +395,7 @@ export default { &: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) @@ -385,27 +405,28 @@ export default { &.active color: var(--btn-blue-color) border-bottom: 1.5px solid var(--btn-blue-color) -.form-avatar - width: 1221px - height: 793px -.avatar-block + +.avatar-wrapper width: 400px height: 400px border-radius: 50% + .input width: 100% height: 100% border-radius: 50% - overflow: hidden z-index: 5 opacity: 0 cursor: pointer + .avatar - cursor: pointer - width: 100% height: 100% border-radius: 50% - // background-image: url("../../assets/icons/photo.svg") + +.current-avatar + cursor: pointer + height: 100% + border-radius: 50% background-size: cover background-repeat: no-repeat background-position: center diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue index dad72ae..fe42fff 100644 --- a/src/pages/clients/components/ClientDetailInfoSection.vue +++ b/src/pages/clients/components/ClientDetailInfoSection.vue @@ -1,7 +1,5 @@