WIP настроил создание ДУЛ для нового клиента, поправил "Основное" и "ДУЛ" по макету

src/components/base/BaseAddingNetwork.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
-    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
+    .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
-    base-input.input-info.w-full(v-model:value="value.username" placeholder="Ссылкa")
+      base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
+    base-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
 </template>
 
 <script>
@@ -11,6 +12,7 @@ export default {
   name: "TableAddingNetwork",
   components: { BaseInput, BaseSelect },
   props: {
+    saveNetworkId: Function,
     selectedOption: String,
     value: Object,
     listAddingNetworks: Array,
@@ -18,12 +20,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.icon
-  color: var(--font-dark-blue-color)
-  width: 48px
-  height: 42px
-  border: 2px solid var(--border-light-grey-color)
-  border-radius: 4px
-</style>

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.input.w-full.outline-0.not-italic(:class="{date:type === 'date'}" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer
 </template>
@@ -37,4 +37,9 @@ export default {
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
   background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
+.date
+  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
+  &::-webkit-calendar-picker-indicator
+    opacity: 0
 </style>

src/components/base/BaseSelect.vue

@@ -5,7 +5,7 @@
     :style="{ minWidth : widthSelect + 'px'}"
     )
     .relative.flex.flex-col
-      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
+      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks" :class="{default:!isSelectedOption}") {{isSelectedOption || !defaultOption ? optionData : defaultOption}}
         .absolute.options(
           v-show="isSelectOpen"
           :id="id"
@@ -14,7 +14,7 @@
           )
           .not-italic.option.pl-4.py-1(
             v-for="responsible in listData"
-            @click="(e) => chooseOption(e)"
+            @click="(e) => selectOption(e)"
             :key="responsible"
             :id="responsible"
             ) {{responsible}}
@@ -26,7 +26,7 @@
           :style="{ minWidth : widthSelect + 'px'}")
           .flex.not-italic.option.justify-center.py-1.text-xl(
             v-for="responsible in listData"
-            @click="chooseOption"
+            @click="(e) => chooseOption(e)"
             :key="responsible.network"
             :id="responsible.network"
             :class="responsible.icon"
@@ -39,6 +39,7 @@
 export default {
   name: "BaseSelect",
   props: {
+    defaultOption: String,
     id: String,
     styleBorder: {
       default: false,
@@ -55,12 +56,17 @@ export default {
   data() {
     return {
       isSelectOpen: false,
+      isSelectedOption: false,
     };
   },
   methods: {
     openSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
+    selectOption(e) {
+      this.chooseOption(e);
+      this.isSelectedOption = true;
+    },
   },
 };
 </script>
@@ -77,8 +83,10 @@ export default {
   appearance: none
   border: none
   outline: none
-  color: var(--font-black-color-1)
+  color: var(--font-dark-blue-color)
   background-color: var(--font-black-color-0)
+  &.default
+    color: var(--font-black-color-1)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none

src/pages/clients/components/ClientsFormCreate.vue

@@ -6,16 +6,26 @@
       .flex.gap-x-3.w-full
         .export-avatar.cursor-pointer.flex.justify-center.items-center
           .icon-download.text-xl
-        base-input(v-model:value="infoClient.basic.full_name" placeholder="ФИО*" :width-input="326" )
+        base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
-        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.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}}
+        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" :add-network="addNewNetwork" :save-client="saveClient" :choose-option="chooseOptionNetworks")
+        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"
+          :priority-option="getPriorityOption"
+          )
       .flex(:style="{display :'none'}" ref="doc")
-        form-create-identity-documents(:identity-document="infoClient.pass" :save-client="saveClient")
+        form-create-identity-documents(:identity-document="infoClient.identity_document" :save-client="saveClient")
-      .flex(:style="{display :'none'}" ref="addresses")
+      .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")
@@ -44,7 +54,9 @@ export default {
   },
   data() {
     return {
+      networksSettings: column.find((el) => el.name === "networks"),
       prioritySettings: column.find((el) => el.name === "priority"),
+      networkId: "",
       infoClient: {
         basic: {
           full_name: "",
@@ -53,8 +65,9 @@ export default {
           contacts: [
             {
               id: "network",
-              kind: "",
+              kind: "TELEGRAM",
               username: "",
+              icon: "icon-tg",
             },
           ],
         },
@@ -66,18 +79,27 @@ export default {
           kind: "EMAIL",
           username: "",
         },
-        pass: {
+        identity_document: {
-          kind: "Паспорт",
+          pass: {
-          numba: "",
+            kind: "Паспорт",
-          issued_by_org: "",
+            numba: "",
-          issued_by_date: "",
+            issued_by_org: "",
-          issued_by_org_code: "",
+            issued_by_date: "",
+            issued_by_org_code: "",
+          },
+          snils: {
+            kind: "СНИЛС",
+            numba: "",
+          },
+          inn: {
+            kind: "ИНН",
+            numba: "",
+          },
         },
         addresses: {
           actualPlace: "",
           registrationPlace: "",
         },
-        doc: {},
         additional: [
           {
             id: "add",
@@ -94,18 +116,13 @@ export default {
           active: true,
         },
         {
-          title: "Документы",
+          title: "ДУЛ",
           key: "doc",
           active: false,
         },
         {
-          title: "Адреса",
+          title: "Адрес",
-          key: "addresses",
+          key: "address",
-          active: false,
-        },
-        {
-          title: "Дополнительное",
-          key: "additional",
           active: false,
         },
       ],
@@ -121,27 +138,56 @@ export default {
     },
   },
   methods: {
+    createIdentityDocument(id) {
+      fetch("http://45.84.227.122:8080/general/identity_document/create/", {
+        method: "POST",
+        headers: {
+          Accept: "*/*",
+          "Content-Type": "application/json;charset=utf-8",
+        },
+        body: JSON.stringify({
+          ...this.infoClient.identity_document.pass,
+          person_id: id,
+        }),
+      });
+    },
     postNewClient() {
       fetch("http://45.84.227.122:8080/general/person/create/", {
         method: "POST",
         headers: {
-          Accept: "text/html; q=1.0, */*",
+          Accept: "*/*",
           "Content-Type": "application/json;charset=utf-8",
         },
         body: JSON.stringify({
           full_name: this.infoClient.basic.full_name,
           birth_date: this.infoClient.basic.birth_date,
+          priority: this.infoClient.basic.priority,
         }),
-      });
+      })
+        .then((res) => res.json())
+        .then((result) => this.createIdentityDocument(result.id));
     },
-    chooseOptionSelect(e) {
+    saveNetworkId(e) {
+      this.networkId = e.currentTarget.id;
+    },
+    choosePriority(e) {
       this.infoClient.basic.priority = this.prioritySettings.settings.find(
         (el) => el.text === e.target.id
       ).priority;
     },
-    chooseOptionNetworks() {},
+    chooseOptionNetworks(e) {
+      let index = this.infoClient.basic.contacts.findIndex(
+        (el) => el.id === this.networkId
+      );
+      let icon = this.networksSettings.settings.find(
+        (el) => el.network === e.target.id
+      ).icon;
+      this.infoClient.basic.contacts[index].kind = e.target.id;
+      this.infoClient.basic.contacts[index].icon = icon;
+    },
     saveClient() {
       this.postNewClient();
+      this.closeForm();
     },
     saveDocFile(e) {
       this.infoClient.doc = e.target.files;
@@ -164,13 +210,14 @@ export default {
         id:
           this.infoClient.basic.contacts[0].id +
           this.infoClient.basic.contacts.length,
-        kind: "",
+        kind: "TELEGRAM",
         username: "",
+        icon: "icon-tg",
       });
     },
     selectTab(event) {
       this.listInfoTitle.forEach((el) => {
-        if (el.title === event.target.id) {
+        if (el.key === event.target.id) {
           el.active = true;
           this.$refs[el.key].style.display = "block";
         } else {
@@ -194,7 +241,7 @@ export default {
 .title
   color: var(--font-dark-blue-color)
 .export-avatar
-  width: 40px
+  min-width: 40px
   height: 40px
   border-radius: 50%
   background-color: var(--bg-btn-icons-color)

src/pages/clients/components/FormCreateAttachments.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+    .place.flex.flex-col.justify-center.items-center.py-3
+      .upload.text-center.text-sm.flex.w-fit
+        input.hidden(@change="(e) => addAttachment(e)" type="file" id="file-upload")
+        span Загрузите элемент
+          label.label.cursor-pointer(for="file-upload")  с компьютера
+          span  или перетащите их сюда
+</template>
+
+<script>
+export default {
+  name: "FormCreateAttachments",
+  props: {
+    addAttachment: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper-attachment
+  width: 485px
+  height: fit-content
+  background-color: var(--default-white)
+  border-radius: 8px 0 8px 8px
+  box-shadow: var(--default-shadow)
+.corner
+  width: 8px
+  height: 8px
+  border-top-left-radius: 100%
+  background-color: var(--default-white)
+  z-index: 2
+  overflow: hidden
+.place
+  width: 100%
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+  color: var(--font-grey-color)
+.upload
+  width: 240px
+.name-doc
+  border-radius: 4px
+  background-color: var(--border-light-grey-color-1)
+  width: fit-content
+.label
+  color: var(--btn-blue-color)
+</style>

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -1,10 +1,13 @@
 <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
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Приоритет
+        base-select(:list-data="priorityList" :option-data="priorityOption" default-option="Приоритет клиента" :for-networks="false" :style-border="true" :choose-option="choosePriority" :width-select="277")
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Дата рождения
           span.obligatory *
-        base-input.input-info(v-model:value="basicInfo.birth_date" type="date" :width-input="277")
+        base-input.input-info(v-model:value="basicInfo.birth_date" type="date" placeholder="00.00.0000" :width-input="277")
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Номер телефона
           span.obligatory *
@@ -16,21 +19,28 @@
       .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
         span.text-sm Ссылки на соцсети
         .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
-          base-adding-network(:list-adding-networks="networks.settings" selected-option="icon-tg" :value="network" :choose-network="chooseOption")
+          base-adding-network(:list-adding-networks="networks.settings" :selected-option="network.icon" :value="network" :choose-network="chooseOption" :save-network-id="saveNetworkId")
         span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
     .px-4
-      base-create-button(text="Сохранить" @click="saveClient")
+      base-create-button(text="Создать клиента" @click="saveClient")
 </template>
 
 <script>
 import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
 import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
+import BaseSelect from "@/components/base/BaseSelect";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "FormCreateBasicInfo",
-  components: { BaseInput, BaseCreateButton, BaseAddingNetwork },
+  components: { BaseInput, BaseCreateButton, BaseAddingNetwork, BaseSelect },
   props: {
+    choosePriority: Function,
+    priorityList: Array,
+    priorityOption: {
+      default: "Приоритет",
+    },
+    saveNetworkId: Function,
     chooseOption: Function,
     phone: Object,
     email: Object,

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -5,16 +5,25 @@
       .grid.grid-cols-2.gap-x-4.gap-y-6
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Серия и номер
-          base-input.input-info(v-model:value="identityDocument.numba" placeholder="0000 000000" :width-input="277")
+          base-input.input-info(v-model:value="identityDocument.pass.numba" placeholder="0000 000000" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Кем и когда выдан
-          base-input.input-info(v-model:value="identityDocument.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")
+          base-input.input-info(v-model:value="identityDocument.pass.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Код подразделения
-          base-input.input-info(v-model:value="identityDocument.issued_by_org_code" placeholder="000–000" :width-input="277")
+          base-input.input-info(v-model:value="identityDocument.pass.issued_by_org_code" placeholder="000–000" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Дата выдачи
-          base-input.input-info(type="date" v-model:value="identityDocument.issued_by_date" placeholder="Дата" :width-input="277")
+          base-input.input-info(type="date" v-model:value="identityDocument.pass.issued_by_date" placeholder="Дата" :width-input="277")
+    .flex.flex-col.gap-y-6.px-4
+      span.title-info.text-base.font-bold СНИЛС и ИНН
+      .grid.grid-cols-2.gap-x-4.gap-y-6
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Номер СНИЛС
+          base-input.input-info(v-model:value="identityDocument.snils.numba" placeholder="000–000–000 00" :width-input="277")
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Номер ИНН
+          base-input.input-info(v-model:value="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
     .px-4
       base-create-button(text="Создать клиента" @click="saveClient")
 </template>