From a01fa942588b57c257c44afd817bdd035c591970 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Wed, 23 Nov 2022 17:44:47 +0300 Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D1=81=D0=BE=D0=B7=D0=B4?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=B0=D0=BA=D0=B5=D1=82=D0=B0?= =?UTF-8?q?=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?= =?UTF-8?q?=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/sass/variables.sass | 1 + src/components/base/BaseModal.vue | 6 +- .../components/ClientDetailInfoSection.vue | 60 ++++++-- .../clients/components/ClientsTableRow.vue | 2 +- .../clients/components/TableAddingNewDoc.vue | 43 ++---- .../components/TableChoiceAddingDoc.vue | 5 +- .../components/TableCreatePackageDoc.vue | 144 ++++++++++++++++++ tailwind.config.js | 1 + 8 files changed, 219 insertions(+), 43 deletions(-) create mode 100644 src/pages/clients/components/TableCreatePackageDoc.vue diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index c8d3b82..1528643 100644 --- a/src/assets/sass/variables.sass +++ b/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 diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue index c097796..698273c 100644 --- a/src/components/base/BaseModal.vue +++ b/src/components/base/BaseModal.vue @@ -1,10 +1,10 @@ @@ -15,8 +15,10 @@ export default { props: { hideOverlay: Boolean, styleOverlay: Object, + styleContent: Object, title: String, modelValue: Boolean, + showIcon: Boolean, }, emits: ["update:modelValue"], methods: { diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue index 6fe5773..006bb1f 100644 --- a/src/pages/clients/components/ClientDetailInfoSection.vue +++ b/src/pages/clients/components/ClientDetailInfoSection.vue @@ -32,14 +32,22 @@ table-choice-adding-doc( :add-new-doc="addNewDoc", :save-docs="saveDocs", - :new-docs="docData" - ) - table-adding-new-doc( - v-if="section !== 'docs' && isOpenAddingWrap", - :add-new-doc="addNewDoc", - :save-docs="saveDocs", - :new-docs="docData" + :new-docs="docData", + :change-open-add-doc="changeOpenAddDoc", + :change-open-create-doc="changeOpenCreateDoc", + ) + base-modal( + v-model="showModal", + :style-content="{padding: isOpenAddDoc ? '16px' : '28px 32px'}", + :showIcon="isOpenAddDoc" ) + 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(); + } + }, }, }; diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue index 6143fc8..c398b76 100644 --- a/src/pages/clients/components/ClientsTableRow.vue +++ b/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 diff --git a/src/pages/clients/components/TableAddingNewDoc.vue b/src/pages/clients/components/TableAddingNewDoc.vue index 995eed3..b26226b 100644 --- a/src/pages/clients/components/TableAddingNewDoc.vue +++ b/src/pages/clients/components/TableAddingNewDoc.vue @@ -1,18 +1,16 @@ @@ -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) diff --git a/src/pages/clients/components/TableChoiceAddingDoc.vue b/src/pages/clients/components/TableChoiceAddingDoc.vue index 2a6ea8a..c6370cf 100644 --- a/src/pages/clients/components/TableChoiceAddingDoc.vue +++ b/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") Добавить документы + + diff --git a/tailwind.config.js b/tailwind.config.js index 6399f95..76b43d4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,6 +36,7 @@ module.exports = { "6px": "6px", "9px": "9px", "10px": "10px", + "11px": "11px", "13px": "13px", "14px": "14px", "15px": "15px",