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

2022-11-14 18:39:12 +03:00
parent 81451daeb4
commit 1cf3aece41
3 changed files with 109 additions and 35 deletions
--- 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 Добавить данные
 </template>

@@ -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;
+      },
+    },
+  },
 };
 </script>

--- 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"
      )
 </template>

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

@@ -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));
+    },
  },
 };
 </script>