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

2022-11-03 20:03:21 +03:00
parent 0786baee42
commit 2a65bbdb2a
17 changed files with 115 additions and 116 deletions
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,12 +1,20 @@
 <template lang="pug">
-  .header-wrapper.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
+  .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
+    base-client-form-create.right-6(v-if="isOpenCreate", @blure="isOpenCreate=false", :close-form="closeFormCreate")
    .flex.items-center.box-border.cursor-pointer.mr-auto
      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
      header-inputs
    //- .charge-person-container
    //-   header-active-client-panel(:info="chargePersonInfo")
    .flex.ml-auto
-      base-button.mr-9(left-icon="icon-plus", :icon-left-size="10", :size="40", right-icon="icon-person", :icon-right-size="18")
+      base-button.mr-9(
+        left-icon="icon-plus",
+        :icon-left-size="10",
+        :size="40",
+        right-icon="icon-person",
+        :icon-right-size="18",
+        @click="isOpenCreate=true"
+        )
      button.header-buttons.flex.justify-center.items-center.mr-8.p-0
        .icon-bell.text-xxl
      .flex.justify-centflexer.items-center
@@ -22,9 +30,10 @@ import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 export default {
  name: "TheHeader",
-  components: { HeaderInputs, BaseAvatar, BaseButton },
+  components: { HeaderInputs, BaseAvatar, BaseButton, BaseClientFormCreate },
  data() {
    return {
      avatarSrc: img,
@@ -32,8 +41,14 @@ export default {
        avatarSrc: chargePersonAvatar,
        name: "Гордеев Николай Степанович",
      },
+      isOpenCreate: false,
    };
  },
+  methods: {
+    closeFormCreate() {
+      this.isOpenCreate = false;
+    },
+  },
 };
 </script>

--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -0,0 +1,296 @@
+<template lang="pug">
+  .wrapper-create.flex.flex-col.absolute.top-28.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: "BaseClientFormClient",
+  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: {
+            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: "",
+          zip_code: "",
+        },
+        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) {
+      Object.keys(
+        this.filterDataEmptyProperty(this.infoClient.identity_document.pass)
+      ).length > 0 &&
+        fetchWrapper.post("general/identity_document/create/", {
+          ...this.filterDataEmptyProperty(
+            this.infoClient.identity_document.pass
+          ),
+          person_id: id,
+          kind: "Паспорт",
+        });
+    },
+    createAddress(id) {
+      Object.keys(this.filterDataEmptyProperty(this.infoClient.addresses))
+        .length > 0 &&
+        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((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>
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
  .base-select(@click="open = !open", :class="{'open': open }")
-    .placeholder.text-base {{ itemsMap[value] || placeholder }}
+    .placeholder.text-base {{ value || placeholder }}
    span.icon-down-arrow.open-icon(:class="{'open': open }")
    base-menu(v-if="open")
      .items-container(@click="open = false", @mouseleave="leaveSelect")
-        .item(v-for="item in items", :key="item.id" @click="clickItem(item.id)") {{ item.label }}
+        .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
 </template>

 <script>
@@ -35,15 +35,6 @@ export default {
        this.$emit("update:modelValue", value);
      },
    },
-    itemsMap() {
-      return this.items.reduce(
-        (acc, item) => ({
-          ...acc,
-          [item.id]: item.label,
-        }),
-        {}
-      );
-    },
  },
  methods: {
    clickItem(id) {