WIP настроил создание клиента по кнопке "Сохранить" поправил таблицы и формы создания

src/pages/clients/components/ClientsFormCreate.vue

@@ -1,30 +1,31 @@
 <template lang="pug">
-  .wrapper.flex.flex-col.absolute.top-28.right-0.px-8.py-7.gap-y-8
+  .wrapper-create.flex.flex-col.absolute.top-28.right-0.px-4.py-7.gap-y-8
     .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
-    span.title.text-xl.font-bold Создание клиента
-    .flex.gap-x-4.h-fit
+    span.title.text-xl.font-bold.px-4 Создание клиента
+    .flex.gap-x-4.h-fit.px-4
       .flex.gap-x-3.w-full
         .export-avatar.cursor-pointer.flex.justify-center.items-center
-          img.icon-download(src="@/assets/icons/download.svg" alt="Download")
-        base-input(v-model:value="infoClient.fullName" placeholder="ФИО*" :width-input="326" )
-      base-select(:list-data="priorityList" :option-data="priorityOption" :width-select="176" :style-border="true" :choose-option="chooseOptionSelect")
+          .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")
     .flex.flex-col.flex-auto.l.gap-y-8
-      .flex
-        button.title-info.px-6.py-2.cursor-pointer(v-for="(info, index) in infoTitleArray" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="index" :id="info.title") {{info.title}}
+      .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}}
       .flex(:style="{display :'block'}" ref="basic")
-        form-create-basic-info( :basic-info="infoClient.basicInfo" :add-network="addNewNetwork" :save-client="saveClient")
-      .flex(:style="{display :'none'}" ref="secondary")
-        form-create-secondary-info(:secondary-info="infoClient.secondaryInfo" :save-client="saveClient")
+        form-create-basic-info( :basic-info="infoClient.basic" :phone="infoClient.phone" :email="infoClient.email" :add-network="addNewNetwork" :save-client="saveClient" :choose-option="chooseOptionNetworks")
       .flex(:style="{display :'none'}" ref="doc")
-        form-create-doc(:doc="infoClient.doc" :save-file="saveDocFile" :save-client="saveClient")
+        form-create-identity-documents(:identity-document="infoClient.pass" :save-client="saveClient")
+      .flex(:style="{display :'none'}" ref="addresses")
+        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")
 </template>
 
 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
 import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
-import FormCreateSecondaryInfo from "@/pages/clients/components/FormCreateSecondaryInfo";
-import FormCreateDoc from "@/pages/clients/components/FormCreateDoc";
+import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
+import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
 import BaseInput from "@/components/base/BaseInput";
 import BaseSelect from "@/components/base/BaseSelect";
@@ -34,8 +35,8 @@ export default {
     BaseInput,
     BaseSelect,
     FormCreateBasicInfo,
-    FormCreateSecondaryInfo,
-    FormCreateDoc,
+    FormCreateIdentityDocuments,
+    FormCreateAddresses,
     FormCreateAdditional,
   },
   props: {
@@ -43,39 +44,38 @@ export default {
   },
   data() {
     return {
+      prioritySettings: column.find((el) => el.name === "priority"),
       infoClient: {
-        fullName: "",
-        priority: "",
-        basicInfo: {
-          age: "",
-          jobTitle: "",
-          number: "",
-          email: "",
-          networks: [
+        basic: {
+          full_name: "",
+          birth_date: "",
+          priority: null,
+          contacts: [
             {
               id: "network",
-              network: "",
+              kind: "",
+              username: "",
             },
           ],
         },
-        secondaryInfo: {
-          pass: {
-            number: "",
-            issuedBy: "",
-            divisionCode: "",
-            dateIssue: "",
-          },
-          snilsInn: {
-            inn: "",
-            snils: "",
-          },
-          dates: {
-            birthday: "",
-          },
-          addresses: {
-            actualPlace: "",
-            registrationPlace: "",
-          },
+        phone: {
+          kind: "PHONE",
+          username: "",
+        },
+        email: {
+          kind: "EMAIL",
+          username: "",
+        },
+        pass: {
+          kind: "Паспорт",
+          numba: "",
+          issued_by_org: "",
+          issued_by_date: "",
+          issued_by_org_code: "",
+        },
+        addresses: {
+          actualPlace: "",
+          registrationPlace: "",
         },
         doc: {},
         additional: [
@@ -87,20 +87,20 @@ export default {
           },
         ],
       },
-      infoTitleArray: [
+      listInfoTitle: [
         {
           title: "Основное",
           key: "basic",
           active: true,
         },
         {
-          title: "Вторичное",
-          key: "secondary",
+          title: "Документы",
+          key: "doc",
           active: false,
         },
         {
-          title: "Документы",
-          key: "doc",
+          title: "Адреса",
+          key: "addresses",
           active: false,
         },
         {
@@ -113,12 +113,36 @@ export default {
       priorityList: ["Высокий", "Средний", "Низкий", "-"],
     };
   },
-  methods: {
-    chooseOptionSelect(e) {
-      this.priorityOption = this.priorityList[e.target.id];
-      this.infoClient.priority = this.priorityList[e.target.id];
+  computed: {
+    getPriorityOption() {
+      return this.prioritySettings.settings.find(
+        (el) => el.priority === this.infoClient.basic.priority
+      ).text;
+    },
+  },
+  methods: {
+    postNewClient() {
+      fetch("http://45.84.227.122:8080/general/person/create/", {
+        method: "POST",
+        headers: {
+          Accept: "text/html; q=1.0, */*",
+          "Content-Type": "application/json;charset=utf-8",
+        },
+        body: JSON.stringify({
+          full_name: this.infoClient.basic.full_name,
+          birth_date: this.infoClient.basic.birth_date,
+        }),
+      });
+    },
+    chooseOptionSelect(e) {
+      this.infoClient.basic.priority = this.prioritySettings.settings.find(
+        (el) => el.text === e.target.id
+      ).priority;
+    },
+    chooseOptionNetworks() {},
+    saveClient() {
+      this.postNewClient();
     },
-    saveClient() {},
     saveDocFile(e) {
       this.infoClient.doc = e.target.files;
     },
@@ -136,15 +160,16 @@ export default {
       });
     },
     addNewNetwork() {
-      this.infoClient.basicInfo.networks.push({
+      this.infoClient.basic.contacts.push({
         id:
-          this.infoClient.basicInfo.networks[0].id +
-          this.infoClient.basicInfo.networks.length,
-        network: "",
+          this.infoClient.basic.contacts[0].id +
+          this.infoClient.basic.contacts.length,
+        kind: "",
+        username: "",
       });
     },
     selectTab(event) {
-      this.infoTitleArray.forEach((el) => {
+      this.listInfoTitle.forEach((el) => {
         if (el.title === event.target.id) {
           el.active = true;
           this.$refs[el.key].style.display = "block";
@@ -159,20 +184,15 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.wrapper
+.wrapper-create
   z-index: 1
   background-color: var(--default-white)
-  width: fit-content
   border-radius: 4px
-  min-width: 634px
-  max-height: 700px
+  width: 634px
   min-height: 700px
   box-shadow: var(--default-shadow)
 .title
   color: var(--font-dark-blue-color)
-.icon-download
-  width: 18px
-  height: 18px
 .export-avatar
   width: 40px
   height: 40px