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

src/assets/sass/variables.sass

@@ -27,3 +27,4 @@
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
+  --border-light-grey-color-1: rgba(211, 212, 220, 0.5)

src/components/base/BaseInput.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
+    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
-    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
+    .slot(v-if="withIcon" :class="iconPosition")
+      slot.cursor-pointer
 </template>
 
 <script>
@@ -11,30 +12,25 @@ export default {
     type: {
       default: "text",
     },
+    maxLength: Number,
     value: String,
     withIcon: {
       default: false,
     },
-    iconPosition: String,
+    iconPosition: {
+      default: "right",
+    },
     placeholder: {
       default: "Поиск",
     },
     widthInput: Number,
   },
-  computed: {
-    position() {
-      if (this.iconPosition === "right") {
-        return "right";
-      }
-      return "left";
-    },
-  },
 };
 </script>
 
 <style lang="sass" scoped>
 .left
-  order: 0
+  order: -1
 .right
   order: 1
 .input-wrapper

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -5,18 +5,22 @@
       .flex.items-center.gap-x-8(v-if="isOpenChange")
         base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
         .edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
-        base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true")
+        .flex.relative
+          base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true" @click="openAddingWrap")
+          table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
+          table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
     .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
       .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 && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="item.value" :width="settings[section].width")
           .copy.icon-copy.cursor-pointer(v-if="item.copy")
-        .flex.gap-x-4(v-if="item.value && !isChange")
+        .flex(v-if="item.value && !isChange")
           span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
-          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+          .copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
-        .flex.gap-x-4(v-if="item.name")
+        .flex.items-center(v-if="item.name")
-          .icon-files.cursor-pointer(:style="{color:settings.docsColor[item.type]}")
+          .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}}
 </template>
 
@@ -24,16 +28,34 @@
 import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
 import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
 import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
+import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
+import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
 import { detail } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientDetailInfoSection",
-  components: { BaseButtonPlus, BaseButtonOk, ClientDetailInput },
+  components: {
+    TableAddingNewAdditional,
+    BaseButtonPlus,
+    BaseButtonOk,
+    ClientDetailInput,
+    TableAddingNewDoc,
+  },
   props: {
+    saveNewDoc: Function,
     sectionInfo: Object,
     section: String,
+    deleteDoc: Function,
   },
   data() {
     return {
+      additionalData: {
+        header: "",
+        value: "",
+        name: "",
+        type: "",
+      },
+      docData: [],
+      isOpenAddingWrap: false,
       isOpenChange: false,
       isChange: false,
       settings: detail,
@@ -50,6 +72,32 @@ export default {
       this.isOpenChange = false;
       this.isChange = false;
     },
+    openAddingWrap() {
+      this.isOpenAddingWrap = true;
+    },
+    addNewDoc(e) {
+      this.docData = [...this.docData, ...e.target.files];
+    },
+    addDocAdditional(e) {
+      this.additionalData.name = e.target.files[0].name;
+      this.additionalData.type = e.target.files[0].type;
+    },
+    saveDocs() {
+      if (this.section === "additional") {
+        this.saveNewDoc(this.section, [this.additionalData]);
+      } else {
+        this.saveNewDoc(this.section, this.docData);
+      }
+      this.isOpenAddingWrap = false;
+      this.isOpenChange = false;
+      this.docData = [];
+      this.additionalData = {
+        header: "",
+        value: "",
+        name: "",
+        type: "",
+      };
+    },
   },
 };
 </script>
