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

2023-01-18 16:37:56 +03:00
parent 4fcd6aa206
commit 1283ea08f5
5 changed files with 61 additions and 73 deletions
--- a/src/components/TheSidebar.vue
+++ b/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: [
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/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 Создание клиента
-    .flex.gap-x-4.h-fit.px-4
+    span.title.text-xl.font-bold Создание клиента
+    .flex.gap-x-4.h-fit
      .flex.gap-x-3.w-full
        q-btn.relative(
          color="secondary",
@@ -55,43 +55,36 @@
                  )
        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",
-          @click="(e) => selectTab(e)",
-          :class="{active:info.active}",
-          :key="info.key" :id="info.key"
-        ) {{info.title}}
-      .flex(:style="{display :'block'}" ref="basic")
-        form-create-basic-info(
-          :basic-info="infoClient.basic"
-          :phone="infoClient.phone"
-          :email="infoClient.email"
-          :save-network-id="saveNetworkId"
-          :add-network="addNewNetwork"
-          :save-client="saveClient"
-          :choose-option="chooseOptionNetworks"
-          :choose-priority="choosePriority"
-          :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")
-        form-create-additional(
-          :additional-info="infoClient.additional",
-          :add-new-additional="addNewAdditionalInfo",
-          :save-file="saveAdditionalFiles",
-          :save-client="saveClient"
-        )
+          v-for="form in forms",
+          @click="selectForm(form.component)",
+          :class="{active: form.component === currentForm}",
+          :key="form.id",
+          :id="form.id"
+        ) {{form.title}}
+      component(
+        v-bind:is="currentForm",
+        :basic-info="infoClient.basic",
+        :phone="infoClient.phone",
+        :email="infoClient.email",
+        :save-network-id="saveNetworkId",
+        :add-network="addNewNetwork",
+        :choose-option="chooseOptionNetworks",
+        :choose-priority="choosePriority",
+        :priority-list="priorityList",
+        :identity-document="infoClient.identity_document",
+        :addresses="infoClient.addresses",
+        :save-file="saveDocFile",
+      )
+      q-btn(
+        label="Создать клиента",
+        color="primary",
+        style="height: 40px; width: 180px",
+        no-caps,
+        padding="8px 24px",
+        @click="saveClient",
+      )
 </template>

 <script>
@@ -190,23 +183,24 @@ export default {
          },
        ],
      },
-      listInfoTitle: [
+      forms: [
        {
          title: "Основное",
-          key: "basic",
-          active: true,
+          id: "basic",
+          component: "form-create-basic-info",
        },
        {
          title: "ДУЛ",
-          key: "doc",
-          active: false,
+          id: "doc",
+          component: "form-create-identity-documents",
        },
        {
          title: "Адрес",
-          key: "address",
-          active: false,
+          id: "address",
+          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) {
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/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
-    .flex.flex-col.gap-y-6.px-4
+  .wrapper-addresses.h-full
+    .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
-  max-height: 443px
+  height: 368px
  overflow-y: auto
  &::-webkit-scrollbar
    width: 4px
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/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
-    .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
+  .wrapper-info.h-full
+    .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: 443px
+  max-height: 336px
+  min-height: 272px
  overflow-y: auto
  &::-webkit-scrollbar
    width: 4px
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/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
-    .flex.flex-col.gap-y-6.px-4
+  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8
+    .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
-  max-height: 443px
+  height: 338px
  overflow-y: auto
  &::-webkit-scrollbar
    width: 4px