[WIP] Добавил окно создания пакета документов и добавления документов

src/assets/sass/variables.sass

@@ -44,3 +44,4 @@
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
   --bg-white-color-0: rgba(255, 255, 255, 0.3)
   --border-red-color: #ff6565
+  --btn-grey-color: #e8e8f3

src/components/base/BaseModal.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
   teleport(:to="appContainer", v-if="value")
     .base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay")
-      .base-content(v-click-outside="clickOutside")
+      .base-content(v-click-outside="clickOutside", :style="styleContent")
         .base-header
           .header-title.text {{ title }}
-          .icon-cancel.text-sm(@click="value = false")
+          .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
         slot
 
 </template>
@@ -15,8 +15,10 @@ export default {
   props: {
     hideOverlay: Boolean,
     styleOverlay: Object,
+    styleContent: Object,
     title: String,
     modelValue: Boolean,
+    showIcon: Boolean,
   },
   emits: ["update:modelValue"],
   methods: {

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -32,14 +32,22 @@
             table-choice-adding-doc(
               :add-new-doc="addNewDoc",
               :save-docs="saveDocs",
-              :new-docs="docData"
+              :new-docs="docData",
+              :change-open-add-doc="changeOpenAddDoc",
+              :change-open-create-doc="changeOpenCreateDoc",
             )
-          table-adding-new-doc(
+          base-modal(
-            v-if="section !== 'docs' && isOpenAddingWrap",
+            v-model="showModal",
-            :add-new-doc="addNewDoc",
+            :style-content="{padding: isOpenAddDoc ? '16px' : '28px 32px'}",
-            :save-docs="saveDocs",
+            :showIcon="isOpenAddDoc"
-            :new-docs="docData"
           )
+            table-adding-new-doc(
+              v-if="isOpenAddDoc",
+              :add-new-doc="addNewDoc",
+              :new-docs="docData",
+              :close-modal="changeShowModal",
+            )
+            table-create-package-doc(v-if="isOpenCreateDoc")
           table-adding-new-additional(
             v-if="section === 'additional' && isOpenAddingWrap"
             :new-additional-data="additionalData",
@@ -100,7 +108,7 @@
             .flex.gap-x-2.items-center
               img(:src="iconDictionary[item?.document?.substr(item.document.lastIndexOf('.') + 1)]")
               span.text-sm {{item.title}}
-            span.text-sm(v-if="item.document") {{`. ${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
+            span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
     .section-add-doc.flex.justify-center.items-center.cursor-pointer(
       v-else,
       @click="openAddDoc"
@@ -113,10 +121,12 @@ import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
 import BaseButton from "@/components/base/BaseButton";
 import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
 import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
+import TableCreatePackageDoc from "@/pages/clients/components/TableCreatePackageDoc";
 import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
 import TableChoiceAddingDoc from "@/pages/clients/components/TableChoiceAddingDoc";
 import BaseInput from "@/components/base/BaseInput";
 import BasePopup from "@/components/base/BasePopup";
+import BaseModal from "@/components/base/BaseModal";
 import { detail } from "@/pages/clients/utils/tableConfig";
 import pdfIcon from "@/assets/icons/pdf.svg";
 import wordIcon from "@/assets/icons/word.svg";
@@ -124,13 +134,15 @@ import exelIcon from "@/assets/icons/exel.svg";
 export default {
   name: "ClientDetailInfoSection",
   components: {
-    TableAddingNewAdditional,
     BaseButton,
     BaseInput,
     BasePopup,
+    BaseModal,
     ClientDetailInput,
-    TableAddingNewDoc,
     ClientDetailSectionAddress,
+    TableAddingNewAdditional,
+    TableCreatePackageDoc,
+    TableAddingNewDoc,
     TableChoiceAddingDoc,
   },
   props: {
@@ -172,6 +184,9 @@ export default {
       isAddress: true,
       isAttachments: true,
       iconDictionary: { doc: wordIcon, pdf: pdfIcon, xls: exelIcon },
+      isOpenAddDoc: false,
+      isOpenCreateDoc: false,
+      showModal: false,
     };
   },
   computed: {
@@ -192,6 +207,24 @@ export default {
         this.isAttachments = true;
       }
     },
+    changeOpenAddDoc() {
+      this.showModal = true;
+      this.isOpenAddDoc = true;
+      this.isOpenAddingWrap = false;
+    },
+    changeOpenCreateDoc() {
+      this.showModal = true;
+      this.isOpenCreateDoc = true;
+      this.isOpenAddingWrap = false;
+    },
+    clearDocs() {
+      this.isOpenAddDoc = false;
+      this.isOpenCreateDoc = false;
+    },
+    changeShowModal() {
+      this.showModal = false;
+      this.saveDocs();
+    },
     changeDoc() {
       this.isChange = false;
       if (this.section === "pass") {
@@ -233,7 +266,7 @@ export default {
       if (this.section === "additional") {
         this.saveNewDoc(this.section, [this.additionalData]);
       } else {
-        this.saveNewDoc(this.section, this.docData);
+        this.saveNewDoc(this.docData);
       }
       this.isOpenAddingWrap = false;
       this.docData = [];
@@ -264,6 +297,11 @@ export default {
         this.isAttachments = newValue;
       },
     },
+    showModal: function () {
+      if (this.showModal === false) {
+        this.clearDocs();
+      }
+    },
   },
 };
 </script>

src/pages/clients/components/ClientsTableRow.vue

@@ -393,7 +393,7 @@ export default {
       this.isOpenPopup = false;
     },
     saveNewDoc(data) {
-      this.dataAttachments = [...this.dataDetail, ...data];
+      this.dataAttachments = [...data];
     },
     deleteDoc(attachmentId) {
       fetchWrapper

src/pages/clients/components/TableAddingNewDoc.vue

@@ -1,18 +1,16 @@
 <template lang="pug">
-  .flex.absolute.flex-col.items-end.right-3.top-5
+  .wrap.flex.flex-col.gap-y-4
-    .corner
+    .flex.flex-col.gap-y-2
-    .wrap.flex.flex-col.p-4.gap-y-4
+      .place.flex.flex-col.justify-center.items-center.py-8
-      .flex.flex-col.gap-y-2
+        .w-60.text-center.text-sm.flex.w-fit
-        .place.flex.flex-col.justify-center.items-center.py-3
+          input.hidden(@change="(e) => addNewDoc(e)", type="file", id="file-upload", multiple)
-          .upload.text-center.text-sm.flex.w-fit
+          span Загрузите документ
-            input.hidden(@change="(e) => addNewDoc(e)" type="file" id="file-upload" multiple)
+            label.label.cursor-pointer(for="file-upload")  с компьютера
-            span Загрузите элемент
+            span  или перетащите его в это поле
-              label.label.cursor-pointer(for="file-upload")  с компьютера
+      .flex.flex-col
-              span  или перетащите их сюда
+        span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
-        .flex.flex-col
+    base-button(@click="closeModal", :size="40", :style="{width: '124px'}")
-          span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
+      span.font-semibold Добавить
-      base-button(@click="" :size="40")
-        span.font-semibold Добавить
 </template>
 
 <script>
@@ -22,8 +20,8 @@ export default {
   components: { BaseButton },
   props: {
     addNewDoc: Function,
-    saveDocs: Function,
     newDocs: Array,
+    closeModal: Function,
   },
 };
 </script>
@@ -32,27 +30,18 @@ export default {
 .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>

src/pages/clients/components/TableChoiceAddingDoc.vue

@@ -2,10 +2,10 @@
   .flex.flex-col.gap-y-3
     .button.keep-redaction.flex.items-center.gap-x-2
       img(:src="docIcon")
-      span.text-smm Создать пакет документов
+      .text-smm(@click="changeOpenAddDoc") Создать пакет документов
     .button.keep-redaction.flex.items-center.gap-x-3
       img(:src="manyDocIcon")
-      span.text-smm Добавить документы
+      .text-smm(@click="changeOpenCreateDoc") Добавить документы
 </template>
 
 <script>
@@ -14,6 +14,7 @@ import manyDocIcon from "@/assets/icons/manyDoc.svg";
 
 export default {
   name: "TableChoiceAddingDoc",
+  props: { changeOpenAddDoc: Function, changeOpenCreateDoc: Function },
   data() {
     return {
       docIcon,

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -0,0 +1,144 @@
+<template lang="pug">
+  .wrap.flex.flex-col.gap-y-6
+    .flex.flex.flex-col.gap-y-9
+      span.font-bold.text-xl Создание пакета документов
+      .flex.justify-center.items-center.gap-x-2
+        base-button(:size="32", :rounded="true")
+          span(v-if="!isServices") 1
+          .icon-ok.text-xs(v-else)
+        span(:style="{color: 'var(--btn-blue-color)'}") Основное
+        .line.flex.mx-2
+        base-button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
+    .base.flex.flex-col.gap-y-6(v-if="!isServices")
+      .flex.flex-col.gap-y-6
+        span.font-bold Основное
+        .flex.flex-col(class="gap-y-1.5")
+          .counter.font-semibold.text-smm Название пакета
+          base-input(v-model:value="packageDocs.packageName", placeholder="Введите название для пакета документов")
+            span.counter 
+        .flex.gap-x-4
+          .flex.flex-col.w-full(class="gap-y-1.5")
+            .counter.font-semibold.text-smm Тип документа
+            base-select.h-10(placeholder="Выберите тип")
+          .flex.flex-col(class="gap-y-1.5")
+            .counter.font-semibold.text-smm Дата подписания
+            .input-date.flex.h-10.justify-center
+              base-input-date(:width-input="277")
+      .flex.flex-col.gap-y-6
+        span.font-bold Дополнительное
+        .flex.flex-col.mb-124px(class="gap-y-1.5")
+          .counter.font-semibold.text-smm Риски
+          base-select.h-10(placeholder="Выберите риски")
+    .services.flex.flex-col.gap-y-6(v-else)
+      .flex.flex-col.gap-y-6
+        .flex.flex-col.gap-y-2
+          .font-bold Услуги
+          .counter.text-smm Выберите подходищие из списка
+        .services-wrapper.flex.flex-col.pt-4.px-4
+          .flex.gap-x-2
+            base-input(:with-icon="true", icon-position="left", :width-input="310", placeholder="Поиск")
+              .counter.icon-search
+            base-select.h-10(placeholder="Вид услуги")
+          .flex.items-center.px-11px.py-9px(:style="{borderBottom: '1px solid var(--btn-grey-color)'}")
+            .flex.items-center.gap-x-3
+              input.counter.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
+              .counter.flex.p-2(:style="{width: '358px'}") Название услуги
+            .counter Вид услуги
+          .list-services.flex.flex-col.px-11px.py-9px
+            .flex.items-center(v-for="service in services", :key="service.id")
+              .flex.items-center.gap-x-3
+                input.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
+                .flex.p-2(:style="{width: '358px'}") {{service.name}}
+              .counter {{service.type}}
+  base-button.custom-button(v-if="!isServices", :disabled="disabledButton", :size="40", @click="changeServices")
+    span.font-semibold Далее
+  base-button.custom-button(:size="40", v-else)
+    span.font-semibold Создать пакет документов
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseButton from "@/components/base/BaseButton";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseSelect from "@/components/base/BaseSelect";
+export default {
+  name: "TableCreatePackageDoc",
+  components: { BaseInput, BaseButton, BaseInputDate, BaseSelect },
+  data() {
+    return {
+      isServices: false,
+      packageDocs: {
+        packageName: "",
+      },
+      services: [
+        { id: 1, name: "Создание сайта", type: "Разработка" },
+        {
+          id: 2,
+          name: "Цифровая реконструкция приложения",
+          type: "Поддержка",
+        },
+        { id: 3, name: "Маркетинговое ведение", type: "Маркетинг" },
+        {
+          id: 4,
+          name: "Создание дополнительного контента",
+          type: "Разработка",
+        },
+        { id: 5, name: "Продвижение в соцсетях", type: "ССМ" },
+        { id: 6, name: "Продвижение в соцсетях", type: "ССМ" },
+        { id: 7, name: "Продвижение в соцсетях", type: "ССМ" },
+        { id: 8, name: "Продвижение в соцсетях", type: "ССМ" },
+        { id: 9, name: "Продвижение в соцсетях", type: "ССМ" },
+        { id: 10, name: "Продвижение в соцсетях", type: "ССМ" },
+      ],
+    };
+  },
+  computed: {
+    disabledButton() {
+      return this.packageDocs.packageName ? false : true;
+    },
+  },
+  methods: {
+    changeServices() {
+      this.isServices = !this.isServices;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrap
+  width: 570px
+  height: fit-content
+  min-height: 700px
+
+.services-wrapper
+  border: 1px solid var(--btn-grey-color)
+  border-radius: 8px
+
+.list-services
+  overflow-y: auto
+  max-height: 280px
+
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.active-button
+  background: var(--btn-grey-color)
+  color: var(--font-dark-blue-color)
+  border-color: var(--btn-grey-color)
+
+.line
+  width: 78px
+  border: 1.5px solid var(--btn-grey-color)
+
+.place
+  width: 100%
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+  color: var(--font-grey-color)
+
+.counter
+  color: var(--font-grey-color)
+</style>

tailwind.config.js

@@ -36,6 +36,7 @@ module.exports = {
         "6px": "6px",
         "9px": "9px",
         "10px": "10px",
+        "11px": "11px",
         "13px": "13px",
         "14px": "14px",
         "15px": "15px",