@@ -87,4 +135,8 @@ export default {
   color: var(--btn-blue-color)
   &:hover
     opacity: 0.6
+.cancel
+  color: var(--font-grey-color)
+  &:hover
+    opacity: 0.6
 </style>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -7,8 +7,8 @@
     .flex.flex-col.gap-y-2
       client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
       client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
-    client-detail-info-section(:section-info="dataDetail.docs" section="docs")
+    client-detail-info-section(:section-info="dataDetail.docs" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
-    client-detail-info-section(:section-info="dataDetail.additional" section="additional")
+    client-detail-info-section(:section-info="dataDetail.additional" section="additional" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -18,6 +18,8 @@ export default {
   components: { ClientDetailInfoSection },
   props: {
     dataDetail: Object,
+    saveNewDoc: Function,
+    deleteDoc: Function,
   },
 };
 </script>

src/pages/clients/components/ClientDetailInput.vue

@@ -13,7 +13,7 @@ export default {
   },
   computed: {
     heightInput() {
-      return ((this.width / 100) * 70) / 8;
+      return ((this.width / 100) * 70) / 11;
     },
   },
 };

src/pages/clients/components/ClientsTableHat.vue

@@ -3,11 +3,12 @@
     .flex.gap-2.w-fit.h-fit
       .input
         base-input(:with-icon="true")
+          .icon-search
       button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
         .icon-filter.text-xl.leading-4
     clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-fit.gap-x-2
-      bass-export-button(:only-icon="true")
+      base-export-button(:only-icon="true")
       base-create-button(@click="openFormCreate" :with-icon="true")
 
 </template>
@@ -15,13 +16,13 @@
 <script>
 import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
 import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
-import BassExportButton from "@/components/base/buttons/BassExportButton";
+import BaseExportButton from "@/components/base/buttons/BaseExportButton";
 import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "ClientsTableHat",
   components: {
     BaseInput,
-    BassExportButton,
+    BaseExportButton,
     BaseCreateButton,
     ClientsTableHeaderActions,
   },

src/pages/clients/components/ClientsTableRow.vue

@@ -14,7 +14,7 @@
       .dots.flex.justify-center.items-center
         .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
           clients-action-popup(v-if="isOpenPopup")
-    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail")
+    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -85,6 +85,21 @@ export default {
     handleUnFocusPopup() {
       this.isOpenPopup = false;
     },
+    saveNewDoc(section, data) {
+      this.dataDetail[section] = [...this.dataDetail[section], ...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
+      );
+    },
   },
 };
 </script>

src/pages/clients/components/TableAddingNewAdditional.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+  .flex.absolute.flex-col.items-end.right-3.top-5
+    .corner
+    .wrap.flex.flex-col.p-4.gap-y-4
+      .flex.flex-col.gap-y-1
+        base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
+          span.counter {{`${newAdditionalData.header.length}/140`}}
+        .description.flex.px-4.py-3
+          textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
+      .place.flex.flex-col.justify-center.items-center.py-3
+        .upload.text-center.text-sm.flex.w-fit
+          input.hidden(@change="(e) => addNewAdditional(e)" type="file" id="file-upload")
+          span Загрузите элемент
+            label.label.cursor-pointer(for="file-upload")  с компьютера
+            span  или перетащите их сюда
+      base-create-button(text="Добавить" @click="saveAdditional")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "TableAddingNewAdditional",
+  components: { BaseInput, BaseCreateButton },
+  props: {
+    addNewAdditional: Function,
+    saveAdditional: Function,
+    newAdditionalData: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrap
+  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
+.description
+  min-height: 77px
+  border-radius: 4px
+  border: 2px solid var(--border-light-grey-color)
+.label
+  color: var(--btn-blue-color)
+.counter
+  color: var(--font-grey-color)
+</style>

src/pages/clients/components/TableAddingNewDoc.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  .flex.absolute.flex-col.items-end.right-3.top-5
+    .corner
+    .wrap.flex.flex-col.p-4.gap-y-4
+      .flex.flex-col.gap-y-2
+        .place.flex.flex-col.justify-center.items-center.py-3
+          .upload.text-center.text-sm.flex.w-fit
+            input.hidden(@change="(e) => addNewDoc(e)" type="file" id="file-upload" multiple)
+            span Загрузите элемент
+              label.label.cursor-pointer(for="file-upload")  с компьютера
+              span  или перетащите их сюда
+        .flex.flex-col
+          span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
+      base-create-button(text="Добавить" @click="saveDocs")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+export default {
+  name: "TableAddingNewDoc",
+  components: { BaseCreateButton },
+  props: {
+    addNewDoc: Function,
+    saveDocs: Function,
+    newDocs: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrap
+  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>