WIP Форма создания клиента переделана

src/components/TheSidebar.vue

@@ -3,7 +3,7 @@
     :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
   )
     .flex.flex-col.gap-y-6
-      the-button-sidebar(
+      base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
         :path="button.path",
         :id="button.id",
@@ -12,7 +12,7 @@
       )
         q-icon(:name="`app:${button.icon}`", size="36px")
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(
+      base-button-sidebar(
         :path="getSettings.path",
         :id="getSettings.id",
         :active="getSettings.active",
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import TheButtonSidebar from "@/components/base/BaseSidebarButton";
+import BaseButtonSidebar from "@/components/base/BaseSidebarButton";
 
 export default {
   name: "TheSidebar",
-  components: { TheButtonSidebar },
+  components: { BaseButtonSidebar },
   data() {
     return {
       pageSettings: [

src/components/base/BaseClientFormCreate.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.py-7.gap-y-8(
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-8.py-7.gap-y-8(
     v-click-outside="closeModal"
   )
     .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
-    span.title.text-xl.font-bold.px-4 Создание клиента
+    span.title.text-xl.font-bold Создание клиента
-    .flex.gap-x-4.h-fit.px-4
+    .flex.gap-x-4.h-fit
       .flex.gap-x-3.w-full
         q-btn.relative(
           color="secondary",
@@ -55,42 +55,35 @@
                   )
         base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
-      .flex.px-4
+      .flex
         button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
-          v-for="info in listInfoTitle",
+          v-for="form in forms",
-          @click="(e) => selectTab(e)",
+          @click="selectForm(form.component)",
-          :class="{active:info.active}",
+          :class="{active: form.component === currentForm}",
-          :key="info.key" :id="info.key"
+          :key="form.id",
-        ) {{info.title}}
+          :id="form.id"
-      .flex(:style="{display :'block'}" ref="basic")
+        ) {{form.title}}
-        form-create-basic-info(
+      component(
-          :basic-info="infoClient.basic"
+        v-bind:is="currentForm",
-          :phone="infoClient.phone"
+        :basic-info="infoClient.basic",
-          :email="infoClient.email"
+        :phone="infoClient.phone",
-          :save-network-id="saveNetworkId"
+        :email="infoClient.email",
-          :add-network="addNewNetwork"
+        :save-network-id="saveNetworkId",
-          :save-client="saveClient"
+        :add-network="addNewNetwork",
-          :choose-option="chooseOptionNetworks"
+        :choose-option="chooseOptionNetworks",
-          :choose-priority="choosePriority"
+        :choose-priority="choosePriority",
-          :priority-list="priorityList"
+        :priority-list="priorityList",
-        )
-      .flex(:style="{display :'none'}" ref="doc")
-        form-create-identity-documents(
         :identity-document="infoClient.identity_document",
-          :save-client="saveClient"
-        )
-      .flex(:style="{display :'none'}" ref="address")
-        form-create-addresses(
         :addresses="infoClient.addresses",
         :save-file="saveDocFile",
-          :save-client="saveClient"
       )
-      .flex(:style="{display :'none'}" ref="additional")
+      q-btn(
-        form-create-additional(
+        label="Создать клиента",
-          :additional-info="infoClient.additional",
+        color="primary",
-          :add-new-additional="addNewAdditionalInfo",
+        style="height: 40px; width: 180px",
-          :save-file="saveAdditionalFiles",
+        no-caps,
-          :save-client="saveClient"
+        padding="8px 24px",
+        @click="saveClient",
       )
 </template>
 
@@ -190,23 +183,24 @@ export default {
           },
         ],
       },
-      listInfoTitle: [
+      forms: [
         {
           title: "Основное",
-          key: "basic",
+          id: "basic",
-          active: true,
+          component: "form-create-basic-info",
         },
         {
           title: "ДУЛ",
-          key: "doc",
+          id: "doc",
-          active: false,
+          component: "form-create-identity-documents",
         },
         {
           title: "Адрес",
-          key: "address",
+          id: "address",
-          active: false,
+          component: "form-create-addresses",
         },
       ],
+      currentForm: "form-create-basic-info",
       priorityList: [
         {
           id: 1,
@@ -422,7 +416,7 @@ export default {
         icon: "icon-tg",
       });
     },
-    selectTab(event) {
+    /*selectTab(event) {
       this.listInfoTitle.forEach((el) => {
         if (el.key === event.target.id) {
           el.active = true;
@@ -432,6 +426,11 @@ export default {
           this.$refs[el.key].style.display = "none";
         }
       });
+    },*/
+    selectForm(componentName) {
+      this.currentForm = this.forms.find(
+        (elem) => elem.component === componentName
+      )?.component;
     },
     checkFormFullness() {
       if (!this.infoClient.basic.full_name) {

src/pages/clients/components/FormCreateAddresses.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+  .wrapper-addresses.h-full
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       base-input(
         v-model="addresses.full_address",
         placeholder="Введите адрес целиком",
@@ -53,9 +53,6 @@
           v-model="addresses.zip_code",
           label="Индекс"
         )
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -76,8 +73,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-addresses
-  min-height: 443px
+  height: 368px
-  max-height: 443px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+  .wrapper-info.h-full
-    .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
+    .grid.grid-cols-2.gap-x-4.gap-y-6
       base-custom-select.input-info(
         :items="priorityList",
         placeholder="Приоритет клиента",
@@ -37,9 +37,6 @@
           v-show="networks.settings.length !== basicInfo.contacts.length",
           @click="addNetwork"
         ) Добавить соцсеть
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -78,8 +75,8 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-info
-  min-height: 336px
+  max-height: 336px
-  max-height: 443px
+  min-height: 272px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
@@ -26,7 +26,7 @@
           placeholder="Дата",
           label="Дата выдачи"
         )
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
@@ -45,9 +45,6 @@
           placeholder="000000000000",
           label="Номер ИНН"
         )
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -66,8 +63,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-documents
-  min-height: 443px
+  height: 338px
-  max-height: 443px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px