WIP настроил сохранение данных аддреса, добавил блок детальной информации Документов

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -15,17 +15,16 @@
       .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
         span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
         span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
-        client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange" :style="{fontWeight:key === 'numba'&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
+        client-detail-input.text-sm.text-sm.w-max-fit(v-if="section!=='docs' && isChange" :style="{fontWeight:key === 'numba'&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
           .copy.icon-copy.cursor-pointer(v-if="item.copy" @click="() => copyValue(item)")
         .flex(v-if="settings[section].options && !isChange")
           span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
           .copy.icon-copy.cursor-pointer.pl-4(v-if="key === 'numba'" @click="() => copyValue(item)")
-        .flex(v-if="item.value && !isChange")
-          span.text-sm.w-fit {{item.value}}
-        .flex.items-center(v-if="item.name")
-          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
-          .icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
-          span.text-sm {{item.name}}
+        .flex(v-if="item.name && !isChange")
+          span.text-sm.w-fit {{item.title}}
+        .flex.items-center(v-if="item.title")
+          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.id" @click="(e) => deleteDoc(e)")
+          span.text-sm {{item.title}}
 </template>
 
 <script>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
     client-detail-info-section(v-model:section-info="dataDocument" section="pass")
-    .flex.flex-col.gap-y-2
+    .flex.flex-col
       client-detail-info-section(:section-info="dataAddress" section="addresses")
+    .flex.flex-col
+      client-detail-info-section(:section-info="dataAttachments" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -13,6 +15,7 @@ export default {
   props: {
     dataDetail: Object,
     dataAddress: Object,
+    dataAttachments: Array,
     saveNewDoc: Function,
     deleteDoc: Function,
     dataDocument: Object,

src/pages/clients/components/ClientsFormCreate.vue

@@ -1,290 +0,0 @@
-<template lang="pug">
-  .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.px-4 Создание клиента
-    .flex.gap-x-4.h-fit.px-4
-      .flex.gap-x-3.w-full
-        base-button(:rounded="true" :secondary="true" :size="40")
-          .icon-download.text-xl
-        base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
-    .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 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="getPriorityList"
-          )
-      .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")
-</template>
-
-<script>
-import { column } from "@/pages/clients/utils/tableConfig";
-import { fetchWrapper } from "@/shared/fetchWrapper";
-import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
-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/OldBaseSelect";
-import BaseButton from "@/components/base/BaseButton";
-export default {
-  name: "ClientsFormCreate",
-  components: {
-    BaseInput,
-    BaseSelect,
-    FormCreateBasicInfo,
-    FormCreateIdentityDocuments,
-    FormCreateAddresses,
-    FormCreateAdditional,
-    BaseButton,
-  },
-  props: {
-    closeForm: Function,
-  },
-  data() {
-    return {
-      networksSettings: column.find((el) => el.name === "networks"),
-      prioritySettings: column.find((el) => el.name === "priority"),
-      networkId: "",
-      infoClient: {
-        basic: {
-          full_name: "",
-          birth_date: "",
-          priority: "",
-          contacts: [
-            {
-              id: "network",
-              kind: "TELEGRAM",
-              username: "",
-              icon: "icon-tg",
-            },
-          ],
-        },
-        phone: {
-          kind: "PHONE",
-          username: "",
-        },
-        email: {
-          kind: "EMAIL",
-          username: "",
-        },
-        identity_document: {
-          pass: {
-            kind: "Паспорт",
-            series_number: "",
-            issued_by_org: "",
-            issued_by_date: "",
-            issued_by_org_code: "",
-          },
-          snils: {
-            kind: "СНИЛС",
-            numba: "",
-          },
-          inn: {
-            kind: "ИНН",
-            numba: "",
-          },
-        },
-        addresses: {
-          full_address: "",
-          region: "",
-          city: "",
-          street: "",
-          house_number: "",
-          apartment_number: "",
-          index_of_address: "",
-        },
-        additional: [
-          {
-            id: "add",
-            header: "",
-            description: "",
-            file: {},
-          },
-        ],
-      },
-      listInfoTitle: [
-        {
-          title: "Основное",
-          key: "basic",
-          active: true,
-        },
-        {
-          title: "ДУЛ",
-          key: "doc",
-          active: false,
-        },
-        {
-          title: "Адрес",
-          key: "address",
-          active: false,
-        },
-      ],
-      priorityList: [
-        {
-          id: "1",
-          label: "Высокий",
-        },
-        {
-          id: "2",
-          label: "Средний",
-        },
-        {
-          id: "3",
-          label: "Низкий",
-        },
-        {
-          id: "4",
-          label: "-",
-        },
-      ],
-    };
-  },
-  computed: {
-    getPriorityList() {
-      return this.prioritySettings.settings.map((el) => {
-        return { label: el.text, id: el.id };
-      });
-    },
-  },
-  methods: {
-    createIdentityDocument(id) {
-      fetchWrapper.post("general/identity_document/create/", {
-        ...this.filterDataEmptyProperty(this.infoClient.identity_document.pass),
-        person_id: id,
-      });
-    },
-    createAddress(id) {
-      fetchWrapper.post("general/address/create/", {
-        ...this.filterDataEmptyProperty(this.infoClient.addresses),
-        person_id: id,
-      });
-    },
-    postNewClient() {
-      fetchWrapper
-        .post("general/person/create/", {
-          full_name: this.infoClient.basic.full_name,
-          birth_date: this.infoClient.basic.birth_date,
-          priority: this.prioritySettings.settings.find(
-            (el) => el.text === this.infoClient.basic.priority
-          ).priority,
-        })
-        .then((res) => res.json())
-        .then((result) => {
-          this.createIdentityDocument(result.id);
-          this.createAddress(result.id);
-        });
-    },
-    filterDataEmptyProperty(data) {
-      let postData = data;
-      let keys = Object.keys(postData);
-      keys.forEach((key) => {
-        if (!postData[key]) {
-          delete postData[key];
-        }
-      });
-      return postData;
-    },
-    saveNetworkId(e) {
-      this.networkId = e.currentTarget.id;
-    },
-    choosePriority(e) {
-      this.infoClient.basic.priority = e.target.id;
-    },
-    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;
-    },
-    saveAdditionalFiles(e) {
-      this.infoClient.additional.find((el) => el.id === e.target.id).file =
-        e.target.file;
-    },
-    addNewAdditionalInfo() {
-      this.infoClient.additional.push({
-        id:
-          this.infoClient.additional[0].id + this.infoClient.additional.length,
-        header: "",
-        description: "",
-        file: {},
-      });
-    },
-    addNewNetwork() {
-      this.infoClient.basic.contacts.push({
-        id:
-          this.infoClient.basic.contacts[0].id +
-          this.infoClient.basic.contacts.length,
-        kind: "TELEGRAM",
-        username: "",
-        icon: "icon-tg",
-      });
-    },
-    selectTab(event) {
-      this.listInfoTitle.forEach((el) => {
-        if (el.key === event.target.id) {
-          el.active = true;
-          this.$refs[el.key].style.display = "block";
-        } else {
-          el.active = false;
-          this.$refs[el.key].style.display = "none";
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.wrapper-create
-  z-index: 1
-  background-color: var(--default-white)
-  border-radius: 4px
-  width: 634px
-  min-height: 700px
-  box-shadow: var(--default-shadow)
-.title
-  color: var(--font-dark-blue-color)
-.export-avatar
-  min-width: 40px
-  height: 40px
-  border-radius: 50%
-  background-color: var(--bg-btn-icons-color)
-  color: var(--btn-blue-color)
-  &:hover
-    color: var(--default-white)
-    background-color: var(--btn-blue-color)
-.title-info
-  color: var(--font-grey-color)
-  border-bottom: 1.5px solid var(--font-grey-color)
-  &:hover
-    color: var(--btn-blue-color)
-    border-bottom: 1.5px solid var(--btn-blue-color)
-  &.active
-    color: var(--btn-blue-color)
-    border-bottom: 1.5px solid var(--btn-blue-color)
-</style>

src/pages/clients/components/ClientsTable.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
-    clients-form-create(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
+    base-client-form-create.right-0(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
     clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreateClient")
     .flex.flex-col.h-full.gap-y-2.table-container
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
@@ -21,8 +21,8 @@ import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
 import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
-import ClientsFormCreate from "@/pages/clients/components/ClientsFormCreate";
 import { fetchWrapper } from "@/shared/fetchWrapper";
+import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 export default {
   name: "ClientsTable",
   components: {
@@ -30,7 +30,7 @@ export default {
     ClientsTableRow,
     ClientsTableHat,
     ClientsTableHeader,
-    ClientsFormCreate,
+    BaseClientFormCreate,
   },
   data() {
     return {

src/pages/clients/components/ClientsTableRow.vue

@@ -14,7 +14,7 @@
           .icon-ok.text-xsm(class="pt-[3px]")
         .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-show="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
           clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
-    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-address="dataAddress" :data-detail="dataDetail" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
+    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-address="dataAddress" :data-detail="dataDetail" :data-attachments="dataAttachments" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -30,6 +30,7 @@ import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
 import BaseButton from "@/components/base/BaseButton";
+import { fetchWrapper } from "@/shared/fetchWrapper";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientsTableRow",
@@ -51,10 +52,12 @@ export default {
     return {
       dataIdentityDocument: {},
       dataAddress: {},
+      dataAttachments: [],
       dataDetail: {},
       isOpenDetailInfo: false,
       isOpenPopup: false,
       columnBody: column,
+      prioritySettings: column.find((el) => el.name === "priority"),
       isOpenChange: false,
       dataClient: {},
     };
@@ -73,7 +76,9 @@ export default {
         this.client.first_name || ""
       } ${this.client.patronymic || ""}`,
       age: this.client.birth_date || "",
-      priority: this.client.priority,
+      priority: this.prioritySettings.settings.find(
+        (el) => el.priority === this.client.priority
+      ).text,
       phone: {
         id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
         kind: "PHONE",
@@ -95,21 +100,11 @@ export default {
   },
   methods: {
     postUpdateClient() {
-      fetch(
-        `http://45.84.227.122:8080/general/person/${this.client.id}/update/`,
-        {
-          method: "POST",
-          headers: {
-            Accept: "*/*",
-            "Content-Type": "application/json;charset=utf-8",
-          },
-          body: JSON.stringify({
-            full_name: this.dataClient.fullName,
-            birth_date: this.dataClient.age,
-            priority: this.dataClient.priority,
-          }),
-        }
-      );
+      fetchWrapper.post(`general/person/${this.client.id}/update/`, {
+        full_name: this.dataClient.fullName,
+        birth_date: this.dataClient.age,
+        priority: this.dataClient.priority,
+      });
     },
     postContactsClient() {
       let contacts = [...this.dataClient.contacts];
@@ -154,37 +149,21 @@ export default {
     },
 
     postCreateContact(contact) {
-      fetch("http://45.84.227.122:8080/general/contact/create/", {
-        method: "POST",
-        headers: {
-          Accept: "*/*",
-          "Content-Type": "application/json;charset=utf-8",
-        },
-        body: JSON.stringify({
-          kind: contact.kind,
-          username: contact.username,
-          person_id: this.client.id,
-        }),
+      fetchWrapper.post("general/contact/create/", {
+        kind: contact.kind,
+        username: contact.username,
+        person_id: this.client.id,
       });
     },
     postUpdateContact(contact) {
-      fetch(`http://45.84.227.122:8080/general/contact/${contact.id}/update/`, {
-        method: "POST",
-        headers: {
-          Accept: "*/*",
-          "Content-Type": "application/json;charset=utf-8",
-        },
-        body: JSON.stringify({
-          kind: contact.kind,
-          username: contact.username,
-          person_id: this.client.id,
-        }),
+      fetchWrapper.post(`general/contact/${contact.id}/update/`, {
+        kind: contact.kind,
+        username: contact.username,
+        person_id: this.client.id,
       });
     },
     postDeleteContact(contact) {
-      fetch(`http://45.84.227.122:8080/general/contact/${contact.id}/delete/`, {
-        method: "DELETE",
-      });
+      fetchWrapper.del(`general/contact/${contact.id}/delete/`);
     },
     addNetwork(network) {
       this.dataClient.contacts.push(network);
@@ -208,14 +187,16 @@ export default {
       this.isOpenChange = true;
     },
     fetchClientDetail(id) {
-      // eslint-disable-next-line
-      fetch(`http://45.84.227.122:8080/general/person/${id}/detail`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
+      fetchWrapper
+        .get(`general/person/${id}/detail/`)
+        .then((data) => this.saveClientDetail(data));
     },
     saveClientDetail(data) {
       this.saveIdentityDocument(
         data.identity_documents.find((el) => el.kind === "Паспорт")
       );
       this.saveAddress(data.address[0]);
+      this.saveAttachments([...data.attachments]);
     },
     saveIdentityDocument(data) {
       this.dataIdentityDocument = {
@@ -227,9 +208,12 @@ export default {
     },
     saveAddress(data) {
       this.dataAddress = {
-        join_address: data?.join_address || "-",
+        join_adress: data?.join_adress || "-",
       };
     },
+    saveAttachments(data) {
+      this.dataAttachments = [...data];
+    },
     openPopup(e) {
       e.target.focus();
       this.isOpenPopup = !this.isOpenPopup;
@@ -241,19 +225,12 @@ export default {
     handleUnFocusPopup() {
       this.isOpenPopup = false;
     },
-    saveNewDoc(section, data) {
-      this.dataDetail[section] = [...this.dataDetail[section], ...data];
+    saveNewDoc(data) {
+      this.dataAttachments = [...this.dataDetail, ...data];
     },
-    deleteDoc(e, section) {
-      if (section === "additional") {
-        this.dataDetail[section].forEach((el, index) => {
-          if (el.name === e.target.id) {
-            delete this.dataDetail[section][index].name;
-          }
-        });
-      }
-      this.dataDetail[section] = this.dataDetail[section].filter(
-        (el) => el.name !== e.target.id
+    deleteDoc(e) {
+      this.dataAttachments = this.dataAttachments.filter(
+        (el) => el.id !== e.target.id
       );
     },
   },

src/pages/clients/components/ClientsWrapper.vue

@@ -4,11 +4,10 @@
 </template>
 
 <script>
-import ClientsFormCreate from "@/pages/clients/components/ClientsFormCreate";
 import ClientsTable from "@/pages/clients/components/ClientsTable";
 export default {
   name: "ClientsWrapper",
-  components: { ClientsTable, ClientsFormCreate },
+  components: { ClientsTable },
   data() {
     return {
       isOpenForm: false,

src/pages/clients/components/FormCreateAddresses.vue

@@ -25,7 +25,7 @@
           base-input.input-info(v-model:value="addresses.apartment_number" placeholder="Номер квартиры")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Индекс
-          base-input.input-info(v-model:value="addresses.index_of_address" placeholder="000000")
+          base-input.input-info(v-model:value="addresses.zip_code" placeholder="000000")
     .px-4
       base-button(@click="saveClient" :size="40")
         span.font-semibold Создать клиента

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -3,7 +3,7 @@
     .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(:items="priorityList" placeholder="Приоритет клиента" v-model="basicInfo.priority")
+        base-select(:items="priorityList", placeholder="Приоритет клиента", v-model="basicInfo.priority")
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Дата рождения
           span.obligatory *

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -1,31 +1,25 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px' }")
     .flex.gap-x-2.items-center(v-if="!isOpenChange")
-      .dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
-      span.text-sm(:style="{ color : settings.settings.find((el) => el.priority == value).color }") {{settings.settings.find((el) => el.priority == value).text}}
-    .flex.gap-x-2.text-sm
-      old-base-select(v-if="isOpenChange" :size-input="10" :option-data="getOption" :list-data="selectData" :style-border="true" :choose-option="choosePriority" disabled)
-      base-select(v-if="isOpenChange" :items="getPriorityList" v-model="getOption")
+      .dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.text == value).color }")
+      span.text-sm(:style="{ color : settings.settings.find((el) => el.text == value).color }") {{value}}
+    .flex.gap-x-2.text-sm(class="w-[164px]")
+      base-select(v-if="isOpenChange", :items="getPriorityList", v-model="value")
 </template>
 
 <script>
 import { column } from "@/pages/clients/utils/tableConfig";
-import OldBaseSelect from "@/components/base/OldBaseSelect";
 import BaseSelect from "@/components/base/BaseSelect";
 export default {
   name: "TableCellBodyPriority",
   props: ["value", "width", "isOpenChange", "choosePriority"],
-  components: { OldBaseSelect, BaseSelect },
+  components: { BaseSelect },
   data() {
     return {
       settings: column.find((el) => el.name === "priority"),
     };
   },
   computed: {
-    getOption() {
-      return this.settings.settings.find((el) => el.priority == this.value)
-        .text;
-    },
     getPriorityList() {
       return this.settings.settings.map((el) => {
         return { label: el.text, id: el.id };