[WIP] Добавил дополнительные поля адресов и их сохранение

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 Добавить данные
 </template>
 
@@ -127,8 +142,9 @@ export default {
     deleteDoc: Function,
     updateDocument: Function,
     updateAddress: Function,
-    lackPass: Boolean,
+    lackData: Boolean,
-    lackAddress: Boolean,
+    dopeAddress: Object,
+    createAddress: Function,
   },
   directives: { mask },
 
@@ -145,12 +161,19 @@ export default {
       isOpenChange: false,
       isChange: false,
       settings: detail,
-      customTokens: {
+      cities: [
-        Y: { pattern: /[0-9a-zA-Zа-яёА-ЯЁ ]/u },
+        { 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;
+      },
+    },
+  },
 };
 </script>
 

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"
       )
 </template>
 
@@ -36,8 +39,9 @@ export default {
     dataDocument: Object,
     updateDocument: Function,
     updateAddress: Function,
-    lackPass: Boolean,
+    lackData: Boolean,
-    lackAddress: Boolean,
+    dopeAddress: Object,
+    createAddress: Function,
   },
 };
 </script>

src/pages/clients/components/ClientsTableRow.vue

@@ -75,8 +75,9 @@
       :delete-doc="deleteDoc"
       :update-document="postUpdateIdentityDocument"
       :update-address="postUpdateAddress"
-      :lack-pass="lackPass"
+      :lack-data="lackData"
-      :lack-address="lackAddress"
+      :dope-address="dopeAddress"
+      :create-address="postCreateAddress"
     )
 </template>
 
@@ -126,8 +127,15 @@ export default {
       dataClient: {},
       docId: "",
       addressId: "",
-      lackPass: true,
+      lackData: true,
-      lackAddress: 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));
+    },
   },
 };
 </script>