diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue index c499114..f5e5836 100644 --- a/src/pages/clients/components/ClientDetailInfoSection.vue +++ b/src/pages/clients/components/ClientDetailInfoSection.vue @@ -4,14 +4,22 @@ ) .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}") span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}} - .flex.items-center.gap-x-8(v-if="lackPass || lackAddress") + .flex.items-center.gap-x-8(v-if="this.isData") base-button( - v-if="isChange", + v-if="isChange && !this.isData", @click="saveChange", confirm, rounded, outlined, :size="20" + ) + base-button( + v-if="isChange && this.isData", + @click="createNewAddress", + confirm, + rounded, + outlined, + :size="20" ) .icon-ok.text-xsm(class="pt-[3px]") .edit.icon-edit.cursor-pointer.text-sm( @@ -40,7 +48,7 @@ :add-new-additional="addDocAdditional", :save-additional="saveDocs" ) - .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(v-if="lackPass || lackAddress") + .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(v-if="this.isData") .flex.flex-col(class="gap-y-1.5") .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5") span.title-section.font-semibold.text-xs( @@ -71,23 +79,27 @@ .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange") .flex.flex-col(class="gap-y-1.5") .text-info.text-xxs.font-semibold Город - base-select(placeholder="Выберите город") + base-select( + placeholder="Выберите город", + :items="cities", + v-model="dopeAddress.city" + ) .flex.flex-col(class="gap-y-1.5") .text-info.text-xxs.font-semibold Область - base-input.input-info(placeholder="Введите область") + base-input.input-info(placeholder="Введите область", v-model:value="dopeAddress.region") .flex.flex-col(class="gap-y-1.5") .text-info.text-xxs.font-semibold Улица - base-input.input-info(placeholder="Введите улицу") + base-input.input-info(placeholder="Введите улицу", v-model:value="dopeAddress.street") .flex.gap-x-4 .flex.flex-col(class="gap-y-1.5") .text-info.text-xxs.font-semibold Дом - base-input.input-info(placeholder="Дом") + base-input.input-info(placeholder="Дом", v-model:value="dopeAddress.house") .flex.flex-col(class="gap-y-1.5") .text-info.text-xxs.font-semibold Квартира - base-input.input-info(placeholder="Квартира") + base-input.input-info(placeholder="Квартира", v-model:value="dopeAddress.flat") .flex.flex-col(class="gap-y-1.5") .text-info.text-xxs.font-semibold Индекс - base-input.input-info(v-mask="'######'", placeholder="000000") + base-input.input-info(v-mask="'######'", placeholder="000000", v-model:value="dopeAddress.index") .flex(v-if="item.name && !isChange") span.text-sm.w-fit {{item.title}} .flex.items-center(v-if="item.title") @@ -97,7 +109,10 @@ @click="(e) => deleteDoc(e)" ) span.text-sm {{item.title}} - .section-add-doc.flex.justify-center.items-center.cursor-pointer(v-else) + .section-add-doc.flex.justify-center.items-center.cursor-pointer( + v-else, + @click="changeData" + ) span Добавить данные @@ -127,8 +142,9 @@ export default { deleteDoc: Function, updateDocument: Function, updateAddress: Function, - lackPass: Boolean, - lackAddress: Boolean, + lackData: Boolean, + dopeAddress: Object, + createAddress: Function, }, directives: { mask }, @@ -145,12 +161,19 @@ export default { isOpenChange: false, isChange: false, settings: detail, - customTokens: { - Y: { pattern: /[0-9a-zA-Zа-яёА-ЯЁ ]/u }, - }, + cities: [ + { id: 1, label: "Рязань" }, + { id: 1, label: "Москва" }, + { id: 1, label: "Луховицы" }, + ], + isData: true, }; }, methods: { + changeData() { + this.isData = true; + this.isChange = true; + }, copyValue(text) { navigator.clipboard.writeText(text); }, @@ -168,6 +191,12 @@ export default { this.updateAddress(); } }, + createNewAddress() { + this.isOpenChange = false; + this.isChange = false; + this.createAddress(); + this.updateAddress(); + }, openAddingWrap() { if (!this.isChange) { this.isOpenAddingWrap = !this.isOpenAddingWrap; @@ -197,6 +226,14 @@ export default { }; }, }, + watch: { + lackData: { + immediate: true, + handler(newValue) { + this.isData = newValue; + }, + }, + }, }; diff --git a/src/pages/clients/components/ClientDetailInfoWrapper.vue b/src/pages/clients/components/ClientDetailInfoWrapper.vue index cd830c3..b19ca9a 100644 --- a/src/pages/clients/components/ClientDetailInfoWrapper.vue +++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue @@ -4,14 +4,16 @@ v-model:section-info="dataDocument" section="pass" :update-document="updateDocument" - :lack-pass="lackPass" + :lack-data="lackData" ) .flex.flex-col client-detail-info-section( :section-info="dataAddress" section="addresses" :update-address="updateAddress" - :lack-address="lackAddress" + :lack-data="lackData" + :dope-address="dopeAddress" + :create-address="createAddress" ) .flex.flex-col client-detail-info-section( @@ -19,6 +21,7 @@ section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc" + :lack-data="lackData" ) @@ -36,8 +39,9 @@ export default { dataDocument: Object, updateDocument: Function, updateAddress: Function, - lackPass: Boolean, - lackAddress: Boolean, + lackData: Boolean, + dopeAddress: Object, + createAddress: Function, }, }; diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue index 3cd118d..f0b1a6f 100644 --- a/src/pages/clients/components/ClientsTableRow.vue +++ b/src/pages/clients/components/ClientsTableRow.vue @@ -75,8 +75,9 @@ :delete-doc="deleteDoc" :update-document="postUpdateIdentityDocument" :update-address="postUpdateAddress" - :lack-pass="lackPass" - :lack-address="lackAddress" + :lack-data="lackData" + :dope-address="dopeAddress" + :create-address="postCreateAddress" ) @@ -126,8 +127,15 @@ export default { dataClient: {}, docId: "", addressId: "", - lackPass: true, - lackAddress: true, + lackData: true, + dopeAddress: { + city: "", + region: "", + street: "", + house: "", + flat: "", + index: "", + }, }; }, props: { @@ -174,7 +182,6 @@ export default { priority: this.dataClient.priority, }); }, - postContactsClient() { let contacts = [...this.dataClient.contacts]; if ( @@ -233,7 +240,6 @@ export default { postDeleteContact(contact) { fetchWrapper.del(`general/contact/${contact.id}/delete/`); }, - addNetwork(network) { this.dataClient.contacts.push(network); }, @@ -270,10 +276,6 @@ export default { this.saveAddress(data.address[0]); this.saveAttachments([...data.attachments]); }, - addDoc() { - this.lackPass = false; - }, - saveIdentityDocument(data) { if ( data?.series || @@ -294,12 +296,17 @@ export default { : "", }; } else { - this.lackPass = false; + this.lackData = false; + this.dataIdentityDocument = { + numba: "", + issued_by_org: "", + issued_by_org_code: "", + issued_by_date: "", + }; } this.docId = data?.id; }, postUpdateIdentityDocument() { - console.log(this.dataIdentityDocument); fetchWrapper .post(`general/identity_document/${this.docId}/update/`, { series_number: this.dataIdentityDocument.numba, @@ -313,22 +320,41 @@ export default { .then(() => this.fetchClientDetail(this.id)); }, saveAddress(data) { + this.addressId = data?.id; if (data?.join_adress) { this.dataAddress = { join_adress: data?.join_adress, }; } else { - this.lackAddress = false; + this.lackData = false; + this.dataAddress = { + join_adress: "", + }; } - - this.addressId = data?.id; + }, + clearAddress() { + this.dopeAddress = { + city: "", + region: "", + street: "", + flat: "", + house: "", + index: "", + }; }, postUpdateAddress() { fetchWrapper .post(`general/address/${this.addressId}/update/`, { - full_address: this.dataAddress.join_adress, + full_address: + this.dopeAddress.city + + this.dopeAddress.region + + this.dopeAddress.street + + this.dopeAddress.house + + this.dopeAddress.flat + + this.dopeAddress.index || this.dataAddress.join_adress, }) .then(() => this.fetchClientDetail(this.id)); + this.clearAddress(); }, saveAttachments(data) { this.dataAttachments = [...data]; @@ -354,6 +380,13 @@ export default { (el) => el.id !== e.target.id ); }, + postCreateAddress() { + fetchWrapper + .post("general/address/create/", { + person_id: this.id, + }) + .then(() => this.fetchClientDetail(this.id)); + }, }, };